devbox
寸_铁
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

超详细的前后端实战项目（Spring系列加上vue3）前端篇（一）（一步步实现+源码）_vue+spring

作者：寸_铁 | 2024-07-17 14:17:50

赞

踩

vue+spring

最近想着一步步搭建一个前后端项目，将每一步详细的做出来。（如果有不足或者建议，也希望大佬们指出哦）

前端初始化

1.根据vue脚手架创建vue项目

这里可以用很多方法创建vue项目，大家看着创建吧，只要能创建出来就可以了（用的vue3）

这里我加了router和vuex，emm，就不用ts了（感觉还是js用的更好一点）

OK，项目创建完毕，即可开始写前端代码了。

2.安装依赖：

        1.挑一个自己喜欢的组件库引用一手，这里我选用arco design（也没必要只用Element-ui，可以试试其他的）

npm install --save-dev @arco-design/web-vue

OKOK，开始下载

安装好了之后，我们还要安装一些必要的依赖，比如axios，sass这些，emmmm，目前就安装这几个吧。

npm install axios

npm install sass -D

然后根据组件库官网的操作进行引入

  1. import { createApp } from 'vue'
  2. import ArcoVue from '@arco-design/web-vue';
  3. import App from './App.vue';
  4. import '@arco-design/web-vue/dist/arco.css';
  5.  
  6. const app = createApp(App);
  7. app.use(ArcoVue);
  8. app.mount('#app');

改造一下main.js中的代码

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import store from './store'
  5. import ArcoVue from '@arco-design/web-vue';
  6. import '@arco-design/web-vue/dist/arco.css';
  7.  
  8.  
  9. createApp(App).use(store).use(ArcoVue).use(router).mount('#app')

注意注意：引入组件库之后，可以找个组件看看能不能使用该组件库，以防万一；

呐，这里我们就去官网看看

很好，就是你了，表单布局，我们点击其下方代码，将其放入App.vue试试能不能用

好嘞，随机找一串串代码放到App.vue中试试（不要试着从图片中照抄我的哈，自己去官网找一个试试Arco Design Vue）咱，主打一个快速。

嚯，出现了！那么组件库是能用哒！

好，第二步也就完成了。

这里我建议每做几步就开启调试一下。

3.调整目录，初始化项目：

        1.清空components（把HelloWorld.vue删了）

        2.新建目录api，utils，views

        3.把App.vue中用不到的代码都给删了，留一个  <router-view />就好了，然后，把router的index.js的代码全给注释了（emmm，直接删了感觉太麻烦，注释了后面写起来好做参照）

目前的目录结构就是这样了；

（App.vue就变成这样啦）

4.定义请求工具：

大家不要一开始写前端就直奔优美的”可跳转“页面，这边先整体规定一个向后端发请求的工具request.js

        在utils目录下创建request.js文件：

  1. import axios from 'axios';//导入axios
  2. //定义前缀
  3. const URL = 'http://localhost:8080';
  4. const instance = axios.create({URL})
  5.  
  6.  
  7. //来一个响应拦截器
  8. instance.interceptors.response.use(
  9.     result=>{
  10.         if(result.data.code == 0){
  11.             return result.data;
  12.         }
  13.         //如果不为0则表示失败
  14.         alert(result.data.message||'出现错误')
  15.         return Promise.reject(err);//异步的状态转化成失败的状态
  16.     },
  17.     err=>{
  18.         alert('服务异常');
  19.         return Promise.reject(err);//异步的状态转化成失败的状态
  20.     }
  21. )
  22. export default instance;

解释一下这段代码：引入发请求的axios，然后定义一个开发时期的请求必有前缀（这里直接写http://localhost:8080其实是有问题的，对于后面出现的跨域问题....emmmm，其实前端后端都有方式解决，看情况吧，后面再讲），做一个相应拦截器，对结果进行判断，然后导出

（这里需要提示一下统一相应有哪些（不然可能会不太好理解））

后端那一块统一相应数据：code：0表示成功，1表示失败；msg： 提示信息；data：数据

前端代码编写开始！！

OK啊各位，初始化完成我们便要开始编写代码了。

首先，我们先明确一波步骤：

        确定布局  --> 填充各部分代码 -->  后端插入

(如果涉及与后端的交互，遵循以下步骤

        1.搭建页面（html，css）-> 2.绑定数据与事件 -> 3.调用后端接口)

好嘞，熟悉了吗各位，不熟练也没事，我们先找一个练练手。

先从组件库这里找到布局：

这布局，看似普通，实则帅的雅痞，就它了。引入代码

回到目录component下，创建一个新的文件GlobalPage.vue

(众所周知的小技巧：<vue>可快速构建vue文件)

  1. <template>
  2.    <a-layout style="height: 400px;">
  3.       <a-layout-header>Header</a-layout-header>
  4.       <a-layout>
  5.         <a-layout-sider theme="dark">Sider</a-layout-sider>
  6.         <a-layout-content>Content</a-layout-content>
  7.       </a-layout>
  8.       <a-layout-footer>Footer</a-layout-footer>
  9.     </a-layout>
  10. </template>
  11.  
  12. <script>
  13. export default {
  14.  
  15. }
  16. </script>
  17.  
  18. <style scoped>
  19. .layout-demo :deep(.arco-layout-header),
  20. .layout-demo :deep(.arco-layout-footer),
  21. .layout-demo :deep(.arco-layout-sider-children),
  22. .layout-demo :deep(.arco-layout-content) {
  23.   display: flex;
  24.   flex-direction: column;
  25.   justify-content: center;
  26.   color: var(--color-white);
  27.   font-size: 16px;
  28.   font-stretch: condensed;
  29.   text-align: center;
  30. }
  31.  
  32.  
  33. .layout-demo :deep(.arco-layout-header),
  34. .layout-demo :deep(.arco-layout-footer) {
  35.   height: 64px;
  36.   background-color: var(--color-primary-light-4);
  37. }
  38.  
  39. .layout-demo :deep(.arco-layout-sider) {
  40.   width: 206px;
  41.   background-color: var(--color-primary-light-3);
  42. }
  43.  
  44. .layout-demo :deep(.arco-layout-content) {
  45.   background-color: rgb(var(--arcoblue-6));
  46. }
  47. </style>

然后我们改一下index.js文件（将GlobalPage引入）（要是看着那些注解感觉不美观的话就直接删了）

  1. import { createRouter, createWebHashHistory } from 'vue-router'
  2. import MainPage from '../components/GlobalPage.vue'
  3.  
  4. const routes = [
  5.   // {
  6.   //   path: '/',
  7.   //   name: 'home',
  8.   //   component: HomeView
  9.   // },
  10.   // {
  11.   //   path: '/about',
  12.   //   name: 'about',
  13.   //   // route level code-splitting
  14.   //   // this generates a separate chunk (about.[hash].js) for this route
  15.   //   // which is lazy-loaded when the route is visited.
  16.   //   component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  17.   // }
  18.   {
  19.     path: '/',
  20.     name: 'mainPage',
  21.     component: MainPage
  22.   }
  23. ]
  24.  
  25. const router = createRouter({
  26.   history: createWebHashHistory(),
  27.   routes
  28. })
  29.  
  30. export default router

运行一手看看（记得每次有一些大改就要看看情况，改多再看就会很麻烦，bug也不好排查）

运行出来就是这么个界面

搭建Header和Footer代码

先把头部和尾部的代码解决了。

先来尾部吧，我觉得这个比较简单（哈）

一般来说，网站的底部都是一些网站运营的介绍什么的（大多都是哈，也不一定全是）

这里我就以大家都爱的4399为例（大多都是哈，也不一定全是，哈哈哈）

emmm，这里我们可以把Footer这一块封装为一个组件，因为虽然定义的GlobalPage属于是全局的页面，但万一之后会跳转到其他的页面呢，这里我觉得封装成组件更好一些（看起来也更轻巧一些）

在views目录下创建GlobalFooter.vue

  1. <template>
  2.   <div id="header">由Heath ceTide 创作的网站 XXX 有限公司</div>
  3. </template>
  4.  
  5. <script>
  6. export default {};
  7. </script>
  8.  
  9. <style>
  10. #header {
  11.   font-family: "Satisfy", cursive;
  12.   font-size: 16px;
  13.   color: rgb(102, 149, 164);
  14.   margin-right: 20px;
  15. }
  16. </style>

差不多了，将其替换掉GlobalPage的header

  1. <template>
  2.    <a-layout style="height: 400px;">
  3.       <a-layout-header>Header</a-layout-header>
  4.       <a-layout>
  5.         <a-layout-sider theme="dark">Sider</a-layout-sider>
  6.         <a-layout-content>Content</a-layout-content>
  7.       </a-layout>
  8.       <a-layout-footer>
  9.         <global-footer></global-footer>
  10.       </a-layout-footer>
  11.     </a-layout>
  12. </template>
  13. <script>
  14. import GlobalFooter from '../views/GlobalFooter.vue'
  15. export default {
  16.   components: { GlobalFooter },
  17.  
  18. }
  19. </script>

展示出了样式就行了，（之后可以美化以下），好，然后我们开始整Header，

这一块导航栏，我觉得吧，还是用组件比较合适（倒不是不会整，毕竟也麻烦，不用自己手敲的绝不自己手敲代码）

就选这个深色模式导航啦，新建GlobalHeader.vue文件把代码用CV大法放进去

  1. <template>
  2.   <div class="menu-demo">
  3.     <a-menu mode="horizontal" theme="dark" :default-selected-keys="['1']">
  4.       <a-menu-item key="0" :style="{ padding: 0, marginRight: '38px' }" disabled>
  5.         <div
  6.           :style="{
  7.             width: '80px',
  8.             height: '30px',
  9.             background: 'var(--color-fill-3)',
  10.             cursor: 'text',
  11.           }"
  12.         />
  13.       </a-menu-item>
  14.       <a-menu-item key="1">Home</a-menu-item>
  15.       <a-menu-item key="2">Solution</a-menu-item>
  16.       <a-menu-item key="3">Cloud Service</a-menu-item>
  17.       <a-menu-item key="4">Cooperation</a-menu-item>
  18.     </a-menu>
  19.   </div>
  20. </template>
  21. <style scoped>
  22. .menu-demo {
  23.   box-sizing: border-box;
  24.   width: 100%;
  25.   background-color: var(--color-neutral-2);
  26. }
  27. </style>
  1. <template>
  2.   <a-layout style="height: 400px">
  3.     <a-layout-header><global-header></global-header></a-layout-header>
  4.     <a-layout>
  5.       <a-layout-sider theme="dark">Sider</a-layout-sider>
  6.       <a-layout-content>Content</a-layout-content>
  7.     </a-layout>
  8.     <a-layout-footer>
  9.       <global-footer class="footer"></global-footer>
  10.     </a-layout-footer>
  11.   </a-layout>
  12. </template>
  13.  
  14. <script>
  15. import GlobalFooter from "../views/GlobalFooter.vue";
  16. import GlobalHeader from "../views/GlobalHeader.vue";
  17. export default {
  18.   components: { GlobalFooter, GlobalHeader },
  19. };
  20. </script>
  21.  
  22. <style scoped>
  23. .layout-demo :deep(.arco-layout-header),
  24. .layout-demo :deep(.arco-layout-footer),
  25. .layout-demo :deep(.arco-layout-sider-children),
  26. .layout-demo :deep(.arco-layout-content) {
  27.   display: flex;
  28.   flex-direction: column;
  29.   justify-content: center;
  30.   color: var(--color-white);
  31.   font-size: 16px;
  32.   font-stretch: condensed;
  33.   text-align: center;
  34. }
  35.  
  36. .layout-demo :deep(.arco-layout-header),
  37. .layout-demo :deep(.arco-layout-footer) {
  38.   height: 64px;
  39.   background-color: var(--color-primary-light-4);
  40. }
  41.  
  42. .layout-demo :deep(.arco-layout-sider) {
  43.   width: 206px;
  44.   background-color: var(--color-primary-light-3);
  45. }
  46.  
  47. .layout-demo :deep(.arco-layout-content) {
  48.   background-color: rgb(var(--arcoblue-6));
  49. }
  50.  
  51. .footer {
  52.   background-color: aliceblue;
  53.   padding: 16px;
  54.   position: sticky;
  55.   bottom: 0;
  56.   left: 0;
  57.   right: 0;
  58.   text-align: center;
  59.   letter-spacing: 3px;
  60. }
  61. </style>

其实这个空的区域可以加一个logo或者其他什么的

呐，就像这样

OK,目前的页面就是这个样子了；

搭建搜索页面

好的，下面整一个全局的搜索框页面吧

创建一个SearchPage.vue 文件

从组件库中找到一个合适的搜索框

  1. <!--SearchPage.vue代码-->
  2. <template>
  3.   <a-space direction="vertical" size="large">
  4.     <a-input-search
  5.       :style="{ width: '320px' }"
  6.       placeholder="Please enter something"
  7.       button-text="Search"
  8.       search-button
  9.     />
  10.   </a-space>
  11. </template>
  12.  
  13. <script>
  14. export default {};
  15. </script>
  16.  
  17. <style>
  18. </style>

将新组件放到GlobalPage中（暂时的，之后还是要处理路由的）

  1. <template>
  2.   <a-layout style="height: 400px">
  3.     <a-layout-header><global-header></global-header></a-layout-header>
  4.     <a-layout>
  5.       <a-layout-sider theme="dark">Sider</a-layout-sider>
  6.       <a-layout-content><search-page></search-page></a-layout-content>
  7.     </a-layout>
  8.     <a-layout-footer>
  9.       <global-footer class="footer"></global-footer>
  10.     </a-layout-footer>
  11.   </a-layout>
  12. </template>
  13.  
  14. <script>
  15. import GlobalFooter from "../views/GlobalFooter.vue";
  16. import GlobalHeader from "../views/GlobalHeader.vue";
  17. import SearchPage from '../views/SearchPage.vue';
  18. export default {
  19.   components: { GlobalFooter, GlobalHeader, SearchPage },
  20. };
  21. </script>

现在搜索框就出来了，（这里最右边加了一点点小细节（不重要）之后会把代码发出来）

这里其实可以加一个搜索框等待效果

  1. <template>
  2.   <div id="search">
  3.     <a-space direction="vertical" size="large">
  4.       <a-input-search
  5.         :style="{ width: '320px' }"
  6.         placeholder="Please enter something"
  7.         button-text="Search"
  8.         search-button
  9.       />
  10.     </a-space>
  11.     <a-space direction="vertical" size="large">
  12.       <a-input-search
  13.         :style="{ width: '320px' }"
  14.         placeholder="Please enter something"
  15.         button-text="Search"
  16.         search-button
  17.         loading
  18.       />
  19.     </a-space>
  20.   </div>
  21. </template>
  22.  
  23. <script>
  24. export default {};
  25. </script>
  26.  
  27. <style>
  28. </style>

这里其实是复制了两个搜索框代码，不过另外一个加上了loading属性，这样就能表现出等待中的效果

呐呐呐，就是这样，然后我们再用v-if定义一下它的显示和隐藏就可以了

ok，演示一下：

先设置script 为setup，然后引入ref

  1. <script setup>
  2. import {ref} from 'vue';

 还记得之前说的三部曲吗： 1.搭建页面（html，css）-> 2.绑定数据与实践 -> 3.调用后端接口)

那我们以及写好了搜索框了，也该进行数据绑定了（这里暂时不进行后端接口调用，（毕竟还没开发））

对于一个组件的显示和隐藏我们直接写

  1. <script setup>
  2. import {ref} from 'vue';
  3. const isSearch = ref(false)
  4.

然后呢，两个搜索框绑定该属性（一个是isSearch,一个是!isSearch），这样就能保持一个显示，一个隐藏了。那么，如何实现转换呢，平时在搜索的时候，当我们点击了搜索按钮的时候就会出现转换效果，如果网比较好的话，估计也就直接跳转了，（如果网不好的话，搜索框转圈转了一会儿就会恢复原样）

那么，我们定义一个函数，在正常情况下点击搜索的时候触发，转换为搜索中的样式，然后过几秒就恢复原状。

那么开始定义吧；

  1. <script setup>
  2. import {ref} from 'vue';
  3. const isSearch = ref(false)
  4.  
  5.  
  6. const onSearch = () => {
  7.   isSearch.value = true;
  8.   setTimeout(() => {
  9.     isSearch.value = false;
  10.   }, 5000);
  11. };
  12. </script>

这里定义了一个函数，点击之后，isSearch改变，等到五秒之后，值恢复。来试试吧

  1. <template>
  2.   <div id="search">
  3.     <a-space direction="vertical" size="large" v-if="!isSearch">
  4.       <a-input-search
  5.         :style="{ width: '320px' }"
  6.         placeholder="Please enter something"
  7.         button-text="Search"
  8.         search-button
  9.         @click=onSearch
  10.       />
  11.     </a-space>
  12.     <a-space direction="vertical" size="large" v-if="isSearch">
  13.       <a-input-search
  14.         :style="{ width: '320px' }"
  15.         placeholder="Please enter something"
  16.         button-text="Search"
  17.         search-button
  18.         loading
  19.       />
  20.     </a-space>
  21.   </div>
  22. </template>
  23.  
  24. <script setup>
  25. import {ref} from 'vue';
  26. const isSearch = ref(false)
  27.  
  28.  
  29. const onSearch = () => {
  30.   isSearch.value = true;
  31.   setTimeout(() => {
  32.     isSearch.value = false;
  33.   }, 5000);
  34. };
  35. </script>

成功了，那再来完善一下

有搜索框，当然要有显示搜索内容的区域，

再去组件库看看有没有什么合适的

就用这个吧，

  1. <template>
  2.   <div id="searchPage">
  3.     
  4.     <div class="search">
  5.       <a-space direction="vertical" size="large" v-if="!isSearch">
  6.         <a-input-search
  7.           :style="{ width: '620px' }"
  8.           placeholder="Please enter something"
  9.           button-text="Search"
  10.           search-button
  11.           @click="onSearch"
  12.         />
  13.       </a-space>
  14.       <a-space direction="vertical" size="large" v-if="isSearch">
  15.         <a-input-search
  16.           :style="{ width: '620px' }"
  17.           placeholder="Please enter something"
  18.           button-text="Search"
  19.           search-button
  20.           loading
  21.         />
  22.       </a-space>
  23.     </div>
  24.     <a-space direction="vertical" size="large">
  25.       <a-radio-group v-model="type" type="button">
  26.         <a-radio value="line">Line</a-radio>
  27.         <a-radio value="card">Card</a-radio>
  28.         <a-radio value="card-gutter">Card Gutter</a-radio>
  29.         <a-radio value="text">Text</a-radio>
  30.         <a-radio value="rounded">Rounded</a-radio>
  31.         <a-radio value="capsule">Capsule</a-radio>
  32.       </a-radio-group>
  33.       <a-radio-group v-model="size" type="button">
  34.         <a-radio value="mini">Mini</a-radio>
  35.         <a-radio value="small">Small</a-radio>
  36.         <a-radio value="medium">Medium</a-radio>
  37.         <a-radio value="large">Large</a-radio>
  38.       </a-radio-group>
  39.       <a-tabs :type="type" :size="size">
  40.         <a-tab-pane key="1" title="Tab 1"> Content of Tab Panel 1 </a-tab-pane>
  41.         <a-tab-pane key="2" title="Tab 2"> Content of Tab Panel 2 </a-tab-pane>
  42.         <a-tab-pane key="3" title="Tab 3"> Content of Tab Panel 3 </a-tab-pane>
  43.       </a-tabs>
  44.     </a-space>
  45.   </div>
  46. </template>
  47.  
  48. <script setup>
  49. import { ref } from "vue";
  50. const isSearch = ref(false);
  51.  
  52. const onSearch = () => {
  53.   isSearch.value = true;
  54.   setTimeout(() => {
  55.     isSearch.value = false;
  56.   }, 5000);
  57. };
  58. </script>
  59.  
  60. <style scoped>
  61. .search{
  62.     margin: 30px auto;
  63.  
  64. }
  65. </style>

添加代码并做一些优化

目前就是这个样子了。

emmm，感觉不太对，好像有点快了，要不还是做一个登录注册页面吧。。。

搭建登录注册页面

创建LoginPage.vue

这一块我觉得还挺容易的，先给个示例代码吧

  1. <template>
  2.   <div class="container">
  3.     <div class="login-box">
  4.       <!-- Login Form -->
  5.       <form action="">
  6.         <h2>Login</h2>
  7.         <div class="input-box">
  8.           <span class="icon"><i class="fa-solid fa-envelope"></i></span>
  9.           <input type="email" required placeholder="Email" />
  10.         </div>
  11.         <div class="input-box">
  12.           <span class="icon"><i class="fa-solid fa-lock"></i></span>
  13.           <input type="password" placeholder="Password" required />
  14.         </div>
  15.         <div class="remember-forget">
  16.           <label><input type="checkbox" />Remember Me</label>
  17.           <a href="#">Forgot Password?</a>
  18.         </div>
  19.         <button type="submit">Login</button>
  20.         <div class="register-link">
  21.           <a href="#">Don't have an account? Create Now!</a>
  22.         </div>
  23.       </form>
  24.     </div>
  25.   </div>
  26. </template>
  27.  
  28. <script>
  29. export default {
  30.  
  31. }
  32. </script>
  33.  
  34. <style scoped>
  35. * {
  36.   margin: 0;
  37.   padding: 0;
  38.   box-sizing: border-box;
  39.   font-family: "Poppins", sans-serif;
  40. }
  41. .container {
  42.   width: 100%;
  43.   height: 100vh;
  44.   background: url("../assets/background.jpg") no-repeat;
  45.   background-size: cover;
  46.   background-position: center;
  47.   display: flex;
  48.   justify-content: center;
  49.   align-items: center;
  50. }
  51.  
  52. .container .login-box {
  53.   position: relative;
  54.   width: 390px;
  55.   height: 420px;
  56.   background-color: transparent;
  57.   border: 2px solid rgba(255, 255, 255, 0.5);
  58.   border-radius: 20px;
  59.   display: flex;
  60.   justify-content: center;
  61.   align-items: center;
  62.   backdrop-filter: blur(15px);
  63. }
  64.  
  65. .login-box h2 {
  66.   font-size: 28px;
  67.   color: #fff;
  68.   text-align: center;
  69. }
  70.  
  71. .login-box .input-box {
  72.   position: relative;
  73.   width: 310px;
  74.   margin: 30px 0;
  75.   border-bottom: 2px solid #fff;
  76. }
  77.  
  78. .input-box input {
  79.   width: 100%;
  80.   height: 50px;
  81.   background: transparent;
  82.   border: none;
  83.   outline: none;
  84.   font-size: 16px;
  85.   color: #fff;
  86.   padding: 0 35px 0 5px;
  87. }
  88.  
  89. .input-box input::placeholder {
  90.   color: #f9f9f9;
  91. }
  92.  
  93. .input-box .icon {
  94.   position: absolute;
  95.   right: 8px;
  96.   color: #fff;
  97.   font-size: 18px;
  98.   line-height: 50px;
  99. }
  100.  
  101. .login-box .remember-forget {
  102.   margin: -15px 0 15px;
  103.   font-size: 15px;
  104.   color: #fff;
  105.   display: flex;
  106.   justify-content: space-between;
  107. }
  108.  
  109. .remember-forget label input {
  110.   margin-right: 3px;
  111. }
  112.  
  113. .login-box button {
  114.   width: 100%;
  115.   height: 40px;
  116.   background: #fff;
  117.   border: none;
  118.   outline: none;
  119.   border-radius: 40px;
  120.   cursor: pointer;
  121.   font-size: 16px;
  122.   color: #000;
  123.   transition: all 0.5s;
  124. }
  125.  
  126. .login-box button:hover {
  127.   background: #1f73c9;
  128.   color: #fff;
  129. }
  130.  
  131. .login-box .register-link {
  132.   font-size: 15px;
  133.   color: #fff;
  134.   text-align: center;
  135.   margin: 20px 0 10px;
  136. }
  137.  
  138. .remember-forget a,
  139. .register-link a {
  140.   color: #fff;
  141.   text-decoration: none;
  142. }
  143.  
  144. .remember-forget a:hover,
  145. .register-link a:hover {
  146.   text-decoration: underline;
  147. }
  148.  
  149. /* Responsive Design */
  150. @media (max-width: 460px) {
  151.   .container .login-box {
  152.     width: 350px;
  153.   }
  154.  
  155.   .login-box .input-box {
  156.     width: 290px;
  157.   }
  158. }
  159.  
  160. @media (max-width: 360px) {
  161.   .container .login-box {
  162.     width: 100%;
  163.     height: 100vh;
  164.     border: none;
  165.   }
  166. }
  167. </style>

这一块代码是之前找到的一个登录页代码，我觉着就还挺好

不过吧，我决定还是不用这个代码，去组件库上找找吧（主要还是要加深一下组件库的使用）

好了就用这个

小改一下吧；

  1. <template>
  2.   <div class="container">
  3.     <div class="login-box">
  4.       <a-form
  5.         :model="form"
  6.         :style="{ width: '600px' }"
  7.         @submit="handleSubmit"
  8.         class="input-box"
  9.       >
  10.         <h2 style="margin-bottom: 60px">Login</h2>
  11.         <a-form-item
  12.           field="name"
  13.           tooltip="Please enter username"
  14.           label="账号"
  15.           class="element"
  16.         >
  17.           <a-input
  18.             v-model="form.name"
  19.             placeholder="please enter your username..."
  20.             style="margin-right: 40px"
  21.           />
  22.         </a-form-item>
  23.         <a-form-item field="post" label="密码" class="element">
  24.           <a-input
  25.             v-model="form.post"
  26.             placeholder="please enter your password..."
  27.             style="margin-right: 40px"
  28.           />
  29.         </a-form-item>
  30.         <a-form-item field="isRead">
  31.           <a-checkbox v-model="form.isRead">
  32.             I have read the manual
  33.           </a-checkbox>
  34.         </a-form-item>
  35.         <a-form-item>
  36.           <a-button html-type="submit" class="input-box">Submit</a-button>
  37.         </a-form-item>
  38.         <div class="register-link">
  39.           <a href="#">Don't have an account? Create Now!</a>
  40.         </div>
  41.       </a-form>
  42.     </div>
  43.   </div>
  44. </template>
  45.  
  46. <script>
  47.  
  48. </script>
  49.  
  50. <style scoped>
  51. * {
  52.   margin: 0;
  53.   padding: 0;
  54.   box-sizing: border-box;
  55.   font-family: "Poppins", sans-serif;
  56.   display: flex;
  57.   justify-content: center;
  58. }
  59. .container {
  60.   width: 100%;
  61.   height: 100vh;
  62.   background: url("../assets/background.jpg") no-repeat;
  63.   background-size: cover;
  64.   background-position: center;
  65.   display: flex;
  66.   justify-content: center;
  67.   align-items: center;
  68. }
  69.  
  70. .container .login-box {
  71.   position: relative;
  72.   width: 500px;
  73.   height: 580px;
  74.   background-color: transparent;
  75.   border: 2px solid rgba(255, 255, 255, 0.5);
  76.   border-radius: 20px;
  77.   display: flex;
  78.   justify-content: center;
  79.   align-items: center;
  80.   backdrop-filter: blur(15px);
  81. }
  82.  
  83. .login-box h2 {
  84.   font-size: 28px;
  85.   color: #fff;
  86.   text-align: center;
  87. }
  88.  
  89. .login-box .input-box {
  90.   position: relative;
  91.   width: 310px;
  92.   margin: 30px 0;
  93. }
  94.  
  95. .input-box input {
  96.   width: 80%;
  97.   height: 60px;
  98.   background: transparent;
  99.   border: none;
  100.   outline: none;
  101.   font-size: 16px;
  102.   color: #fff;
  103.   padding: 0 2px 0 5px;
  104. }
  105.  
  106. .input-box input::placeholder {
  107.   color: #f9f9f9;
  108. }
  109.  
  110. .input-box .icon {
  111.   position: absolute;
  112.   right: 8px;
  113.   color: #fff;
  114.   font-size: 16px;
  115.   line-height: 25px;
  116. }
  117.  
  118. .login-box .remember-forget {
  119.   margin: -15px 0 15px;
  120.   font-size: 15px;
  121.   color: #fff;
  122.   display: flex;
  123.   justify-content: space-between;
  124. }
  125.  
  126. .remember-forget label input {
  127.   margin-right: 30px;
  128. }
  129.  
  130. .login-box button {
  131.   width: 100%;
  132.   height: 40px;
  133.   background: #fff;
  134.   border: none;
  135.   outline: none;
  136.   border-radius: 40px;
  137.   cursor: pointer;
  138.   font-size: 16px;
  139.   color: #000;
  140.   transition: all 0.5s;
  141. }
  142.  
  143. .login-box button:hover {
  144.   background: #1f73c9;
  145.   color: #fff;
  146. }
  147.  
  148. .login-box .register-link {
  149.   font-size: 15px;
  150.   color: #fff;
  151.   text-align: center;
  152.   margin: 5px 0 5px;
  153. }
  154.  
  155. .remember-forget a,
  156. .register-link a {
  157.   color: #fff;
  158.   text-decoration: none;
  159. }
  160.  
  161. .remember-forget a:hover,
  162. .register-link a:hover {
  163.   text-decoration: underline;
  164. }
  165.  
  166. /* Responsive Design */
  167. @media (max-width: 460px) {
  168.   .container .login-box {
  169.     width: 350px;
  170.   }
  171.  
  172.   .login-box .input-box {
  173.     width: 290px;
  174.   }
  175. }
  176.  
  177. @media (max-width: 360px) {
  178.   .container .login-box {
  179.     width: 100%;
  180.     height: 100vh;
  181.     border: none;
  182.   }
  183. }
  184. .element {
  185.   margin: 20px 0;
  186. }
  187. </style>

emmm，这代码可谓一坨（发出来也需要些勇气啊。。）

大家如果有自己的写的规范代码就用自己的（hhh）

那么，我们开始前面的三部曲：搭建页面以及完成，可以开始绑定数据与事件了。

  1. <script setup>
  2. import {ref} from 'vue';
  3. const loginData = ref({
  4.     username: '',
  5.     password: '',
  6.     isRead: false,
  7. })

先引入ref，然后创建loginData，然后v-model绑定数据

  1. <template>
  2.   <div class="container">
  3.     <div class="login-box">
  4.       <a-form
  5.         :model="loginData"
  6.         :style="{ width: '600px' }"
  7.         @submit="handleSubmit"
  8.         class="input-box"
  9.       >
  10.         <h2 style="margin-bottom: 60px">Login</h2>
  11.         <a-form-item
  12.           field="name"
  13.           tooltip="Please enter username"
  14.           label="账号"
  15.           class="element"
  16.           :rules= "rules"
  17.         >
  18.           <a-input
  19.             v-model="loginData.username"
  20.             placeholder="please enter your username..."
  21.             style="margin-right: 40px"
  22.           />
  23.         </a-form-item>
  24.         <a-form-item field="post" label="密码" class="element" :rules= "rules">
  25.           <a-input
  26.             v-model="loginData.password"
  27.             placeholder="please enter your password..."
  28.             style="margin-right: 40px"
  29.           />
  30.         </a-form-item>
  31.         <a-form-item field="isRead">
  32.           <a-checkbox v-model="loginData.isRead">
  33.             I have read the manual
  34.           </a-checkbox>
  35.         </a-form-item>
  36.         <a-form-item>
  37.           <a-button html-type="submit" class="input-box">Submit</a-button>
  38.         </a-form-item>
  39.         <div class="register-link">
  40.           <a href="#">Don't have an account? Create Now!</a>
  41.         </div>
  42.       </a-form>
  43.     </div>
  44.   </div>
  45. </template>
  46. <script setup>
  47. import {ref} from 'vue';
  48. const loginData = ref({
  49.     username: '',
  50.     password: '',
  51.     isRead: false,
  52. })
  53. const rules = [{
  54.       validator: (value, cb) => {
  55.         return new Promise(resolve => {
  56.           window.setTimeout(() => {
  57.             if (value !== ' ') {
  58.               cb('content not empty')
  59.             }
  60.             resolve()
  61.           }, 1000)
  62.         })
  63.       }
  64.     }];
  65.  
  66. </script>
  67.  
  68. <style scoped>
  69. * {
  70.   margin: 0;
  71.   padding: 0;
  72.   box-sizing: border-box;
  73.   font-family: "Poppins", sans-serif;
  74.   display: flex;
  75.   justify-content: center;
  76. }
  77. .container {
  78.   width: 100%;
  79.   height: 100vh;
  80.   background: url("../assets/background.jpg") no-repeat;
  81.   background-size: cover;
  82.   background-position: center;
  83.   display: flex;
  84.   justify-content: center;
  85.   align-items: center;
  86. }
  87.  
  88. .container .login-box {
  89.   position: relative;
  90.   width: 500px;
  91.   height: 580px;
  92.   background-color: transparent;
  93.   border: 2px solid rgba(255, 255, 255, 0.5);
  94.   border-radius: 20px;
  95.   display: flex;
  96.   justify-content: center;
  97.   align-items: center;
  98.   backdrop-filter: blur(15px);
  99. }
  100.  
  101. .login-box h2 {
  102.   font-size: 28px;
  103.   color: #fff;
  104.   text-align: center;
  105. }
  106.  
  107. .login-box .input-box {
  108.   position: relative;
  109.   width: 310px;
  110.   margin: 30px 0;
  111. }
  112.  
  113. .input-box input {
  114.   width: 80%;
  115.   height: 60px;
  116.   background: transparent;
  117.   border: none;
  118.   outline: none;
  119.   font-size: 16px;
  120.   color: #fff;
  121.   padding: 0 2px 0 5px;
  122. }
  123.  
  124. .input-box input::placeholder {
  125.   color: #f9f9f9;
  126. }
  127.  
  128. .input-box .icon {
  129.   position: absolute;
  130.   right: 8px;
  131.   color: #fff;
  132.   font-size: 16px;
  133.   line-height: 25px;
  134. }
  135.  
  136. .login-box .remember-forget {
  137.   margin: -15px 0 15px;
  138.   font-size: 15px;
  139.   color: #fff;
  140.   display: flex;
  141.   justify-content: space-between;
  142. }
  143.  
  144. .remember-forget label input {
  145.   margin-right: 30px;
  146. }
  147.  
  148. .login-box button {
  149.   width: 100%;
  150.   height: 40px;
  151.   background: #fff;
  152.   border: none;
  153.   outline: none;
  154.   border-radius: 40px;
  155.   cursor: pointer;
  156.   font-size: 16px;
  157.   color: #000;
  158.   transition: all 0.5s;
  159. }
  160.  
  161. .login-box button:hover {
  162.   background: #1f73c9;
  163.   color: #fff;
  164. }
  165.  
  166. .login-box .register-link {
  167.   font-size: 15px;
  168.   color: #fff;
  169.   text-align: center;
  170.   margin: 5px 0 5px;
  171. }
  172.  
  173. .remember-forget a,
  174. .register-link a {
  175.   color: #fff;
  176.   text-decoration: none;
  177. }
  178.  
  179. .remember-forget a:hover,
  180. .register-link a:hover {
  181.   text-decoration: underline;
  182. }
  183.  
  184. /* Responsive Design */
  185. @media (max-width: 460px) {
  186.   .container .login-box {
  187.     width: 350px;
  188.   }
  189.  
  190.   .login-box .input-box {
  191.     width: 290px;
  192.   }
  193. }
  194.  
  195. @media (max-width: 360px) {
  196.   .container .login-box {
  197.     width: 100%;
  198.     height: 100vh;
  199.     border: none;
  200.   }
  201. }
  202. .element {
  203.   margin: 20px 0;
  204. }
  205. </style>

这里可以添加一个校验规则，

在组件库这里找一下表单的校验规则

  1. <script setup>
  2. import {ref} from 'vue';
  3. const loginData = ref({
  4.     username: '',
  5.     password: '',
  6.     isRead: false,
  7. })
  8. const rules = [{
  9.       validator: (value, cb) => {
  10.         return new Promise(resolve => {
  11.           window.setTimeout(() => {
  12.             if (value === ' ') {
  13.               cb('content not empty')
  14.             }
  15.             resolve()
  16.           }, 1000)
  17.         })
  18.       }
  19.     }];
  20.  
  21. </script>

随便定义了一个，大家可以自己定义看看，（emmm，这里我感觉element-ui的校验规则更好一丢丢）。

好了，既然定义好了登录界面，就可以试试向后端发起请求了。

这里开始在api文件夹下面创建一个文件user.js然后编写一个登录接口函数

  1. import request from '../utils/request'
  2.  
  3. //创建一个调用登录接口函数
  4. export const userLoginService = (loginData) =>{
  5.     //用urlSearchParams完成传递
  6.     const params = new URLSearchParams()
  7.     for(let key in loginData){
  8.         params.append(key,loginData[key]);
  9.     }
  10.     return request.post('/user/login',params);
  11. }

定义之后就去登录页调用

  1.         <a-form-item>
  2.           <a-button html-type="submit" class="input-box" @click="login"
  3.             >Submit</a-button
  4.           >
  5.         </a-form-item>

在submit提交这里加上@click="login"

然后定义方法：（获取信息，如果msg提示信息不为0，则显示消息，为0就表示登陆成功）

  1. const login = async()=>{
  2.     let result = await userLoginService(loginData.value);
  3.     alert(result.msg?result.msg:'登录成功');
  4. }

不过，这里用浏览器默认的alert感觉不太美观啊，毕竟都用组件库了，

消息类型：就决定是你了！

引入一手修改代码，

  1. <script setup>
  2. import { h } from 'vue';
  3. import { IconExclamationCircleFill } from '@arco-design/web-vue/es/icon';
  4. import { ref } from "vue";
  5. import {userLoginService} from '../api/user'
  6. const loginData = ref({
  7.   username: "",
  8.   password: "",
  9.   isRead: false,
  10. });
  11.  
  12.  
  13. const rules = [
  14.   {
  15.     validator: (value, cb) => {
  16.       return new Promise((resolve) => {
  17.         window.setTimeout(() => {
  18.           if (value !== " ") {
  19.             cb("content not empty");
  20.           }
  21.           resolve();
  22.         }, 1000);
  23.       });
  24.     },
  25.   },
  26. ];
  27. const renderIcon = () => h(IconExclamationCircleFill);
  28. const login = async()=>{
  29.     let result = await userLoginService(loginData.value);
  30.     renderIcon(result.msg?result.msg:'登录成功');
  31. }
  32.  
  33. </script>

好，感觉这样也就差不多了，下面展示一下登录页代码

  1. <template>
  2.   <div class="container">
  3.     <div class="login-box">
  4.       <a-form
  5.         :model="loginData"
  6.         :style="{ width: '600px' }"
  7.         @submit="handleSubmit"
  8.         class="input-box"
  9.       >
  10.         <h2 style="margin-bottom: 60px">Login</h2>
  11.         <a-form-item
  12.           field="name"
  13.           tooltip="Please enter username"
  14.           label="账号"
  15.           class="element"
  16.           :rules="rules"
  17.         >
  18.           <a-input
  19.             v-model="loginData.username"
  20.             placeholder="please enter your username..."
  21.             style="margin-right: 40px"
  22.           />
  23.         </a-form-item>
  24.         <a-form-item field="post" label="密码" class="element" :rules="rules">
  25.           <a-input
  26.             v-model="loginData.password"
  27.             placeholder="please enter your password..."
  28.             style="margin-right: 40px"
  29.           />
  30.         </a-form-item>
  31.         <a-form-item field="isRead">
  32.           <a-checkbox v-model="loginData.isRead">
  33.             I have read the manual
  34.           </a-checkbox>
  35.         </a-form-item>
  36.         <a-form-item>
  37.           <a-button html-type="submit" class="input-box" @click="login"
  38.             >Submit</a-button
  39.           >
  40.         </a-form-item>
  41.         <div class="register-link">
  42.           <a href="#">Don't have an account? Create Now!</a>
  43.         </div>
  44.       </a-form>
  45.     </div>
  46.   </div>
  47. </template>
  48. <script setup>
  49. import { h } from 'vue';
  50. import { IconExclamationCircleFill } from '@arco-design/web-vue/es/icon';
  51. import { ref } from "vue";
  52. import {userLoginService} from '../api/user'
  53. const loginData = ref({
  54.   username: "",
  55.   password: "",
  56.   isRead: false,
  57. });
  58.  
  59.  
  60. const rules = [
  61.   {
  62.     validator: (value, cb) => {
  63.       return new Promise((resolve) => {
  64.         window.setTimeout(() => {
  65.           if (value !== " ") {
  66.             cb("content not empty");
  67.           }
  68.           resolve();
  69.         }, 1000);
  70.       });
  71.     },
  72.   },
  73. ];
  74. const renderIcon = () => h(IconExclamationCircleFill);
  75. const login = async()=>{
  76.     let result = await userLoginService(loginData.value);
  77.     renderIcon(result.msg?result.msg:'登录成功');
  78. }
  79.  
  80. </script>
  81.  
  82. <style scoped>
  83. * {
  84.   margin: 0;
  85.   padding: 0;
  86.   box-sizing: border-box;
  87.   font-family: "Poppins", sans-serif;
  88.   display: flex;
  89.   justify-content: center;
  90. }
  91. .container {
  92.   width: 100%;
  93.   height: 100vh;
  94.   background: url("../assets/background.jpg") no-repeat;
  95.   background-size: cover;
  96.   background-position: center;
  97.   display: flex;
  98.   justify-content: center;
  99.   align-items: center;
  100. }
  101.  
  102. .container .login-box {
  103.   position: relative;
  104.   width: 500px;
  105.   height: 580px;
  106.   background-color: transparent;
  107.   border: 2px solid rgba(255, 255, 255, 0.5);
  108.   border-radius: 20px;
  109.   display: flex;
  110.   justify-content: center;
  111.   align-items: center;
  112.   backdrop-filter: blur(15px);
  113. }
  114.  
  115. .login-box h2 {
  116.   font-size: 28px;
  117.   color: #fff;
  118.   text-align: center;
  119. }
  120.  
  121. .login-box .input-box {
  122.   position: relative;
  123.   width: 310px;
  124.   margin: 30px 0;
  125. }
  126.  
  127. .input-box input {
  128.   width: 80%;
  129.   height: 60px;
  130.   background: transparent;
  131.   border: none;
  132.   outline: none;
  133.   font-size: 16px;
  134.   color: #fff;
  135.   padding: 0 2px 0 5px;
  136. }
  137.  
  138. .input-box input::placeholder {
  139.   color: #f9f9f9;
  140. }
  141.  
  142. .input-box .icon {
  143.   position: absolute;
  144.   right: 8px;
  145.   color: #fff;
  146.   font-size: 16px;
  147.   line-height: 25px;
  148. }
  149.  
  150. .login-box .remember-forget {
  151.   margin: -15px 0 15px;
  152.   font-size: 15px;
  153.   color: #fff;
  154.   display: flex;
  155.   justify-content: space-between;
  156. }
  157.  
  158. .remember-forget label input {
  159.   margin-right: 30px;
  160. }
  161.  
  162. .login-box button {
  163.   width: 100%;
  164.   height: 40px;
  165.   background: #fff;
  166.   border: none;
  167.   outline: none;
  168.   border-radius: 40px;
  169.   cursor: pointer;
  170.   font-size: 16px;
  171.   color: #000;
  172.   transition: all 0.5s;
  173. }
  174.  
  175. .login-box button:hover {
  176.   background: #1f73c9;
  177.   color: #fff;
  178. }
  179.  
  180. .login-box .register-link {
  181.   font-size: 15px;
  182.   color: #fff;
  183.   text-align: center;
  184.   margin: 5px 0 5px;
  185. }
  186.  
  187. .remember-forget a,
  188. .register-link a {
  189.   color: #fff;
  190.   text-decoration: none;
  191. }
  192.  
  193. .remember-forget a:hover,
  194. .register-link a:hover {
  195.   text-decoration: underline;
  196. }
  197.  
  198. /* Responsive Design */
  199. @media (max-width: 460px) {
  200.   .container .login-box {
  201.     width: 350px;
  202.   }
  203.  
  204.   .login-box .input-box {
  205.     width: 290px;
  206.   }
  207. }
  208.  
  209. @media (max-width: 360px) {
  210.   .container .login-box {
  211.     width: 100%;
  212.     height: 100vh;
  213.     border: none;
  214.   }
  215. }
  216. .element {
  217.   margin: 20px 0;
  218. }
  219. </style>

好了，今天的前端就忙碌到这里吧（下一篇文章再见）。

总结一下：1.完成了前端初始化4步，2.完成了全局页面的布局，3.完成了搜索页的代码，和登录页的代码。

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号