不会CV的前端就是牛🐴

_Avocado
301 阅读2分钟

1.切换npm镜像源

检查当前的下包地址：
npm config get registry
把下包的地址切换为国内的淘宝服务器
npm config set registry=https://registry.npm.taobao.org/
官网地址
npm config set registry https://registry.npmjs.org

2.axios拦截器

// 添加请求拦截器
axios.interceptors.request.use( (req) => {
    // 在发送请求之前做些什么
    ...
    return req;
  },  (err) => {
    // 对请求错误做些什么
    ...
    // 该返回的数据是axios.catch(err)中接受的数据
    return Promise.reject(err);
  });

// 添加响应拦截器
axios.interceptors.response.use( (res) => {
    // 对响应数据做点什么
    ...
    // 该返回的数据是axios.then(res)中接受的数据
    return res;
  },  (err) => {
    // 对响应错误做点什么
    ...
    // 该返回的数据是axios.catch(err)中接受的数据
    return Promise.reject(err);
  });


// axios请求错误时，可在catch里进行错误处理。
axios.get().then().catch(err => { // 错误处理 })

3.axios全局配置

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

4.常用正则表达式

  • 比较常用：

  • 1.Email地址：/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

  • 2.手机号码：/^(13[0-9]|14[57]|15[0-9]|17[067]|18[0-9])\d{8}$/

  • 3.国内电话号码(0511-4405222、021-87888822)：/^0\d{2,3}[-]\d{7,8}$/

  • 4.身份证号( X位、X位数字)：/^\d{* }|\d{* }$/

  • 5.密码强度

    • 只有大小写字母:/^([a-z].*[A-Z])|([A-Z].*[a-z])$/
    • 大小写字母与数字：/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$/
    • 大小写字母+数字+下划线：/^[A-Za-z0-9]+[_][A-Za-z0-9]*/

  • 6.电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)

    /^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$/

  • 7.域名：/[a-zA-Z0-9][-a-zA-Z0-9]{0,* }(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,* })+/.?/

  • 8.InternetURL：/[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$/

5.使用 FileReader 把图片读取为 base64 格式的字符串

<input @change="onFileChange" type="file" style="display: none;" accept="image/*" ref="iptFile" />


onFileChange(e) {
  const files = e.target.files
  if (files.length === 0) {
  // avatar: data里用来存储base64格式的字符串
    this.avatar = ''
  } else {
    // 1. 创建 FileReader 对象
    const fr = new FileReader()
    // 2. 调用 readAsDataURL 函数，读取文件内容
    fr.readAsDataURL(files[0])
    // 3. 监听 fr 的 onload 事件
    fr.onload = e => {
      // 4. 通过 e.target.result 获取到读取的结果，值是字符串（base64 格式的字符串）
      this.avatar = e.target.result
    }
  }
}

6.FormData格式(example:发布文章里面的ajax发送请求需要头像)

// 发起请求，发布文章
async postArticle() {
  // 1. 创建 FormData 对象
  const fd = new FormData()

  // 2. 向 FormData 中追加数据
  // Object.keys(对象) => 数组 对象中所有的键  ['title', 'cate_id', 'content', 'cover_img', 'state']
  Object.keys(this.pubForm).forEach( item => {
    fd.append ( item, this.pubForm [ item ] )
  })

  // 3. 发起请求
  const { data: res } = await this.$http.post('/my/article/add', fd)
  if (res.code !== 0) return this.$message.error('发布文章失败！')
  this.$message.success('发布文章成功！')

  // 4. 关闭对话框
  this.pubDialogVisible = false
},

7.动态设置封面图片的 src 地址

 onFileChange (e) {
      // console.dir(e.target)
      // 获取用户选择的文件列表
      const files = e.target.files
      if (files.length === 0) {
        // 没有选择图片
        this.pubForm.cover_img = null
        // 点击取消显示默认图片(图片模块)
        this.$refs.imgRef.src = defaultImg
      } else {
        // 选择了照片
        this.pubForm.cover_img = files[0]
        // 实现图片预览  files[0]图片对象 => img展示 (方式: 1.转成base64格式放入src  2.图片地址URL)
        const url = URL.createObjectURL(files[0])
        // console.log(url) // http://localhost:8080/a73c32e0-056b-4b2d-9d2b-7bc23ff30592
        // 将url路径赋值给img的src属性
        this.$refs.imgRef.src = url
      }

8.ESLint 插件自动格式化

  • ESLint （读取 ESLint 配置文件进行语法检测）
  • Prettier ESLint（按照 ESLint 配置文件进行格式化）

Snipaste_2022-05-22_11-19-54.png

Snipaste_2022-05-22_11-20-08.png

  • 若希望Ctrl+S自动格式化,还需要打开 JSON 格式的设置文件进行配置

    • vscode-设置-首选项-设置-点击用户区的设置JSON图标-将以下配置粘贴进设置 JSON 文件中
  {
    "eslint.enable": true,
    "eslint.run": "onType",
    "eslint.options": {
    "extensions": [
    ".js",
    ".vue",
    ".jsx",
    ".tsx"
     ]
     },
    "editor.codeActionsOnSave": {
         "source.fixAll.eslint": true
    }
  }

9.element-ui table表格 自定义索引 (分页序号算法)

让分页的下一页序号不从头开始,而是按顺序继续往后

<el-table-column label="序号" type="index" :index="indexMethod" />


 // 自定义索引值  index默认是从0开始
 // 需求: 让数据按照顺序排列
 // 算法: (page-1)*pagesize+index+1
 indexMethod(index) {
    return (this.page - 1) * this.pagesize + index + 1
 },

Snipaste_2022-06-02_15-27-21.png

10.javascript读取excel时间格式

// js中时间戳: 1970-1-1开始,以毫秒为单位
// js读取excel时间格式: 1900-1-1开始,并且以天数为单位
export function formatExcelDate(numb, format = '/') {
  const time = new Date((numb-25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000  - 24 * 3600000 - 8 * 3600000)
  time.setYear(time.getFullYear())
  const year = time.getFullYear() + ''
  const month = time.getMonth() + 1 + ''
  const date = time.getDate()  + ''
  if (format && format.length === 1) {
    return year + format + month + format + date
  }
  return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
}

// 使用
new Date(formatExcelDate(item))

11.npm i 包

npm i qrcode   // 生成二维码的插件
npm i vue-print-nb   // 利用vue-print-nb实现打印功能

12.uni-app配置网络请求

小程序项目中不支持 axios，而原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。

下完以上包后在项目的 main.js 入口文件中，通过如下的方式进行配置：

yarn add @escook/request-miniprogram

import { $http } from '@escook/request-miniprogram'

uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'

// 请求拦截器
$http.beforeRequest = function (options) {
  uni.showLoading({
    title: '数据加载中...',
  })
}

// 响应拦截器
$http.afterRequest = function () {
  uni.hideLoading()
}

// 使用
await uni.$http.get('...')

13.webpack打包优化 去除console.log

yarn add babel-plugin-transform-remove-console

// 安装完包后生成的babel.config.js中加上 transform-remove-console 即可
module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
      'plugins': ['dynamic-import-node']
    },
    /* 上线环境去除console.log */
    'production': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
      'plugins': ['dynamic-import-node', 'transform-remove-console']
    }
  }
}
avatar
文章
阅读
粉丝