React+Nodejs+MySQL全栈开发入门

本文涉及的产品
RDS MySQL DuckDB 分析主实例,基础系列 4核8GB
RDS MySQL DuckDB 分析主实例,集群系列 4核8GB
RDS DuckDB + QuickBI 企业套餐,8核32GB + QuickBI 专业版
简介: 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文档

测试

相关实践学习
每个IT人都想学的“Web应用上云经典架构”实战
本实验从Web应用上云这个最基本的、最普遍的需求出发,帮助IT从业者们通过“阿里云Web应用上云解决方案”,了解一个企业级Web应用上云的常见架构,了解如何构建一个高可用、可扩展的企业级应用架构。
MySQL数据库入门学习
本课程通过最流行的开源数据库MySQL带你了解数据库的世界。   相关的阿里云产品:云数据库RDS MySQL 版 阿里云关系型数据库RDS(Relational Database Service)是一种稳定可靠、可弹性伸缩的在线数据库服务,提供容灾、备份、恢复、迁移等方面的全套解决方案,彻底解决数据库运维的烦恼。 了解产品详情: https://www.aliyun.com/product/rds/mysql 
相关文章
|
SQL 关系型数据库 MySQL
网安入门之MySQL后端基础
《网安入门之MySQL后端基础》简介: 本文介绍了数据库及MySQL的基础知识,涵盖数据库的概念、结构与操作。数据库是组织化存储数据的集合,通过表、列、行等结构实现高效管理。MySQL作为开源的关系型数据库管理系统,广泛应用于Web开发。文中详细讲解了MySQL的基本操作,如增(INSERT)、删(DELETE)、改(UPDATE)、查(SELECT)等语句的使用方法,并介绍了数据库事务的ACID特性。此外,还探讨了SQL注入攻击的风险及防范措施,强调了预处理语句的重要性。最后,简述了PHP中mysqli扩展的使用方法,包括连接数据库、执行查询和关闭连接等步骤。
|
11月前
|
前端开发 JavaScript 编译器
React编程新手入门实践教程
本书深入解析React核心思想与设计哲学,涵盖组件化思维、虚拟DOM原理及JSX本质,探讨函数组件与类组件特性,详解状态管理、生命周期控制及事件处理机制,帮助开发者掌握高效构建用户界面的技巧。
308 1
|
关系型数据库 MySQL 数据库
MySQL基本操作入门指南
MySQL基本操作入门指南
744 0
|
Web App开发 移动开发 前端开发
React音频播放器样式自定义全解析:从入门到避坑指南
在React中使用HTML5原生<audio>标签时,开发者常面临视觉一致性缺失、样式定制局限和交互体验割裂等问题。通过隐藏原生控件并构建自定义UI层,可以实现完全可控的播放器视觉风格,避免状态不同步等典型问题。结合事件监听、进度条拖拽、浏览器兼容性处理及性能优化技巧,可构建高性能、可维护的音频组件,满足跨平台需求。建议优先使用成熟音频库(如react-player),仅在深度定制需求时采用原生方案。
621 12
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
640 1
|
前端开发 JavaScript 定位技术
React 地图组件 Mapbox 入门指南
Mapbox 是一个强大的地图平台,提供丰富的地图数据和工具,支持多种开发语言和框架。本文介绍如何在 React 项目中使用 Mapbox,涵盖基础概念、安装配置、基本用法、常见问题及解决方法、高级用法等内容,并通过代码示例详细说明,帮助开发者提升地图应用的开发效率和用户体验。
887 2
|
前端开发 API UED
React 图片轮播 Carousel:从入门到进阶
本文介绍了在 React 中实现图片轮播(Carousel)的方法,从基础安装和配置 `react-slick` 开始,逐步讲解了常见问题如图片路径、性能优化、自定义样式和交互处理,以及高级话题如动态数据加载和响应式设计。通过详细示例,帮助开发者避免易错点,提升轮播图的用户体验。
473 3
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
1165 10
|
监控 前端开发 Java
【技术开发】接口管理平台要用什么技术栈?推荐:Java+Vue3+Docker+MySQL
该文档介绍了基于Java后端和Vue3前端构建的管理系统的技术栈及功能模块,涵盖管理后台的访问、登录、首页概览、API接口管理、接口权限设置、接口监控、计费管理、账号管理、应用管理、数据库配置、站点配置及管理员个人设置等内容,并提供了访问地址及操作指南。
|
SQL JavaScript 关系型数据库
node博客小项目:接口开发、连接mysql数据库
【10月更文挑战第14天】node博客小项目:接口开发、连接mysql数据库

推荐镜像

更多