Skip to content

XBoot前端开发配置及部署说明【必读】

Jump to bottom
Exrick edited this page Mar 19, 2019 · 14 revisions

开发相关

由于权限菜单按钮设计 仅支持2级菜单 一级菜单下没子菜单将不会显示；为避免多次点击，且满足直接点击一级菜单跳转需求，一级菜单下只有1个二级菜单时直接显示该二级菜单，并非BUG

  • 如何实现三级菜单？

    • 请使用Tab组件，详见系统监控-操作日志管理页面，将每个tab内容封装成单独组件即可，用户使用体验更佳

  • UI组件使用详见iView官网文档

  • Vue Cli 3.0 配置文件在 vue.config.js中，官方中文配置文档

  • Tag标签页面缓存说明

    • 由于已使用已使用keep-alive组件（Main.vue中），当且仅当组件name名与菜单路由中配置的路由名一致时页面缓存生效
    • 不想要缓存的页面还可以在/src/store/modules/app.js中的dontCache配置，将页面的name属性值配置进数组即可

  • api接口建议统一放在src/api文件夹下统一引用方便管理，也可全局使用封装挂载好的请求方法，如this.getRequest、this.postRequest等

  • 菜单页面动态添加说明

    • 系统菜单中动态添加配置，请参考已有配置。注：一级菜单组件只能填Main，二级菜单页面Vue组件请放置views目录中开发。

    WX20190120-212902@2x.png

    • 配置后记得在角色管理中给用户配置菜单权限（分配后菜单实时刷新显示，无需刷新页面）

    WX20190120-213049@2x.png

  • 权限按钮或其他内容显示控制自定义标签：v-has，使用示例：

    <Button v-has="'add'">添加按钮</Button>
<Button v-has="'edit'">编辑按钮</Button>
<Button v-has="'delete'">删除按钮</Button>
<div v-has="'view'">需要view权限的界面内容</div>
    • js中权限判断示例
    if(this.$route.meta.permTypes.includes("edit")){
    return ... ...
}else{
    return ... ...
}
    • 需与菜单中页面下配置的权限按钮类型匹配（权限按钮类型可在数据字典中配置） QQ20190223-134858@2x.png
    • 根据当前登录的用户拥有的角色全局控制权限显示，直接使用即可，自定义标签：v-hasRole，使用示例：
    <Button v-has="'ROLE_ADMIN'">添加按钮</Button>
    • js中判断使用
    if(this.getStore('roles').includes("ROLE_ADMIN")){
    ... ...
}

  • 部署Nginx完整配置示例参考

    server {
        listen       80;
        server_name  localhost;

        location / {
            if (!-e $request_filename) {
                rewrite ^(.*)$ /index.html?s=$1 last;
                break;
            }
            root   xboot;
            index  index.html;
        }

        location /xboot/ {
            proxy_pass http://127.0.0.1:8888;
        }
        location /swagger-ui.html {
            proxy_pass http://127.0.0.1:8888;
        }
        location /swagger-resources {
            proxy_pass http://127.0.0.1:8888;
        }
        location /swagger {
            proxy_pass http://127.0.0.1:8888;
        }
        location /webjars {
            proxy_pass http://127.0.0.1:8888;
        }
        location /v2 {
            proxy_pass http://127.0.0.1:8888;
        }
        location /druid {
            proxy_pass http://127.0.0.1:8888;
        }

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        client_max_body_size 5m;

        error_page   500 502 503 504 404  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

部署优化

  • 将打包生成的较大的js文件放置CDN或着带宽较快的服务器上或者第三方平台（如七牛云），更换相应index.html中js链接
Clone this wiki locally