加入了mock功能

登陆页默认背景修改

vue/mock/controller/account/index.js

@@ -0,0 +1,23 @@
+const {success, fail} = require('../../util')
+
+const base = '/account'
+
+module.exports = [
+    {
+        url: `${base}/login`, method: 'post', res(req, res) {
+            const {username, password} = req.body
+            //默认账号密码：admin/123456
+            if (username !== 'admin' || password !== 'e10adc3949ba59abbe56e057f20f883e') {
+                res.send(fail('账号或密码错误'))
+            }
+            else res.send(success({
+                id: 1,
+                name: 'admin',
+                admin: 1,
+                token: 'test'
+            }))
+        }
+    },
+
+    {url: `${base}/logout`, method: 'get', res: null}
+]

vue/mock/controller/index.js

@@ -0,0 +1,4 @@
+const accountRoutes = require('./account')
+const sysResourceRoutes = require('./system/resource')
+
+module.exports = accountRoutes.concat(sysResourceRoutes)

vue/mock/controller/system/resource.js

@@ -0,0 +1,5 @@
+const base = '/system/resource'
+
+module.exports = [
+    {url: `${base}/getAll`, method: 'get', res: []}
+]

vue/mock/data/user.js

@@ -1,6 +0,0 @@
-module.exports = {
-    id: 1,
-    name: '本地账户',
-    admin: 1,
-    avatar: ''
-}

vue/mock/index.js

@@ -1,9 +1,22 @@
-const {success,fail} = require('./util')
+const bodeParser = require('body-parser')
-const base = require('../src/config').apiPrefix
+const {success} = require('./util')
-const user = require('./data/user')
+const {apiPrefix, useMock} = require('../src/config')
 
-const routes = [
+const routes = require('./controller')
-    {url: '/login', method: 'post', res: user},
-]
 
-module.exports = app => routes.forEach(route => app[route.method](base + route.url, (req, res) => res.send(success(route.res))))
+module.exports = app => {
+    if (!useMock) return
+
+    app.use(bodeParser.json())
+
+    routes.forEach(route => {
+        app[route.method](
+            apiPrefix + route.url,
+            (req, res) => {
+                if (typeof route.res === 'function') {
+                    route.res(req, res)
+                }
+                else res.send(success(route.res))
+            })
+    })
+}

vue/mock/util.js

@@ -1,8 +1,8 @@
 module.exports = {
-    success(data) {
+    success(data, msg) {
-        return {status: 200, data}
+        return {status: 200, data, msg}
     },
-    fail() {
+    fail(msg) {
-        return {status: 500, msg: '操作失败'}
+        return {status: 500, msg: msg || '操作失败'}
     }
 }

vue/package-lock.json

@@ -2598,7 +2598,7 @@
         },
         "ms": {
           "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
           "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "dev": true
         },

vue/package.json

@@ -32,6 +32,7 @@
     "@vue/cli-plugin-router": "^4.4.1",
     "@vue/cli-plugin-vuex": "^4.4.1",
     "@vue/cli-service": "^4.4.1",
+    "body-parser": "^1.19.0",
     "compression-webpack-plugin": "^3.1.0",
     "html-webpack-plugin": "^4.3.0",
     "sass": "^1.26.8",

vue/src/config/index.js

@@ -7,18 +7,22 @@ module.exports = {
 
     title: 'BiuBiuBiu~',
 
-    //项目的部署路径
+    //项目的部署路径，始终以'/'开头，以'/'结束
     contextPath,
 
-    //全局axios的baseUrl
+    //全局axios的baseUrl、devServer的路由前缀
     apiPrefix: '/api',
 
     //路由模式，['hash','history']
     routerMode: 'history',
 
+    //是否在开发时使用mock，为true时不会启动websocket和代理
+    useMock: false,
+
     //socket连接地址
     socketUrl: isDev ? 'localhost:12580' : 'wss://toesbieya.cn',
 
+    //侧边栏顶上的logo地址
     sidebarLogoUrl: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png',
 
     errorLog: true,

vue/src/store/modules/app.js

@@ -9,7 +9,7 @@ const state = {
     device: isMobile() ? 'mobile' : 'pc',
 
     //登陆页背景动画
-    loginBackgroundAnimation: 'firework',
+    loginBackgroundAnimation: 'sparkRain',
 
     //路由页面滚动高度
     scrollTop: 0,

vue/src/store/modules/socket.js

@@ -1,6 +1,6 @@
 import {MessageBox} from "element-ui"
 import {isEmpty} from "@/utils"
-import {socketUrl} from '@/config'
+import {useMock, socketUrl} from '@/config'
 import SocketIO from 'socket.io-client'
 import {createMutations} from "@/utils"
 
@@ -14,7 +14,7 @@ const mutations = createMutations(state)
 
 const actions = {
     init(context, user) {
-        if (isEmpty(user, user.id, user.token)) return
+        if (useMock || isEmpty(user, user.id, user.token)) return
 
         socket = initSocket(user)
 

vue/vue.config.js

@@ -29,7 +29,10 @@ module.exports = {
             warnings: true,
             errors: true
         },
-        proxy: {
+        proxy:
+            settings.useMock
+                ? null
+                : {
                     [settings.apiPrefix]: {
                         target: 'http://localhost:8081',  //后台接口域名
                         ws: true,                         //如果要代理 websockets，配置这个参数
@@ -40,9 +43,9 @@ module.exports = {
                         }
                     }
                 },
-        /*before(app) {
+        before(app) {
             require('./mock')(app)
-        }*/
+        }
     },
     configureWebpack: {
         name: settings.title,