如何模拟服务端请求数据
我们在用 Vue 写项目的时候肯定会遇到一个问题,那就是如何模拟服务端请求数据,那这就需要用到 node.js 了。今天说一下如何用node.js模拟请求数据
一、 初始化并创建一个项目
vue init webpack-simple node-demo
cd node-demo
npm i
cnpm i vuex axios -S
二、编写接口
在 build 文件下的 webpack.dev.conf.js 文件中加入
「express」 基于 node.js 后端框架,负责路由,业务逻辑,数据库操作,页面和数据响应。
即架构中的业务层,对前端的请求进行响应,需要数据库的拉取数据库内容,需要判断处理的返回处理结果,请求页面文件的返回html文件
const express = require('express')
// 通过 node 访问模拟数据
const app = express();
// 使用 express 框架启动一个服务器
// 1. 读取文件
var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
// 2. 使用 express 来配置路由,指定借口请求
var apiRoutes = express.Router() //定义一个路由
// 暴露 API 接口
app.use('/api',apiRoutes)
在 build 文件下的 webpack.dev.conf.js 文件中的 devServer 中加入
// 添加接口数据
before(app){
// 配置请求路由和响应
app.get('/api/seller', (req, res) => {
res.json({
errno: 0, //错误码
data: seller
})
})
app.get('/api/goods', (req, res) => {
res.json({
errno: 0, //错误码
data: goods
})
})
app.get('/api/ratings', (req, res) => {
res.json({
errno: 0, //错误码
data: ratings
})
})
}
如下图:
![](http://upload-images.jianshu.io/upload_images/4279446-ac2b46a55f1eefb7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
![](http://upload-images.jianshu.io/upload_images/4279446-1aa20fa40b623fb1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
三、使用 axios 请求数据
在组件中直接请求数据就好了
<template>
<div class="seller">
<h1>{{seller}}</h1>
</div>
</template>
<script>
import axios from 'axios'
export default {
data(){
return {
seller:''
}
},
mounted(){
//请求地址
axios.get('/api/seller').then(resp => {
this.seller = resp.data.data.name
})
}
}
</script>
欢迎留言讨论