2023年7月7日发(作者：)

搭建node服务端并使⽤express（）创建简单数据接⼝，最后返回前端请求的所需数据⼀：搭建服务端1、在项⽬中新建⼀个名为server的⽂件夹，并在⽂件夹中新建(⽤于搭建服务端)和(⽤于存放返回给客户端的json数据)

⽂件代码// 主要分四步：// 引⼊-cors解决跨域-引⼊并发送数据-设置监听端⼝var express = require("express"); //⾸先引⼊express模块，不了解去看nodejs教程 安装：npm install express

var app = express();

var fs = require("fs"); // ⽂件系统，⽤于引⼊的数据 也可以⾃⼰随便写个数据 ;

var cors = require("cors");// 这个⽐较重要，解决跨域问题.npm install cors 装⼀下

(cors({

origin: ['localhost:8080','127.0.0.1:8080'], // 这是本地的默认地址和端⼝，vue启动的项⽬就是在这⾥，这样保证了等会我们在浏览器能访问服务器的数据（）

methods: ["GET", "POST"],

alloweHeaders: ["Content-Type", "Authorization"]

}))

// 获取请求地址中的/user并匹配，可以添加多个("/user", function (req, res) { //"/user" 是⾃定义的，⽤于显⽰在地址栏// 数据来源： //⽅法⼀：从⽂件中获取数据 //读取储存数据的⽂件 le(__dirname + "/" + "", "utf-8", function (err, data) { // __dirname是⽂件夹的名，我们⽤fs读取 // 把读取的⽂件通过 ()发送回给客户端 (data)

}) //⽅法⼆：在本⽂件临时定义数据 // var response ={ // "data1": { // "name": "Mr.李", // "age": "24", // "look": "very handsome", // "girlfriend":"保密" // }, // "data2": { // "name": "Mr.王", // "age": "25", // "look": "very handsome", // "girlfriend":"保密" // } // } // (response)

});// 监听请求地址的对应端⼝var server = (3000, function () { // 设置服务端端⼝为3000,即：127.0.0.1:3000

var host = s().address

var port = s().("应⽤实例，访问地址为 %s:%s", host, port)

}) ⽂件代码{

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

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

}

2、进⼊⽬录下执⾏node 命令启动服务器

*开启成功如上图

⼆：在客户端向刚才所创建的服务端请求数据1.因为vue官⽅已不再维护vue-resource,所以选择使⽤axios来作为请求⼯具(1)、安装axios

(2)、在src/中将axios加⼊到vue原型中(全局引⽤)

2、这⾥为了图⽅便，直接在src/中的mounted钩⼦函数⾥⾯发送请求

View Code

⚠