React+Nodejs+MySQL全栈开发入门

本文涉及的产品
RDS MySQL DuckDB 分析主实例,基础系列 4核8GB
RDS AI 助手,专业版
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文档

测试

相关实践学习
每个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扩展的使用方法,包括连接数据库、执行查询和关闭连接等步骤。
|
9月前
|
人工智能 监控 JavaScript
HarmonyOS5云服务技术分享--ArkTS开发Node环境
本文详细讲解了在HarmonyOS(ArkTS API 9及以上)中使用云函数的开发技巧,结合Node.js和HTTP触发器,从零开始手把手教学。内容涵盖核心能力、开发流程(配置到部署)、高阶优化及常见问题解决,并提供实际应用场景示例。助你快速掌握Serverless开发,提升效率,探索跨端协作与AI集成等未来方向。
|
12月前
|
JavaScript 前端开发 数据可视化
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
754 2
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
332 10
|
Web App开发 JavaScript 前端开发
Node.js开发
Node.js开发
284 13
|
存储 JavaScript 前端开发
深入浅出Node.js后端开发
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将以Node.js为例,深入探讨其背后的哲学思想、核心特性以及在实际项目中的应用,旨在为读者揭示Node.js如何优雅地处理高并发请求,并通过实践案例加深理解。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和思考。
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
在这篇文章中,我们将一起探索Node.js的奇妙世界。无论你是刚接触后端开发的新手,还是希望深化理解的老手,这篇文章都适合你。我们将从基础概念开始,逐步深入到实际应用,最后通过一个代码示例来巩固所学知识。让我们一起开启这段旅程吧!
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
本文将带你领略Node.js的魅力,从基础概念到实践应用,一步步深入理解并掌握Node.js在后端开发中的运用。我们将通过实例学习如何搭建一个基本的Web服务,探讨Node.js的事件驱动和非阻塞I/O模型,以及如何利用其强大的生态系统进行高效的后端开发。无论你是前端开发者还是后端新手,这篇文章都会为你打开一扇通往全栈开发的大门。
|
JavaScript 前端开发 API
深入理解Node.js事件循环及其在后端开发中的应用
本文旨在揭示Node.js的核心特性之一——事件循环,并探讨其对后端开发实践的深远影响。通过剖析事件循环的工作原理和关键组件,我们不仅能够更好地理解Node.js的非阻塞I/O模型,还能学会如何优化我们的后端应用以提高性能和响应能力。文章将结合实例分析事件循环在处理大量并发请求时的优势,以及如何避免常见的编程陷阱,从而为读者提供从理论到实践的全面指导。
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
本文将带你走进Node.js的世界,从基础到进阶,逐步解析Node.js在后端开发中的应用。我们将通过实例来理解Node.js的异步特性、事件驱动模型以及如何利用它处理高并发请求。此外,文章还会介绍如何搭建一个基本的Node.js服务器,并探讨如何利用现代前端框架与Node.js进行交互,实现全栈式开发。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和深入的理解。
485 4

推荐镜像

更多