clearticket_ota

node版本

目前16.14.0版的也支持（用dart-sass替换node-sass后，不再有12.22.6 32的限制）

部署说明

部署时切勿删除服务器上的config.js

打包时会忽略config.js,避免被替换

OTA测试环境自动部署

在git-bash里运行下面命令来自动部署到OTA测试环境：

npm run deploy:dev

需要先安装7z命令(npm install -g 7zip)

项目配置

模板配置修改（基于vue init webpack）

/.eslintrc.js

'plugin:vue/strongly-recommended'  // 使用vue官方推荐规则

vscode 自动格式化配置

"eslint.autoFixOnSave": true,
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    { "language": "vue", "autoFix": true }
],
"eslint.options": {
    "plugins": [
    "vue"
    ]
},

/config/index.js

build: {
    ...
    assetsPublicPath: './',   // 打包基于相对路径
    ...
    productionSourceMap: true,  // 关闭sourcemap
}

/config/

各环境下对应api接口地址

运行指令见package.json

文档相关

接口文档

http://192.168.30.150:9988/swagger-ui.html#!/%E7%A5%A8%E7%A7%8D%E8%AE%BE%E7%BD%AE/addTicketTypeUsingPOST

设计稿

https://lanhuapp.com/web/#/item/board?pid=331d4cea-01ed-4686-8973-b33400aff846

产品文档

https://mubu.com/doc/pi4jtipPVp

{"userName":"admin", "password":"123456"}

服务器

192.168.30.150 clear:123456

前端代码：

/home/clear/frontend 访问： http://piaodevjava.cleartv.cn/frontend/ xxx

后端接口访问地址：

http://piaodevjava.cleartv.cn/swagger-ui.html

本项目相关问题及注意事项、经验总结

router-view

在 router-view上加上一个唯一的key，来保证路由切换时都会重新渲染触发钩子

<router-view :key="key"></router-view>

computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
}

自定义事件传递多个参数

如 $emit('custom',arg1,arg2)

则 @custom="func(arguments)"

使用参数

func (args) {
    let [arg1,arg2]=...args
    console.log(arg1,arg2)
}

表格验证

http://www.cnblogs.com/Kummy/p/9470393.html

导航显示权限控制

/src/router/index.js

动态路由部分详见

let routerMap = [
  {
    path: '/ticketSale',
    component: Layout,
    name: '售票管理',
    meta: {title: '售票管理', icon: 'ticketSale'},  // 图标格式为svg,存放目录 `/src/icons/svg`。文件名与`icon`属性相对应
    redirect: 'noredirect',
    alwaysShow: true,   // 为显示美观，必须添加
    children: [
      {
        path: 'retail',
        name: 'Retail',
        component: () => import('@/views/sellManage/retail'), // 页面按模块加载
        meta: {title: '散客售票', permissionName: 'ticket_sale'}  // permissionName对应后台的权限列表
      }
    ]
  }
]

子页面 各权限显示控制

1. 子页面权限会在 src/store/modules/permission.js 的 filterAsyncRouter 方法中对比后台的权限列表进行筛选。

2. 最终结果就是：子路由的 meta对象 会新增一个属性 permissionList 。子页面权限控制就是根据这个属性进行的判断。

3. src/main.js 中混入了全局方法 checkPermission(type)。type为具体的权限类型。

   例如后台获取的权限列表为

   [
   "ticket_setting:list",
   "ticket_setting:add",
   "ticket_setting:edit",
   "ticket_setting:delete",
   "ticket_sale:all"
   ]
   

4. 票种设置页会 自动生成 对应 permissionList : ['add','edit','delete','list']

   售票页面 对应 permissionList : ['all']

   页面权限相关的元素，设置显示或者隐藏：

   列表显示

   <element v-if="checkPermission('list')"></element>
   

   编辑按钮显示

   <element v-if="checkPermission('edit')"></element>
   

G2 图表

https://viserjs.github.io/docs.html#/viser/guide/usage https://antv.alipay.com/zh-cn/g2/3.x/tutorial/index.html

Echarts

http://www.echartsjs.com/index.html https://github.com/ecomfe/vue-echarts

百度图说

http://tushuo.baidu.com/