• thinkphp+vue+antpro前后端权限管理系统


    有位网友上传的完整理系统,Thinkphp6.0-Antd-vue前后端权限管理系统

    开发环境安装部署如下:

    服务端

    git clone https://gitee.com/ShiXingXinYa/Thinkphp6.0-Antd-vue.git
    composer install
    
    • 1
    • 2

    安装php>7.4
    安装redis,PHP.INI开启redis
    安装mysql,建库,导入/antsign.sql
    配置database.php

    php think run
    跑起在8000端口,可以直接访问,但发布的前端好像有点问题

    客户端 antdpro3.02

    git clone https://gitee.com/ShiXingXinYa/ant-design-pro-vue-3.0.2.git
    yarn install
    配置vue.config.js的devproxy

      devServer: {
        // development server port 8000
        port: 8002,
        // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
        proxy: {
          '/api': {
            target: 'http://127.0.0.1:8000',
            ws: false,
            changeOrigin: true
          }
        }
      },
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    yarn run serve
    
    • 1

    服务器发布

    测试成功,上传服务器,分别建立静态与动态站点,对API进行NGIX反向代理,apache开启伪静态
    在antdpro/src/public中添加.htaccess,以便每次编译都能开启伪静态

    .c>
      RewriteEngine On    #重写引擎
      RewriteBase /
      RewriteRule ^index\.html$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule . /index.html [L]
    </IfModule> 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    参见https://editor.csdn.net/md/?articleId=126245219

    antdpro3.02升级到3.03

    • main.js
    import { TreeSelect, Tree } from 'ant-design-vue' //添加此行,在权限设置中用
    
    // mock
    // WARNING: `mockjs` NOT SUPPORT `IE` PLEASE DO NOT USE IN `production` ENV.
    // import './mock'           //此行改动,注销MOCK
    
    import bootstrap from './core/bootstrap'
    import './core/lazy_use' // use lazy load components
    import './permission' // permission control
    import './utils/filter' // global filter
    import './global.less' // global style
    
    Vue.config.productionTip = false
    Vue.use(TreeSelect)  //添加此行
    Vue.use(Tree)        //添加此行
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • api/login.js,替换API列表
    const userApi = {
      Login: '/auth/login',
      Logout: '/auth/logout',
      ForgePassword: '/auth/forge-password',
      Register: '/auth/register',
      twoStepCode: '/auth/2step-code',
      SendSms: '/account/sms',
      SendSmsErr: '/account/sms_err',
      // get my info
      UserInfo: '/user/info',
      UserMenu: '/user/nav'
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 改src\router\generator-routers.js,增加view页面:
      // 角色管理
      Rules: () => import('@/views/system/rules/index'),
      Roles: () => import('@/views/system/roles/index'),
      // psy
      PsyManager: () => import('@/views/psy/typeManager/index'),
      PsyType: () => import('@/views/psy/typeManager/index'),
     
      QuestionManager: () => import('@/views/psy/questionManager/index'),
      //个人设置
      BaseSettings: () => import('@/views/account/settings/BaseSetting'),
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 复制文件:
    api/psyManager.js,system.js
    src\views\account\settings\BaseSetting.vue
    src\views\list\modules\QuestionForm.vue    RulesForm.vue
    src\views\system\*
    src\views\psy\*
    
    • 1
    • 2
    • 3
    • 4
    • 5
  • 相关阅读:
    macos上安装配置emsdk的问题
    Maven
    java+ssm+mysql电梯管理系统
    还没弄明白微服务数据架构事务管理+ACID+一致性+CAP+BASE理论吗,看完彻底解决疑惑
    Vue | Vue.js Composition API
    Git概述
    HTML+CSS+JS宠物商城网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
    Echarts 实现将X轴放在图表顶部并且自动播放展示提示信息内容
    单身狗——1
    OpenCV3-Python(7)模板匹配和霍夫检测
  • 原文地址:https://blog.csdn.net/kindmb/article/details/126397234