• ElementUI之首页导航+左侧菜单

    Mock.js

    Mock.js是一个用于生成随机数据的模拟数据生成器，用于前端测试、调试和数据模拟。它可以生成各种类型的随机数据，包括但不限于数字、字符串、日期、图片、邮件、电话等等。

    Mock.js可以帮助前端开发人员摆脱依赖后端接口提供的数据的束缚，并提高前端开发效率。Mock.js的使用非常简单，只需要编写一个数据模板，然后通过调用Mock.js提供的API来生成随机数据即可。Mock.js还支持自定义规则和拦截请求等功能，可以满足各种复杂的数据生成和请求处理需求

             总之，Mock.js是一款十分实用的前端开发工具，可以大大提高开发效率和测试质量。

    安装mockjs

    在我们的SPA下输入cmd 后输入： npm i mockjs -D

    -D参数表示这是一个开发时依赖，仅在开发阶段使用。安装完成后，就可以在项目中使用Mock.js生成随机数据了。

    引入mockjs

    dev.env.js
    1. 'use strict'
    2. const merge = require('webpack-merge')
    3. const prodEnv = require('./prod.env')
    4.  
    5. module.exports = merge(prodEnv, {
    6.   NODE_ENV: '"development"',
    7.   MOCK: 'true'
    8. })
    prod.env.js
    1. 'use strict'
    2. module.exports = {
    3.   NODE_ENV: '"production"',
    4.     MOCK: 'false'
    5. }

    导入mock包里面有2个js文件

     login-mock.js
    1. // const loginInfo = {
    2. // 	code: -1,
    3. // 	message: '密码错误'
    4. // }
    5.  
    6. //使用mockjs的模板生成随机数据
    7. const loginInfo = {
    8. 	'code|-1-0': 0,
    9. 	'message|3-10': 'msg'
    10. }
    11. export default loginInfo;
     index.js
    1. import Mock from 'mockjs' //引入mockjs，npm已安装
    2. import action from '@/api/action' //引入请求地址
    3.  
    4. //全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
    5. Mock.setup({
    6. 	// timeout: 400  //延时400s请求到数据
    7. 	timeout: 200 - 400 //延时200-400s请求到数据
    8. })
    9.  
    10. //引登陆的测试数据，并添加至mockjs
    11. import loginInfo from '@/mock/json/login-mock.js'
    12. let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
    13. Mock.mock(s1, "post", loginInfo)
    14. // Mock.mock(s1, /post|get/i, loginInfo)

     Login.vue

    1.     <template>
    2.       <div class="login-wrap">
    3.         <el-form class="login-container">
    4.           <h1 class="title">用户登录</h1>
    5.           <el-form-item label="">
    6.             <el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
    7.           </el-form-item>
    8.           <el-form-item label="">
    9.             <el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
    10.           </el-form-item>
    11.           <el-form-item>
    12.             <el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
    13.           </el-form-item>
    14.           <el-row style="text-align: center;margin-top:-10px">
    15.             <el-link type="primary">忘记密码</el-link>
    16.             <el-link type="primary" @click="gotoRegister()">用户注册</el-link>
    17.           </el-row>
    18.         </el-form>
    19.       </div>
    20.     </template>
    21.  
    22.     <script>
    23.       // import axios from 'axios'
    24.       // import qs from 'qs'
    25.       export default {
    26.         name: 'Login',
    27.         data() {
    28.           return {
    29.             username: '',
    30.             password: ''
    31.           }
    32.         },
    33.         methods: {
    34.           gotoRegister() {
    35.             this.$router.push('/Register');
    36.           },
    37.           doSubmit() {
    38.             let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
    39.             let params = {
    40.               username: this.username,
    41.               password: this.password
    42.             }
    43.             this.axios.post(url, params).then(r => {
    44.               console.log(r)
    45.               if (r.data.success) {
    46.                 this.$message({
    47.                   type: 'success',
    48.                   message: r.data.msg
    49.                 });
    50.                 this.$router.push('/Register');
    51.               }else{
    52.                 console.log(r)
    53.                 this.$message(r.data.msg)
    54.               }
    55.             }).catch(e => {
    56.  
    57.             })
    58.           }
    59.         }
    60.       }
    61.     </script>
    62.  
    63.  
    64.  
    65.     <style scoped>
    66.       .login-wrap {
    67.         box-sizing: border-box;
    68.         width: 100%;
    69.         height: 100%;
    70.         padding-top: 10%;
    71.         background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzNjFweCIgaGVpZ2h0PSI2MDlweCIgdmlld0JveD0iMCAwIDEzNjEgNjA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ni4yICg0NDQ5NikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JvdXAgMjE8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iQW50LURlc2lnbi1Qcm8tMy4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6LSm5oi35a+G56CB55m75b2VLeagoemqjCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc5LjAwMDAwMCwgLTgyLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc3LjAwMDAwMCwgNzMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMTgiIG9wYWNpdHk9IjAuOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzQuOTAxNDE2LCA1NjkuNjk5MTU4KSByb3RhdGUoLTcuMDAwMDAwKSB0cmFuc2xhdGUoLTc0LjkwMTQxNiwgLTU2OS42OTkxNTgpIHRyYW5zbGF0ZSg0LjkwMTQxNiwgNTI1LjE5OTE1OCkiPgogICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTExIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjI1IiBjeD0iNjMuNTc0ODc5MiIgY3k9IjMyLjQ2ODM2NyIgcng9IjIxLjc4MzA0NzkiIHJ5PSIyMS43NjYwMDgiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0zIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjU5OTk5OTk2NCIgY3g9IjUuOTg3NDY0NzkiIGN5PSIxMy44NjY4NjAxIiByeD0iNS4yMTczOTEzIiByeT0iNS4yMTMzMDk5NyI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zOC4xMzU0NTE0LDg4LjM1MjAyMTUgQzQzLjg5ODQyMjcsODguMzUyMDIxNSA0OC41NzAyMzQsODMuNjgzODY0NyA0OC41NzAyMzQsNzcuOTI1NDAxNSBDNDguNTcwMjM0LDcyLjE2NjkzODMgNDMuODk4NDIyNyw2Ny40OTg3ODE2IDM4LjEzNTQ1MTQsNjcuNDk4NzgxNiBDMzIuMzcyNDgwMSw2Ny40OTg3ODE2IDI3LjcwMDY2ODgsNzIuMTY2OTM4MyAyNy43MDA2Njg4LDc3LjkyNTQwMTUgQzI3LjcwMDY2ODgsODMuNjgzODY0NyAzMi4zNzI0ODAxLDg4LjM1MjAyMTUgMzguMTM1NDUxNCw4OC4zNTIwMjE1IFoiIGlkPSJPdmFsLTMtQ29weSIgZmlsbD0iI0NGREFFNiIgb3BhY2l0eT0iMC40NSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02NC4yNzc1NTgyLDMzLjE3MDQ5NjMgTDExOS4xODU4MzYsMTYuNTY1NDkxNSIgaWQ9IlBhdGgtMTIiIHN0cm9rZT0iI0NGREFFNiIgc3Ryb2tlLXdpZHRoPSIxLjczOTEzMDQzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNDIuMTQzMTcwOCwyNi41MDAyNjgxIEw3LjcxMTkwMTYyLDE0LjU2NDA3MDIiIGlkPSJQYXRoLTE2IiBzdHJva2U9IiNFMEI0QjciIHN0cm9rZS13aWR0aD0iMC43MDI2Nzg5NjQiIG9wYWNpdHk9IjAuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtZGFzaGFycmF5PSIxLjQwNTM1Nzg5OTg3MzE1MywyLjEwODAzNjk1MzQ2OTk4MSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02My45MjYyMTg3LDMzLjUyMTU2MSBMNDMuNjcyMTMyNiw2OS4zMjUwOTUxIiBpZD0iUGF0aC0xNSIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjAuNzAyNjc4OTY0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjEuNDA1MzU3ODk5ODczMTUzLDIuMTA4MDM2OTUzNDY5OTgxIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjYuODUwOTIyLCAxMy41NDM2NTQpIHJvdGF0ZSgzMC4wMDAwMDApIHRyYW5zbGF0ZSgtMTI2Ljg1MDkyMiwgLTEzLjU0MzY1NCkgdHJhbnNsYXRlKDExNy4yODU3MDUsIDQuMzgxODg5KSIgZmlsbD0iI0NGREFFNiI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTQiIG9wYWNpdHk9IjAuNDUiIGN4PSI5LjEzNDgyNjUzIiBjeT0iOS4xMjc2ODA3NiIgcng9IjkuMTM0ODI2NTMiIHJ5PSI5LjEyNzY4MDc2Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xOC4yNjk2NTMxLDE4LjI1NTM2MTUgQzE4LjI2OTY1MzEsMTMuMjE0MjgyNiAxNC4xNzk4NTE5LDkuMTI3NjgwNzYgOS4xMzQ4MjY1Myw5LjEyNzY4MDc2IEM0LjA4OTgwMTE0LDkuMTI3NjgwNzYgMCwxMy4yMTQyODI2IDAsMTguMjU1MzYxNSBMMTguMjY5NjUzMSwxOC4yNTUzNjE1IFoiIGlkPSJPdmFsLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkuMTM0ODI3LCAxMy42OTE1MjEpIHNjYWxlKC0xLCAtMSkgdHJhbnNsYXRlKC05LjEzNDgyNywgLTEzLjY5MTUyMSkgIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTYuMjk0NzAwLCAxMjMuNzI1NjAwKSByb3RhdGUoLTUuMDAwMDAwKSB0cmFuc2xhdGUoLTIxNi4yOTQ3MDAsIC0xMjMuNzI1NjAwKSB0cmFuc2xhdGUoMTA2LjI5NDcwMCwgMzUuMjI1NjAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMiIgZmlsbD0iI0NGREFFNiIgb3BhY2l0eT0iMC4yNSIgY3g9IjI5LjExNzY0NzEiIGN5PSIyOS4xNDAyNDM5IiByeD0iMjkuMTE3NjQ3MSIgcnk9IjI5LjE0MDI0MzkiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjMiIGN4PSIyOS4xMTc2NDcxIiBjeT0iMjkuMTQwMjQzOSIgcng9IjIxLjU2ODYyNzUiIHJ5PSIyMS41ODUzNjU5Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMi1Db3B5IiBzdHJva2U9IiNDRkRBRTYiIG9wYWNpdHk9IjAuNCIgY3g9IjE3OS4wMTk2MDgiIGN5PSIxMzguMTQ2MzQxIiByeD0iMjMuNzI1NDkwMiIgcnk9IjIzLjc0MzkwMjQiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yIiBmaWxsPSIjQkFDQUQ5IiBvcGFjaXR5PSIwLjUiIGN4PSIyOS4xMTc2NDcxIiBjeT0iMjkuMTQwMjQzOSIgcng9IjEwLjc4NDMxMzciIHJ5PSIxMC43OTI2ODI5Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTI5LjExNzY0NzEsMzkuOTMyOTI2OCBMMjkuMTE3NjQ3MSwxOC4zNDc1NjEgQzIzLjE2MTYzNTEsMTguMzQ3NTYxIDE4LjMzMzMzMzMsMjMuMTc5NjA5NyAxOC4zMzMzMzMzLDI5LjE0MDI0MzkgQzE4LjMzMzMzMzMsMzUuMTAwODc4MSAyMy4xNjE2MzUxLDM5LjkzMjkyNjggMjkuMTE3NjQ3MSwzOS45MzI5MjY4IFoiIGlkPSJPdmFsLTIiIGZpbGw9IiNCQUNBRDkiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtOSIgb3BhY2l0eT0iMC40NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTcyLjAwMDAwMCwgMTMxLjAwMDAwMCkiIGZpbGw9IiNFNkExQTYiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yLUNvcHktMiIgY3g9IjcuMDE5NjA3ODQiIGN5PSI3LjE0NjM0MTQ2IiByeD0iNi40NzA1ODgyNCIgcnk9IjYuNDc1NjA5NzYiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTAuNTQ5MDE5NjA4LDEzLjYyMTk1MTIgQzQuMTIyNjI2ODEsMTMuNjIxOTUxMiA3LjAxOTYwNzg0LDEwLjcyMjcyMiA3LjAxOTYwNzg0LDcuMTQ2MzQxNDYgQzcuMDE5NjA3ODQsMy41Njk5NjA5NSA0LjEyMjYyNjgxLDAuNjcwNzMxNzA3IDAuNTQ5MDE5NjA4LDAuNjcwNzMxNzA3IEwwLjU0OTAxOTYwOCwxMy42MjE5NTEyIFoiIGlkPSJPdmFsLTItQ29weS0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjc4NDMxNCwgNy4xNDYzNDEpIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTMuNzg0MzE0LCAtNy4xNDYzNDEpICI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xMCIgZmlsbD0iI0NGREFFNiIgY3g9IjIxOC4zODIzNTMiIGN5PSIxMzguNjg1OTc2IiByeD0iMS42MTc2NDcwNiIgcnk9IjEuNjE4OTAyNDQiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xMC1Db3B5LTIiIGZpbGw9IiNFMEI0QjciIG9wYWNpdHk9IjAuMzUiIGN4PSIxNzkuNTU4ODI0IiBjeT0iMTc1LjM4MTA5OCIgcng9IjEuNjE3NjQ3MDYiIHJ5PSIxLjYxODkwMjQ0Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMTAtQ29weSIgZmlsbD0iI0UwQjRCNyIgb3BhY2l0eT0iMC4zNSIgY3g9IjE4MC4wOTgwMzkiIGN5PSIxMDIuNTMwNDg4IiByeD0iMi4xNTY4NjI3NSIgcnk9IjIuMTU4NTM2NTkiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjguOTk4NTM4MSwyOS45NjcxNTk4IEwxNzEuMTUxMDE4LDEzMi44NzYwMjQiIGlkPSJQYXRoLTExIiBzdHJva2U9IiNDRkRBRTYiIG9wYWNpdHk9IjAuOCI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTEwIiBvcGFjaXR5PSIwLjc5OTk5OTk1MiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTA1NC4xMDA2MzUsIDM2LjY1OTMxNykgcm90YXRlKC0xMS4wMDAwMDApIHRyYW5zbGF0ZSgtMTA1NC4xMDA2MzUsIC0zNi42NTkzMTcpIHRyYW5zbGF0ZSgxMDI2LjYwMDYzNSwgNC42NTkzMTcpIj4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC03IiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiIGN4PSI0My44MTM1NTkzIiBjeT0iMzIiIHJ4PSIxMS4xODY0NDA3IiByeT0iMTEuMjk0MTE3NiI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzQuNTk2Nzc0LCAyMy4xMTExMTEpIiBmaWxsPSIjQkFDQUQ5Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtNyIgb3BhY2l0eT0iMC40NSIgY3g9IjkuMTg1MzQ3MTgiIGN5PSI4Ljg4ODg4ODg5IiByeD0iOC40NzQ1NzYyNyIgcnk9IjguNTU2MTQ5NzMiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTkuMTg1MzQ3MTgsMTcuNDQ1MDM4NiBDMTMuODY1NzI2NCwxNy40NDUwMzg2IDE3LjY1OTkyMzUsMTMuNjE0MzE5OSAxNy42NTk5MjM1LDguODg4ODg4ODkgQzE3LjY1OTkyMzUsNC4xNjM0NTc4NyAxMy44NjU3MjY0LDAuMzMyNzM5MTU2IDkuMTg1MzQ3MTgsMC4zMzI3MzkxNTYgTDkuMTg1MzQ3MTgsMTcuNDQ1MDM4NiBaIiBpZD0iT3ZhbC03Ij48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNC42NTk3Mzg1LDI0LjgwOTY5NCBMNS43MTY2NjA4NCw0Ljc2ODc4OTQ1IiBpZD0iUGF0aC0yIiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbCIgc3Ryb2tlPSIjQ0ZEQUU2IiBzdHJva2Utd2lkdGg9IjAuOTQxMTc2NDcxIiBjeD0iMy4yNjI3MTE4NiIgY3k9IjMuMjk0MTE3NjUiIHJ4PSIzLjI2MjcxMTg2IiByeT0iMy4yOTQxMTc2NSI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLUNvcHkiIGZpbGw9IiNGN0UxQUQiIGN4PSIyLjc5NjYxMDE3IiBjeT0iNjEuMTc2NDcwNiIgcng9IjIuNzk2NjEwMTciIHJ5PSIyLjgyMzUyOTQxIj48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTM0LjYzMTI0NDMsMzkuMjkyMjcxMiBMNS4wNjM2NjY2Myw1OS43ODUwODIiIGlkPSJQYXRoLTEwIiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xOSIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI4Mi41MzcyMTksIDQ0Ni41MDI4NjcpIHJvdGF0ZSgtMTAuMDAwMDAwKSB0cmFuc2xhdGUoLTEyODIuNTM3MjE5LCAtNDQ2LjUwMjg2NykgdHJhbnNsYXRlKDExNDIuNTM3MjE5LCAzMjcuNTAyODY3KSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDEuMzMzNTM5LCAxMDQuNTAyNzQyKSByb3RhdGUoMjc1LjAwMDAwMCkgdHJhbnNsYXRlKC0xNDEuMzMzNTM5LCAtMTA0LjUwMjc0MikgdHJhbnNsYXRlKDEyOS4zMzM1MzksIDkyLjUwMjc0MikiIGZpbGw9IiNCQUNBRDkiPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTQiIG9wYWNpdHk9IjAuNDUiIGN4PSIxMS42NjY2NjY3IiBjeT0iMTEuNjY2NjY2NyIgcj0iMTEuNjY2NjY2NyI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMy4zMzMzMzMzLDIzLjMzMzMzMzMgQzIzLjMzMzMzMzMsMTYuODkwMDExMyAxOC4xMDk5ODg3LDExLjY2NjY2NjcgMTEuNjY2NjY2NywxMS42NjY2NjY3IEM1LjIyMzM0NDU5LDExLjY2NjY2NjcgMCwxNi44OTAwMTEzIDAsMjMuMzMzMzMzMyBMMjMuMzMzMzMzMywyMy4zMzMzMzMzIFoiIGlkPSJPdmFsLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExLjY2NjY2NywgMTcuNTAwMDAwKSBzY2FsZSgtMSwgLTEpIHRyYW5zbGF0ZSgtMTEuNjY2NjY3LCAtMTcuNTAwMDAwKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC01LUNvcHktNiIgZmlsbD0iI0NGREFFNiIgY3g9IjIwMS44MzMzMzMiIGN5PSI4Ny41IiByPSI1LjgzMzMzMzMzIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTQzLjUsODguODEyNjY4NSBMMTU1LjA3MDUwMSwxNy42MDM4NTQ0IiBpZD0iUGF0aC0xNyIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuNSwzNy4zMzMzMzMzIEwxMjcuNDY2MjUyLDk3LjY0NDk3MzUiIGlkPSJQYXRoLTE4IiBzdHJva2U9IiNCQUNBRDkiIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iUGF0aC0xOSIgc3Ryb2tlPSIjQ0ZEQUU2IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciIHBvaW50cz0iMTQzLjkwMjU5NyAxMjAuMzAyMjgxIDE3NC45MzU0NTUgMjMxLjU3MTM0MiAzOC41IDE0Ny41MTA4NDcgMTI2LjM2Njk0MSAxMTAuODMzMzMzIj48L3BvbHlsaW5lPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNTkuODMzMzMzLDk5Ljc0NTM4NDIgTDE5NS40MTY2NjcsODkuMjUiIGlkPSJQYXRoLTIwIiBzdHJva2U9IiNFMEI0QjciIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyIgb3BhY2l0eT0iMC42Ij48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIwNS4zMzMzMzMsODIuMTM3MjEwNSBMMjM4LjcxOTQwNiwzNi4xNjY2NjY3IiBpZD0iUGF0aC0yNCIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjY2LjcyMzQyNCwxMzIuMjMxOTg4IEwyMDcuMDgzMzMzLDkwLjQxNjY2NjciIGlkPSJQYXRoLTI1IiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNSIgZmlsbD0iI0MxRDFFMCIgY3g9IjE1Ni45MTY2NjciIGN5PSI4Ljc1IiByPSI4Ljc1Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTUtQ29weS0zIiBmaWxsPSIjQzFEMUUwIiBjeD0iMzkuMDgzMzMzMyIgY3k9IjE0OC43NSIgcj0iNS4yNSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC01LUNvcHktMiIgZmlsbC1vcGFjaXR5PSIwLjYiIGZpbGw9IiNEMURFRUQiIGN4PSI4Ljc1IiBjeT0iMzMuMjUiIHI9IjguNzUiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNS1Db3B5LTQiIGZpbGwtb3BhY2l0eT0iMC42IiBmaWxsPSIjRDFERUVEIiBjeD0iMjQzLjgzMzMzMyIgY3k9IjMwLjMzMzMzMzMiIHI9IjUuODMzMzMzMzMiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNS1Db3B5LTUiIGZpbGw9IiNFMEI0QjciIGN4PSIxNzUuNTgzMzMzIiBjeT0iMjMyLjc1IiByPSI1LjI1Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
    72.         /* background-color: #112346; */
    73.         background-repeat: no-repeat;
    74.         background-position: center right;
    75.         background-size: 100%;
    76.       }
    77.  
    78.  
    79.       .login-container {
    80.         border-radius: 10px;
    81.         margin: 0px auto;
    82.         width: 350px;
    83.         padding: 30px 35px 15px 35px;
    84.         background: #fff;
    85.         border: 1px solid #eaeaea;
    86.         text-align: left;
    87.         box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
    88.       }
    89.  
    90.       .title {
    91.         margin: 0px auto 40px auto;
    92.         text-align: center;
    93.         color: #505458;
    94.       }
    95.     </style>
    96.

    Register.vue

    1. <template>
    2.   <div class="register-container">
    3.     <div class="register-card">
    4.       <h2 class="register-title">注册</h2>
    5.       <form @submit.prevent="register" class="register-form">
    6.         <div class="form-group">
    7.           <label for="username" class="register-label">用户名:</label>
    8.           <input type="text" id="username" v-model="username" required class="register-input">
    9.         </div>
    10.         <div class="form-group">
    11.           <label for="password" class="register-label">密码:</label>
    12.           <input type="password" id="password" v-model="password" required class="register-input">
    13.         </div>
    14.         <div class="form-group">
    15.           <label for="password" class="register-label">编号:</label>
    16.           <input type="password" id="id" v-model="id" required class="register-input">
    17.         </div>
    18.         <button type="submit" class="register-button">注册</button>
    19.       </form>
    20.       <div class="login-link">
    21.         <span>已有账号？</span>
    22.          <el-link type="primary" @click="gotoLogin()">用户登录</el-link>
    23.       </div>
    24.     </div>
    25.   </div>
    26. </template>
    27.  
    28. <style>
    29. .register-container {
    30.   display: flex;
    31.   flex-direction: column;
    32.   align-items: center;
    33.   justify-content: center;
    34.   height: 100vh;
    35.   background-color: #f5f5f5;
    36. }
    37.  
    38. .register-card {
    39.   display: flex;
    40.   flex-direction: column;
    41.   align-items: center;
    42.   background-color: #fff;
    43.   padding: 40px;
    44.   border-radius: 4px;
    45.   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    46. }
    47.  
    48. .register-title {
    49.   font-size: 24px;
    50.   color: #333;
    51.   margin-bottom: 20px;
    52. }
    53.  
    54. .register-form {
    55.   display: flex;
    56.   flex-direction: column;
    57.   align-items: center;
    58. }
    59.  
    60. .form-group {
    61.   margin-bottom: 20px;
    62. }
    63.  
    64. .register-label {
    65.   font-size: 16px;
    66.   color: #333;
    67.   margin-bottom: 10px;
    68. }
    69.  
    70. .register-input {
    71.   padding: 8px;
    72.   border: 1px solid #ccc;
    73.   border-radius: 4px;
    74.   width: 200px;
    75. }
    76.  
    77. .register-button {
    78.   padding: 10px 20px;
    79.   background-color: #ff6700;
    80.   color: #fff;
    81.   border: none;
    82.   border-radius: 4px;
    83.   cursor: pointer;
    84. }
    85.  
    86. .login-link {
    87.   margin-top: 20px;
    88.   display: flex;
    89.   align-items: center;
    90. }
    91.  
    92. .login-link span {
    93.   color: #555;
    94. }
    95.  
    96. .login-button {
    97.   margin-left: 5px;
    98.   color: #007bff;
    99.   text-decoration: none;
    100. }
    101. </style>
    102.  
    103. <script>
    104. export default {
    105.   data() {
    106.     return {
    107.       username: '',
    108.       password: '',
    109.       id:''
    110.     };
    111.   },
    112.   methods: {
    113.     register() {
    114.       let url = this.axios.urls.SYSTEM_USER_DOREG;
    115.       let params = {
    116.         username: this.username,
    117.         password: this.password,
    118.         id:this.id
    119.       }
    120. console.log(url)
    121.         this.axios.post(url, params).then(r => {
    122.           console.log(r)
    123.           if (r.data.success) {
    124.             this.$message({
    125.               type: 'success',
    126.               message: r.data.msg
    127.             });
    128.           }else{
    129.             console.log(r)
    130.             this.$message(r.data.msg)
    131.           }
    132.         }).catch(e => {
    133.  
    134.         })
    135.  
    136.     },
    137.     gotoLogin(){
    138.         this.$router.push('/');
    139.     }
    140.   }
    141. };
    142. </script>
    143.

    App.vue

    1. <template>
    2.   <div id="app">
    3.     
    4.     <br>
    5.  
    6.  
    7.     <router-view/>
    8.   div>
    9. template>
    10.  
    11. <script>
    12. export default {
    13.   name: 'App',
    14.  
    15. }
    16. script>
    17.  
    18. <style> 
    19. html,
    20. body {
    21.     width: 100%;
    22.     height: 100%;
    23.     box-sizing: border-box;
    24.     padding: 0px;
    25.     margin: 0px;
    26. }
    27. #app {
    28.     font-family: "Avenir", Helvetica, Arial, sans-serif;
    29.     -webkit-font-smoothing: antialiased;
    30.     -moz-osx-font-smoothing: grayscale;
    31.     color: #2c3e50;
    32.     widows: 100%;
    33.     height: 100%;
    34. }
    35. style>
    36.

     main.js

    1. // The Vue build version to load with the `import` command
    2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    3. import Vue from 'vue'
    4. // 新添加1
    5. import ElementUI from 'element-ui'
    6. // 新添加2，避免后期打包样式不同，要放在import App from './App';之前
    7. import 'element-ui/lib/theme-chalk/index.css'
    8. import App from './App'
    9. import router from './router'
    10. // 新添加3
    11. Vue.use(ElementUI)
    12. Vue.config.productionTip = false
    13.  
    14. /* eslint-disable no-new */
    15. import axios from '@/api/http'
    16. import VueAxios from 'vue-axios'
    17.  
    18. Vue.use(VueAxios,axios)
    19. new Vue({
    20.   el: '#app',
    21.   router,
    22.   components: { App },
    23.   template: ''
    24. })
    25.

     

    UserServiceImpl

    这个是我们的后端代码

      @Override
public int insertSelective(User user) {

    return userMapper.insertSelective(user);
}

    首页导航栏与左侧菜单搭建 

    我们的Login页面跳转到AppMain页面在我们的

    this.$router.push('/AppMian');

    APPMian.vue

    1. <template>
    2. 	<el-container class="main-container">
    3. 		<el-aside v-bind:class="asideClass">
    4. 			<LeftNav></LeftNav>
    5. 		</el-aside>
    6. 		<el-container>
    7. 			<el-header class="main-header">
    8. 				<TopNav></TopNav>
    9. 			</el-header>
    10. 			<el-main class="main-center">Main</el-main>
    11. 		</el-container>
    12. 	</el-container>
    13. </template>
    14.  
    15. <script>
    16. 	// 导入组件
    17. 	import TopNav from '@/components/TopNav.vue'
    18. 	import LeftNav from '@/components/LeftNav.vue'
    19.  
    20. 	// 导出模块
    21. 	export default {
    22. 		
    23. 	};
    24. </script>
    25. <style scoped>
    26. 	.main-container {
    27. 		height: 100%;
    28. 		width: 100%;
    29. 		box-sizing: border-box;
    30. 	}
    31.  
    32. 	.main-aside-collapsed {
    33. 		/* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
    34. 		width: 64px !important;
    35. 		height: 100%;
    36. 		background-color: #334157;
    37. 		margin: 0px;
    38. 	}
    39.  
    40. 	.main-aside {
    41. 		width: 240px !important;
    42. 		height: 100%;
    43. 		background-color: #334157;
    44. 		margin: 0px;
    45. 	}
    46.  
    47. 	.main-header,
    48. 	.main-center {
    49. 		padding: 0px;
    50. 		border-left: 2px solid #333;
    51. 	}
    52. </style>

    LeftNav.vue

    1. <template>
    2. 	<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#334157"
    3. 	 text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" :collapse-transition="bb">
    4. 		<!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
    5. 		<div class="logobox">
    6. 			<img class="logoimg" src="../assets/img/logo.png" alt="">
    7. 		</div>
    8. 		<el-submenu index="1">
    9. 			<template slot="title">
    10. 				<i class="el-icon-location"></i>
    11. 				<span>导航一</span>
    12. 			</template>
    13. 			<el-menu-item-group>
    14. 				<template slot="title">分组一</template>
    15. 				<el-menu-item index="1-1">选项1</el-menu-item>
    16. 				<el-menu-item index="1-2">选项2</el-menu-item>
    17. 			</el-menu-item-group>
    18. 			<el-menu-item-group title="分组2">
    19. 				<el-menu-item index="1-3">选项3</el-menu-item>
    20. 			</el-menu-item-group>
    21. 			<el-submenu index="1-4">
    22. 				<template slot="title">选项4</template>
    23. 				<el-menu-item index="1-4-1">选项1</el-menu-item>
    24. 			</el-submenu>
    25. 		</el-submenu>
    26. 		<el-menu-item index="2">
    27. 			<i class="el-icon-menu"></i>
    28. 			<span slot="title">导航二</span>
    29. 		</el-menu-item>
    30. 		<el-menu-item index="3" disabled>
    31. 			<i class="el-icon-document"></i>
    32. 			<span slot="title">导航三</span>
    33. 		</el-menu-item>
    34. 		<el-menu-item index="4">
    35. 			<i class="el-icon-setting"></i>
    36. 			<span slot="title">导航四</span>
    37. 		</el-menu-item>
    38. 	</el-menu>
    39. </template>
    40. <script>
    41. 	export default {
    42. 		
    43. 	}
    44. </script>
    45. <style>
    46. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    47. 		width: 240px;
    48. 		min-height: 400px;
    49. 	}
    50.  
    51. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    52. 		border: none;
    53. 		text-align: left;
    54. 	}
    55.  
    56. 	.el-menu-item-group__title {
    57. 		padding: 0px;
    58. 	}
    59.  
    60. 	.el-menu-bg {
    61. 		background-color: #1f2d3d !important;
    62. 	}
    63.  
    64. 	.el-menu {
    65. 		border: none;
    66. 	}
    67.  
    68. 	.logobox {
    69. 		height: 40px;
    70. 		line-height: 40px;
    71. 		color: #9d9d9d;
    72. 		font-size: 20px;
    73. 		text-align: center;
    74. 		padding: 20px 0px;
    75. 	}
    76.  
    77. 	.logoimg {
    78. 		height: 40px;
    79. 	}
    80. </style>

    TopNav.vue

    1. <template>
    2. 	<!-- <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64"
    3. 	 text-color="#fff" active-text-color="#ffd04b">
    4. 		<el-menu-item index="1">处理中心</el-menu-item>
    5. 		<el-submenu index="2">
    6. 			<template slot="title">我的工作台</template>
    7. 			<el-menu-item index="2-1">选项1</el-menu-item>
    8. 			<el-menu-item index="2-2">选项2</el-menu-item>
    9. 			<el-menu-item index="2-3">选项3</el-menu-item>
    10. 			<el-submenu index="2-4">
    11. 				<template slot="title">选项4</template>
    12. 				<el-menu-item index="2-4-1">选项1</el-menu-item>
    13. 				<el-menu-item index="2-4-2">选项2</el-menu-item>
    14. 				<el-menu-item index="2-4-3">选项3</el-menu-item>
    15. 			</el-submenu>
    16. 		</el-submenu>
    17.  
    18. 		<el-menu-item index="3" disabled>消息中心</el-menu-item>
    19. 		<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    20. 	</el-menu> -->
    21. 	<el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
    22. 		<el-button class="buttonimg">
    23. 			<img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
    24. 		</el-button>
    25. 		<el-submenu index="2" class="submenu">
    26. 			<template slot="title">超级管理员</template>
    27. 			<el-menu-item index="2-1">设置</el-menu-item>
    28. 			<el-menu-item index="2-2">个人中心</el-menu-item>
    29. 			<el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
    30. 		</el-submenu>
    31. 	</el-menu>
    32. </template>
    33.  
    34. <script>
    35. 	export default {
    36. 		
    37. 	}
    38. </script>
    39.  
    40. <style scoped>
    41. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    42. 		border: none;
    43. 	}
    44.  
    45. 	.submenu {
    46. 		float: right;
    47. 	}
    48.  
    49. 	.buttonimg {
    50. 		height: 60px;
    51. 		background-color: transparent;
    52. 		border: none;
    53. 	}
    54.  
    55. 	.showimg {
    56. 		width: 26px;
    57. 		height: 26px;
    58. 		position: absolute;
    59. 		top: 17px;
    60. 		left: 17px;
    61. 	}
    62.  
    63. 	.showimg:active {
    64. 		border: none;
    65. 	}
    66. </style>

    index.js

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. import HelloWorld from '@/components/HelloWorld'
    4. import AppMain from '@/components/AppMain'
    5. import LeftNav from '@/components/LeftNav'
    6. import TopNav from '@/components/TopNav'
    7. import Login from '@/views/Login'
    8. import Register from '@/views/Register'
    9.  
    10.  
    11. Vue.use(Router)
    12.  
    13. export default new Router({
    14. 	routes: [{
    15. 		path: '/',
    16. 		name: 'Login',
    17. 		component: Login
    18. 	
    19. 	},{path: '/Register',
    20. 		name: 'Register',
    21. 		component: Register,
    22. 		
    23. 	},{path: '/AppMain',
    24. 		name: 'AppMain',
    25. 		component: AppMain,
    26. 		children:[
    27. 			{path: '/LeftNav',
    28. 				name: 'LeftNav',
    29. 				component: LeftNav,
    30. 				
    31. 			},{path: '/TopNav',
    32. 				name: 'TopNav',
    33. 				component: TopNav
    34. 			}
    35. 		]
    36. 	}
    37. 	]
    38. })

  • 相关阅读:
    css层叠样式设置
    使用awescnb自定义博客园皮肤
    微信新升级？这2个功能是你们期盼的吗？
    ElasticSearch_DSL 使用方法合集(持续更新中......)
    JAVA计算机毕业设计医院管理系统Mybatis+系统+数据库+调试部署
    使用SWIG编写python的扩展
    深入浅出计算机组成原理12-理解电路：从电报机到门电路，我们如何做到“千里传信”？
    MySQL基础知识复习3（数据库的备份和还原、外键的建立、储存过程练习题）
    【web课程设计网页规划与设计】基于HTML+CSS+JavaScript大学生人员管理后台系统9页
    wav格式如何转mp3？
  • 原文地址：https://blog.csdn.net/djssubddbj/article/details/133281317