VueElementAdmin--学习笔记（一）-- Mock过程

最新推荐文章于 2024-01-30 18:27:20 发布

yupengfeiwangcui

最新推荐文章于 2024-01-30 18:27:20 发布

阅读量553

点赞数 1

分类专栏： VueElementAdmin 文章标签： vue javascript

本文链接：https://blog.csdn.net/yupengfeiwangcui/article/details/115275079

版权

VueElementAdmin 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Github：https://github.com/PanJiaChen/vue-element-admin

作为一个后端人员，也就刚参加工作那会用过几年js后面基本上都很少用，今天想整一个前后端分离的框架，发现我前端知识已经跟不上，只能埋头学，也不想从头学起了，从Github上下载VueElementAdmin的i18n版本，直接看人家写的代码也有好处，看到哪儿不懂就去查去分析，如果全部看懂了说明学会这种开发模式的80%，框架就可以直接拿来用了，其实大家在工作中大多都是这种学习路径，其实也是捷径。

这篇文档相当于今天学的笔记，主要说Mock，文章会提到一些看源码的技巧。

下完源码之后，做了以下几件事

1、启动工程

Vscode下执行命令：

npm run dev

2、试验工具

看源码过程中很多不理解，要懂ES6还要懂TypeScript，所以需要写点测试代码看效果

（1）命令行下运行es6文件

需要安装：npx babel-node

新建一个hello.es6，比如内容为

response = { data: { token: "admin-token" } }

const { data } = response

console.log(data.token)

可以在命令行下直接运行

npx babel-node hello.es6

这个特别有用，看vue代码时很多语法不懂，可以在这里写测试程序试验

（2）命令行下运行TypeScript文件

需要安装：typescript

npm install -g typescript

新建一个文件greeter.ts，比如内容为

var Student = /** @class */ (function () {
    function Student(firstName, middleInitial, lastName) {
        this.firstName = firstName;
        this.middleInitial = middleInitial;
        this.lastName = lastName;
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
    return Student;
}());
function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);

可以在命令行下直接运行

 tsc greeter.ts

这个命令会在目录下生成对应的js文件greeter.js

再新建一个html文件greeter.html，打开后可看到运行结果

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

3、调试环境

（1）安装vscode插件Debugger for Chrome，下载地址为：https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

安装之后，可以在vue或者js中打断点，在vscode->run and debug中创建调试，填写对应的服务器端口号，然后用调试模式启动服务器

（2）安装chrome插件 vue.js devtools

4、分析代码

（1）Mock过程

以登陆模块为例，当用户点击登陆时请求的代码过程为：

a：src/views/login/index.vue中的handleLogin，这里使用的是vue store的请求转发，会转到对用户对应的action

    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

b：src/store/modules/user.js中的login，代码会调用登陆请求的api函数

const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },
//省略其他代码......
}

c：src/api/user.js中的login，这里会通过axios异步请求后端服务器（mock服务器）

export function login(data) {
  return request({
    url: '/vue-element-admin/user/login',
    method: 'post',
    data
  })
}

d：mock/index.js，这段代码会在系统运行时装载初始化，每个请求都对应一个mock，步骤c中的data会转到options.body里，这段代码里respond是一个函数，会组装请求的响应数据

function XHR2ExpressReqWrap(respond) {
    return function(options) {
      let result = null
      if (respond instanceof Function) {
        const { body, type, url } = options
        // https://expressjs.com/en/4x/api.html#req
        result = respond({
          method: type,
          body: JSON.parse(body),
          query: param2Obj(url)
        })
      } else {
        result = respond
      }
      return Mock.mock(result)
    }
  }

  for (const i of mocks) {
    Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
  }

e：mock/user.js，此处就是mock的响应报文组装，根据请求参数username不同返回不同的token

module.exports = [
  // user login
  {
    url: '/vue-element-admin/user/login',
    type: 'post',
    response: config => {
      const { username } = config.body
      const token = tokens[username]

      // mock error
      if (!token) {
        return {
          code: 60204,
          message: 'Account and password are incorrect.'
        }
      }

      return {
        code: 20000,
        data: token
      }
    }
  },
   //省略其他代码
}

备注：看项目代码的好处就是能让你知道什么语法最重要最常用，什么写法是最佳实践，其实项目中用到的东西并不多，但一门语言语法太多，提供的功能也太多，全部吃透谈何容易

yupengfeiwangcui

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
VueElementAdmin--学习笔记（一）-- Mock过程

Github：https://github.com/PanJiaChen/vue-element-admin 作为一个后端人员，也就刚参加工作那会用过几年js后面基本上都很少用，今天想整一个前后端分离的框架，发现我前端知识已经跟不上，只能埋头学，也不想从头学起了，从Github上下载以上源码功能，直接看人家写的代码也有好处，看到哪儿不懂就去查去分析，如果全部看懂了说明学会这种开发模式的80%，框架就可以直接拿来用了，其实大家在工作中大多都是这种学习路径，其实也是捷径。这篇...
复制链接

扫一扫