BelieveYou 发布的文章

在学些Vue时,使用Mock Server模拟数据时,出现的问题,这里记录下最后的解决办法。
先说下,我的操作:
1、在项目根目录创建mock目录,再创建mock/mock-server.js,mock-server.js就只做了 app.get ,app.post等请求,加了个文件热加载。

const chokidar = require('chokidar')
const bodyParser = require('body-parser')
const chalk = require('chalk')
const path = require('path')

const mockDir = path.join(process.cwd(), 'mock')

function registerRoutes(app) {
  let mockLastIndex
  const { default: mocks } = require('./index.js')
  for (const mock of mocks) {
    app[mock.type](mock.url, mock.response)
    mockLastIndex = app._router.stack.length
  }
  const mockRoutesLength = Object.keys(mocks).length
  return {
    mockRoutesLength: mockRoutesLength,
    mockStartIndex: mockLastIndex - mockRoutesLength
  }
}

function unregisterRoutes() {
  Object.keys(require.cache).forEach(i => {
    if (i.includes(mockDir)) {
      delete require.cache[require.resolve(i)]
    }
  })
}

module.exports = app => {
  // es6 polyfill
  require('@babel/register')

  // parse app.body
  // https://expressjs.com/en/4x/api.html#req.body
  app.use(bodyParser.json())
  app.use(bodyParser.urlencoded({
    extended: true
  }))

  const mockRoutes = registerRoutes(app)
  var mockRoutesLength = mockRoutes.mockRoutesLength
  var mockStartIndex = mockRoutes.mockStartIndex
  console.log(chalk.magentaBright(`\n > Mock Server Start success! `))
  // watch files, hot reload mock server
  chokidar.watch(mockDir, {
    ignored: /mock-server/,
    ignoreInitial: true
  }).on('all', (event, path) => {
    if (event === 'change' || event === 'add') {
      try {
        // remove mock routes stack
        app._router.stack.splice(mockStartIndex, mockRoutesLength)

        // clear routes cache
        unregisterRoutes()

        const mockRoutes = registerRoutes(app)
        mockRoutesLength = mockRoutes.mockRoutesLength
        mockStartIndex = mockRoutes.mockStartIndex

        console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed  ${path}`))
      } catch (error) {
        console.log(chalk.redBright(error))
      }
    }
  })
}

2、通过webpack的devServer 启动,并配置代理(将接口请求地址 代理到 mock/)

       const port=9527
      devServer: {
        port: port,
        open: true,
        overlay: {
          warnings: false,
          errors: true
        },
        proxy: { // 代理      
          ['/']: {
            target: `http://127.0.0.1:${port}/mock`,
            changeOrigin: true,
            pathRewrite: {
              ['^' + process.env.VUE_APP_BASE_API]: ''
            }
          }
        },
        after: require('./mock/mock-server.js') // 启动mock-server
      }

遇到过的错误如下:

1、不能代理到/mock,错误提示如下

Proxy error: Could not proxy request /user/info from localhost:2000 to http://127.0.0.1:2000/mock.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

这个问题通常都是Mock Server 启动失败
一般是端口被占用,如果用到 process.env.port || process.env.npm_config_port 变量,注意系统变量中的是否设置过port,如果设置了,最好清除或不适用此变量。
并且记得改过以后一定要重启终端(最好重新打开)。

2、数据返回的不对
这个问题是在能获取到数据,但获取不是想要的数据。通常是因为启动了多个项目,且项目没有设置统一端口(或端口冲突),只需要给定不同的端口即可

3、get请求无效
这个问题是能获取数据,Post请求正常,但get请求时只能获取到一段index.html代码,不是有效数据,
这个一般只需要在请求的header中设置Accept为 application/json, text/plain, */* 就能解决

安装 ESlint

Eslint官方链接
腾讯云的Eslint说明,较好用
eslint-plugin-vue(Vue相关的Eslint)

npm install -g eslint
eslint --init

配置规则

  • root :true, // 以当前目录为根目录,不再向上查找 .eslintrc.js
  • env : 运行的环境
  env:{  
        browser: true,
        node: true,
        commonjs: true,
        es6: true
    }
  • extends: ['eslint:recommended'], // 继承,使用值作为基础配置,可以在rules中覆盖。当前值为eslint推荐的规则

         'extends': [
       'plugin:vue/essential',
       '@vue/standard'
     ]
    
  • parserOptions:JavaScript 选项。

    "parserOptions": {

      // ECMAScript 版本
     "ecmaVersion":6,
     "sourceType":"script",//module
     // 想使用的额外的语言特性:
     "ecmaFeatures":  {
         // 允许在全局作用域下使用 return 语句
         "globalReturn":true,
         // impliedStric
         "impliedStrict":true,
         // 启用 JSX
         "jsx":true
      }
    }
    
  • globals // 全局变量

     globals: { // 允许在代码中使用全局变量
           location: true,
           setTimeout: true
       }
    
  • rules:开启规则和发生错误时报告的等级,规则的错误等级有三种:

       ●  0 或'off':关闭规则。
       ●  1 或'warn':打开规则,并且作为一个警告(并不会导致检查不通过)。
       ●  2 或'error':打开规则,并且作为一个错误(退出码为1,检查不通过)。
    

如下方indent规则说明:
值可以是 0、1、2、'off'、‘warn’、'error'、或者数组,
数组时,[par1,par2,par3],par1对应上面的值,par2是这个选项的值,par3是附带的参数

indent
强制一致的缩进

  • off : 关闭规则
  • tab :以制表符缩进
  • [2,4, {"SwitchCase":1}] : 打开规则,并且作为一个错误,检查不通过。检查规则为 4个空格,

常见规则

accessor-pairs
在对象中强制使用getter/setter 对(不能仅使用setter)

arrow-spacing
箭头符号前后都要空格

"arrow-spacing":[2, {"before": true, "after": true}]

indent
强制一致的缩进,默认为4 个空格

no-console
禁止调用console对象的方法

    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off' //当环境是产品时报错,否则允许调用console

no-debugger
此规则不允许debugger声明

import/first
import 关键字需要放在文件头

spaced-comment
要求注释有空格

space-before-function-paren
函数括号前强制要求有间距

always:(默认)需要一个空格
never:不允许任何空格
 "space-before-function-paren": ["error", "always"], //(默认)需要一个空格
// or
"space-before-function-paren": ["error", {
    "anonymous": "always",
    "named": "always",
    "asyncArrow": "always"
}],

no-cond-assign
条件语句的条件中不允许出现赋值运算符

Vue相关规则

vue/max-attributes-per-line
多个特性的元素应该分多行撰写,每个特性一行

   "vue/max-attributes-per-line": ["error", {  // vue的属性必须每行一个
  "singleline": 1, // 一行显示几个属性
  "multiline": {
    "max": 1,
    "allowFirstLine": false //如果为true,则允许属性与该标记名称位于同一行,max=1,可以代替allowFitstLine
  }
}]

预览

创建文件

在views中创建login/login.vue 文件

QQ图片20191025112329.png

实现步骤

  1. 实现前端界面后,实现登录请求事件

    this.$store.dispatch('user/login', this.loginModel)

            .then(res => {
              // 登录成功
              this.$router.push({ path: '/' })
            })
    
  2. 在Store/modules/user.js 中实现login

    2.1登录信息,应该就算页面刷新,也保持登录,因此需要用到cookie。在utils中创建auth.js,用于实现管理缓存的Token

    import Cookie from 'js-cookie'

    const TokenKey = 'Permission-Token' // token的Cookie Key

    export function getToken() {
    return Cookie.get(TokenKey)
    }

    /**

    • 设置Token
    • @param {string} token
      */

    export function setToken(token) {
    if (!token) return clearToken()
    return Cookie.set(TokenKey, token)
    }

    export function clearToken() {
    return Cookie.remove(TokenKey)
    }

2.2 在api目录中实现user的login

//api/user.js
import request from '@/utils/request'
export const login = (loginForm) => {
  return request({
    url: '/login',
    method: 'post',
    data: loginForm
  })
}

2.3 在Store的User实现login

// store/modules/user.js
import { login } from '@/api/user'
import { getToken, setToken } from '@/utils/auth'

// state
const state = {
  access_token: getToken()
}

const mutations = {
  SET_ACCESS_TOKEN: (state, token) => {
    state.access_token = token
    setToken(token)
  }
}

const actions = {
  // 登录
  login({ commit }, userinfo) {
    return new Promise((resolve, reject) => {
      login(userinfo).then(response => {
        commit('SET_ACCESS_TOKEN', response.data.token) // 登录后缓存token
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  }
}