前后端分离实践（四）—— 使用vue-cli搭建前端展示层并用mock模拟测试数据

前后端分离实践系列文章总目录

目录

一、搭建一个Vue-cli脚手架应用

1、全局安装vue-cli

2、使用webpack初始化一个vue应用

3、进入fbsep-vue应用目录启动应用

4、浏览器访问fbsep-vue应用

二、使用mock进行接口数据模拟

1、安装mockjs

2、安装Axios

3、添加mock测试数据文件

4、引用mock测试数据文件

5、在index.html中添加一个div标签

6、在main.js入口文件中访问mock数据并展示在index.html上

7、重启fbsep-vue应用查看结果

8、F12查看Chrome调试器

三、源码地址

---

一、搭建一个Vue-cli脚手架应用

1、全局安装vue-cli

任意目录下使用命令：cnpm install vue-cli –g

2、使用webpack初始化一个vue应用

在工作目录下使用命令：vue init webpack fbsep-vue
请注意：项目名称不要使用中文，不能有大写字母，只能使用小写
按照提示依次填写：
Project name(项目名称)：
Project description(项目描述)：
Author(作者)：
Vue build(Runtime+Compiler和Runtime-only两种，直接敲回车选第一个)：
Install vue-router(是否安装vue-router)：y
Use ESLint to lint your code(是否启用eslint检测规则)：n
Set up unit tests(设置单元测试)：n
Setup e2e tests with Nightwatch?( 设置端到端测试Nightwatch吗？)：n
Should we run `npm install` … ?(直接敲回车选第二个使用npm)

3、进入fbsep-vue应用目录启动应用

在fbsep-vue目录下使用命令：cnpm run dev

看到如下内容代表启动成功：

4、浏览器访问fbsep-vue应用

根据提示访问地址：http://localhost:8080/#/

看到如下内容代表访问成功：

二、使用mock进行接口数据模拟

1、安装mockjs

在fbsep-vue目录下使用命令：cnpm install mockjs –D

2、安装Axios

在fbsep-vue目录下使用命令：cnpm install axios

axios：它是一个基于Promise用于浏览器和nodejs的HTTP客户端

 

3、添加mock测试数据文件

在src目录下新建mock/json目录，并在json目录中新建一个hello.json文件，内容如下：

{

  "code": 9999,
  "msg": "OK",
  "data": "Hello Mock"

}

4、引用mock测试数据文件

在src/mock目录下新建index.js文件，并在其中引用hello.json文件，内容如下：

const Mock = require('mockjs');
//格式： Mock.mock( url, post/get , 返回的数据)；
//url是一个可自定义的url，只要符合http规范即可
Mock.mock('http://mock/api/hello', 'get', require('./json/hello'));

5、在index.html中添加一个div标签

内容如下：

{{msg}}

6、在main.js入口文件中访问mock数据并展示在index.html上

main.js中要添加的内容如下：

import axios from 'axios'

var app2 = new Vue({
  el: '#app2',
  data:{
    msg: ''
  }
});

//引用mock功能，不用时注释掉即可
require('./mock');

//访问mock模拟数据
axios.get('http://mock/api/hello')
  .then(function (response) {
    console.log(response);
    //将app2中双向绑定的msg数据更改为mock模拟数据
    app2.msg = response.data.data;
  })
  .catch(function (error) {
    console.log(error);
  });

7、重启fbsep-vue应用查看结果

8、F12查看Chrome调试器

三、源码地址

https://github.com/Alexshi5/demo-fbsep/tree/master/fbsep-vue

 

参考链接：

1、windows下npm安装vue

2、vue mock数据，模拟后台接口

3、Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli）