吉鹏 / gulu-admin

Browse Code »

Commit c40d344e2b8675477869a8da3a7eafcdcc94c913

Authored by Adam 2020-05-07 14:59:05 +0800

1 parent 60fa0be9db

Exists in master

auto commit the code by alias command

Showing 6 changed files with 87 additions and 44 deletions Show diff stats

mock/user.js

Diff comments View file @c40d344

 const tokens = {
   admin: {
     token: 'admin-token'
   },
   assistant: {
     token: 'assistant-token'
   },
   runner: {
     token: 'runner-token'
   },
   shoper: {
     token: 'shoper-token'
   }
 }
 const users = {
   'admin-token': { //管理员
     roles: ['admin'],
     introduction: 'I am a super administrator',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
     name: 'Super Admin'
   },
   'assistant-token': { //管理员助理
     roles: ['assistant'],
     introduction: 'I am a assistant of administrator',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
     name: 'assistant Admin'
   },
   'runner-token': { //运营人员
     roles: ['runner'],
     introduction: 'I am an runner',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
     name: 'Normal runner'
   },
   'shoper-token': { //供应商
     roles: ['shoper'],
     introduction: 'I am an shoper',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
     name: 'Normal shoper'
   }
 }
 export default [{ // user login
     url: '/yp/user/login',
     type: 'post',
     response: config => {
-      console.log('config-------->', config.body);
+      console.log('config-----111--->', config.body);
       const {
         username,
         password
       } = config.body;
       if (username == 'admin' && password == '111111') {
         const token = tokens[username];
         if (!token) {
           return {
             code: 60204,
             message: 'Account and password are incorrect.'
           }
         } else {
           return {
             code: 20000,
             data: token
           }
         }
       } else {
+        console.log('passwordpasswordpassword', username, password);
         return {
           code: 60204,
-          message: 'Account and password are incorrect.'
+          message: 'Account and password are incorrect///.'
         }
       }
     }
   },
   // get user info
   {
     url: '/yp/user/info\.*',
     type: 'get',
     response: config => {
       const {
         token
       } = config.query
       const info = users[token]
       // mock error
       if (!info) {
         return {
           code: 50008,
           message: 'Login failed, unable to get user details.'
         }
       }
       return {
         code: 20000,
         data: info
       }
     }
   },
   // user logout
   {
     url: '/yp/user/logout',
     type: 'post',
     response: _ => {
       return {
         code: 20000,
         data: 'success'
       }
     }
   }
 ]

src/api/user.js

Diff comments View file @c40d344

 import request from '@/utils/request'
 // var qs = require('Qs');
 export function login(data) {
   console.log('login.1111...', data)
   return request({
-    // url: '/yp/user/login',
+    url: '/yp/user/login',
-    url: '/yp.user.login.php',
+    // url: '/yp.user.login.php',
     method: 'post',
-    headers: {
+    // headers: {
-      'Content-type': 'application/x-www-form-urlencoded'
+    //   'Content-type': 'application/x-www-form-urlencoded'
-    },
+    // },
     data,
     // responseType: 'text/plain',
     // onDownloadProgress: false,
     // onUploadProgress: true,
     // proxy: {}
   });
 }
 export function getInfo(token) {
   console.log('getInfo....', token)
   return request({
     url: '/yp/user/info',
+    // url: '/yp.user.info.php',
     method: 'get',
     params: {
       token
     }
+    // ,
+    // headers: {
+    //   'Content-type': 'application/x-www-form-urlencoded'
+    // },
   })
 }
 export function list(token) {
   console.log('listUser....', token)
   return request({
     url: '/yp/user/list',
     method: 'get',
     params: {
       token
     }
   })
 }
 export function add(token) {
   console.log('addUser....', token)
   return request({
     url: '/yp/user/add',
-    method: 'get',
+    method: 'post',
     params: {
       token
     }
   })
 }
 export function modi(token) {
   console.log('modiUser....', token)
   return request({
     url: '/yp/user/modi',
-    method: 'get',
+    method: 'post',
     params: {
       token
     }
   })
 }
-export function logout() {
+export function logout(token) {
-  console.log('logout....')
+  console.log('logout....', token)
   return request({
     url: '/yp/user/logout',
-    method: 'post'
+    // url: '/yp.user.logout.php',
+    method: 'post',
   })
 }

src/store/modules/app.js

Diff comments View file @c40d344

 import Cookies from 'js-cookie'
+//state
 const state = {
   sidebar: {
     opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
     withoutAnimation: false
   },
   device: 'desktop'
 }
+//mutations
 const mutations = {
   TOGGLE_SIDEBAR: state => {
     state.sidebar.opened = !state.sidebar.opened
     state.sidebar.withoutAnimation = false
     if (state.sidebar.opened) {
       Cookies.set('sidebarStatus', 1)
     } else {
       Cookies.set('sidebarStatus', 0)
     }
   },
   CLOSE_SIDEBAR: (state, withoutAnimation) => {
     Cookies.set('sidebarStatus', 0)
     state.sidebar.opened = false
     state.sidebar.withoutAnimation = withoutAnimation
   },
   TOGGLE_DEVICE: (state, device) => {
     state.device = device
   }
 }
+//actions
 const actions = {
   toggleSideBar({ commit }) {
     commit('TOGGLE_SIDEBAR')
   },
   closeSideBar({ commit }, { withoutAnimation }) {
     commit('CLOSE_SIDEBAR', withoutAnimation)
   },
   toggleDevice({ commit }, device) {
     commit('TOGGLE_DEVICE', device)
   }
 }
 export default {
   namespaced: true,
   state,
   mutations,
   actions
 }

src/store/modules/user.js

Diff comments View file @c40d344

-import { login, logout, getInfo } from '@/api/user'
+import {
-import { getToken, setToken, removeToken } from '@/utils/auth'
+  login,
-import { resetRouter } from '@/router'
+  logout,
+  getInfo
+} from '@/api/user'
+import {
+  getToken,
+  setToken,
+  removeToken
+} from '@/utils/auth'
+import {
+  resetRouter
+} from '@/router'
 const getDefaultState = () => {
   return {
     token: getToken(),
     name: '',
     avatar: '',
     roles: []
   }
 }
 const state = getDefaultState()
 const mutations = {
   RESET_STATE: (state) => {
     Object.assign(state, getDefaultState())
   },
   SET_TOKEN: (state, token) => {
     state.token = token
   },
   SET_NAME: (state, name) => {
     state.name = name
   },
   SET_AVATAR: (state, avatar) => {
     state.avatar = avatar
   },
   SET_ROLES: (state, roles) => {
     state.roles = roles
   }
 }
 const actions = {
   // user login
-  login({ commit }, userInfo) {
+  login({
-    const { username, password } = userInfo
+    commit
+  }, userInfo) {
+    const {
+      username,
+      password
+    } = userInfo
     return new Promise((resolve, reject) => {
-      login({ username: username.trim(), password: password }).then(response => {
+      login({
-        const { data } = response
+        username: username.trim(),
-        console.log('action------->login------->处理', data);
+        password: password
-        commit('SET_TOKEN', data.token)
+      }).then(response => {
-        setToken(data.token)
+        console.log('返回的数据-- step 3------>', response);
+        // const { token, name, id, password } = response
+        const {token,name} = response
+        console.log('返回的数据-- step 4------>', response);
+        commit('SET_TOKEN', token)
+        setToken(token)
         resolve()
       }).catch(error => {
+        console.log('返回的数据-- step 4.1------>', error);
         reject(error)
       })
     })
   },
   // get user info
-  getInfo({ commit, state }) {
+  getInfo({
+    commit,
+    state
+  }) {
     return new Promise((resolve, reject) => {
       getInfo(state.token).then(response => {
-        const { data } = response
+        console.log('返回的数据-- step 5------>', state);
-        if (!data) {
+        console.log('返回的数据-- step 5.1------>', response);
+        const {avatar,id,name,password,roles,token} = response
+        if (!roles) {
           reject('Verification failed, please Login again.')
         }
-        const { roles, name, avatar } = data
+        console.error('返回的数据-- step 5.2------>', response);
         // roles must be a non-empty array
         if (!roles || roles.length <= 0) {
           reject('getInfo: roles must be a non-null array!')
         }
         commit('SET_ROLES', roles)
         commit('SET_NAME', name)
         commit('SET_AVATAR', avatar)
-        resolve(data)
+        resolve(response)
       }).catch(error => {
+        console.log('返回的数据-- step 5.3------>', error);
         reject(error)
       })
     })
   },
   // user logout
-  logout({ commit, state }) {
+  logout({
+    commit,
+    state
+  }) {
     return new Promise((resolve, reject) => {
       logout(state.token).then(() => {
         removeToken() // must remove  token  first
         resetRouter()
         commit('RESET_STATE')
         resolve()
       }).catch(error => {
         reject(error)
       })
     })
   },
   // remove token
-  resetToken({ commit }) {
+  resetToken({
+    commit
+  }) {
     return new Promise(resolve => {
       removeToken() // must remove  token  first
       commit('RESET_STATE')
       resolve()
     })
   }
 }
 export default {
   namespaced: true,
   state,
   mutations,
   actions
 }

src/utils/request.js

Diff comments View file @c40d344

 import axios from 'axios'
 import {
   MessageBox,
   Message
 } from 'element-ui'
 import store from '@/store'
 import {
   getToken
 } from '@/utils/auth'
 // create an axios instance
 // 创建axios实例
 const service = axios.create({
   // baseURL: '', // url = base url + request url
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
   timeout: 5000, // request timeout
-  headers: {
+  // headers: {
-    'Content-Type': 'application/x-www-form-urlencoded'
+  //   'Content-Type': 'application/x-www-form-urlencoded'
-  }
+  // }
 })
 // request interceptor
 // request拦截器
 service.interceptors.request.use(
   config => {
     // do something before request is sent
     // console.log('do something before request is sent')
     if (store.getters.token) {
       // console.log('[X-Token] is a custom headers key')
       // let each request carry token
       // ['X-Token'] is a custom headers key
       // please modify it according to the actual situation
       config.headers['X-Token'] = getToken();
-      config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
+      // config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
       // var token = getToken()
       // Object.assign(config.headers, { 'token': token })
     }
     return config
   },
   error => {
     // console.log('do something with request error')
     // do something with request error
-    console.error(error) // for debug
+    console.error('出现错误。在use里。======>', error) // for debug
     return Promise.reject(error)
   }
 )
 // response interceptor
 // respone拦截器
 service.interceptors.response.use(
   /**
    * If you want to get http information such as headers or status
    * Please return  response => response
    */
   /**
    * Determine the request status by custom code
    * Here is just an example
    * You can also judge the status by HTTP Status Code
    */
   response => {
     const res = response.data
-    console.log('返回的数据-------->', res);
+    console.log('返回的数据-- step 1------>', res);
     /**
      * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
      * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
      */
     // console.log('if the custom code is not 20000, it is judged as an error.')
     if (res.code !== 20000) {
       Message({
         message: res.message || 'Error',
         type: 'error',
         duration: 5 * 1000
       })
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
         // to re-login
         // MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
         MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
           // confirmButtonText: 'Re-Login',
           confirmButtonText: '重新登录',
           // cancelButtonText: 'Cancel',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
           store.dispatch('user/resetToken').then(() => {
             location.reload() // 为了重新实例化vue-router对象 避免bug
           })
         })
       }
       return Promise.reject(new Error(res.message || 'Error'))
     } else {
       // const token = res.data.token;
-      console.log('进入20000号判断-------->', res);
+      console.log('进入20000号判断- step 2------->', res.data);
-      return res;
+      const data = res.data;
+      return data;
     }
   },
   error => {
-    console.error('===============发生错误！！！！！===============' + error) // for debug
+    console.error('===============发生错误！！！！！===============' + error.message); // for debug
-    Message({
+    // Message({
-      message: error.message,
+    //   message: error.message,
-      type: 'error',
+    //   type: 'error',
-      duration: 5 * 1000
+    //   duration: 5 * 1000
-    })
+    // })
     return Promise.reject(error)
   }
 )
 export default service

vue.config.js

Diff comments View file @c40d344

 'use strict'
 const path = require('path')
 const defaultSettings = require('./src/settings.js')
 function resolve(dir) {
   return path.join(__dirname, dir)
 }
 const name = defaultSettings.title || 'vue Admin Template' // page title
 // If your port is set to 80,
 // use administrator privileges to execute the command line.
 // For example, Mac: sudo npm run
 // You can change the port by the following methods:
 // port = 9528 npm run dev OR npm run dev --port = 9528
 const port = process.env.port || process.env.npm_config_port || 9528 // dev port
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
   /**
    * You will need to set publicPath if you plan to deploy your site under a sub path,
    * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
    * then publicPath should be set to "/bar/".
    * In most cases please use '/' !!!
    * Detail: https://cli.vuejs.org/config/#publicpath
    */
   publicPath: '/',
   outputDir: 'dist',
   assetsDir: 'static',
   lintOnSave: process.env.NODE_ENV === 'development',
   productionSourceMap: false,
   devServer: {
     port: port,
     open: true,
     overlay: {
       warnings: false,
       errors: true
     },
+    //线下API测试时，可以去掉这个Mock数据。
     before: require('./mock/mock-server.js')
   },
   configureWebpack: {
     // provide the app's title in webpack's name field, so that
     // it can be accessed in index.html to inject the correct title.
     name: name,
     resolve: {
       alias: {
         '@': resolve('src')
       }
     }
   },
   chainWebpack(config) {
     config.plugins.delete('preload') // TODO: need test
     config.plugins.delete('prefetch') // TODO: need test
     // set svg-sprite-loader
     config.module
       .rule('svg')
       .exclude.add(resolve('src/icons'))
       .end()
     config.module
       .rule('icons')
       .test(/\.svg$/)
       .include.add(resolve('src/icons'))
       .end()
       .use('svg-sprite-loader')
       .loader('svg-sprite-loader')
       .options({
         symbolId: 'icon-[name]'
       })
       .end()
     // set preserveWhitespace
     config.module
       .rule('vue')
       .use('vue-loader')
       .loader('vue-loader')
       .tap(options => {
         options.compilerOptions.preserveWhitespace = true
         return options
       })
       .end()
     config
       // https://webpack.js.org/configuration/devtool/#development
       .when(process.env.NODE_ENV === 'development',
         config => config.devtool('cheap-source-map')
       )
     config
       .when(process.env.NODE_ENV !== 'development',
         config => {
           config
             .plugin('ScriptExtHtmlWebpackPlugin')
             .after('html')
             .use('script-ext-html-webpack-plugin', [{
               // `runtime` must same as runtimeChunk name. default is `runtime`
               inline: /runtime\..*\.js$/
             }])
             .end()
           config
             .optimization.splitChunks({
               chunks: 'all',
               cacheGroups: {
                 libs: {
                   name: 'chunk-libs',
                   test: /[\\/]node_modules[\\/]/,
                   priority: 10,
                   chunks: 'initial' // only package third parties that are initially dependent
                 },
                 elementUI: {
                   name: 'chunk-elementUI', // split elementUI into a single package
                   priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                   test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
                 },
                 commons: {
                   name: 'chunk-commons',
                   test: resolve('src/components'), // can customize your rules
                   minChunks: 3, //  minimum common number
                   priority: 5,
                   reuseExistingChunk: true
                 }
               }
             })
           config.optimization.runtimeChunk('single')
         }
       )
   }
 }