thinkphp5.1-vue-element-admin

介绍

基于thinkphp5.1、vue、element做的一个后台管理系统，默认打包出的是异步加载

还有一点需要注意的是，如果使用本项目的ThinkPHP5.1进行接口开发，值得注意的一点是，我已经封装好接管异常的处理了，只需要创建异常类文件继承封装的异常就可以了。异常目录 app/lib/excption 目录，这个异常类分两种，一种是客户端异常(BaseException),一种服务器异常（不需要管，接管的异常会自动处理），当需要在不同功能接口返回异常时，只需要创建对应的异常类来继承客户端异常(即 BaseException)即可。

架构

架构说明

• Preview预览
• Element官网
• ThinkPHP官网
• ThinkPHP5.1手册
• Vue官网
• Webpack官网
• Easy Mock接口API

目录结构

ThinkPHP的目录结构就不用多说了，要说的是结合Vue后的目录

     public目录  
     ├─preview          预览目录(安装之后直接删除)  
     ├─static           应用目录  
     │  ├─admin             后台目录（本后台管理系统主目录）  
     │  ├─home              前台目录  
     │  ├─src               模块目录  
     │  │  ├─api               接口请求目录  
     │  │  ├─assets            静态资源目录
     │  │  ├─common            公共目录(如：公共函数,可直接修改，不影响打包后的文件)    
     │  │  ├─components        组件目录  
     │  │  ├─config            配置目录  
     │  │  ├─lib               核心库目录  
     │  │  ├─router            路由目录  
     │  │  ├─store             vuex目录  
     │  │  ├─views             视图目录  
     │  │  ├─App.vue           根组件  
     │  │  ├─index.html        主页    
     │  │  ├─main.js           入口文件    
     │  │  └─ ...              
     │

Getting started

# clone the project
git clone https://gitee.com/chichengyu/thinkphp5.1-vue-element-admin.git

# install dependency
composer install  

# install dependency
npm install

# test development build
npm run build:dev

# build
npm run build

# watch
npm run watch

Build

# Dev server
npm run dev  

# test development build
npm run build:dev

# build  
npm run build

# watch
npm run watch

安装异常

可能会出现的异常情况

• 路由报错
  Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}，这是可能路由安装的是报错的版本，解决方法：

  npm uninstall -S vue-router@3.0

  重新安装一个稳定的版本，或者，在 main.js中，加上如下代码：

  import VueRouter from 'vue-router'
  
  // 解决路由报错 Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}
  const originalPush = VueRouter.prototype.push;
  VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
  };

• 该异常可能会出现

  npm ERR! path C:\Users\admin\Desktop\abc\node_modules\less
  npm ERR! code EISGIT
  npm ERR! git C:\Users\admin\Desktop\abc\node_modules\less: Appears to be a git repo or submodule.
  npm ERR! git     C:\Users\admin\Desktop\abc\node_modules\less
  npm ERR! git Refusing to remove it. Update manually,
  npm ERR! git or move it out of the way first.
  
  npm ERR! A complete log of this run can be found in:
  npm ERR!     C:\Users\admin\AppData\Roaming\npm-cache\_logs\2019-08-19T01_12_12_963Z-debug.log

  或

  ‼ Command failed: C:\Users\admin\Desktop\www\element\node_modules\pngquant-bin\vendor\pngquant.exe --version
  ‼ pngquant pre-build test failed                                                                                        i compiling from source
  × Error: pngquant failed to build, make sure that libpng-dev is installed
      at Promise.all.then.arr (C:\Users\admin\Desktop\www\element\node_modules\bin-build\node_modules\execa\index.js:231:11)
      at process._tickCallback (internal/process/next_tick.js:68:7)
  npm WARN thinkphp5.1-vue-element-admin@1.0.0 No repository field.

  去掉 image-webpack-loader在重新进行安装即可。

使用说明

ThinkPHP5.1、Vue、element的使用就不在此多说了，这里要说的是前后分离时的 权限控制，这里介绍两种方法，两种都需要前后配合

• Vue-Router的meta元信息
  在需要验证的路由中加入 meta 属性 meta:{rules:['admin','editor']}，如下：

    {  
        path:'index',  
        name:'adminIndex',  
        meta:{rules:['admin','editor']},// 如此这样  
        component: () => import(/* webpackChunkName: "login" */ '@/views/admin/components/index.vue')  
    }  

  admin、editor表示只有 admin/editor 两个用户组的用户能访问此条路由。
  当用户登陆时返回的用户信息中需要有当前用户所属的用户组（键名：roles）
  如：

   {
        username: 'admin',
        token: ' 5bf4b1a323557c43607406bc',
        roles: ['admin']
   } 

• Vue-Router的name属性
  在需要验证的路由中加入 name 属性，且每个路由的 name 值必须是独一无二的，不能有相同值的，后台需要返回一个以所有路由中 name 值的对象规则，

    {
        "rules": {
            'index': true,
            'adminIndex': true,
            'table': true,
            'form': true,
            'keyboard': true,
            'line': true,
            'icons': true,
            'mix': true,
            'notAuth': false,
            'found': false,
        }
    }

  然后在路由守卫里进行判断筛选出当前登陆用户的菜单动态挂载到路由上。
  这里使用的是 meta 属性进行权限控制的，当然两种各有优劣势

  如果需要粒度更细的权限，如：按钮权限，这里我在 src\router\rules.js这个文件算是一个权限映射文件，只需要填写正确的权限id即可使用

License

MIT