如何模拟服务端请求数据

我们在用 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>
欢迎留言讨论

转载于:https://www.cnblogs.com/changk/p/8672732.html