艺宵网 技术资讯 基于MySql数据库+Express的API接口服务(含服务器部署)

基于MySql数据库+Express的API接口服务(含服务器部署)

一、用到的技术点 第三方包express和mysql2 ES6模块化 Promise async/await …

一、用到的技术点

  • 第三方包express和mysql2
  • ES6模块化
  • Promise
  • async/await

二、主要实现步骤

  1. 搭建项目基本结构
①新建文件夹,使用node初始化项目,并在package.json中声明"type":"module"使之支持ES6模块化
npm init -y
②安装第三方依赖
npm install express@4.17.1 mysql2@2.2.5
基于MySql数据库+Express的API接口服务(含服务器部署)

//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("服务已经启动。。。");
})

输入命令后看见如下则说明服务已经启动:

基于MySql数据库+Express的API接口服务(含服务器部署)

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在本地已经可以成功访问。
如果访问不到,请检查自己的数据库名称,用户名和密码是否正确。
基于MySql数据库+Express的API接口服务(含服务器部署)

火狐访问

基于MySql数据库+Express的API接口服务(含服务器部署)

谷歌访问

三、将写好的API部署到服务器

要想将API部署到服务器,首先得有自己的服务器。这个看大家的需求自行购买。

以腾讯云的宝塔面板进行演示。

  1. 安装PM2管理工具
基于MySql数据库+Express的API接口服务(含服务器部署)

2. 上传数据库备份文件

基于MySql数据库+Express的API接口服务(含服务器部署)

注意:数据库名字和用户名随便取,但是会有校验规则,像什么root之类的是不允许取的

基于MySql数据库+Express的API接口服务(含服务器部署)

选择导入,从本地上传数据库备份文件,也就是上面步骤中用到的数据库。

基于MySql数据库+Express的API接口服务(含服务器部署)

上传之后一定要选择导入

基于MySql数据库+Express的API接口服务(含服务器部署)

3. 将本地文件上传到服务器

文件上传的路径是任意的,比如我在wwwroot目录下新建了api文件夹,然后进入api文件夹,点击上传,将本地刚才创建的api文件夹中的所有内容上传。

基于MySql数据库+Express的API接口服务(含服务器部署)

基于MySql数据库+Express的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管理工具

基于MySql数据库+Express的API接口服务(含服务器部署)

基于MySql数据库+Express的API接口服务(含服务器部署)

基于MySql数据库+Express的API接口服务(含服务器部署)

选择模块下的管理

基于MySql数据库+Express的API接口服务(含服务器部署)

基于MySql数据库+Express的API接口服务(含服务器部署)

设置监听端口

基于MySql数据库+Express的API接口服务(含服务器部署)

在安全中放行8081端口

基于MySql数据库+Express的API接口服务(含服务器部署)

同时在防火墙放行8081端口

基于MySql数据库+Express的API接口服务(含服务器部署)

重启服务,用ip+端口号进行访问

基于MySql数据库+Express的API接口服务(含服务器部署)

基于MySql数据库+Express的API接口服务(含服务器部署)

如果能成功访问如上页面,说明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>

我们点击按钮发现出现跨域错误

基于MySql数据库+Express的API接口服务(含服务器部署)

解决方式:

在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数据:

基于MySql数据库+Express的API接口服务(含服务器部署)

至此,基于node模块化的api编写及部署就结束了。大家在学习开发的过程中就可以自己写接口来测试了。

本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。http://www.yixao.net/tech/29322.html
Vedu

作者: Vedu

这个人很懒,什么都没有留下~

发表评论

联系我们

联系我们

15378714280

在线咨询: QQ交谈

邮箱: yixaonet@163.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部