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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Alexshi5/article/details/90246783

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

目录

一、搭建一个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标签

内容如下:

<div id="app2" style="margin-left:48%">{{msg}}</div>

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)

展开阅读全文

没有更多推荐了,返回首页