模版使用说明

使用说明

git clone该模版后,执行npm install 安装所需依赖

环境配置

支持多环境打包配置,配置url位于main.js文件内,支持development\uat\fat\prod四个环境

update:执行 npm run dist 打包所有环境

环境 端口 打包命令 目录 备注
development 5389 npm run development dist-development
uat npm run uat dist-uat
fat npm run fat dist-fat
pro npm run prod dist-pro
dist npm run dist 一次性打包所有环境
登录逻辑说明

用户打开目标网站,程序根据当前localstorage/cookie来判断用户是否登录。
如果未登录,跳转到login页面,用户点击login按钮,前端跳转到后端的某个地址,由后端去实现sso的登录跳转和返回。
返回后拉取用户信息,存储在store/localstorage中,用户成功登录该网站。
登出接口同理。

用户接口返回信息

该接口信息返回分为两块,一块是用户信息,一块是权限信息

    "user": {
      "name": "dounai",
      "email": "dounai@jianshu.com",
      "employee": "dounai",
      "sn": "dounai",
      "department": "dounai",
      "id": 2
    },
    "authority": {
      "风控运营": false,
      "其他模块": true
    }
美化

为保证URL美观,开启history模式。在当前模式下,会导致发布后,刷新当前页面时页面空白,需要后端童鞋nginx配置相关

server {
      location / {
          root /dist/;
          rewrite ^ /index.html break;
      }
  }
一般接口返回

所有接口除5xx以外,status均为200,有错误的话直接更改result的值即可

{
  result: true/false,
  msg: 'result true 为空,false写内容',
  payload: {
    data: [],
    total: 247
  }
}
图表数据返回

饼图:

[
    ["443",110],
    ["8080",29],
    ["28749",23],
    ["995",19]
]

折线图:

[
        {
            "data": [
                [1508924689000,0],
                [1508925557000,0],
                [1508926425000,0],
                [1508927293000,0],
                [1508928161000,0],
                [1508929029000,0],
            ],
            "name": "图例1显示的名称"
        },
        {
            "data": [
                [1508924689000,1],
                [1508925557000,1],
                [1508926425000,1],
                [1508927293000,3],
                [1508928161000,1],
                [1508929029000,1],
            ],
            "name": "图例2显示的名称"
        }
]

区域图:

数据格式和折线图一致,如果平滑过渡用aresapline,否则用area
更新记录

2017-9-12 更新:不同页面可以设置不同模块
2017-10-9 更新:菜单动态配置,根据菜单动态配置来实现层级权限检测和路由权限检测,将常用布局做固定模版
2017-10-10 更新:login\404\500等特殊页面独立
2017-10-11 更新:面包屑配置,主要是根据router里的meta进行设置
2017-10-12 更新:axios封装。可选择vue-resource通过global.httpGet\httpPost\httpDelete\httpPut来发起相关请求,也可以选择axios通过$ajax.get\post\put等来发起相关请求。
2017-10-16 更新:vuex使用。由于vuex的state在刷新时会丢失,所以必须借助于localstorage来进行存储。
2017-10-25 更新:优化登录逻辑和路由权限判断

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,147评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,093评论 25 709
  • 与君初相识,犹如故人归 叛逆学生最爱老师 《人生难免会有伤》、《在爱里活着》、《妈妈做自己,孩子就能做自己》、《最...
    青青田园阅读 164评论 0 0
  • 在android的XML中设置fitsSystemWindows的分析, 网上的文章都说得不太清楚 fitsSys...
    吐痰高手阅读 5,553评论 3 3
  • 感恩节到来了,家长会也来了。这周四我紧张地心跳得很快了。参加完家长会的父母会怎样对待我,还会一个好的心情吗?...
    珊瑚小贝阅读 77评论 0 1