vue模仿后台数据_vue中模拟后台数据

一、创建项目

使用vue开发项目时，通过脚手架工具vue-cli可以很方便的构建项目，热重载、保存时静态检查以及可用于生产环境的构建配置都一并创建好。

# 全局安装 vue-cli

$ npm install -g vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 安装依赖

$ cd my-project

$ npm install

二、安装网络请求模块

在这里使用axios处理ajax请求，对应的vue插件:vue-axios

# 安装 axios 和 vue-axios

$ npm install --save axios vue-axios

# 在main.js中引入

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

# 在组件中使用axios

this.axios.get('/api/user').then((response) => {

console.log(response.data)

}).catch((error) => {

console.error(error)

})

三、Json-Server

项目搭建好了，需要本地模拟数据来测试接口效果。

这里的思路是启动一个本地Server来处理请求返回模拟数据，项目中通过webpack的proxy代理过去。

这里使用Json-Server这个工具来构建本地Server

# 安装Json-Server

$ npm install -g json-server

安装完成后，在项目中创建db.json文件模拟返回的数据内容。

{

"user": {

"name" : "Sugar",

"age" : 22,

"sex" : "girl"

}

}

然后执行 json-server db.json

执行结果

执行成功后会提示已经启动了一个端口为3000的服务，在浏览器中输入localhost:3000 能看到如下的页面：

localhost:3000

点击 'user' 就能看到我们定义的数据信息

user 接口

到此，本地Mock Server 已经搭建完成

四、向本地Server请求数据

在项目中如何向本地Server请求数据呢？

通过webpack的proxy，可以将本地的Ajax请求代理到Mock Server上

在config/index.js文件中加入如下配置

proxy配置

配置完成启动 npm run dev 进行测试吧。

更多proxy配置信息，请参考以下相关资料：

五、使用Mock.js

Mock Server中 db.json 中的数据是是死的，我们可以借助 Mock.js 生成动态数据，增加测试的真实性。

# 安装mock.js

npm install mockjs --save-dev

项目中创建mock/ db.js 文件，内容如下：

db.js

执行 json-server db.js 再次查看 localhost:3000/user 已经能看到数据效果了

localhost:3000/user

六、整合

项目开发时，分别要输入两条命令比较麻烦。

我们在package.json中配置一条mockdev命令 ，以方便开发。

在 scripts 里加入如下两条配置：

"mock": "node_modules/.bin/json-server --watch mock/db.js --port 3000",

"mockdev": "npm run mock & npm run dev"

到此 vue + axios + mock server的环境已经搭建完成。