express+nodejs+mysql 开启服务端开发之路

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情

作为一个普普通通的前端开发，一直有一个“全沾”开发的梦想。如果要开发服务端，现在去学习Java、Go的话，或多或少都会显得有点麻烦了。其实，对于习惯了使用JavaScript的前端er来说，Nodejs就是一个很不错的选择。

Nodejs是基于Chrome V8引擎的JavaScript运行环境，可以让js代码运行在服务端。光有运行环境还不行，我们还需要使用一个基于Nodejs平台的express开发框架。接下来就从零开始，详细的介绍如何开启一个服务端项目。

安装依赖

想要js代码能运行在服务端，就需要使用nodejs，首先确认本机的nodejs环境：

node -v
// v16.14.0
npm -v
// 8.3.1

如果本机环境上没有nodejs，则需要去官网下载安装包，在安装后将其添加到系统环境变量中。然后我们就可以新建一个项目了：

mkdir express-mysql-demo
cd express-mysql-demo
npm init

想要实现服务端，我们需要以下依赖：

express：基于Nodejs的Web开发框架
cors：用于解决跨域问题
body-parser：用于解析请求头、请求体
mysql：连接MySQL数据库

直接安装依赖：

npm i express cors body-parser mysql

在这里需要注意，我们在项目中引入了mysql依赖，只是用来连接数据库，还需要在本地安装MySQL：

首先去官网下载安装包，本项目使用的是5.7.38社区版，下载完成后按照默认安装即可
然后下载一个Navicat，同样去官网下载，下载完成后按照默认安装即可。注意Navicat是要收费的，可以试用14天
测试一下使用Navicat是否可以连接MySQL

服务端

准备好相关环境依赖后，我们就可以开始码代码了：

const express = require('express'); // require配合module.exports使用，属于CommonJS规范
const app = express(); // 创建实例

const cors = require('cors');
app.use(cors()); // 解决跨域问题

const bodyParser = require('body-parser');
// 请求体解析
// 解析JSON格式
app.use(bodyParser.json());
// 解析文本格式，extended：false，表示使用系统模块querystring来处理，默认选择
app.use(bodyParser.urlencoded({extended: false}))

const port = 9099; // 监听端口，注意不能被占用或者使用已经占用的端口
const mysql = require('mysql'); // 数据库连接依赖

const db = mysql.createConnection({
  host: 'localhost', // 本地调试可指定为localhost，生产上需指定数据库地址
  user: '', // 登录数据库用户名
  password: '', // 登录数据库密码
  database: 'db_test', // 选择的数据库名称
  port: 3306, // 数据库端口，默认为3306
})

db.connect((err) => {
  if (err) throw err; // 连接失败就抛出异常
  console.log('数据库连接成功！');
})
// get请求
app.get('/getExamples', (req, res) => {
  const sql = `select * from t_test where type_name='${req.query.type}'`;
  db.query(sql, (err, result) => {
    if (err) {
      console.log('查询失败', err);
    } else {
      const data = JSON.parse(JSON.stringify(result)); // 简单深拷贝
      // 使用JSON格式返回数据
      res.json({
        status: 200,
        data
      })
    }
  })
})
// post请求
app.post('/setExamples', (req, res) => {
  const sql = `insert into t_test(type_name) value(?)`; // sql语句中不能含有mysql关键词
  db.query(sql, [req.body.type], (err, result) => {
    if (err) {
      console.log('添加失败', err);
    } else {
      const data = JSON.parse(JSON.stringify(result));
      // 使用JSON格式返回数据
      res.json({
        status: 200,
        data: data.affectedRows == 1 ? '添加成功' : '添加失败' // affectedRows表示影响的行数
      })
    }
  })
})
app.listen(port, () => {
  console.log(`服务端启动并监听端口${port}`);
})

如上，我们实现了一个简单的服务端，我们可以直接node index.js，也可以使用npm run server命令，这就需要修改一下package.json：

...
"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "server": "chcp 65001 && node ./index.js"
},

chcp 65001用于解决控制台中文乱码问题。

把服务端跑起来：npm run server

客户端

验证服务端可以使用PostMan等工具，这里我们就直接新建一个index.html文件：

<!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">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    body {
      text-align: center;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <button id="btn1">查询数据</button>
  <button id="btn2">添加数据</button>
  <script>
    document.getElementById('btn1').addEventListener('click', (e) => {
      axios({
        url: 'http://localhost:9099/getExamples', // 完整的请求地址
        method: 'get', // 请求方法
        params: {
          type: 'type1', // query参数
        },
        transformRequest: [
          function(data) {
            return JSON.stringify(data)
          }
        ],
        // 请求头
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
        },
        dataType: 'json', // 返回数据格式
      }).then((res) => {
        console.log('返回数据', res);
      }).catch(err => {
        console.log('请求失败', err);
      })
    })
    document.getElementById('btn2').addEventListener('click', (e) => {
      axios({
        url: 'http://localhost:9099/setExamples', // 完整的请求地址
        method: 'post', // 请求方法
        data: {
          type: 'type2'
        },
        dataType: 'json', // 返回数据格式
      }).then((res) => {
        console.log('返回数据', res);
      }).catch(err => {
        console.log('请求失败', err);
      })
    })
  </script>
</body>
</html>

内容也不复杂，就是两个按钮，分别查询和新增数据。在这里我们使用了axios来发起HTTP请求，也可以使用fetch、XMLHttpRequest来实现。

运行结果：

可以发现，数据查询和新增功能都是ok的。当然，HTTP请求还有PUT、DELETE等方法，这里就没有逐一实现了，但是相差应该不大。

总结

本文介绍了如何使用express+nodejs+mysql来实现一个简单的服务端demo，但是距离真正的项目级服务端还是有一定的距离。不过，这也算是有了一个好的开头，前端er也可以调试自己写的接口了，说不定哪一天就成为了“全沾”工程师。