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 请求数据

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 随着二胎政策的放开,随着社会的发展和进步,“育儿”几乎成了8090家长嘴里的高频词,我作为“超级奶爸”也时常分享一...
    心灵的便签阅读 4,138评论 0 1
  • 我的姐姐最近刚生了二胎,宝宝很可爱,可是我总觉她闲在家里只带孩子太浪费时间了,于是在我的逼迫下她开始做童装。 ...
    爱狗的流浪猫阅读 748评论 0 0
  • 今天听的是易烊千玺的第一首英文歌unpredictable。 特别好听,刚开始发布的时候我就听了。感觉和某个欧美旋...
    路路66阅读 2,490评论 2 1

友情链接更多精彩内容