React+Nodejs+MySQL全栈开发入门

简介: 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中如何动态添加和删除元素
482 0
|
存储 设计模式 容器
专题八图形窗口与坐标轴-3
专题八图形窗口与坐标轴
352 0
|
缓存 负载均衡 网络协议
自己动手从0开始实现一个分布式RPC框架
如果一个程序员能清楚的了解RPC框架所具备的要素,掌握RPC框架中涉及的服务注册发现、负载均衡、序列化协议、RPC通信协议、Socket通信、异步调用、熔断降级等技术,可以全方位的提升基本素质。虽然也有相关源码,但是只看源码容易眼高手低,动手写一个才是自己真正掌握这门技术的最优路径。
自己动手从0开始实现一个分布式RPC框架
|
11月前
|
人工智能 安全 API
OpenHands:能自主检索外部知识的 AI 编程工具,自动执行命令、网页浏览和生成代码等操作
OpenHands 是一款基于 AI 的编程工具,支持多智能体协作,能够自动生成代码、执行命令、浏览网页等,显著提升开发效率。
1322 26
OpenHands:能自主检索外部知识的 AI 编程工具,自动执行命令、网页浏览和生成代码等操作
|
人工智能 弹性计算 自然语言处理
通义万相AI创作绘画产品方案产品体验
本次我有幸接触并体验了阿里云通义万相这一创新的AI绘画工具方案。该方案它是在利用人工智能技术,为用户提供创新、便捷的绘画创作体验。在体验过程中,我主要关注了产品的易用性、功能性、创新性、用户体验及方案本身等方面。
541 3
|
前端开发 UED 开发者
React 日期选择器 Date Picker
本文从React的角度探讨了日期选择器的使用方法,包括使用`react-datepicker`库的基本配置、自定义样式、国际化设置、常见问题及解决方案,旨在帮助开发者构建用户友好的日期选择组件。
432 12
|
Web App开发 JSON 前端开发
使用 React 和 NodeJS 创建一个全栈项目
在本文中,我将使用 React 和 NodeJS 创建一个全栈项目。介绍下如何让 Node.js 作为 web 服务器来加载静态资源,如何让 React 程序可以直接调用 Node API。
1010 0
|
缓存 easyexcel Java
狂神说POI,EasyExcel笔记及源码资料(一)
狂神说POI,EasyExcel笔记及源码资料(一)
1198 0
狂神说POI,EasyExcel笔记及源码资料(一)
|
前端开发 JavaScript 数据管理
现代Web开发中的前端框架选择指南
选择合适的前端框架是现代Web开发中的关键决策之一。本文探讨了几种流行的前端框架,比较它们的特点和适用场景,帮助开发者在众多选项中做出理性的选择。
|
设计模式 Java 容器
Java一分钟之-Swing基础:JFrame, JPanel, JButton
Java Swing教程介绍了构建桌面应用的关键组件:JFrame(顶级容器,显示主窗口)、JPanel(组合其他组件的容器)和JButton(交互元素)。文中通过示例代码展示了这些组件的使用,并列出常见问题及解决方法,如确保设置JFrame的可见性和关闭操作,正确添加组件至JPanel,以及为JButton添加事件监听器。理解这些基础将有助于开发功能完善的GUI应用。
712 0