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

1

示例：读取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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

示例：web服务

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

1

2

3

4

5

6

7

8

9

10

11

3、Nodejs和npm

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

1

2

3

4

5

6

7

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

4、nodemon实现热启动

项目结构

package.json src/ app.js

1

2

3

（1）安装nodemon

npm install nodemon -D

1

（2）修改package.json启动命令

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

1

2

3

4

5

DEBUG=*可选，打印debug信息

（3）指定监听文件nodemon.json

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

1

2

3

5、使用nrm管理npm源

安装

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

1

2

3

4

5

6、使用nvm管理Nodejs版本

nvm ls

1

小结

nvm 管理Nodejs版本

npm 管理第三方包

nrm npm源管理

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

2、Web应用基础

1、Web应用以及Express

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

1

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

1

2

3

4

5

6

7

项目结构

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

1

2

3

4

5

修改package.json

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

1

2

3

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`); })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

启动服务

npm start

1

http://localhost:8080

3、路由（Routing）的介绍和使用

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

1

路由规则

请求方法

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) // 路由拆分

1

2

3

4

5

6

7

8

9

10

11

12

13

14

路由拆分

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`); })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

cat.router.js

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

1

2

3

4

5

6

7

8

9

dog.router.js

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

1

2

3

4

5

6

7

8

9

4、中间件（Middleware）介绍和使用

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

1

2

3

4

使用：

（1）app级别

最顶层注册

app.use()

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

（2）router内部使用

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

1

2

3

（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)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

404异常

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

1

2

3

4

5

6

7

8

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

查看本机brew服务

brew services list brew services start/stop mysql

1

2

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

3

项目实战

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文档

测试

MySQL React SQL

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。