React + Nodejs + Mysql 全栈开发入门（一）基础

云沫沫
339 阅读4分钟

第一章 搭建前端全栈开发需要的本地基本环境

1-1 课程介绍

  • 开发环境的准备

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

  • Web 应用基础

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

  • 项目实战（Todo）

  • 梳理和总结

1-2 NodeJS 安装

  1. 通过下载官方安装包进行安装
  2. 在 mac os 中通过 Homebrew 安装
  3. 使用 nvm 版本管理器安装（推荐）

1-3 第一个 Nodejs 程序

win.js

const win = require('os');

// 显示系统的cpu信息
console.log(win.cpus());

// 显示系统剩余的内存比例
const freemen = win.freemem()/1024/1024/1024; //byte KB MB GB
const totalmem = win.totalmem()/1024/1024/1024; //byte KB MB GB
console.log('freemen/totalmem:', parseInt(freemen/totalmem*100));

// 显示当前系统的网络状况
console.log(win.networkInterfaces());

console.log(win.arch());
console.log(win.platform());
console.log(win.release());
console.log(win.type());
console.log(win.userInfo());
console.log(win.loadavg());

server.js

// 第一个 nodejs 程序

const http = require('http');
const hostname = '127.0.0.1';
const port = "50000";

// 创建一个 server 实例
const server = http.createServer((req, res) => {
  // req：请求对象
  // res：响应对象
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('hello node');
})

server.listen(port, hostname, () => {
  // 回调
  console.log(`服务启动成功，监听端口：${port}`);
})

// 启动服务 node server.js

1-4 Nodejs 和 npm 介绍

1-5 Nodemon 介绍和使用

  • Nodemon 特性介绍

  • 项目集成和配置演示

    • 项目下执行

      npm install nodemon -D

    • 修改 package.json 中的启动命令

      "scripts": {
    "dev:node": "node ./src/index.js",
    "dev": "nodemon ./src/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },


- 第一行：打印 `nodemon` 的版本

- 第二行：输入 `rs` 重新启动项目

- 第三行：监听 所有的路径

  - 通过 `nodemon.json` 文件修改 `watch` 的路径，项目下新建 `nodemon.json` 文件

    > nodemon.json

    ```json
    {
      "watch": ["./src/**/*.*"]
    }
    ```

    

- 第四行：监听 `js` `mjs` `json` 文件

1-6 nrm 和 nvm 的介绍使用

使用 nrm 管理 npm 源

  • 使用 npm 全局安装 nrm

    npm install nrm -g

  • 使用以下命令查看 npm 源

  • nrm ls

npm -------- registry.npmjs.org/

yarn ------- registry.yarnpkg.com/

cnpm ------- r.cnpmjs.org/

taobao ----- registry.npm.taobao.org/

nj --------- registry.nodejitsu.com/

npmMirror -- skimdb.npmjs.com/registry/

edunpm ----- registry.enpmjs.org/

  • 使用以下命令查看 nrm 的常用命令
  • nrm -h

ls                                      	List all the registries

current                                 	Show current registry name

use <registry>                          	Change registry to registry

add <registry> <url> [home]              Add one custom registry（使用私有源时，使用该命令）

使用 nvm 管理 nodejs 版本

  • windows 安装参考

github.com/coreybutler…

  • 使用以下命令查看 node 版本

    nvm ls

  • 使用以下命令查看 nvm 的常用命令

  • nvm -h

nvm ls										查看已经安装的所有nodejs版本

nvm install 版本号 可安装指定版本的nodejs nvm use 版本号 即可切换到指定版本 nvm uninstall 版本号 卸载指定版本

第二章 Web 应用基础

2-1 Web 应用基础和 Express 介绍

  • 什么是 web 应用

    提供API服务的称为 web 应用 eg：前端 （ajax/as/up ----> 服务器（web 应用） ----> 缓存/数据库）

  • Express 在 web 应用中的作用

    构建 http 服务，接受 req 处理 res，防攻击 路由

    node中的一种 web 框架

  • 使用 Express 搭建一个 web 应用

    • 创建 Express 项目目录

      mkdir express-myapp

      cd express-myapp

    • 使用以下命令创建package.json 文件和 .git 文件夹，并创建 .gitignore 文件

      .DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
static/mock

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

      npm init -y

      git init

    • 使用下面命令下载并安装 Express 并将其保存到依赖列表中

      npm install express -S

    • 在项目下创建 src 文件夹，在文件夹下创建 index.js 文件

      index.js

      // 引入 express
const express = require('express')
// 创建 expres 实例
const app = express()

const port = 3000

// http://127.0.0.1:3000
// app.use((req, res) => {
//   res.json({
//     name: 'vience'
//   })
// })

// http://127.0.0.1:3000/name
app.get('/name', (req, res) => {
  let {age} = req.params
  res.send('vience')
})

app.get('/name/:age', (req, res) => {
  let {age} = req.params
  res.json({
    name: 'vience',
    age
  })
})

app.post('/name', (req, res) => {
  let {age} = req.params
  res.send('vience_post')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}!`)
})

    • 使用 nodemon 启动项目，安装配置参考 1-5

2-2 Route 介绍和使用

  • Route 是什么

Route 是指确定应用程序如何响应客户端对特定端点的请求（url ---> 网络 ---> dns解析 ---> 目标服务器 --->路由）

特定端点是URI（或路径）和特定的HTTP请求方法

每个路由可以具有一个或多个处理程序函数，这些函数在匹配该路由时执行。

app.METHOD(PATH, HANDLER)
  • app 是的 express 的实例。
  • METHOD 是小写的HTTP请求方法 （get post put delete）
  • PATH 是服务器上的路径。
  • HANDLER 是匹配路线时执行的功能。

2-3 Express 路由演示

在之前的项目中 index.js 文件中进行下面代码的编写

  • 通过请求的方法类型 get / post / put / delete
app.get('/demo', function (req, res) {
    res.json({
        message: 'Hello Express Route from get demo'
    })
})

app.post('/demo', function (req, res) {
    res.json({
        message: 'Hello Express Route from post demo'
    })            
})
  • 通过URI
// GET http://127.0.0.1:3000/user/byname?name=vience
app.get('/user/byname', function (req, res) {
  let { name } = req.query
  res.json({
      name
  })
})

// GET http://127.0.0.1:3000/user/byid?id=10001
app.get('/user/byid', function (req, res) {
  let { id } = req.query
  res.json({
      id
  })
})

2-4 Express 路由 API 使用

app.all 的是使用

  • 需要定义一个 api/路由 需要满足 客户端 无论使用什么请求方式(get/post/delete/put) 都可以得到响应

    // GET/POST/DELETE/PUT http://127.0.0.1:3000/demo1
app.all('/demo1', (req, res) => {
  res.json({
    message: 'demo1',
    method: req.method
  })
})

  • 需要定义一个 api/路由 需要满足 客户端 无论使用什么请求URI 都可以得到响应(日志)

    // GET/POST/DELETE/PUT http://127.0.0.1:3000/*
app.all('*', (req, res) => {
  res.json({
    message: 'demo1',
    method: req.method,
    URI: req.path
  })
})

2-5 Express 路由 API 使用

app.use 的使用 --->中间件

  • 需要定义一个 api/路由 需要满足 客户端 无论使用什么请求方式(get/post/delete/put) 都可以得到响应

     // GET/POST/DELETE/PUT http://127.0.0.1:3000/demo1
  app.use('/demo2', (req, res) => {
    res.json({
      message: 'demo2',
      method: req.method
    })
  })

  • 需要定义一个 api/路由 需要满足 客户端 无论使用什么请求URI 都可以得到响应

    // GET/POST/DELETE/PUT http://127.0.0.1:3000/*
app.use((req, res) => {
  res.json({
    message: 'demo1',
    method: req.method,
    URI: req.path
  })
})

  • 路由的切割与使用

    • 需求： 现有订单模块路由和会员模块路由

      1. 首先在 src 下创建 router 文件夹， 在 router 文件夹下创建 member.js 和 oeder.js 两个路由模块

      2. 文件中代码如下

        member.js

        const express = require('express');

const router = express.Router();

router.get('/list', (req, res) => {
  res.json({
    list: [
      {
        id: 001,
        name: '李四'
      },
      {
        id: 002,
        name: '张三'
      }
    ]
  })
})

module.exports = router;

        order.js

        const express = require('express');

const router = express.Router();

router.get('/list', (req, res) => {
  res.json({
    list: [
      {
        id: 001,
        price: 200,
        name: '鞋子'
      },
      {
        id: 002,
        price: 500,
        name: '宝宝'
      }
    ]
  })
})

module.exports = router;

      3. 在 index.js 中引入这两个路由模块（中间件），代码如下

        // 路由切割与使用
// GET http://127.0.0.1:3000/member/list
const memberRouter = require('./router/member');
app.use('/member', memberRouter)
// GET http://127.0.0.1:3000/order/list
const orderRouter = require('./router/order');
app.use('/order', orderRouter)

2-6 中间件的介绍和使用

  • 什么是 express 中间件

    可插拔的功能

    中间件的结构

    1. 一个函数
    2. err， req， res， next、

    功能

    1. 异常处理
    2. 处理业务功能，然后转交控制权-->next
    3. 响应请求--结束响应-->当作路由的处理函数

    级别

    1. app级别的使用（全局）
      • 注册的时候，一定在最顶级
      • app.use --> api加载进来
    2. router jibie
    3. 异常处理 -->app级别
    4. 内置级别

  • 内置中间件和第三方中间件

  • 自定义中间件

2-7 异常处理

  • 异常捕获
  • Express 内置异常处理
  • 自定义异常处理
avatar
文章
阅读
粉丝