Web Notes

主题

来邦养老前端开发文档 ​

开发环境相关信息 ​

1、开发环境 ​

  • 参考文章https://zhuanlan.zhihu.com/p/654327710
  • 安装nvm nodejs管理工具
    javascript
    # 显示可以安装的所有nodejs版本
nvm list available 
# 安装指定版本的nodejs
nvm install <version> 
# 显示已安装版本列表
nvm list
# 使用指定版本node
nvm use [version]
# 卸载指定版本node
nvm uninstall <version>
  • 安装nrm 镜像管理工具
    javascript
    # 查看镜像列表
nrm ls
# 查看当前使用的镜像
nrm current 
# 添加镜像
nrm add <名称> <远程地址或私服地址>
# 删除镜像
nrm del <名称>
# 切换镜像
nrm use <名称> 
# 测试镜像网络传输速度
nrm test <名称>
# 查看nrm版本号
nrm <-version | -V> 
# 查看nrm相关信息
nrm <-help | -h>
# 打开镜像主页
nrm home <名称> [browser]
# 上传npm包或命令程序
nrm publish [<tarball>|<folder>]
  • 安装vscode 开发工具
  • [vue2] node v18.19.0 npm v10.2.3
  • [vue3] node v12.18.2 npm v6.14.5

2、项目信息 ​

3、其他信息 ​

开发规范 ​

说明：以下规范参照阿里前端开发规范做总结和补充
原文地址：https://www.cnblogs.com/suwanbin/p/13200530.html

1、命名规范 ​

  • 目录、html 和 vue 文件、js 文件、css 样式文件、class 和 id、图片命名， 全部采用小写方式，用中划线做分割，即 kebab-case
  • component 公共组件、方法名、参数名、变量名的文件命名， 采用驼峰命名法，即 kebabCase
  • 单个单词的长度不能大于 7 个字符，若大于 7 个字符需要缩写单词
  • 文件相关固定命名规则
    • 主页面 index.vue
    • 列表 list.vue
    • 新增 add.vue
    • 编辑 edit.vue
    • 详情 detail.vue
    • 新增/编辑 action.vue
  • 方法相关固定命名规则
    • 打开 open()
    • 保存 save()
    • 关闭 close()
    • 显示 show()
    • 新增 addXXX()
    • 删除 deleteXXX()
    • 搜索 search()
    • 加载 load()
    • 事件 xxxChange()、xxxBlur()
  • 变量相关固定命名规则
    • 当前页 page
    • 每页条数 limit
    • 总条数 total
    • 表格加载 tabLoading
    • 按钮加载 btnLoading
    • 表格数据 dataList
    • 日期字符串 startTimeStr、endTimeStr
    • 表单日期时间戳 startT、endT（13 位-毫秒）
    • 表单提交日期时间戳 startTime、endTime（10 位-秒）
    • 表单 form

2、编码规范 ​

  • 样式污染问题，页面中的样式需增加 scoped 属性，或在最外层增加以文件名命名的 class

  • 各项目之间的公共模块在 lonbon-common 的插件中，项目中全局公共的组件和 js 在 common 目录中。涉及业务的公共组件和 js 自行在相应目录创建 common 目录，调用方不可自行修改创建者的代码，需要的功能找创建者扩展

  • 无用代码，如 console 语句、注释掉的代码、废弃的代码及时删除

  • for 循环最多两层，多余的部分需要另写方法进行封装

  • 简单的判断使用三目运算符（仅可使用一级），复杂的逻辑使用 if else

  • 接口调用使用 async 和 await，一个方法中不可包含两个及以上的接口调用

  • 服务端获取到的值不可直接进行格式化赋值，需重新定义变量进行赋值，如时间转换： item.timeStr =this.$transTime(item.time)

  • 提交表单需增加 loading 效果，并在 dialog 的 closed 事件中取消 loading（防止快速点击），若非弹框情况，在接口返回结果后取消 loading

  • 灵活并准确的运用数组 api，如.map()、.filter()、.find()、.some()等等

  • 如果文件是先上传获取到 url 再跟随业务接口提交到服务端的，请求业务接口时传参务必删除掉文件

  • 微前端中路由跳转使用以下方式

    javascript
    routerPush({
  title, //打开新的选项卡时必传
  path, //路由地址
  app, //子应用名称，不传默认当前子应用
  query //携带参数
})

  • 微前端中子应用里不要有任何路由的判断，meta中定义功能参数

  • 全局变量存储及使用说明

    1）window、localStorage、sessionStorage不可用，不可自行定义值进行存储
2）vuex可以用，但非不得已不建议用
3）可以通过window._globalProperties（命名问题）获取全局变量和方法，不可自行定义值进行存储
4）可以通过window.accountStorage进行传值，同步方法，需要await

3、表格字段宽度规范 ​

  • 表格字段宽度主要有三种情况：
    • 确定的固定间距，如左侧勾选框 width70 左右，手机号 width150 左右，身份证 180 左右，日期 120，日期加时间 180
    • 不确定的固定间距，如操作栏，根据实际情况给固定的 width
    • 不固定的间距，如备注、居住地址，就要使用 min-width

4、自测思路及标准 ​

  • 根据 ui 图检查页面是否一致、功能是否完全
  • 测试前端特殊字段的校验及校验提示
  • 测试前端操作提示语相关用例，如删除前提示等
  • 测试前端复杂的交互逻辑
  • 测试数据兼容性问题
  • 测试其他客户端交互
  • 测试多数据分页功能

其他规范 ​

1、禅道 bug 解决提交规范 ​

  • 问题原因
  • 解决方案
  • 涉及模块

2、svn 提交规范 ​

来邦项目及代码管理规范

  • fix:[#999/#](前/后) #111 xxx、#222 xxx 备注
  • feature:(前/后) #111 xxx 备注
  • refactor:(前/后) 备注\*

TIP

bug 提交时需增加： 1、关联的需求 id，即大括号中的内容，已经发布过的需求用#代替 2、增加纯前端调整还是前后端同步调整的标记，即小括号中的内容

3、svn 分支规范 ​

svn 分支在/branches 和/tags中创建，dev 仅用于合并代码打包测试，不可在 dev 中开发（特殊项目除外） 命名规范：

  • 个人开发分支在/branches 下，own*姓名首字母缩写*特殊代号，特殊代号自行控制
  • 私有化分支在/tags下，pvt\_项目名称首字母缩写

业务相关 ​

1、新增设备 ​

  • 和服务端确认deviceIterationNumber(迭代号)、deviceType(设备类型)、alarmType(报警类型)、deviceCategory(设备种类)
  • 根据alarmType图标库增加报警图标
  • lonbon-common包dict.js中deviceInfoList扩展设备
  • lonbon-common包device.js中deviceTypes扩展设备（需与服务端沟通同步扩展，已过期）
  • 判断是否是通话设备，若是则补充device.js中checkCallDevice()逻辑
  • 确定新增设备是否是插电设备，在device.js中的getDumpEnergy、dealDeviceInfo方法里补充关于电量显示的处理
  • 确认设备是否是多个设备共用一个设备名称，例如：求救定位器，多个设备通过deviceIterationNumber迭代号判断，若是，则需要在device.js中getDeviceTypeDesc方法里添加处理
  • 拨打电话功能验证
  • 查找长者功能验证
  • 客服席位界面验证

2、新增平台 ​

  • 服务端提供 systemType、accountType 给前端
  • 前端扩展登录 url 提供给服务端
  • 忘记密码接口扩展新平台类型
  • 登录接口扩展新平台类型
  • websocket 扩展新平台类型
  • 服务端扩展通用枚举（民政监管平台）

技术相关 ​

1、项目加载速度优化方案 ​

  • 配置动态路由
  • 关闭 SourceMap（便于开发调试）
  • 配置 gzip：config/index.js 中打开 gzip 开关，配置 nginx，安装
    bash
    cnpm install --save-dev compression-webpack-plugin@1.1.11
  • 通过 cdn 加载基础 js：index.html 引入相关 js，web.base.conf.js 中配置 externals

2、不同设备不同尺寸屏幕兼容方案 ​

  • 针对移动端设备通过修改<meta name="viewport">的 content 进行缩放
    javascript
    let scale = Math.min(document.body.clientWidth / 1920, document.body.clientHeight / 1080);
$('head').append('<meta name="viewport" content="width=device-width,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + '">');
  • 针对 pc 端设备通过固定宽高增加滚动条，即设置 max-width，max-height
  • 局部页面可通过@media screen 实现响应式变化
  • 通过 em（相对父级）、rem（相对根）进行适配
  • 踩坑：css 中的 zoom 也可以实现缩放，但是会导致 canvas 内部缩放时发生偏移

3、axios ​

  • 基本配置：
    • 创建实例，配置 baseURL、timeout 请求拦截：
    • 对 get 请求增加唯一值，防止请求缓存问题
    • 通过 new axios.CancelToken，将 get 请求放入指定数组中，在路由切换时可取消请求
    • 对其他类型请求进行操作日志的捕获并通过 header 传到服务端
  • 响应拦截：
    • 服务端正常响应，根据前后端定义的不同的状态码进行处理，如 200 直接返回数据到请求方，401、402 提示登录超时，并退出到登录页等
    • 服务端异常响应，如网络异常、请求超时等

4、router ​

  • 路由数据配置：

    • 配置动态路由
    • 分模块配置，通过 require.context 整合
    • 项目较大，通过不同的命令运行不同的模块

  • 导航守卫配置：

    • 判断 token 是否存在，无 token 就返回登录页
    • 判断访问的路由是否存在，无则跳转 404 页面
    • 判断访问的路由该用户是否有权限访问，无则跳转无权限页面
    • 防抖，防止快速点击
    • 业务要求，校验项目到期时间
    • 校验版本号，网页内置版本号和 ajax 请求到的打包时的版本号进行比对，不同时刷新页面
    • 和 Axios 联动，取消上个页面的 get 请求