node 模拟接口

一、 初始化并创建一个项目

使用 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文件

...constexpress =require('express')

// 通过 node 访问模拟数据

constapp = express();

// 使用 express 框架启动一个服务器

// 1. 读取文件

varappData =require('../data.json')

varseller = appData.seller

vargoods = appData.goods

varratings = appData.ratings

// 2. 使用 express 来配置路由，指定借口请求

varapiRoutes = 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 })

 })

 }...

三、使用 axios 请求数据

在组件中直接请求数据就好了