• 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
  • 相关阅读:
    设计模式 10 装饰器模式
    identity4 系列————持久化配置篇[五]
    3万字操作系统常用知识总结
    最全面的Spring教程(五)——文件上传与下载
    Qt/C++音视频开发52-采集本地屏幕桌面的终极设计
    面试官:说说你了解的分布式 ID 生成方案
    软件测试、交付与维护
    el-pagination分页分页设置
    2024能源动力、机械自动化与航天航空技术国际学术会议(ICEPMAT2024)
    微服务平滑迁移上云最佳实践
  • 原文地址:https://blog.csdn.net/kindmb/article/details/126397234