React+Nodejs+MySQL全棧開發(fā)入門

內(nèi)容介紹

1、開發(fā)環(huán)境準(zhǔn)備

安裝Nodejs

第一個Nodejs程序

Nodejs和npm

nodemon實現(xiàn)熱啟動

使用nrm解決npm源的

使用nvm管理Nodejs版本

2、Web應(yīng)用基礎(chǔ)

Web應(yīng)用以及Express

使用Express搭建第一個Web服務(wù)

路由（Routing）的介紹和使用

中間件（Middleware）介紹和使用

自定義編寫中間件

異常處理

MySQL的安裝和基本命令使用

ORM框架Sequelize介紹和使用

3、項目實戰(zhàn)TODO

4、梳理總結(jié)

1、開發(fā)環(huán)境準(zhǔn)備

1、安裝Nodejs

直接下載官方安裝包

MacOS 使用Homebrew安裝

使用nvm版本管理器安裝(推薦)

2、第一個Nodejs程序

創(chuàng)建項目配置文件

npm init -y

1

示例：讀取CPU信息

// 讀取系統(tǒng)信息 const os = require('os') // 讀取cup數(shù)量 let cpus = os.cpus().length; console.log(cpus); // 8 // 獲取內(nèi)存信息 let tatol = os.totalmem(); // bytes console.log(tatol/1024/1024/1024); // GB // 剩余內(nèi)存 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服務(wù)

const http = require('http'); const server = http.createServer((req, res)=>{ res.end('hello') }) server.listen(8080, ()=>{ console.log("服務(wù)啟動"); }) // http://localhost:8080/

1

2

3

4

5

6

7

8

9

10

11

3、Nodejs和npm

JavaScript代碼 -> NodejsAPI 全局 內(nèi)置模塊 第三方模塊(npm) V8 libuv -> 系統(tǒng)環(huán)境（windows/macOS/linux）

1

2

3

4

5

6

7

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-T9FdGPLT-1578322742426)(./img/WX20200105-182027@2x.png)]

4、nodemon實現(xiàn)熱啟動

項目結(jié)構(gòu)

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）指定監(jiān)聽文件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

小結(jié)

nvm 管理Nodejs版本

npm 管理第三方包

nrm npm源管理

nodemon 監(jiān)聽文件，自動重啟服務(wù)

2、Web應(yīng)用基礎(chǔ)

1、Web應(yīng)用以及Express

前端 -> ajax, ws -> 服務(wù)器(web應(yīng)用) -> 緩存/數(shù)據(jù)庫

1

express 接收 request， 處理response

一種web框架

https://expressjs.com/

2、使用Express搭建第一個Web服務(wù)

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

項目結(jié)構(gòu)

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

啟動服務(wù)

npm start

1

http://localhost:8080

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

url -> 網(wǎng)絡(luò) -> dns解析 -> 目標(biāo)服務(wù)器

1

路由規(guī)則

請求方法

get/post -> 響應(yīng)

uri -> 路徑

get/post/put/delete

// callback = (req, res)=>{} app.get(path, callback) app.post(path, callback) // 響應(yīng)所有請求方式 app.all(path, callback) // 響應(yīng)所有請求uri app.all("*", callback) // 任何請求來了都會經(jīng)過 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 轉(zhuǎn)交控制權(quán) // 響應(yīng)請求 結(jié)束響應(yīng)

1

2

3

4

使用：

（1）app級別

最頂層注冊

app.use()

// 實例化 const app = express() // 定義中間件 function logMiddleware(req, res, next){ console.log("請求來了"); next() } // 使用中間件 app.use(logMiddleware) // 使用靜態(tài)文件中間件 app.use(express.static('static'))

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

（2）router內(nèi)部使用

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

1

2

3

（3）異常處理

異常捕獲,放在最后處理

內(nèi)置異常處理

// 實例化 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服務(wù)

brew services list brew services start/stop mysql

1

2

mysql

結(jié)構(gòu)化數(shù)據(jù)庫

提供數(shù)據(jù)存放的服務(wù)

數(shù)據(jù)庫 劃分存儲區(qū)域

表 對象數(shù)組

app -> orm -> mysql驅(qū)動 -> 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

項目實戰(zhàn)

1、需求說明

查詢?nèi)繑?shù)據(jù)：名稱狀態(tài)，分頁

新增任務(wù)：名稱，截止日期，內(nèi)容

編輯

刪除

修改狀態(tài)：代辦，完成

2、代碼實現(xiàn)

所有異常 status=500

body-parse

3、數(shù)據(jù)庫初始化

（1）初始化項目數(shù)庫配置

sequelize cli

npx sequelize init

（2）生成模型文件

migrate/model

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

（3）持久化，在數(shù)據(jù)庫中生成模型對應(yīng)的數(shù)據(jù)表

npx sequelize db:migrate

項目發(fā)布和運維介紹

pm2

重點回顧

1、技術(shù)棧

node http， 異常

web框架 express hapi koa egg

參數(shù)校驗

mysql

ORM sequelize

2、技術(shù)關(guān)鍵點

api： web webserver router handler orm db

3、注意事項

模型設(shè)計 模型之間關(guān)系

api文檔

測試

MySQL React SQL

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。