【Vue】Vue 项目后端接口框架搭建

​​Express​​ 是一个基于​​Node​​平台的​​web应用开发框架​​，它提供了一系列的强大特性，帮助你创建各种Web网站应用。使用​​原生JS​​代码写起来比较复杂，比较底层的；比如实现路由功能，需要对请求地址进行解析，还要进行各种判断，代码乱，不易阅读；再比如，实现静态资源访问功能，还要使用文件读取模块，对文件内容读取，还要设计响应内容类型，但实际和网站本身的业务逻辑没有关系；还有，接收​​post请求参数​​的代码，需要对请求对象添加事件，手动拼接请求参数，对请求参数的格式进行转化，都是复杂的，并且还是和和业务逻辑没有关系；​​原生JS​​实现网站应用比较困难，于是 ​​express​​ 就出现了。

Web 应用程序

API

性能

框架

​​返回顶部​​

切换目录值 ​​server​​下，进行​​express​​组件下载：

G:\Projects\VsCodeProject\vue\app>cd ..

G:\Projects\VsCodeProject\vue>cd ./server

G:\Projects\VsCodeProject\vue\server>npm install --save express
added 50 packages in 5s  # 下载完成

下载完成后，​​server​​ 文件家中会对应添加一些配置文件：

​​返回顶部​​

创建一个文件夹 ​​server​​ 在其中创建 ​​index.js​​ 与 ​​router​​ 文件夹容来容纳代码:

紧接上一节的 ​​Vue 项目前端框架构建​​，这里我们需要在 ​​router​​下创建​​4个文件​​分别容纳页面中​​左​​、​​右​​四张图表对应的接口：

// 引入 express 
var express = require("express");
// 获取视图
var router = express.Router();
// 设置路由 /data
router.get("/data", (req,) => {
    res.send({ msg: '这是 one 的路由地址！' })
})
// 暴露路由
module.exports = router;

​​返回顶部​​

在​​index.js​​下，引用并使用刚才创建路由文件:

// 引用 express
var express = require("express");
// 创建 express 实例
var app = express()

// 引用路由文件
var chartOne= require('./router/One.js');
var chartTwo= require('./router/Two.js');
var chartThree= require('./router/Three.js');
var chartFour= require('./router/Four.js');

// 使用路由文件
app.use("/one",chartOne);
app.use("/two",chartTwo);
app.use("/three",chartThree);
app.use("/four",chartFour);

// 监听
app.listen(8888) // 请求是localhost:3000/user/路由文件中的地址

​​返回顶部​​

在当前目录下，运行（控制台没内容显示表示正常运行）：

G:\Projects\VsCodeProject\vue\server>node index.js

运行后，我们可以打开浏览器输入 ​​localhost:8888/one/data​​ 进行测试：

过程解析：

​​返回顶部​​

1、在​​server​​文件夹下创建​​mock​​文件夹用来容纳数据(数据可以从代码中获取):

2、在 one.js 中将数据集导入，并发送至路由页面：

// 引入 express 
var express = require("express");
// 获取视图
var router = express.Router();
// 获取 one.json 中的数据
var data1 = require("../mock/one.json")


// 设置路由 /data
router.get("/data", (req,) => {
    res.send({ msg: '这是 one 的路由地址！',chartData:data1 })
})

// 暴露路由
module.exports = router;

重新打开服务：

​​返回顶部​​