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

---

---

Vue 项目后端接口框架搭建

一、Express 框架

1、Express 框架介绍

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

---

2、Express 框架特性

Web 应用程序

• Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。

  ---

API

• 使用您所选择的各种 HTTP 实用工具和中间件，快速方便地创建强大的 API。

  ---

性能

• Express 提供精简的基本 Web 应用程序功能，而不会隐藏您了解和青睐的 Node.js 功能。

  ---

框架

• 许多 流行的开发框架 都基于 Express 构建。

返回顶部

---

二、Express 框架开发

1、Express 全局下载

切换目录值 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 文件家中会对应添加一些配置文件：

返回顶部

---

2、框架构建

（1）基本框架 index.js\router

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

---

（2）图表路由文件基本配置

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

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

返回顶部

---

（3）创建服务

在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/路由文件中的地址

返回顶部

---

（4）测试服务接口

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

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

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

过程解析：

返回顶部

---

三、api 接口数据创建

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) => {
    res.send({ msg: '这是 one 的路由地址！',chartData:data1 })
})

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

重新打开服务：

返回顶部

---