使用 node 模擬請求介面

劉員外發表於2019-04-20

使用 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
        })
      })
    }
複製程式碼

如下圖：


使用 node 模擬請求介面
使用 node 模擬請求介面
三、使用 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>複製程式碼


相關文章