搭建node服務端並使用express()創建簡單數據接口，最后返回前端請求的所需數據

一：搭建服務端

1、在項目中新建一個名為server的文件夾，並在文件夾中新建index.js(用於搭建服務端)和user.js(用於存放返回給客戶端的json數據)

 

 

 

index.js文件代碼

// 主要分四步：
// 引入-cors解決跨域-引入並發送數據-設置監聽端口

var express = require("express"); //首先引入express模塊，不了解去看nodejs教程 安裝：npm install express 
 
var app = express();
 
var fs = require("fs"); // 文件系統，用於引入user.json的數據 也可以自己隨便寫個數據 ;
 
var cors = require("cors");// 這個比較重要，解決跨域問題.npm install cors 裝一下
 
app.use(cors({
 
origin: ['http://localhost:8080','http://127.0.0.1:8080'], // 這是本地的默認地址和端口，vue啟動的項目就是在這里，這樣保證了等會我們在瀏覽器能訪問服務器的數據（user.json）
 
methods: ["GET", "POST"],
 
alloweHeaders: ["Content-Type", "Authorization"]
 
}))
 
 
// 獲取請求地址中的/user並匹配，可以添加多個
app.get("/user", function (req, res) { //"/user" 是自定義的，用於顯示在地址欄

// 數據來源：
    //方法一：從文件中獲取數據
    //讀取儲存數據的文件
    fs.readFile(__dirname + "/" + "user.json", "utf-8", function (err, data) { // __dirname是文件夾的名，我們用fs讀取user.json
    // 把讀取的文件通過 res.end()發送回給客戶端
    res.send(data) 
    })

    //方法二：在本文件臨時定義數據
    // var response ={
    //     "data1": {
    //         "name": "Mr.李",
    //         "age": "24",
    //         "look": "very handsome",
    //         "girlfriend":"保密"
    //     },
    //     "data2": {
    //         "name": "Mr.王",
    //         "age": "25",
    //         "look": "very handsome",
    //         "girlfriend":"保密"
    //     }
    // }
    // res.send(response) 
    
});


// 監聽請求地址的對應端口
var server = app.listen(3000, function () { // 設置服務端端口為3000,即：http://127.0.0.1:3000
 
var host = server.address().address
 
var port = server.address().port

console.log("應用實例，訪問地址為 http://%s:%s", host, port)
 
})

 

user.json文件代碼

{
    
    "data1": {
        "name": "Mr.李",
        "age": "24",
        "look": "very handsome",
        "girlfriend":"保密"

    },

   
    "data2": {
        "name": "Mr.王",
        "age": "25",
        "look": "very handsome",
        "girlfriend":"保密"

    }
    
}

 

2、進入index.js目錄下執行node index.js命令啟動服務器

 

 

 *開啟成功如上圖

 

二：在客戶端向剛才所創建的服務端請求數據

1.因為vue官方已不再維護vue-resource,所以選擇使用axios來作為請求工具

(1)、安裝axios

 

 

(2)、在src/main.js中將axios加入到vue原型中(全局引用)

 

 

2、這里為了圖方便，直接在src/App.vue中的mounted鈎子函數里面發送請求

 

 

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
  export default {
    name:"App",
    mounted(){
      this.axios
      .get("http://10.10.38.63:3000/user")
      // .get("http://127.0.0.1:3000/user")
      .then(res => {
        console.log(res);
        // console.log(res.data.data1);
        // console.log(res.data.data2);
      })
      .catch(res => {
        console.log('err')
        console.log(res)
      })
    }
  }
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

 

 

 ⚠️注意：get后面的請求地址后面的/user對應index.js中服務器的"/user"

 

 

 

 

3、運行yarn serve命令運行本地項目 ,打開控制台，可以看到已經請求成功並返回數據

 

 

 直到這里，前端可以自己造接口和數據來了，這樣如果后台接口還沒開發好的話，可以用來模擬動態數據，類似mock模擬數據