网站首页 > 基础教程 正文
一、用到的技术点
- 第三方包express和mysql2
- ES6模块化
- Promise
- async/await
二、主要实现步骤
- 搭建项目基本结构
①新建文件夹,使用node初始化项目,并在package.json中声明"type":"module"使之支持ES6模块化
npm init -y
②安装第三方依赖
npm install express@4.17.1 mysql2@2.2.5
//package.json
{
"type":"module",
"name": "api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
2. 创建基本的服务器
在项目的根目录下创建一个app.js文件,在其中导入express模块,并绑定监听端口号,在终端运行命
令:node ./app.js
//app.js
import express from 'express'
const app = express()
app.listen(8081,()=>{
console.log("服务已经启动。。。");
})
输入命令后看见如下则说明服务已经启动:
3. 创建db数据库操作模块
在项目根目录下创建db文件夹,在其中创建index.js,导入mysql2模块并定义数据源。
//index.js
import mysql from 'mysql2'
const pool = mysql.createPool({
host:'127.0.0.1',
port:3306,
database:'sys',//数据库名称
user:'root',//用户名
password:'123456'//密码
})
//使用默认导出,将数据库对象暴露出去 这里导出它的promise
export default pool.promise()
4. 创建controller模块
在项目根目录创建controller文件夹,在其中新建control.js,导入刚才创建的db模块,并进行相应的
数据库操作。
//control.js
import db from "../db/index.js";
//定义一个获取数据列表的函数
//将函数按需导出
//由于我们之前的db返回的是promise对象,所以我们使用async/await来简化
export async function getInfo(req, res) {
//这里可以进行一个异常捕获
try {
const [rows] = await db.query("select * from sys_config");
//构建响应数据
res.send({
status: 200,
msg: "获取成功",
data: rows,
});
} catch (error) {
//构建响应数据
res.send({
status: 500,
msg: "获取失败",
data: error.message,
});
}
}
5. 创建router模块
在项目根目录下创建router文件夹,在其中创建router.js,需要按需导入上一步创建的getInfo函数,
并创建路由对象和定义挂载路由的规则。
//router.js
import express from "express";
//按需导入getInfo函数
import { getInfo } from "../controller/control.js";
//创建路由对象
const router = new express.Router()
//挂载路由对象 /info代表访问路径
router.get('/info',getInfo)
//将路由对象导出
export default router
6. 在app.js中导入并挂载路由模块
在app.js中导入并挂载路由模块,并重启服务
//app.js
import express from 'express'
//导入路由模块
import router from './router/router.js';
const app = express()
//挂载路由对象 '/api'用来设置默认访问前缀,如router模块中定义了'/info',那么访问路径就是'/api/info'
app.use('/api',router)
app.listen(8081,()=>{
console.log("服务已经启动。。。");
})
7. 补充
想要修改代码后自动编译,可以使用nodemon ./app.js
如果没有安装nodemon 可以使用命令npm install nodemon -g进行全局安装
8. 测试
打开浏览器,输入:http://localhost:8081/api/info
如果出现以下数据,说明该api在本地已经可以成功访问。
如果访问不到,请检查自己的数据库名称,用户名和密码是否正确。
三、将写好的API部署到服务器
要想将API部署到服务器,首先得有自己的服务器。这个看大家的需求自行购买。
以腾讯云的宝塔面板进行演示。
- 安装PM2管理工具
2. 上传数据库备份文件
注意:数据库名字和用户名随便取,但是会有校验规则,像什么root之类的是不允许取的
选择导入,从本地上传数据库备份文件,也就是上面步骤中用到的数据库。
上传之后一定要选择导入
3. 将本地文件上传到服务器
文件上传的路径是任意的,比如我在wwwroot目录下新建了api文件夹,然后进入api文件夹,点击上传,将本地刚才创建的api文件夹中的所有内容上传。
4. 修改数据库的连接
因为服务器上的数据库名字和用户名和本地创建的时候是不一致的,所以要修改成服务器上的用户名和数据库名字。修改服务器上db/index.js:
import mysql from 'mysql2'
const pool = mysql.createPool({
host:'127.0.0.1',
port:3306,
database:'test111',
user:'test111',
password:'123456'
})
export default pool.promise();
5. 配置PM2管理工具
选择模块下的管理
设置监听端口
在安全中放行8081端口
同时在防火墙放行8081端口
重启服务,用ip+端口号进行访问
如果能成功访问如上页面,说明API部署成功。
6. 跨域问题
我们写一个index.htm,点击按钮来获取一下服务器的API接口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>api测试</title>
</head>
<body>
<button onclick="getInfo()">点击获取数据</button>
<div id="content"></div>
</body>
<script>
function getInfo() {
var xhr = new XMLHttpRequest(); //这里没有考虑IE浏览器,如果需要择if判断加
xhr.open("GET", "http://你的ip:8081/api/info", true);
xhr.send(null);
xhr.onreadystatechange = function (data) {
if (xhr.status === 200 && xhr.readyState === 4) {
document.getElementById('content').innerText = data.currentTarget.responseText
}
};
}
</script>
</html>
我们点击按钮发现出现跨域错误
解决方式:
在app.js中加入如下代码,然后重启PM2管理工具:
import express from 'express'
//导入路由模块
import router from './router/router.js';
const app = express()
//本地服务器解决跨域,不可缺
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
//Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Methods', '*');
res.header('Content-Type', 'application/json;charset=utf-8');
next();
});
//挂载路由对象 '/api'用来设置默认访问前缀,如router模块中定义了'/info',那么访问路径就是'/api/info'
app.use('/api',router)
app.listen(8081,()=>{
console.log("服务已经启动。。。");
})
再次点击按钮,成功获取到返回的json数据:
至此,基于node模块化的api编写及部署就结束了。大家在学习开发的过程中就可以自己写接口来测试了。
猜你喜欢
- 2024-12-02 GitHub精选 | 后台权限管理系统(基于Node.js)
- 2024-12-02 Node.js 的 5 个常见服务器漏洞
- 2024-12-02 Node-RED教程 – 22 modbus读取数据写入mysql并可查询显示曲线图
- 2024-12-02 MySQL 同步复制及高可用方案总结
- 2024-12-02 如何实现用prometheus+grafana实时监控mysql数据库?
- 2024-12-02 (完结无密) Vue3+Uni+Node+MySQL 从零实现跨端小程序的全栈应用
- 2024-12-02 Mysql-cluster搭建
- 2024-12-02 Mysql高可用方案--PXC
- 2024-12-02 Vue整合Node.js,直连Mysql数据库进行CURD操作
- 2024-12-02 MySQL数据库之Haproxy+PXC集群搭建(中)
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)