内容简介:使用在
使用 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 }) }) } 复制代码
如下图:
三、使用 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>复制代码
以上所述就是小编给大家介绍的《使用 node 模拟请求接口》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- HttpServletRequest 接口、HttpServletResponse 接口、请求转发与重定向
- 接口请求熔断处理机制
- ApiAgent v1.0.1 发布 跨域接口代理+接口合并请求
- MUi框架ajax请求WebService接口实例
- vue请求接口中图片403 forbidden的问题
- 解决 Android 28 不能请求 HTTP 接口的问题
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
奥美的数字营销观点
[美] 肯特·沃泰姆、[美] 伊恩·芬威克 / 台湾奥美互动营销公司 / 中信出版社 / 2009-6 / 45.00元
目前,媒体的数字化给营销人带来了重大影响。新媒体世界具有多重特性,它赋予企业大量机会,同时也带来挑战。营销人有了数量空前的方式来与消费者互动。然而,许多人面对变革的速度感到压力巨大,而且不知道该如何完全发挥这些新选择所带来的优势。 本书为读者提供了如何运用主要数字媒体渠道的方法;随附了领先的营销人如何在工作中有效运用这些渠道的最佳案例;提供了数字营销的十二个基本原则;协助数字营销人了解什么是......一起来看看 《奥美的数字营销观点》 这本书的介绍吧!
CSS 压缩/解压工具
在线压缩/解压 CSS 代码
在线进制转换器
各进制数互转换器