后端express集成nodemon项目搭建环境

Posted 2022-11-01

如果文章有误还请指教！！！

1 后端

1) 项目搭建

安装express脚手架

执行命令, 全局安装脚本架(也称为项目生成器)

安装完成后, 在全局会多一个express命令

npm i express-generator -g

通过脚手加搭建项目

在根目录下, 执行命令

express --no-view backEnd

• 在目录下创建一个backEnd（项目名字可自定义）的目录, 作为后端项目的目录
• --no-view: 创建一个数据服务, 不提供页面服务

安装相关依赖

进入`backEnd`目录, 执行命令, 根据`package.jsoon`中的依赖项, 安装项目所有的依赖

• cookie-parser: 解析cookie的中间件
• debug: 调试代码的中间件
• express: express框架包
• morgan: 记录日志的中间件

npm install安装package,json下配置的包

npm install

会在文件根目录下创建node_modules存放依赖相关的包

启动项目

将nodemon作为开发时依赖安装

npm i nodemon -D

• -D在本目录下安装

使用nodemon启动项目,

包管理目录下就会有我们安装的nodemon的包

会在package.json中, 生成devDependencies

"devDependencies": 
  "nodemon": "^2.0.15"

修改pagckage.json中的脚本

修改启动脚本为nodemon启动。

执行

npm run start

使用浏览器测试

访问本地3000端口

安装mysql包

来访问数据库数据

npm i mysql

调用MySQL

方式一：

在根目录下创建db/index.js文件

// 1. 导入mysql包
const mysql = require("mysql")
// 2. 创建连接
const con = mysql.createConnection(
  host: "localhost",
  port: "3306",
  user: "root",
  password: "145869",
  database: "db13",
  // dateStrings: true,
  timezone: "SYSTEM", //时间格式
)
//3.连接数据库
con.connect()

方式二：

在根目录下创建config/config.default.js (默认配置文件)文件，将mysql数据库相关配置封装，方便以后修改调用

module.exports = 
  debug: true,
  // 根mysql数据库相关的配置
  mysql: 
    host: "127.0.0.1",
    port: 3306,
    user: "root",
    password: "145869",
    database: "db13",
  ,

再在db/index.js里导入、调用

// 封装数据库的操作
// 1. 导入mysql包
const mysql = require("mysql")
// 导入配置文件
const  mysql: MySQLCon  = require("../config/config.default.js")
// 2. 创建连接
const con = mysql.createConnection(
  host: MySQLCon.host,
  port: MySQLCon.port,
  user: MySQLCon.user,
  password: MySQLCon.password,
  database: MySQLCon.database,
  // dateStrings: true,
  timezone: "SYSTEM", //时间格式
)
//3.连接数据库
con.connect()

安装cors

cors这个包时解决跨域请问的

npm install cors

安装http-errors

HTTP异常的通用软件包

npm install http-errors

导入和注册我们安装的包（要使用必须进行导入注册）

在根目录下的app.js下注册使用

//导入express包
var express = require("express")
//导入内置模块path
var path = require("path")
//导入第三方模块(解析cookie)
var cookieParser = require("cookie-parser")
//导入第三方模块(记录日志)
var logger = require("morgan")
//导入跨域请求的模块
const cors = require("cors")
//导入创建 Express，Koa，Connect 等的 HTTP 错误。
var createError = require("http-errors")

//导入路由对象(模块化路由)
var indexRouter = require("./routes/index")
var usersRouter = require("./routes/users")

//实例化express对象
var app = express()

//注册记录日志中间件morgan
app.use(logger("dev"))
//注册解析请求体中间件(处理json格式的请求体)
app.use(express.json())
//注册解析请求体中间件(处理url格式的请求体)
//extended: false表示使用系统模块queryString来处理,true表示使用第三方模块qs来处理
app.use(express.urlencoded( extended: false ))
//注册解析cookie数据的中间件
app.use(cookieParser())
//注册解析静态资源的中间件
app.use(express.static(path.join(__dirname, "public")))
/* 注册跨域请求的中间件 */
app.use(cors())

//注册路由对象(根据不同的访问路径,调用不同的路由对象进行处理)
app.use("/", indexRouter) //都有统一前缀
app.use("/users", usersRouter)

// 捕获404并转发到错误处理程序
app.use(function (req, res, next) 
  next(createError(404))
)

// 错误处理程序
app.use(function (err, req, res, next) 
  // 设置局部变量，仅在开发中提供错误
  res.locals.message = err.message
  res.locals.error = req.app.get("env") === "development" ? err : 

  // 呈现错误页
  res.status(err.status || 500)
  res.render("error")
)

//导出app实例对象
module.exports = app

流程图：

2) 实现获取所有用户

补充知识点.params、.query、.body

res.params

用于get请求
url路径为：​​http://localhost:3000/list/001/21​​

路由代码：

app.get(/list/:id/:age,(req,res)=>
    res.send(req.params)
    //浏览器页面结果： "id":"001","age":"21"
)

res.query

用于get请求
url路径为：​​http://localhost:3000/form?username=1&pwd=1​​

路由代码：

app.get(/form,(req,res)=>
    console.log(req.query)
    res.send(req.query)
    // "username":"1","pwd":"1"
)

form表单：

<form action="http://localhost:3000/form" method="get">
        用户名：<input type="text" name="username">
        密码：<input type="text" name="pwd" id="">
        <input type="submit">
</form>

res.body

用于post请求
url路径为：​​http://localhost:3000/form​​

路由代码：

app.post(/form,(req,res)=>
    console.log(req.body)
    res.send(req.body)
    // "username":"1","pwd":"1"
)

form表单：

<form action="http://localhost:3000/form" method="post">
        用户名：<input type="text" name="username">
        密码：<input type="text" name="pwd" id="">
        <input type="submit">
</form>

配置db的方法模块

查询所有

/**
 * 获取所有数据
 * @param string sql : 执行的sql语句
 * @return promise
 */
function getAll(sql) 
  return new Promise((resolve, reject) => 
    con.query(sql, (err, data) => 
      if (err) 
        reject(err.message)
      
      resolve(data)
    )
  )

查询一个

/**
 * 获取一个数据
 * @param string sql : 执行的sql语句
 * @return promise
 */
function getOne(sql) 
  return new Promise((resolve, reject) => 
    con.query(sql, (err, data) => 
      if (err) reject(err)

      // data是一个数组
      // if (data.length != 0) 
      //   // 查询到了数据
      //   resolve(data[0])
      //  else 
      //   resolve(null)
      // 
      data.length != 0 ? resolve(data[0]) : resolve(null)
    )
  )

增、删、改、查

/**
 * 增、删、改、查
 * @param string sql : 执行的sql语句
 * @return promise
 */
function exec(sql) 
  return new Promise((resolve, reject) => 
    con.query(sql, (err, data) => 
      if (err) 
        reject(err.message)
      
      resolve(data)
    )
  )

向外导出这三个方法

//导出三个方法
module.exports =  getAll, getOne, exec 

设置users路由

写一下users路由，在routers文件下创建users.js作为用户的路由

设置路由时应导入db编写的方法

const  getAll, getOne, exec  = require("../db")

再导入express包，并实例化express

//导入express包
var express = require("express")
// 实例化express
var router = express.Router()
//导入三个方法
const  getAll, getOne, exec  = require("../db")

补充知识async/await

async/await是什么？

async/await 是ES7提出的基于Promise的解决异步的最终方案。

async是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。

// async基础语法
async function fun0()
  console.log(1);
  return 1;

fun0().then(val=>
  console.log(val) // 1,1
)

async function fun1()
  console.log(Promise);
  return new Promise(function(resolve,reject)
    resolve(Promise)
  )

fun1().then(val => 
  console.log(val); // Promise Promise
)

await

await 也是一个修饰符，只能放在async定义的函数内。可以理解为等待。

await 修饰的如果是Promise对象：可以获取Promise中返回的内容（resolve或reject的参数），且取到值后语句才会往下执行；

如果不是Promise对象：把这个非promise的东西当做await表达式的结果。

async function fun()
    let a = await 1;
    let b = await new Promise((resolve,reject)=>
        setTimeout(function()
            resolve(setTimeout)
        ,3000)
    )
    let c = await function()
        return function
    ()
    console.log(a,b,c)

fun(); // 3秒后输出： 1 "setTimeout" "function"

function log(time)
    setTimeout(function()
        console.log(time);
        return 1;
    ,time)

async function fun()
    let a = await log(1000);
    let b = await log(3000);
    let c = log(2000);
    console.log(a);
    console.log(1)

fun(); 
// 立即输出 undefined 1
// 1秒后输出 1000
// 2秒后输出 2000
// 3秒后输出 3000

async/await 的正确用法

// 使用async/await获取成功的结果
// 定义一个异步函数，3秒后才能获取到值(类似操作数据库)
function getSomeThing()
    return new Promise((resolve,reject)=>
        setTimeout(()=>
            resolve(获取成功)
        ,3000)
    )


async function test()
    let a = await getSomeThing();
    console.log(a)

test(); // 3秒后输出：获取成功

注意！

async可以单独使用，而await必须配合async使用，不然会报错。

实现获取所有用户

// GET /users?page=1&size=2
router.get("/", async function (req, res) 
  //解析请求参数
  const  page = 1, size = 5  = req.query

  let sql = `select count(*) as tobal from xzd_users`
  let  total  = await getOne(sql)

  //偏移量=（page-1）*size
  let offset = (page - 1) * size
  //操作数据库
  sql = `select * from xzd_users limit $offset,$size`
  const data = await getAll(sql)
  res.send(
    code: 0,
    message: "获取用户成功",
    result: 
      total,
      data,
    ,
  )
)

测试

@baseURL= http://localhost:3000

### 获取所有用户
GET baseURL/users

获取单个用户

//GET /users/:id
router.get("/:id", async (req, res) => 
  const  id  = req.params

  let sql = `select * from xzd_users where id=$id`
  const data = await getOne(sql)

  res.send(
    code: 0,
    message: "获取单个用户成功",
    result: data,
  )
)

测试

@baseURL= http://localhost:3000

### 获取所有用户
GET baseURL/users

### 获取单个用户
GET baseURL/users/1

添加用户

//添加用户
// POST /users username: xiaoming, password: 123456
router.post("/", async (req, res) => 
  const  username, password  = req.body

  let sql = `insert into xzd_users (username,password) values ($username,$password)`
  const  insertId  = await exec(sql)

  res.send(
    code: 0,
    message: "添加用户成功",
    result: 
      id: insertId,
      username,
      password,
    ,
  )
)

测试

### 添加用户
POST baseURL/users 
Content-Type: application/json


  "username":"银谷",
  "password":12345

删除用户

//删除
// DELETE /todos?completed=1
router.delete("/:id", async (req, res) => 
  // 一. 解析请求参数
  const  id  = req.params

  // 二. 操作数据库
  let sql = `delete from xzd_users where id=$id`
  await exec(sql)
  res.send(
    code: 0,
    message: "删除用户成功",
    result: "",
  )
)
// DELETE /todos?completed=1
router.delete("/", async (req, res) => 
  // 一. 解析请求参数
  const  id  = req.query
  // 二. 操作数据库
  let sql = `delete from xzd_users where id=$id`
  await exec(sql)
  res.send(
    code: 0,
    message: "清理用户成功",
    result: "",
  )
)

测试

### 删除用户
DELETE baseURL/users/5

修改用户

//修改用户
// PUT /todos/1 content: test-new 返回(修改的数据) 
router.put("/:id", async (req, res) => 
  //一、解析请求参数
  const  id  = req.params
  const  username, password  = req.body
  //二、操作数据库
  let sql = `update xzd_users set username=$username,password=$password where id=$id`
  await exec(sql)
  //三、返回结果
  res.send(
    code: 0,
    message: "修改代办成功",
    result: 
      id,
      username,
      password,
    ,
  )
)

测试

### 修改用户
PUT baseURL/users/1
Content-Type: application/json


  "username":"银谷",
  "password":1234566