87 lines
2.5 KiB
Markdown
87 lines
2.5 KiB
Markdown
|
# 2022-06-10 前端页面
|
|||
|
|
## 样式使用
|
|||
|
|
### 公共样式
|
|||
|
|
* 样式库 elementui，bootstrap
|
|||
|
|
* 自己常用的样式
|
|||
|
|
* 页面 class 命名， scoped 使用
|
|||
|
|
### scss，less，stules，sass，原生 var()
|
|||
|
|
* @include
|
|||
|
|
* @mixin
|
|||
|
|
|
|||
|
|
## 工具类库
|
|||
|
|
* 常量 前端常量 字典常量（ruoyi系统）
|
|||
|
|
* 正则表达式
|
|||
|
|
```javascript
|
|||
|
|
const PATTERN = {
|
|||
|
|
justNum: /^([1-9]\d*|[0]{1,1})$/, // 正整数 ，不能为小数
|
|||
|
|
imagePattern: /^.*[^a][^b][^c]\.(?:png|jpg|bmp|gif|jpeg)$/,
|
|||
|
|
number: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, // 大于零的数 包括小数
|
|||
|
|
email: /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@([a-zA-Z0-9]+[.])+[a-zA-Z]{2,3}$/, // 邮箱验证规则
|
|||
|
|
username: /^([a-zA-Z]|[0-9]|[-._@])+$/, // 用户名验证规则
|
|||
|
|
phone: /^1[3456789]\d{9}$/, // 手机号验证规则
|
|||
|
|
limit2Decimal: /^\d+(\.\d{1,2})?$/, // 不超过2位小数
|
|||
|
|
sptm: /^([a-zA-Z]|[0-9]){1,20}$/, // 商品条码
|
|||
|
|
includeHanzi: /[\u4e00-\u9fa5]/, // 包含汉字
|
|||
|
|
longitude: /^-?(?:(?:180(?:\.0{1,20})?)|(?:(?:(?:1[0-7]\d)|(?:[1-9]?\d))(?:\.\d{1,20})?))$/, // 经度验证（范围：-180~180）
|
|||
|
|
latitude: /^-?(?:90(?:\.0{1,20})?|(?:[1-8]?\d(?:\.\d{1,20})?))$/, // 纬度验证（范围：-90~90）
|
|||
|
|
url: /^(http|https):\/\/([\w.]?\/?)\S*/ // URL 验证
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default PATTERN
|
|||
|
|
```
|
|||
|
|
* 缓存
|
|||
|
|
* 请求节流，ajax abort，axios cancelToken，
|
|||
|
|
```javascript
|
|||
|
|
function throttleFun (fn, args = [], time = 1000) {
|
|||
|
|
clearTimeout(fn.timer)
|
|||
|
|
fn.timer = setTimeout(() => {
|
|||
|
|
fn.apply(this, args)
|
|||
|
|
}, time)
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
* 数组操作 lodash 工具类 #https://www.lodashjs.com/
|
|||
|
|
* 金融计算 bignumber/bigdecemal
|
|||
|
|
|
|||
|
|
## 公共组件
|
|||
|
|
* 哪些公共组件可以封装
|
|||
|
|
* 业务的公共组件封装
|
|||
|
|
|
|||
|
|
## git
|
|||
|
|
### 常用命令
|
|||
|
|
* git clone
|
|||
|
|
* git config --local(global) *** [https://blog.csdn.net/weixin_29661213/article/details/111982694](https://blog.csdn.net/weixin_29661213/article/details/111982694)
|
|||
|
|
* git pull
|
|||
|
|
* git rebase
|
|||
|
|
* git push
|
|||
|
|
* git commit
|
|||
|
|
* git add ***
|
|||
|
|
* git status
|
|||
|
|
* git rm --cached
|
|||
|
|
* git reset (history hash) --hard
|
|||
|
|
* git stash
|
|||
|
|
* git remote ***
|
|||
|
|
* git fetch
|
|||
|
|
* git cherrypick
|
|||
|
|
* .gitignore 文件
|
|||
|
|
### 问题
|
|||
|
|
* 禁止使用 -f/ --force
|
|||
|
|
* 合并的时候，借助可视化工具，或者与冲突的同事一起合并。确保代码都已合并进来
|
|||
|
|
* 前端 大文件资源
|
|||
|
|
* windows 凭据
|
|||
|
|
|
|||
|
|
## 开发工具
|
|||
|
|
* webstorm
|
|||
|
|
* vscode
|
|||
|
|
|
|||
|
|
## 项目上
|
|||
|
|
* 按钮的submitting
|
|||
|
|
* 表格的loading
|
|||
|
|
* v-show/v-if 的使用
|
|||
|
|
* Promise.all
|
|||
|
|
|
|||
|
|
## webserver
|
|||
|
|
* express
|
|||
|
|
|
|||
|
|
# 思考
|
|||
|
|
* 如何实现换肤
|