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
|
||
|
||
# 思考
|
||
* 如何实现换肤
|