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

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,高可用系列 2核4GB
简介: 作为一个普普通通的前端开发,一直有一个“全沾”开发的梦想。如果要开发服务端,现在去学习Java、Go的话,或多或少都会显得有点麻烦了。其实,对于习惯了使用JavaScript的前端er来说,Nodejs就是一个很不错的选择。

作为一个普普通通的前端开发,一直有一个“全沾”开发的梦想。如果要开发服务端,现在去学习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

image-20220628154202252.png

客户端

验证服务端可以使用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请求,也可以使用fetchXMLHttpRequest来实现。

运行结果:

image-20220628154501761.png

image-20220628154522570.png

可以发现,数据查询和新增功能都是ok的。

总结

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

相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL,然后进行数据表的CRUD操作。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
3月前
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
|
1月前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
|
2月前
|
JavaScript
使用node.js搭建一个express后端服务器
Express 是 Node.js 的一个库,用于搭建后端服务器。本文将指导你从零开始构建一个简易的 Express 服务器,包括项目初始化、代码编写、服务启动与项目结构优化。通过创建 handler 和 router 文件夹分离路由和处理逻辑,使项目更清晰易维护。最后,通过 Postman 测试确保服务正常运行。
125 1
|
2月前
|
JavaScript 中间件 关系型数据库
构建高效的后端服务:Node.js 与 Express 的实践指南
在后端开发领域,Node.js 与 Express 的组合因其轻量级和高效性而广受欢迎。本文将深入探讨如何利用这一组合构建高性能的后端服务。我们将从 Node.js 的事件驱动和非阻塞 I/O 模型出发,解释其如何优化网络请求处理。接着,通过 Express 框架的简洁 API,展示如何快速搭建 RESTful API。文章还将涉及中间件的使用,以及如何结合 MySQL 数据库进行数据操作。最后,我们将讨论性能优化技巧,包括异步编程模式和缓存策略,以确保服务的稳定性和扩展性。
|
2月前
|
监控 前端开发 Java
【技术开发】接口管理平台要用什么技术栈?推荐:Java+Vue3+Docker+MySQL
该文档介绍了基于Java后端和Vue3前端构建的管理系统的技术栈及功能模块,涵盖管理后台的访问、登录、首页概览、API接口管理、接口权限设置、接口监控、计费管理、账号管理、应用管理、数据库配置、站点配置及管理员个人设置等内容,并提供了访问地址及操作指南。
|
3月前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的完美结合
【10月更文挑战第21天】本文将引导你走进Node.js和Express框架的世界,探索它们如何共同打造一个高效、可扩展的后端服务。通过深入浅出的解释和实际代码示例,我们将一起理解这一组合的魅力所在,并学习如何利用它们来构建现代Web应用。
92 1
|
3月前
|
SQL JavaScript 关系型数据库
node博客小项目:接口开发、连接mysql数据库
【10月更文挑战第14天】node博客小项目:接口开发、连接mysql数据库
|
3月前
|
SQL 关系型数据库 MySQL
PHP与MySQL协同工作的艺术:开发高效动态网站
在这个后端技术迅速迭代的时代,PHP和MySQL的组合仍然是创建动态网站和应用的主流选择之一。本文将带领读者深入理解PHP后端逻辑与MySQL数据库之间的协同工作方式,包括数据的检索、插入、更新和删除操作。文章将通过一系列实用的示例和最佳实践,揭示如何充分利用这两种技术的优势,构建高效、安全且易于维护的动态网站。
|
2月前
|
Web App开发 JavaScript 前端开发
探索后端开发:Node.js与Express的完美结合
【10月更文挑战第33天】本文将带领读者深入了解Node.js和Express的强强联手,通过实际案例揭示它们如何简化后端开发流程,提升应用性能。我们将一起探索这两个技术的核心概念、优势以及它们如何共同作用于现代Web开发中。准备好,让我们一起开启这场技术之旅!
71 0
|
2月前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实践
【10月更文挑战第33天】在数字化时代的浪潮中,后端服务的效率和可靠性成为企业竞争的关键。本文将深入探讨如何利用Node.js和Express框架构建高效且易于维护的后端服务。通过实践案例和代码示例,我们将揭示这一组合如何简化开发流程、优化性能,并提升用户体验。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的见解和实用技巧。