# panjiachen-manage-basic-version

**Repository Path**: zhen-zhang/panjiachen-manage-basic-version

## Basic Information

- **Project Name**: panjiachen-manage-basic-version
- **Description**: panjiachen管理后台基础版
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-14
- **Last Updated**: 2022-01-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### clone 项目

git clone panjiachen-manage-basic-version

then `npm i`

`npm run dev`启动项目

### SPU和SKU区别

SPU

Standard Product Unit 标准化产品单元(比如苹果手机, 小米手机, 华为手机)

SKU

Stock Keeping Unit 库存量单位(比如手机的内存大小, 尺寸, 颜色)

### 控制侧边栏左上角Logo和标题和面包屑固定
src/settings.js
```
module.exports = {

  title: 'asdfs', // 浏览器标签标题

  /**
   * @type {boolean} true | false
   * @description Whether fix the header
   */
  fixedHeader: false,// 页面向上滚动时,面包屑导航是否固定

  /**
   * @type {boolean} true | false
   * @description Whether show the logo in sidebar
   */
  sidebarLogo: false // 左上角logo及文字是否显示
}
```
### 关闭eslint对*.vue文件和配置文件的检查
根目录下的.eslintignore文件
```
build/*.js
src/assets
public
dist
// 新增
*.vue
vue.config.js
```

### 根目录新增.prettierrc文件约束js单引号和分号结尾
.prettierrc文件内容
```
{
  "singleQuote": false,
  "semi": false
}
```
### 设置登录页面中的表单标题
src/views/login/index.vue
```html
<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">

      <div class="title-container">
        <!--登录页面表单的的标题-->
        <h3 class="title">欢迎您登录</h3>
      </div>
```
### 为登录页面设置背景图
src/views/login/index.vue
```
<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg:#283443;
$light_gray:#fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
    /*  在此地方新增两个css属性,就可以设置背景图了  */
    background-image: url("../../assets/bg.jpg");
    background-size: cover;
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;
```

### 文件目录分析
```
/build
打包后的目录

/mock
模拟数据的目录

/public
静态资源目录

/src
开发目录

/tests
测试用的

/.editorconfig
编辑器自带文件

/.env....
不同环境下起作用的配置文件

/.eslintrc.js
eslint环境配置
  env: {
    browser: true,// 支持浏览器环境
    node: true,// 支持node环境
    es6: true,// 支持es6环境
  },

/babel.config.js
module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
      'plugins': ['dynamic-import-node'] // 动态引入
    }
  }
}

/postcss.config.js
css前缀兼容性问题相关

/vue.config.js
const name = defaultSettings.title || 'vue Admin Template' // page title,页面左上角标题,可以更改
```

### iconfont图标与svg图标区别
svg很好, 但是兼容性有问题,(微信小程序可以使用的, 但不能直接引入svg后缀图标, 否则不显示)
在iconfont的symbol分类里写的就是svg的使用方法(引入iconfont.js)

### 更改页面标题(死数据)
通过全局搜索, 找出我们要修改的内容;(很实用)

### 从入口文件入手分析views与router关系
@/main.js中,引入
App.vue
router.js
```
import App from './App' // 引入主组件

import router from './router' // 引入路由组件
```
@/App.vue中,只有一个`<router-view></router-view>`,当浏览器地址栏的路径与router.js里的某个路由路径匹配时,
就会显示对应的路由对象里的template
```
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
```
@/router.js中
```js
import Vue from 'vue' // 引入vue
import Router from 'vue-router' // 引入vueRouter

Vue.use(Router) // use一下

/* Layout */
import Layout from '@/layout' // 引入布局组件,就是对应界面侧边栏,导航栏(面包屑),主体界面三个部分的一个视图

/**
 * Note: sub-menu only appear when route children.length >= 1
  ==子菜单仅仅在子路由的长度>=1的时候会出现, 也就是说有子路由就会有子菜单
 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
  ==详细见 https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 *
 * hidden: true                   if set true, item will not show in the sidebar(default is false)
  ==hidden: true                   如果设置为true,这一选项将不会显示在侧边栏中
 * alwaysShow: true               if set true, will always show the root menu
 *                                if not set alwaysShow, when item has more than one children route,
 *                                it will becomes nested mode, otherwise not show the root menu
  ==alwaysShow: true              如果设置为true, 将总会显示根级菜单
                                  如果设置为false, 当这项有超过一个(多个)子路由的时候, 将会变成嵌套模式;
                                                   当这项只有一个子路由, 根级菜单将不会显示, 而显示子路由
 * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
  ==redirect: noRedirect          如果设置noRedirect将不会进行重定向在面包屑导航中
 * name:'router-name'             the name is used by <keep-alive> (must set!!!)
  ==用于缓存路由,必须
 * meta : {
    roles: ['admin','editor']    control the page roles (you can set multiple roles)
  ==控制页面角色(你可以设置多个角色)
    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
  ==设置侧边栏和面包屑中的名字
    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
  ==侧边栏中的突变
    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
  ==设置为true将会在面包屑中隐藏
    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
  ==设置一个路由路径, 当里点击某个选项时, 会去高亮路径对应的选项(子菜单);(不设置默认点哪项高亮哪项)
  }
 */

/**
 * constantRoutes
  ==常量路由
 * a base page that does not have permission requirements
  ==一个基本的页面, 不包含权限相关(谁都可以访问)
 * all roles can be accessed
  ==所有角色都可以访问
 */
// 常量路由
export const constantRoutes = [
  {
    path: '/login',// 匹配url路径
    component: () => import('@/views/login/index'),// 显示视图
    hidden: true // 隐藏, 不显示在侧边中
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/', // 匹配url路径
    component: Layout,// 显示视图
    redirect: '/dashboard',// 重定向
    children: [{
      path: 'dashboard', // 子路由
      name: 'Dashboard', // 命名
      component: () => import('@/views/dashboard/index'), // 显示视图
      meta: { title: 'Dashboard', icon: 'dashboard' } // 侧边栏标题, 图标配置
    }]
  },
  // 以下皆类似
  {
    path: '/example',
    component: Layout,
    redirect: '/example/table',
    name: 'Example',
    meta: { title: 'Example', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'table',
        name: 'Table',
        component: () => import('@/views/table/index'),
        meta: { title: 'Table', icon: 'table' }
      },
      {
        path: 'tree',
        name: 'Tree',
        component: () => import('@/views/tree/index'),
        meta: { title: 'Tree', icon: 'tree' }
      }
    ]
  },

  {
    path: '/form',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'Form',
        component: () => import('@/views/form/index'),
        meta: { title: 'Form', icon: 'form' }
      }
    ]
  },

  {
    path: '/nested',
    component: Layout,
    redirect: '/nested/menu1',
    name: 'Nested',
    meta: {
      title: 'Nested',
      icon: 'nested'
    },
    alwaysShow: true ,
    children: [
      {
        path: 'menu1',
        component: () => import('@/views/nested/menu1/index'), // Parent router-view
        name: 'Menu1',
        meta: { title: 'Menu1' },
        children: [
          {
            path: 'menu1-1',
            component: () => import('@/views/nested/menu1/menu1-1'),
            name: 'Menu1-1',
            meta: { title: 'Menu1-1' }
          },
          {
            path: 'menu1-2',
            component: () => import('@/views/nested/menu1/menu1-2'),
            name: 'Menu1-2',
            meta: { title: 'Menu1-2' },
            children: [
              {
                path: 'menu1-2-1',
                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
                name: 'Menu1-2-1',
                meta: { title: 'Menu1-2-1' }
              },
              {
                path: 'menu1-2-2',
                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
                name: 'Menu1-2-2',
                meta: { title: 'Menu1-2-2' }
              }
            ]
          },
          {
            path: 'menu1-3',
            component: () => import('@/views/nested/menu1/menu1-3'),
            name: 'Menu1-3',
            meta: { title: 'Menu1-3' }
          }
        ]
      },
      {
        path: 'menu2',
        component: () => import('@/views/nested/menu2/index'),
        name: 'Menu2',
        meta: { title: 'menu2' }
      }
    ]
  },

  {
    path: 'external-link', // 这里因为没有设置alwaysShow, 所以当只有一个子路由时, 显示的侧边栏项是子路由
    component: Layout,
    children: [
      {
        path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
        meta: { title: 'External Link', icon: 'link' }
      }
    ]
  },

  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

// 定义一个函数, 函数体执行new Router, 并进行打开新页面滚动的配置, 路由为常量路由
const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

// 执行上面的函数, 返回一个路由对象
const router = createRouter()

// 导出一个函数, 体内的matcher语法不懂
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

// 导出全是常量路由的路由对象
export default router

```

### 删除项目的示例路由和视图
现在的router/index.js中的constantRoutes(对应的views/下面的视图也删掉)
然后@/api/table.js也可以删了(示例视图用的)
```js
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',

    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },
  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]
```

### 表单验证及登录流程的分析
1.src/viewes/login/index.vue中填写表单
```
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
 <el-form-item prop="username">    
    ...
rules是验证规则,只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
loginRules: {
    username: [{ required: true, trigger: 'blur', validator: validateUsername }],
    password: [{ required: true, trigger: 'blur', validator: validatePassword }]
  },

```
这里使用了自定义验证函数
```js
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('Please enter the correct user name'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('The password can not be less than 6 digits'))
      } else {
        callback()
      }
    }
```
其中validUsername是引入的函数;只有这些用户名是注册了的
```js
export function validUsername(str) {
  const valid_map = ['admin', 'editor', 'lukecheng']
  return valid_map.indexOf(str.trim()) >= 0
}
```
然后点击登录按钮,触发函数;

会先对表单进行验证,若验证通过:

派发仓库中的user/login的action,并携带参数{username,password};

如果成功,路由就会跳转到首页;

但这中间发生了一些事...........:


```js
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
```
就是这些:

仓库中的loginAction.

先把姓名,密码解构出来;

然后在返回的promise里面调用login方法;

请求方法login单独放在了src/api/user.js里面
```
// src/store/modules/user.js
const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  }

// src/spi/user.js
import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/vue-admin-template/user/login',
    method: 'post',
    data
  })
}

```
然后发送login登录请求

我们这里使用了mock模拟接口,模拟登录接口对象如下:
```
  // user login
  {
    url: '/vue-admin-template/user/login',
    type: 'post',
    response: config => {
      // config请求携带的请求体数据
      const { username } = config.body
      const token = tokens[username]

      // mock error
      if (!token) {
        return {
          code: 60204,
          message: 'Account and password are incorrect.'
        }
      }

      return {
        code: 20000,
        data: token
      }
    }
  },
```
在模拟接口的user.js里,写着假token,和假用户信息来模拟服务器
```js
const tokens = {
  admin: {
    token: 'admin-token'
  },
  editor: {
    token: 'editor-token'
  },
  // 增加
  lukecheng: {
    token: 'lukecheng-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'
  },
  'editor-token': {
    roles: ['editor'],
    introduction: 'I am an editor',
    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
    name: 'Normal Editor'
  },
  'lukecheng-token': {
    roles: ['lukecheng'],
    introduction: '我是卢柯承,既是姓名,又是角色名',
    avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/HAlshNiaaYicic9nbVc92DRtg7SpP4AzFicjGN3B4rTXNsYWWPiaIsKpneBBJhsBytoJo99EHB7icI9aJbMO4PGa8n2A/132',
    name: 'SSSSuper Admin'
  }
}
```
假设在模拟的服务器中用户名也正确的话,就返回一个对象
```js
{
    code: 20000,
    data: token
  }
```
在axios的响应拦截器中,是直接返回res.data;因为返回的promise把object类型的数据放在了data里;

拦截器中还会对返回的code进行判断,比如50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;

然后我们的请求返回的数据就回来了;

然后我们把返回的token进行一个保存

这里把token保存到仓库,有保存到cookie中,不是很明白
```js
        // 保存到仓库中
        commit('SET_TOKEN', data.token)
        // 保存到cookie中,使得本地也有过期时间
        setToken(data.token)

        // src/utils/auth.js 认证.js
        import Cookies from 'js-cookie'
        
        const TokenKey = 'vue_admin_template_token'
        
        export function getToken() {
          return Cookies.get(TokenKey)
        }
        
        export function setToken(token) {
          return Cookies.set(TokenKey, token)
        }
        
        export function removeToken() {
          return Cookies.remove(TokenKey)
        }
```

login的action只是起到发起login请求,将返回的token进行保存的作用;
最后resolve()将promise的状态改为成功
```js
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },
```

最后在login.vue里,登录成功后跳转到首页
```js
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
```
然后每次跳转路由,都有路由拦截器;
src/permission.js
```js
router.beforeEach(async(to, from, next) => {
  // start progress bar
  NProgress.start()

  // set page title
  document.title = getPageTitle(to.meta.title)

  // determine whether the user has logged in
  const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done()
    } else {
      const hasGetUserInfo = store.getters.name
      if (hasGetUserInfo) {
        next()
      } else {
        try {
          // get user info
          await store.dispatch('user/getInfo')

          next()
        } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* has no token*/

    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})
```

### 请求前缀
src/utils/request.js
中的baseUrl;

### 自定义token名 
src/utils/request.js
```js
config.headers["token"] = getToken()

```

### 增加自己返回的code判断 
src/utils/request.js
```js
// if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000 && res.code !== 200) {
```
我想到一个问题,答案是什么呢?
什么样的code能满足这样的条件??
所有数吧...
```js
// if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000 || res.code !== 200) {
      console.log(res.code)
    }
```

### 禁用mock数据,处理跨域问题 
vue.config.js
凡是一/dev-api开头的替换为target,开启跨域,并且要讲/dev-api去掉;

这里要特别注意一个问题,请求时如果跨域了请求的地址是看不见变化的.

但实际上是变化了,不要以为没看见变化就以为没有配置成功!!! 

其实是可以请求的,只不过是你的用户名和密码错了
```js
    // before: require("./mock/mock-server.js") // 禁用mock数据
    proxy: {
      "/dev-api": {
        // 匹配所有以 '/dev-api'开头的请求路径
        target: "http://39.98.123.211",
        changeOrigin: true, // 支持跨域
        pathRewrite: {
          // 重写路径: 去掉路径中开头的'/dev-api'
          "^/dev-api": ""
        }
      }
    }
```

### 修改登录相关请求为线上接口 
src/api/user.js
```js
import request from "@/utils/request"

export function login(data) {
  return request({
    url: "/admin/acl/index/login",
    method: "post",
    data
  })
}

export function getInfo(token) {
  return request({
    url: "/admin/acl/index/info",
    method: "get",
    params: { token }
  })
}

export function logout() {
  return request({
    url: "/admin/acl/index/logout",
    method: "post"
  })
}
```

### webstorm修改router的path
还会自动修改views下的页面文件名..nb

### 创建模块
在views下新建视图；
在router里注册路由；

vue-router和uniapp的pages。json区别？？