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

通用后台管理系统前端界面Ⅵ——首页、登录页、404页面_后台管理系统首页

作者：你好赵伟 | 2024-02-19 07:35:45

赞

踩

后台管理系统首页

登录页

1、为了方便起见，先将element-ui的使用改为全局引入的方式。修改main.js文件如下：

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import ElementUI from 'element-ui'
  4. import 'element-ui/lib/theme-chalk/index.css'
  5. //这个是局部引入，前面的文章有讲过
  6. // import '../plugins/element'
  7. import 'font-awesome/css/font-awesome.min.css'
  8. import axios from 'axios'
  9. import router from './router/index'
  10. Vue.config.productionTip = false
  11. Vue.prototype.axios = axios
  12. Vue.use(ElementUI)
  13. new Vue({
  14.   router,
  15.   render: h => h(App),
  16. }).$mount('#app')

2、写登陆页面：

        2.1、components文件夹下新建Login.vue

        2.2、从element-ui官网找需要的组件：+

 

         2.3、修改代码（包括数据和表单绑定）整合后：

  1. <template>
  2.   <div class="login">
  3.     <el-card class="box-card">
  4.       <div slot="header" class="clearfix">
  5.         <span>疫起健康后台管理系统</span>
  6.       </div>
  7.       <el-form
  8.         :model="loginForm"
  9.         ref="loginForm"
  10.         label-width="100px"
  11.       >
  12.         <el-form-item label="用户名" prop="username">
  13.           <el-input
  14.             v-model="loginForm.username"
  15.             autocomplete="off"
  16.           ></el-input>
  17.         </el-form-item>
  18.         <el-form-item label="密码" prop="password">
  19.           <el-input
  20.             type="password"
  21.             v-model="loginForm.password"
  22.             autocomplete="off"
  23.           ></el-input>
  24.         </el-form-item>
  25.         <el-form-item>
  26.           <el-button type="primary" @click="submitForm('loginForm')"
  27.             >登录</el-button>
  28.           <el-button @click="resetForm('loginForm')">重置</el-button>
  29.         </el-form-item>
  30.       </el-form>
  31.     </el-card>
  32.   </div>
  33. </template>
  34.  
  35. <script>
  36. export default {
  37.   data() {
  38.     return{
  39.         loginForm:{
  40.             username:'',
  41.             password:''
  42.     }
  43.     }
  44.   },
  45. };
  46. </script>
  47.  
  48. <style lang="scss">
  49. .login{
  50.     width: 100%;
  51.     height: 100%;
  52.     position:absolute;
  53.     background: #88b2dc;
  54.     .box-card{
  55.         width: 450px;
  56.         margin: 160px auto;
  57.         .el-card__header{
  58.             font-size: 34px;
  59.         }
  60.         .el-button{
  61.             width: 30%;
  62.         }
  63.     }
  64. }
  65. </style>

3、修改路由：启动项目（使用重定向）和输入http://localhost/login，进入的页面都是为登录页面 

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. //import Home from '../components/Home.vue'
  4.  
  5. Vue.use(Router)
  6.  
  7. export default new Router({
  8.     routes: [
  9.         {
  10.             path: '/',
  11.             // component: Home
  12.             redirect:'/login',
  13.             component: () => import('@/components/Login') //路由懒加载
  14.             //component: resolve => require(['@/components/Home'], resolve) //异步加载
  15.         },
  16.         {
  17.             path: '/login',
  18.             name:'Login',
  19.             component: () => import('@/components/Login') //路由懒加载
  20.             //component: resolve => require(['@/components/Home'], resolve) //异步加载
  21.         },
  22.         {
  23.             path: '/home',
  24.             // component: Home
  25.             component: () => import('@/components/Home') //路由懒加载
  26.             //component: resolve => require(['@/components/Home'], resolve) //异步加载
  27.         }
  28.     ],
  29.     mode: 'history'
  30. })

运行结果：

 4、登录验证

        4.1 简易版，适用于小项目和简单的验证规则，实现：将验证规则直接写在html中

  1. <template>
  2.   <div class="login">
  3.     <el-card class="box-card">
  4.       <div slot="header" class="clearfix">
  5.         <span>疫起健康后台管理系统</span>
  6.       </div>
  7.       <el-form :model="loginForm" ref="loginForm" label-width="100px">
  8.         <el-form-item
  9.           label="用户名"
  10.           prop="username"
  11.           :rules="[
  12.             { required: true, message: '请输入用户名', trigger: 'blur' },
  13.             {
  14.               min: 4,
  15.               max: 10,
  16.               message: '长度在4-10位字符之间',
  17.               trigger: 'blur',
  18.             },
  19.           ]"
  20.         >
  21.           <el-input v-model="loginForm.username" autocomplete="off"></el-input>
  22.         </el-form-item>
  23.         <el-form-item
  24.           label="密码"
  25.           prop="password"
  26.           :rules="[
  27.             { required: true, message: '请输入密码', trigger: 'blur' },
  28.             {
  29.               min: 6,
  30.               max: 12,
  31.               message: '长度在6-12位字符之间',
  32.               trigger: 'blur',
  33.             },
  34.           ]"
  35.         >
  36.           <el-input
  37.             type="password"
  38.             v-model="loginForm.password"
  39.             autocomplete="off"
  40.           ></el-input>
  41.         </el-form-item>
  42.         <el-form-item>
  43.           <el-button type="primary" @click="login('loginForm')"
  44.             >登录</el-button
  45.           >
  46.           <el-button @click="resetForm('loginForm')">重置</el-button>
  47.         </el-form-item>
  48.       </el-form>
  49.     </el-card>
  50.   </div>
  51. </template>

当输入框失去焦点时，会自动进行表单校验

         4.2登录验证进阶版 

                ①在表单里绑定rules，直接在Login.vue页面的data中写校验规则，写法参考element-ui的form表单

  1. <template>
  2.   <div class="login">
  3.     <el-card class="box-card">
  4.       <div slot="header" class="clearfix">
  5.         <span>疫起健康后台管理系统</span>
  6.       </div>
  7.       <el-form
  8.         :model="loginForm"
  9.         ref="loginForm"
  10.         label-width="100px"
  11.         :rules="rules"
  12.       >
  13.         <el-form-item label="用户名" prop="username">
  14.           <el-input v-model="loginForm.username" autocomplete="off"></el-input>
  15.         </el-form-item>
  16.         <el-form-item label="密码" prop="password">
  17.           <el-input
  18.             type="password"
  19.             v-model="loginForm.password"
  20.             autocomplete="off"
  21.           ></el-input>
  22.         </el-form-item>
  23.         <el-form-item>
  24.           <el-button type="primary" @click="login('loginForm')">登录</el-button>
  25.           <el-button @click="resetForm('loginForm')">重置</el-button>
  26.         </el-form-item>
  27.       </el-form>
  28.     </el-card>
  29.   </div>
  30. </template>
  31.  
  32. <script>
  33. export default {
  34.   data() {
  35.     // rule 是校验规则，value是input用户输入的值，callback是回调函数 参考element-ui的api文档
  36.     const validateName = (rule, value, callback) => {
  37.       //   请输入4-10位昵称
  38.       let reg = /(^[a-zA-Z0-9]{4,10}$)/;
  39.       if (value === "") {
  40.         callback(new Error("请输入用户名"));
  41.       } else if (!reg.test(value)) {
  42.         callback(new Error("请输入4-10位用户名"));
  43.       } else {
  44.         callback();
  45.       }
  46.     };
  47.     const validatePass = (rule, value, callback) => {
  48.       //   6-12位密码需要包含大小写字母和数字以及特殊符号
  49.       let pass =
  50.         /^\S*(?=\S{6,12})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/;
  51.       if (value === "") {
  52.         callback(new Error("请输入密码"));
  53.       } else if (!pass.test(value)) {
  54.         callback(new Error("6-12位密码需要包含大小写字母和数字及特殊符号"));
  55.       } else {
  56.         callback();
  57.       }
  58.     };
  59.     return {
  60.       loginForm: {
  61.         username: "",
  62.         password: "",
  63.       },
  64.       rules: {
  65.         username: [{ validator: validateName, trigger: "blur" }],
  66.         password: [{ validator: validatePass, trigger: "blur" }],
  67.       },
  68.     };
  69.   },
  70.  
  71.   methods: {
  72.     login(loginForm) {
  73.       this.$refs[loginForm].validate((valid) => {
  74.         if (valid) {
  75.           console.log(this.loginForm);
  76.         } else {
  77.           console.log(this.loginForm);
  78.         }
  79.       });
  80.     },
  81.     resetForm(loginForm) {
  82.       this.$refs[loginForm].resetFields();
  83.     },
  84.   },
  85. };
  86. </script>
  87.  
  88. <style lang="scss">
  89. .login {
  90.   width: 100%;
  91.   height: 100%;
  92.   position: absolute;
  93.   background: #88b2dc;
  94.   .box-card {
  95.     width: 450px;
  96.     margin: 160px auto;
  97.     .el-card__header {
  98.       font-size: 34px;
  99.     }
  100.     .el-button {
  101.       width: 30%;
  102.     }
  103.   }
  104. }
  105. </style>

 效果：

小技巧：使用写校验规则插件

 使用：按下f1（我的笔记本需要按下Fn+f1）

                ②在表单里绑定rules，校验规则封装后，再在Login.vue页面导入校验规则（更推荐）

在src下新建utlis文件夹，新建validate.js文件，把Login.vue页面data中的校验规则过来，修改为如下：

  1. // 用户名匹配
  2. export function nameRule(rule, value, callback) {
  3.     //  请输入4-10位昵称
  4.     let reg = /(^[a-zA-Z0-9]{4,10}$)/;
  5.     if (value === "") {
  6.         callback(new Error("请输入用户名"));
  7.     } else if (!reg.test(value)) {
  8.         callback(new Error("请输入4-10位用户名"));
  9.     } else {
  10.         callback();
  11.     }
  12. }
  13.  
  14. // 密码正则匹配
  15. export function passRule(rule, value, callback) {
  16.     //   6-12位密码需要包含大小写字母和数字以及特殊符号
  17.     let pass = /^\S*(?=\S{6,12})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/;
  18.     if (value === "") {
  19.         callback(new Error("请输入密码"));
  20.     } else if (!pass.test(value)) {
  21.         callback(new Error("6-12位密码需要包含大小写字母和数字及特殊符号"));
  22.     } else {
  23.         callback();
  24.     }
  25. }

在Login.vue页面修改为：

  1. <template>
  2.   <div class="login">
  3.     <el-card class="box-card">
  4.       <div slot="header" class="clearfix">
  5.         <span>疫起健康后台管理系统</span>
  6.       </div>
  7.       <el-form
  8.         :model="loginForm"
  9.         ref="loginForm"
  10.         label-width="100px"
  11.         :rules="rules"
  12.       >
  13.         <el-form-item label="用户名" prop="username">
  14.           <el-input v-model="loginForm.username" autocomplete="off"></el-input>
  15.         </el-form-item>
  16.         <el-form-item label="密码" prop="password">
  17.           <el-input
  18.             type="password"
  19.             v-model="loginForm.password"
  20.             autocomplete="off"
  21.           ></el-input>
  22.         </el-form-item>
  23.         <el-form-item>
  24.           <el-button type="primary" @click="login('loginForm')">登录</el-button>
  25.           <el-button @click="resetForm('loginForm')">重置</el-button>
  26.         </el-form-item>
  27.       </el-form>
  28.     </el-card>
  29.   </div>
  30. </template>
  31.  
  32. <script>
  33. import { nameRule, passRule } from '../utils/validate.js'
  34.  
  35. export default {
  36.   data() {
  37.     return {
  38.       loginForm: {
  39.         username: "",
  40.         password: "",
  41.       },
  42.       rules: {
  43.         username: [{ validator: nameRule, trigger: "blur" }],
  44.         password: [{ validator: passRule, trigger: "blur" }],
  45.       },
  46.     };
  47.   },
  48.  
  49.   methods: {
  50.     login(loginForm) {
  51.       this.$refs[loginForm].validate((valid) => {
  52.         if (valid) {
  53.           console.log(this.loginForm);
  54.           this.axios
  55.             .post("http://1.116.64.64:5004/api2/login", this.loginForm)
  56.             .then((res) => {
  57.               console.log(res);
  58.               if (res.data.status === 200) {
  59.                 localStorage.setItem("username", res.data.username);
  60.                 this.$message({ message: res.data.message, type: "success" });
  61.                 this.$router.push("/home");
  62.               }
  63.             })
  64.             .catch((err) => {
  65.               console.error(err);
  66.             });
  67.         } else {
  68.           console.log(this.loginForm);
  69.         }
  70.       });
  71.     },
  72.     resetForm(loginForm) {
  73.       this.$refs[loginForm].resetFields();
  74.     },
  75.   },
  76. };
  77. </script>
  78.  
  79. <style lang="scss">
  80. .login {
  81.   width: 100%;
  82.   height: 100%;
  83.   position: absolute;
  84.   background: #88b2dc;
  85.   .box-card {
  86.     width: 450px;
  87.     margin: 160px auto;
  88.     .el-card__header {
  89.       font-size: 34px;
  90.     }
  91.     .el-button {
  92.       width: 30%;
  93.     }
  94.   }
  95. }
  96. </style>

效果：

5、登录页面连接后端

第一种

首先：使用mock准备模拟一下网络请求后端接口：

 ① 在vscode终端输入，ctrl+c结束正在运行的项目，再下载mock插件，输入

npm i @shymean/mock-server -g

② 插件安装完成后，然后在磁盘中随便一个地方新建一个文件夹，命名为 mock; 在mock文件里面新建一个mock.js空文件；

在终端进入mock文件夹，输入命令mock,启动本地mock服务器，默认端口为7654

mock>mock server listen at 7654

操作步骤如下图：

 打开mock.js这个文件，自己写一些测试数据如下：

  1. //登录接口
  2. Mock.mock(/login/, {
  3.     code: 200,
  4.     data: {
  5.       access_token: "748_bef_246_test",
  6.       expires_in: 7200,
  7.     }
  8.   })
  9.   
  10.   //用户信息
  11.   Mock.mock(/userInfo/, {
  12.     code: 200,
  13.     user: {
  14.      userName:'admin',
  15.      password:'123456',
  16.      role:'admim',
  17.     }
  18.   })

 第二种

找一个自己或别人写好的后端接口，B站有很多，找一下直接用

 封装token

 在utils文件夹下新建setToken.js文件，内容如下：

  1. export function setToken(tokenKey, token) {
  2.     return localStorage.setItem(tokenKey, token)
  3. }
  4.  
  5. export function getToken(tokenKey) {
  6.     return localStorage.getItem(tokenKey)
  7. }
  8.  
  9. export function removeToken(tokenKey) {
  10.     return localStorage.removeItem(tokenKey)
  11. }

在Login.vue进行导入使用

  1. <template>
  2.   <div class="login">
  3.     <el-card class="box-card">
  4.       <div slot="header" class="clearfix">
  5.         <span>疫起健康后台管理系统</span>
  6.       </div>
  7.       <el-form
  8.         :model="loginForm"
  9.         ref="loginForm"
  10.         label-width="100px"
  11.         :rules="rules"
  12.       >
  13.         <el-form-item label="用户名" prop="username">
  14.           <el-input v-model="loginForm.username" autocomplete="off"></el-input>
  15.         </el-form-item>
  16.         <el-form-item label="密码" prop="password">
  17.           <el-input
  18.             type="password"
  19.             v-model="loginForm.password"
  20.             autocomplete="off"
  21.           ></el-input>
  22.         </el-form-item>
  23.         <el-form-item>
  24.           <el-button type="primary" @click="login('loginForm')">登录</el-button>
  25.           <el-button @click="resetForm('loginForm')">重置</el-button>
  26.         </el-form-item>
  27.       </el-form>
  28.     </el-card>
  29.   </div>
  30. </template>
  31.  
  32. <script>
  33. import { nameRule, passRule } from '../utils/validate.js'
  34. import { setToken } from '@/utils/setToken.js'
  35. export default {
  36.   data() {
  37.     return {
  38.       loginForm: {
  39.         username: "",
  40.         password: "",
  41.       },
  42.       rules: {
  43.         username: [{ validator: nameRule, trigger: "blur" }],
  44.         password: [{ validator: passRule, trigger: "blur" }],
  45.       },
  46.     };
  47.   },
  48.  
  49.   methods: {
  50.     login(loginForm) {
  51.       this.$refs[loginForm].validate((valid) => {
  52.         if (valid) {
  53.           console.log(this.loginForm);
  54.           this.axios
  55.             .post("http://1.116.64.64:5004/api2/login", this.loginForm)
  56.             .then((res) => {
  57.               console.log(res);
  58.               if (res.data.status === 200) {
  59.                 // localStorage.setItem("username", res.data.username);
  60.                 setToken("username", res.data.username);
  61.                 this.$message({ message: res.data.message, type: "success" });
  62.                 this.$router.push("/home");
  63.               }
  64.             })
  65.             .catch((err) => {
  66.               console.error(err);
  67.             });
  68.         } else {
  69.           console.log(this.loginForm);
  70.         }
  71.       });
  72.     },
  73.     resetForm(loginForm) {
  74.       this.$refs[loginForm].resetFields();
  75.     },
  76.   },
  77. };
  78. </script>
  79.  
  80. <style lang="scss">
  81. .login {
  82.   width: 100%;
  83.   height: 100%;
  84.   position: absolute;
  85.   background: #88b2dc;
  86.   .box-card {
  87.     width: 450px;
  88.     margin: 160px auto;
  89.     .el-card__header {
  90.       font-size: 34px;
  91.     }
  92.     .el-button {
  93.       width: 30%;
  94.     }
  95.   }
  96. }
  97. </style>

连接后端登录接口，二次封装axios

 设置项目代理，修改vue.config.js文件如下： 

  1. const { defineConfig } = require('@vue/cli-service')
  2. module.exports = defineConfig({
  3.   transpileDependencies: true,
  4.   devServer: {
  5.     open: true,
  6.     host: 'localhost',
  7.     proxy: {
  8.       '/api': {
  9.         target: 'http://1.116.64.64:5004/api2/',
  10.         changeOrigin: true,
  11.         pathRewrite: {
  12.           '^/api': ''
  13.         }
  14.       }
  15.  
  16.     }
  17.   }
  18. })

项目根目录下新建service.js文件，进行封装axios

  1. import axios from 'axios'
  2. import { getToken } from '@/utils/setToken.js'
  3. import { Message } from 'element-ui'
  4.  
  5. const service = axios.create({
  6.     baseURL: '/api', // baseURL会自动加在请求地址上
  7.     timeout: 3000
  8. })
  9.  
  10. // 添加请求拦截器
  11. service.interceptors.request.use((config) => {
  12.     // 在请求之前做些什么(获取并设置token)
  13.     config.headers['token'] = getToken('token')
  14.     return config
  15. }, (error) => {
  16.     return Promise.reject(error)
  17. })
  18.  
  19. // 添加响应拦截器
  20. service.interceptors.response.use((response) => {
  21.     // 对响应数据做些什么
  22.     let { status, message } = response.data
  23.     if(status !== 200) {
  24.         Message({message: message || 'error', type: 'warning'})
  25.     }
  26.     return response
  27. }, (error) => {
  28.     return Promise.reject(error)
  29. })
  30.  
  31. export default service

使用二次封装的axios，依旧采用全局导入的方式，修改main.js文件如下：

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import ElementUI from 'element-ui'
  4. import 'element-ui/lib/theme-chalk/index.css'
  5. // import '../plugins/element'
  6. import 'font-awesome/css/font-awesome.min.css'
  7. // import axios from 'axios'
  8. import service from '../service'
  9. import router from './router/index'
  10. //或者这样导入：会自动找到index文件
  11. //import router from './router'
  12. Vue.config.productionTip = false
  13. // Vue.prototype.axios = axios
  14. Vue.prototype.service = service
  15. Vue.use(ElementUI)
  16. new Vue({
  17.   router,
  18.   render: h => h(App),
  19. }).$mount('#app')

修改Login.vue页面，注释掉引入的setToken文件

  1. <template>
  2.   <div class="login">
  3.     <el-card class="box-card">
  4.       <div slot="header" class="clearfix">
  5.         <span>疫起健康后台管理系统</span>
  6.       </div>
  7.       <el-form
  8.         :model="loginForm"
  9.         ref="loginForm"
  10.         label-width="100px"
  11.         :rules="rules"
  12.       >
  13.         <el-form-item label="用户名" prop="username">
  14.           <el-input v-model="loginForm.username" autocomplete="off"></el-input>
  15.         </el-form-item>
  16.         <el-form-item label="密码" prop="password">
  17.           <el-input
  18.             type="password"
  19.             v-model="loginForm.password"
  20.             autocomplete="off"
  21.           ></el-input>
  22.         </el-form-item>
  23.         <el-form-item>
  24.           <el-button type="primary" @click="login('loginForm')">登录</el-button>
  25.           <el-button @click="resetForm('loginForm')">重置</el-button>
  26.         </el-form-item>
  27.       </el-form>
  28.     </el-card>
  29.   </div>
  30. </template>
  31.  
  32. <script>
  33. import { nameRule, passRule } from '../utils/validate.js'
  34. // import { setToken } from '@/utils/setToken.js'
  35. export default {
  36.   data() {
  37.     return {
  38.       loginForm: {
  39.         username: "",
  40.         password: "",
  41.       },
  42.       rules: {
  43.         username: [{ validator: nameRule, trigger: "blur" }],
  44.         password: [{ validator: passRule, trigger: "blur" }],
  45.       },
  46.     };
  47.   },
  48.  
  49.   methods: {
  50.     login(loginForm) {
  51.       this.$refs[loginForm].validate((valid) => {
  52.         if (valid) {
  53.           console.log(this.loginForm);
  54.           this.service.post('/login',this.loginForm)
  55.             .then((res) => {
  56.                 console.log(res.data)
  57.             }) 
  58.           } else {
  59.           console.log(this.loginForm);
  60.         }
  61.       });
  62.     },
  63.     resetForm(loginForm) {
  64.       this.$refs[loginForm].resetFields();
  65.     },
  66.   },
  67. };
  68. </script>
  69.  
  70. <style lang="scss">
  71. .login {
  72.   width: 100%;
  73.   height: 100%;
  74.   position: absolute;
  75.   background: #88b2dc;
  76.   .box-card {
  77.     width: 450px;
  78.     margin: 160px auto;
  79.     .el-card__header {
  80.       font-size: 34px;
  81.     }
  82.     .el-button {
  83.       width: 30%;
  84.     }
  85.   }
  86. }
  87. </style>

ctrl+c关掉当前运行的项目，重新新建终端输入：npm run serve，修改了vue.config.js文件一定要重启项目，配置才会生效，再进行接口测试，否则会报错如下：访问的依旧是localhhost:8080端口

如果重启服务还是没有用，那就再一一排查一下语法，拼写是否有误或者漏掉，以下为我调试过程发现的：

 axios封装分析（其实还可以更完善：axios发送的数据不能是对象，只能是字符串的形式，所以可以使用统一的工具类对axios发送请求的数据进行处理；以此类推，接收返回的请求，可以通过判断不同的状态码，进行不同的处理（500服务器内部错误、404访问地址不存在等）参考博文）：

 测试结果：

 接下来是康康想一下，接口返回的数据，除了token还有什么是要存起来的===》username===》当登录成功，进入系统首页，需要显示用户名，所以：修改Login.vue页面的login方法为下：

  1. login(loginForm) {
  2.       this.$refs[loginForm].validate((valid) => {
  3.         if (valid) {
  4.           console.log(this.loginForm);
  5.           this.service.post('/login',this.loginForm)
  6.           .then((res) => {
  7.                 if (res.data.status === 200) {
  8.                     setToken('username', res.data.username)
  9.                     setToken('token', res.data.token)
  10.                     this.$message({message: res.data.message, type: 'success'})
  11.                     this.$router.push('/home')
  12.                 }
  13.             }) 
  14.           } else {
  15.           console.log(this.loginForm);
  16.         }
  17.       });
  18.     },

做到这一步，发现代码没问题，但是为了方便后续项目整理和维护，管理接口和方法，∴把登录方法可以再封装成api进行调用：

        在src下，新建api文件夹，新建api.js文件

  1. // 把对应的接口请求封装成api来调用
  2. import service from '../service.js'
  3.  
  4. // 登录接口
  5. export function login(data) {
  6.     return service({
  7.         method: 'post',
  8.         url: '/login',
  9.         data
  10.     })
  11. }

 在Login.vue页面进行使用：

 404页面

 在项目中准备好静态资源：

在components下新建NotFound.vue

  1. <template>
  2.     <div class="notfound">
  3.       <div class="wrapper">
  4.           <div class="big">页面不见了！</div>
  5.           <div>首页瞧瞧，点击<router-link to="/">这里</router-link>进入首页.</div>
  6.       </div>
  7.     </div>
  8.   </template>
  9.   
  10.   <script>
  11.   export default {
  12.     data() {
  13.       return {};
  14.     },
  15.   };
  16.   </script>
  17.   
  18.   <style>
  19.   .notfound {
  20.     height: 100%;
  21.     background-image: url('../assets/img/astronauta.jpg'), url('../assets/img/stars404.png');
  22.     background-position: right top, center center;
  23.     background-repeat: no-repeat, repeat;
  24.     background-size: cover, auto;
  25.   }
  26.   .notfound .wrapper {
  27.     position: absolute;
  28.     top: 60%;
  29.     right: 2%;
  30.     color: #fff;
  31.     width: 635px;
  32.     font-size: 19px;
  33.     line-height: 29px;
  34.     -webkit-font-smoothing: antialiased;
  35.     padding: 20px;
  36.     font-family: 'Source Sans Pro', sans-serif;
  37.   }
  38.   .notfound .wrapper .big {
  39.     font-size: 74px;
  40.     font-weight: 700;
  41.     line-height: 68px;
  42.     margin-bottom: 48px;
  43.   }
  44.   .notfound .wrapper a {
  45.     color: #ffcc00;
  46.     text-decoration: none;
  47.     font-weight: 700;
  48.     cursor: pointer;
  49.   }
  50.   @media only screen and (max-width: 666px) {
  51.     .notfound .wrapper {
  52.       left: auto;
  53.       right: 0;
  54.       width: 100%;
  55.       max-width: 450px;
  56.       top: 35%;
  57.     }
  58.     .notfound .wrapper .big {
  59.       font-size: 42px;
  60.       line-height: 50px;
  61.       margin-bottom: 15px;
  62.     }
  63.   }
  64.   </style>

 配置路由

 效果：

 分析：

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/113411
推荐阅读
相关标签

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

  

闽ICP备14008679号