松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue › 分享:一步一个脚印,vue入门之使用mockjs搭建vue项目测试服务器

分享:一步一个脚印,vue入门之使用mockjs搭建vue项目测试服务器

迦娜王
3年前Vue
530 0 0

在以前的文档中,我们构建了vue项目的整体架构,详见vue入门:vue项目架构设计起步,现在我们主要对其中的mock server 进行完善。

一、概述

前后端分离的项目优点之一就是可以前后端并行开发,互不影响。那么在后端接口没有完成之前,我们怎么进行前端项目的测试呢,这就需要我们自己构建一个前端测试服务,自己模拟假数据,以便于我们的前端开发工作。

这里我主要是应用mockjs做的mock server,并在vue2.0项目中进行使用。

mockjs可用来生成随机数据,并拦截 Ajax 请求,返回模拟的响应数据。

mockjs数据类型丰富,支持多种数据类型,如文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

mockjs增加了前端单元测试的真实性,用法简单。

mockjs的功能强大,语法也很多,具体可以查看mockjs官方文档

二、使用

1、在vue项目中安装依赖

npm install mockjs –save-dev

2、建立项目文件结构

根目录下建立mock文件夹,然后分别构建util.js 、index.js 、json文件(以index.json为例)

分享:一步一个脚印,vue入门之使用mockjs搭建vue项目测试服务器

3、util.js文件,主要是用来进行json数据读取方法的封装。内容如下:

// 引入外部资源

const fs = require(\’fs\’)

const path = require(\’path\’)

module.exports = {

// 用于被index.js进行调用

getJsonFile (filePath) {

// 读取指定的json文件

const json = fs.readFileSync(path.resolve(__dirname, filePath), \’utf-8\’)

// 解析并返回

console.log(json)

return JSON.parse(json)

}

}

分享:一步一个脚印,vue入门之使用mockjs搭建vue项目测试服务器

4、index.js文件,主要是用来定义各个接口方法。内容如下:

const Mock = require(\’mockjs\’)

const util = require(\’./util\’)

module.exports = function(app) {

// 监听请求

app.get(\’/api/index\’, (rep, res) => {

// 响应时,返回 mock data的json数据

const articleList = util.getJsonFile(\’./index.json\’)

// 将json传入 Mock.mock 方法中,生成的数据返回给浏览器

res.json(Mock.mock(articleList))

})

}

分享:一步一个脚印,vue入门之使用mockjs搭建vue项目测试服务器

5、index.json文件,主要是用来构建自己的模拟数据。如:

{

“ret”:true,

“data|1-10”:[{

“userid”: “@id()”,

“username”: “@cname()”,

“date”: “@date()”,

“avatar”: “@image(\’200×200\’,\’red\’,\’#fff\’,\’avatar\’)”,

“description”: “@paragraph()”,

“ip”: “@ip()”,

“email”: “@email()”

}]

}

分享:一步一个脚印,vue入门之使用mockjs搭建vue项目测试服务器

6、 修改 webpack 配置。

在路径build/webpack.dev.conf.js文件中的devServer属性中新添加一个before钩子函数,用来监听来自web的http请求。

分享:一步一个脚印,vue入门之使用mockjs搭建vue项目测试服务器

7、完成以上步骤以后,启动应用npm run dev,地址中输入相应请求地址,即可以请求成功啦。

分享:一步一个脚印,vue入门之使用mockjs搭建vue项目测试服务器

分享:一步一个脚印,vue入门之使用mockjs搭建vue项目测试服务器

分享:一步一个脚印,vue入门之使用mockjs搭建vue项目测试服务器

地址中访问接口

通过地址栏get访问接口可以看到,浏览器返回了一组json数据,mock按照我们之前定义的json格式随机生成了两组数据。

针对post方法,类似,直接在mock的index.js文件中添加方法即可。如:

分享:一步一个脚印,vue入门之使用mockjs搭建vue项目测试服务器

分享:一步一个脚印,vue入门之使用mockjs搭建vue项目测试服务器

三、最后

本文只是进行了mockjs的简单功能做了demo。mock的用法很多,具体还需要详细在官方文件详细的学习。

一定要坚持将官方文档进行阅读理解,这样才能更好的掌握mockjs,才能灵活的进行运用!

0
基于Vue + Element组件库后台管理系统
上一篇
最详细的基于webpack的Vue Hello World应用开发步骤
下一篇
评论 (0)

请登录以参与评论。

现在登录
聚合文章
Servicios profesionales Organizaciones
1年前
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
1年前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
1年前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
1年前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
相关文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
vue3.x reactive、effect、computed、watch依赖关系及实现原理
Vue 3 新特性:在 Composition API 中使用 CSS Modules
新手必看的前端项目去中心化和模块化思想
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
35 评论
242 喜欢
  • 0
  • 0
  • Top