system

package.json

@@ -16,6 +16,8 @@
   "dependencies": {
     "axios": "^0.18.0",
     "element-ui": "^2.4.5",
+    "js-base64": "^2.4.8",
+    "js-md5": "^0.7.3",
     "vue": "^2.5.2",
     "vue-amap": "^0.5.8",
     "vue-cookie": "^1.1.4",

src/main.js

@@ -12,7 +12,8 @@ import Ajax from './util/ajax'
 import api from './util/api'
 import store from './store'
 import Vuex from 'vuex'
-
+import md5 from 'js-md5'
+const Base64 = require('js-base64').Base64
 Vue.use(ElementUI)
 Vue.use(Cookies)
 Vue.use(VueAMap)
@@ -28,6 +29,8 @@ VueAMap.initAMapApiLoader({
 Vue.config.productionTip = false
 Vue.prototype.$api = api
 Vue.prototype.$ajax = Ajax
+Vue.prototype.md5 = md5
+Vue.prototype.Base64 = Base64
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/pages/login/index.vue

@@ -28,6 +28,7 @@ export default {
       account: '', // 账号
       password: '', // 密码
       remberAccount: true, // 记住账号密码
+      token: ''
     }
   },
   mounted () {
@@ -38,19 +39,51 @@ export default {
   methods: {
     // 登录
     toLogin () {
-      if (this.remberAccount) {
-        var aData = { account: this.account, password: this.password, remberAccount: true }
-        this.$cookie.set('accountInfo', JSON.stringify(aData))
-      } else {
-        this.$cookie.delete('accountInfo')
+      if (!this.account) {
+        this.$message({
+          message: '请输入用户名',
+          type: 'error'
+        })
+        return
+      } else if (!this.password) {
+        this.$message({
+          message: '请输入密码',
+          type: 'error'
+        })
+        return
       }
+      let userName = this.account
+      let passWord = this.md5(this.password)
+      let token = this.token
+      this.$ajax(this.$api.login.signin.url, {
+        method: this.$api.login.signin.method,
+        data: {
+          username: userName,
+          password: passWord,
+          token: token
+        }
+      })
+        .then(res => {
+          console.log(res)
+          this.saveToken(res.token)
+          this.$message({
+            message: '登陆成功',
+            type: 'success',
+            duration: 1000
+          })
+          setTimeout(() => {
+            this.$router.push({ name: 'system' })
+          }, 1000)
+        }).catch(msg => {
+
+        })
     },
 
     // 初始化登陆逻辑
     initLogin () {
       var aData = {}
       if (this.$cookie.get('accountInfo') === undefined || this.$cookie.get('accountInfo') === null) {
-        aData = { account: '', password: '', remberAccount: true }
+        aData = { account: '', password: '', remberAccount: true, token: '' }
         this.$cookie.set('accountInfo', JSON.stringify(aData))
       } else {
         aData = this.$cookie.get('accountInfo')
@@ -65,6 +98,15 @@ export default {
     triggerRember () {
       this.remberAccount = !this.remberAccount
     },
+
+    saveToken (token) {
+      if (this.remberAccount) {
+        var aData = { account: this.account, password: this.password, remberAccount: true, token: token }
+        this.$cookie.set('accountInfo', JSON.stringify(aData))
+      } else {
+        this.$cookie.delete('accountInfo')
+      }
+    }
   },
 }
 </script>

src/pages/system/index.vue

@@ -31,9 +31,8 @@
 import breadCrumb from '@/components/breadCrumb/index'
 import siderBar from '@/components/siderBar/index'
 import routerData from '@/router/router'
-
-import { mapState, mapMutations } from 'vuex'
-
+import { mapState, mapMutations, createNamespacedHelpers } from 'vuex'
+const { mapActions: mapSystemActions } = createNamespacedHelpers('system')
 export default {
   name: '',
   data () {
@@ -138,6 +137,7 @@ export default {
   computed: {
     ...mapState({
       breadCrumb: x => x.app.breadcrumb,
+      system: x => x.system,
     })
   },
   components: {
@@ -147,10 +147,15 @@ export default {
   created () {
     this.getMenuData()
     this.updateBread({ routerData, Url: this.$route.name })
+    this.updateSystemInfo()
+    console.log(this.system)
   },
   methods: {
     ...mapMutations([
-      'updateBread',
+      'updateBread'
+    ]),
+    ...mapSystemActions([
+      'updateSystemInfo'
     ]),
     getMenuData () { // 获取用户角色权限内菜单
       let menuData = [{

src/pages/test/test.vue

@@ -1,32 +0,0 @@
-<style lang="sass" scoped>
-
-</style>
-
-<template>
-  <div>123</div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-
-    }
-  },
-  mounted () {
-    console.log(this)
-    this.$ajax(this.$api.test.signin.url, {
-      method: this.$api.test.signin.method,
-      data: {
-        userName: 1,
-        passWord: 2
-      }
-    })
-      .then(res => {
-        console.log(res)
-      }).catch(msg => {
-        return false
-      })
-  }
-}
-</script>

src/router/router.js

@@ -1,6 +1,5 @@
 import login from '@/pages/login/index'
 import system from '@/pages/system/page'
-import test from '@/pages/test/test'
 
 const routerArr = [
   {
@@ -8,12 +7,7 @@ const routerArr = [
     name: 'login',
     component: login
   },
-  ...system.router,
-  {
-    path: '/test',
-    name: 'test',
-    component: test
-  }
+  ...system.router
 ]
 
 export default routerArr

src/store/index.js

@@ -13,8 +13,7 @@ Vuex.Store.prototype.$api = api
 Vuex.Store.prototype.$ajax = Ajax
 export const modules = {
   app: () => require('./app').default,
-  case: () => require('./case').default,
-  user: () => require('./user').default,
+  system: () => require('./system').default
 }
 
 Object.keys(modules).forEach((modKey) => {

src/store/system/index.js

@@ -0,0 +1,34 @@
+export default {
+  namespaced: true,
+  state: {
+    cases: [],
+    menus: [],
+    roles: [],
+    user: {}
+  },
+  mutations: {
+    init (state, data) { // 这里的state对应着上面这个state
+      state.cases = data.cases
+      state.menus = data.menus
+      state.roles = data.roles
+      state.user = data.user
+    }
+  },
+  actions: {
+    updateSystemInfo (context) { // 这里的context和我们使用的$store拥有相同的对象和方法
+      this.$ajax(this.$api.system.init.url, {
+        method: this.$api.system.init.method
+      })
+        .then(res => {
+          console.log(res)
+          if (res.code === 400) {
+            this.$router.push({name: 'login'})
+          } else {
+            context.commit('init', res) // 你还可以在这里触发其他的mutations方法
+          }
+        }).catch(msg => {
+
+        })
+    }
+  }
+}

src/store/user/index.js

@@ -1,47 +0,0 @@
-export default {
-  namespaced: true,
-  state: {
-    userLabelList: [{
-      value: '0',
-      label: '系统用户'
-    }, {
-      value: '1',
-      label: '主管'
-    }, {
-      value: '2',
-      label: '销售'
-    }],
-    roleList: [{
-      value: '0',
-      name: '角色0'
-    }, {
-      value: '1',
-      name: '角色1'
-    }, {
-      value: '2',
-      name: '角色2'
-    }]
-  },
-  mutations: {
-    deleteRoleListItem (state, index) { // 这里的state对应着上面这个state
-      this.$ajax(this.$api.test.area.url, {
-        method: this.$api.test.area.method,
-        data: {
-          caseid: 1,
-          id: 2
-        }
-      })
-        .then((res) => {
-          console.log(res)
-        }).catch(msg => {
-          return false
-        })
-      state.roleList.splice(state.roleList.indexOf(index), 1) // 你还可以在这里执行其他的操作改变state
-    }
-  },
-  actions: {
-    upDateRoleList (context, index) { // 这里的context和我们使用的$store拥有相同的对象和方法
-      context.commit('deleteRoleListItem', index) // 你还可以在这里触发其他的mutations方法
-    }
-  }
-}

src/util/ajax.js

@@ -6,7 +6,9 @@ const Axios = axios.create({
   timeout: 60000,
   responseType: 'json',
   withCredentials: true,
-  headers: {}
+  headers: {
+    'Content-Type': 'multipart/form-data'
+  }
 })
 
 Axios.interceptors.request.use((config) => {
@@ -24,16 +26,26 @@ Axios.interceptors.request.use((config) => {
         config.url = config.url.slice(0, config.url.indexOf(':')) + data
       }
     } else {
-      config.url += '?' + data
+      if (data) {
+        config.url += '?' + data
+      }
+    }
+  }
+  let fm = new FormData()
+  for (let k in config.data) {
+    if (Array.isArray(config.data[k])) {
+      fm.append(k, ...config.data[k].map(v => `${k}=${encodeURIComponent(v)}`))
+    } else {
+      fm.append(k, config.data[k])
     }
   }
+  config.data = fm
   return config
 }, (error) => {
   console.log(error)
 })
 
 Axios.interceptors.response.use((res) => {
-  console.log(res)
   if (res.data.code === 200) {
     return res.data.result
   } else {

src/util/api.js

@@ -1,10 +1,16 @@
 const baseUrl = '/api'
 const $api = {
-  test: { // 登陆
+  login: { // 登陆
     signin: {
       method: 'post',
       url: `${baseUrl}/guest/signin`
     }
+  },
+  system: { // 初始化菜单
+    init: {
+      method: 'get',
+      url: `${baseUrl}/common/system/env`
+    }
   }
 }
 export default $api