NO--12模拟服务器端请求之node.js

Posted 最愁起名字

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了NO--12模拟服务器端请求之node.js相关的知识,希望对你有一定的参考价值。

最近几天项目上线,工作比较忙,没时间更博了,好在今天有点时间并且同事问道我一个问题,正好一块解决

使用 Vue 写项目肯定会遇到一个问题,如何模拟服务端请求数据,那这就需要用到 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>





以上是关于NO--12模拟服务器端请求之node.js的主要内容,如果未能解决你的问题,请参考以下文章

Node.js之HTTP请求与响应

node.js 将客户端渲染代码发送到服务器端,例如发布请求

node.js怎么模拟浏览器执行ajax

node.js之十大Web框架

node.js之十大Web框架

Node.js Nock 模拟请求超时和后续成功