React+Nodejs+MySQL全栈开发入门

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS PostgreSQL,高可用系列 2核4GB
云数据库 RDS MySQL,高可用系列 2核4GB
简介: React+Nodejs+MySQL全栈开发入门

内容介绍

1、开发环境准备


  1. 安装Nodejs
  2. 第一个Nodejs程序
  3. Nodejs和npm
  4. nodemon实现热启动
  5. 使用nrm解决npm源的
  6. 使用nvm管理Nodejs版本


2、Web应用基础


  1. Web应用以及Express
  2. 使用Express搭建第一个Web服务
  3. 路由(Routing)的介绍和使用
  4. 中间件(Middleware)介绍和使用
  5. 自定义编写中间件
  6. 异常处理
  7. MySQL的安装和基本命令使用
  8. ORM框架Sequelize介绍和使用


3、项目实战TODO

4、梳理总结

1、开发环境准备

1、安装Nodejs


  1. 直接下载官方安装包
  2. MacOS 使用Homebrew安装
  3. 使用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异常

function notFoundHandler(err, req, res, next) {
    res.json({
        msg: '接口不存在'
    })
}
app.use(notFoundHandler)

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、需求说明

  1. 查询全部数据:名称状态,分页
  2. 新增任务:名称,截止日期,内容
  3. 编辑
  4. 删除
  5. 修改状态:代办,完成


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 
相关文章
|
存储 前端开发 JavaScript
React中如何动态添加和删除元素
React中如何动态添加和删除元素
388 0
|
存储 设计模式 容器
专题八图形窗口与坐标轴-3
专题八图形窗口与坐标轴
263 0
|
Web App开发 搜索推荐 Java
|
10月前
|
C# Android开发 虚拟化
C# 一分钟浅谈:MAUI 跨平台移动应用开发
.NET MAUI 是 Microsoft 推出的跨平台框架,支持 Windows、macOS、iOS 和 Android。本文从基础概念入手,探讨 MAUI 的常见问题、易错点及解决方案,并通过代码示例详细说明。涵盖平台特定代码、XAML 语法、数据绑定、性能优化和调试技巧等内容,帮助开发者更好地掌握 .NET MAUI。
894 55
|
存储 API 对象存储
使用对象存储OSS实现内容分发加速
通过本教程的操作,您可以在OSS中创建bucket并上传数据,可以开通OSS传输加速对OSS数据进行加速访问,从而为游戏服务器分担下载请求,并为用户带来加速体验。
11389 27
使用对象存储OSS实现内容分发加速
|
7月前
|
XML 搜索推荐 安全
CMS(内容管理系统)是什么?主要作用是什么?
CMS是一种简化网站管理、提高建站速度、功能齐全且易SEO优化的网站管理系统。通过使用CMS,用户无需编程知识即可完成网站的制作,且能实现多种风格的页面模版、完善的功能后台和SEO优化功能。
1906 1
|
JavaScript 关系型数据库 MySQL
创建nodejs项目并接入mysql,完成用户相关的增删改查的详细操作
创建nodejs项目并接入mysql,完成用户相关的增删改查的详细操作
186 0
|
10月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
450 10
|
机器学习/深度学习 存储 人工智能
大数据处理与分析技术:未来的基石
在信息化时代,数据已成为企业发展和决策的基础。而随着数据量的不断增长,传统的数据处理方法已经无法满足现代企业的需求。因此,大数据处理与分析技术的出现成为了新时代的必需品。本文将介绍大数据处理与分析技术的概念,意义、应用场景以及未来发展趋势。
382 3
|
人工智能 弹性计算 自然语言处理
通义万相AI创作绘画产品方案产品体验
本次我有幸接触并体验了阿里云通义万相这一创新的AI绘画工具方案。该方案它是在利用人工智能技术,为用户提供创新、便捷的绘画创作体验。在体验过程中,我主要关注了产品的易用性、功能性、创新性、用户体验及方案本身等方面。
421 3