React+Nodejs+MySQL全栈开发入门

本文涉及的产品
RDS AI 助手,专业版
RDS MySQL DuckDB 分析主实例,集群系列 4核8GB
RDS MySQL DuckDB 分析主实例,基础系列 4核8GB
简介: React+Nodejs+MySQL全栈开发入门

内容介绍

1、开发环境准备


安装Nodejs

第一个Nodejs程序

Nodejs和npm

nodemon实现热启动

使用nrm解决npm源的

使用nvm管理Nodejs版本

2、Web应用基础


Web应用以及Express

使用Express搭建第一个Web服务

路由(Routing)的介绍和使用

中间件(Middleware)介绍和使用

自定义编写中间件

异常处理

MySQL的安装和基本命令使用

ORM框架Sequelize介绍和使用

3、项目实战TODO


4、梳理总结


1、开发环境准备

1、安装Nodejs


直接下载官方安装包

MacOS 使用Homebrew安装

使用nvm版本管理器安装(推荐)

2、第一个Nodejs程序

创建项目配置文件


npm init -y

示例:读取CPU信息


// 读取系统信息
const os = require('os')
// 读取cup数量
let cpus = os.cpus().length;
console.log(cpus);
// 8
// 获取内存信息
let tatol = os.totalmem(); // bytes
console.log(tatol/1024/1024/1024);  // GB
// 剩余内存
let free = os.freemem(); // bytes
console.log(free/1024/1024/1024);  // GB

示例:web服务


const http = require('http');
const server = http.createServer((req, res)=>{
    res.end('hello')
})
server.listen(8080, ()=>{
    console.log("服务启动");
})
// http://localhost:8080/

3、Nodejs和npm


JavaScript代码
    ->
NodejsAPI
全局 内置模块 第三方模块(npm)
V8 libuv
    ->
系统环境(windows/macOS/linux)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T9FdGPLT-1578322742426)(./img/WX20200105-182027@2x.png)]


4、nodemon实现热启动

项目结构


package.json
src/
    app.js

(1)安装nodemon


npm install nodemon -D

(2)修改package.json启动命令


"scripts": {
    "start": "DEBUG=* nodemon src/app.js",
    "start:node": "node src/app.js"
}

DEBUG=*可选,打印debug信息


(3)指定监听文件nodemon.json


{
    "watch": ["./src/**/*.js"]
}

5、使用nrm管理npm源

安装


npm install nrm -g
# 使用
nrm ls
nrm -h

6、使用nvm管理Nodejs版本

nvm ls

小结

nvm 管理Nodejs版本

npm 管理第三方包

nrm npm源管理

nodemon 监听文件,自动重启服务


2、Web应用基础

1、Web应用以及Express


前端 -> ajax, ws -> 服务器(web应用) -> 缓存/数据库

express 接收 request, 处理response

一种web框架

https://expressjs.com/


2、使用Express搭建第一个Web服务


mkdir demo
cd demo
npm init -y
git init
echo node_modules > .gitignore
npm install express -S
npm install nodemon -D

项目结构


package.json
src/
    app.js
.gitignore
node_modules/

修改package.json


"scripts": {
    "start": "nodemon ./src/app.js"
  },

app.js


const express = require('express')
// 实例化
const app = express()
app.get('/', (request, response) => {
    response.json({
        name: "Tom",
        age: 21
    })
})
app.listen(8080, () => {
    console.log(`server start http://localhost:8080`);
})

启动服务


npm start

http://localhost:8080


3、路由(Routing)的介绍和使用


url -> 网络 -> dns解析 -> 目标服务器

路由规则


请求方法

get/post -> 响应

uri -> 路径


get/post/put/delete


// callback = (req, res)=>{}
app.get(path, callback)
app.post(path, callback)
// 响应所有请求方式
app.all(path, callback)
// 响应所有请求uri
app.all("*", callback)
// 任何请求来了都会经过
app.use(path, callback)
// 路由拆分

路由拆分

app.js


const express = require('express')
const dogRouter = require('./dog.router')
const catRouter = require('./cat.router')
// 实例化
const app = express()
// 注册路由
app.use('/dog', dogRouter)
app.use('/cat', catRouter)
app.listen(8080, () => {
    console.log(`server start http://localhost:8080`);
})

cat.router.js


const express = require('express');
const router = express.Router();
router.get("/", (req, res)=>{
    res.end("cat")
})
module.exports = router;

dog.router.js


const express = require('express');
const router = express.Router();
router.get("/", (req, res)=>{
    res.end("dog")
})
module.exports = router;

4、中间件(Middleware)介绍和使用


function(err, req, res, next)
// err 异常
// next 转交控制权
// 响应请求 结束响应

使用:

(1)app级别

最顶层注册

app.use()



// 实例化
const app = express()
// 定义中间件
function logMiddleware(req, res, next){
    console.log("请求来了");
    next()
}
// 使用中间件
app.use(logMiddleware)
// 使用静态文件中间件
app.use(express.static('static'))

(2)router内部使用


app.get("/", [Middleware], (req, res)=>{
})

(3)异常处理

异常捕获,放在最后处理

内置异常处理



// 实例化
const app = express()
app.get("/", (req, res)=>{
    res.end(message)
})
// 异常处理中间件放在最后
function errHandlerMiddleware(err, req, res, next){
    if(err){
        res.json({
            msg: err.message
        })
    }
}
app.use(errHandlerMiddleware)

404异常



         

7、MySQL的安装和基本命令使用

查看本机brew服务


brew services list
brew services start/stop mysql

mysql

结构化数据库

提供数据存放的服务

数据库 划分存储区域

表 对象数组

app -> orm -> mysql驱动 -> mysql


8、ORM框架Sequelize介绍和使用

https://sequelize.org/v5/manual/getting-started.html


npm install sequelize -S
npm install sequelize-cli -D
npx sequelize-cli init

项目实战

1、需求说明


查询全部数据:名称状态,分页

新增任务:名称,截止日期,内容

编辑

删除

修改状态:代办,完成

2、代码实现

所有异常 status=500

body-parse


3、数据库初始化

(1)初始化项目数库配置

sequelize cli

npx sequelize init


(2)生成模型文件

migrate/model

npx sequelize model:generate --name Todo --attributes name:string,deadline:date,content:string

(3)持久化,在数据库中生成模型对应的数据表

npx sequelize db:migrate


项目发布和运维介绍

pm2


重点回顾

1、技术栈

node http, 异常

web框架 express hapi koa egg

参数校验

mysql

ORM sequelize


2、技术关键点

api: web webserver router handler orm db


3、注意事项

模型设计 模型之间关系

api文档

测试

相关实践学习
自建数据库迁移到云数据库
本场景将引导您将网站的自建数据库平滑迁移至云数据库RDS。通过使用RDS,您可以获得稳定、可靠和安全的企业级数据库服务,可以更加专注于发展核心业务,无需过多担心数据库的管理和维护。
MySQL数据库入门学习
本课程通过最流行的开源数据库MySQL带你了解数据库的世界。   相关的阿里云产品:云数据库RDS MySQL 版 阿里云关系型数据库RDS(Relational Database Service)是一种稳定可靠、可弹性伸缩的在线数据库服务,提供容灾、备份、恢复、迁移等方面的全套解决方案,彻底解决数据库运维的烦恼。 了解产品详情: https://www.aliyun.com/product/rds/mysql 
相关文章
|
12月前
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
593 1
|
监控 前端开发 Java
【技术开发】接口管理平台要用什么技术栈?推荐:Java+Vue3+Docker+MySQL
该文档介绍了基于Java后端和Vue3前端构建的管理系统的技术栈及功能模块,涵盖管理后台的访问、登录、首页概览、API接口管理、接口权限设置、接口监控、计费管理、账号管理、应用管理、数据库配置、站点配置及管理员个人设置等内容,并提供了访问地址及操作指南。
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
578 0
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
SQL JavaScript 关系型数据库
node博客小项目:接口开发、连接mysql数据库
【10月更文挑战第14天】node博客小项目:接口开发、连接mysql数据库
|
SQL 关系型数据库 MySQL
PHP与MySQL协同工作的艺术:开发高效动态网站
在这个后端技术迅速迭代的时代,PHP和MySQL的组合仍然是创建动态网站和应用的主流选择之一。本文将带领读者深入理解PHP后端逻辑与MySQL数据库之间的协同工作方式,包括数据的检索、插入、更新和删除操作。文章将通过一系列实用的示例和最佳实践,揭示如何充分利用这两种技术的优势,构建高效、安全且易于维护的动态网站。
|
前端开发 Java 数据库连接
表白墙/留言墙 —— 中级SpringBoot项目,MyBatis技术栈MySQL数据库开发,练手项目前后端开发(带完整源码) 全方位全步骤手把手教学
本文是一份全面的表白墙/留言墙项目教程,使用SpringBoot + MyBatis技术栈和MySQL数据库开发,涵盖了项目前后端开发、数据库配置、代码实现和运行的详细步骤。
392 0
表白墙/留言墙 —— 中级SpringBoot项目,MyBatis技术栈MySQL数据库开发,练手项目前后端开发(带完整源码) 全方位全步骤手把手教学
|
SQL JavaScript 关系型数据库
Node服务连接Mysql数据库
本文介绍了如何在Node服务中连接MySQL数据库,并实现心跳包连接机制。
222 0
Node服务连接Mysql数据库
|
SQL JavaScript 关系型数据库
Node.js 连接 MySQL
10月更文挑战第9天
190 0
|
Web App开发 JSON JavaScript
深入浅出:Node.js后端开发入门与实践
【10月更文挑战第4天】在这个数字信息爆炸的时代,了解如何构建一个高效、稳定的后端系统对于开发者来说至关重要。本文将引导你步入Node.js的世界,通过浅显易懂的语言和逐步深入的内容组织,让你不仅理解Node.js的基本概念,还能掌握如何使用它来构建一个简单的后端服务。从安装Node.js到实现一个“Hello World”程序,再到处理HTTP请求,文章将带你一步步走进Node.js的大门。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开一扇通往后端开发新世界的大门。

推荐镜像

更多