Node.JS后端开发笔记整理（简洁版）

前端

1. 开发环境和技术栈

开发工具：Visual Studio Code
Node.js版本：18.19.0（建议保持在18+）
包管理器：npm
前端框架：Vue3.4
脚本语言：TypeScript
构建工具：Vite
后端框架：Express（基于 Node.js 平台，快速、开放、极简的 Web 开发框架）
数据访问：MySQL

2. 表设计分析

在这里插入图片描述

3. 建库建表

在这里插入图片描述

4. 使用 Vite 构建 Vue3+TS项目

npm create vite zhaoxi_book_web

在这里插入图片描述

5. 目录结构

在这里插入图片描述

6. 修改 Vite 配置文件

设置项目启动后默认打开浏览器
设置IP
设置端口


```go
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],server: {// 启动后打开浏览器open: true,// 主机host: '127.0.0.1',// 端口port:3001}
})

在这里插入图片描述

7. Element Plus 介绍

基于 Vue3，面向设计师和开发者的组件库

7.1 安装

npm install element-plus

7.2 导入

main.ts 文件

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './style.css'
import App from './App.vue'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

接下来就可以使用 Element 组件了

后端 + 数据库

1. Node.js 项目初始化

npm init

在这里插入图片描述

2. Express 介绍和安装

npm install express

在这里插入图片描述
拓展：为了解决Express中的异步问题，后来又出现了下一代web框架koa

npm install koa@2.0.0

// 导入koa，和koa 1.x不同，在koa2中，我们导入的是一个class，因此用大写的Koa表示:
const Koa = require('koa');// 创建一个Koa对象表示web app本身:
const app = new Koa();// 对于任何请求，app将调用该异步函数处理请求：
app.use(async (ctx, next) => {await next();ctx.response.type = 'text/html';ctx.response.body = '<h1>Hello, koa2!</h1>';
});// 在端口3000监听:
app.listen(3000);
console.log('app started at port 3000...');

还可以直接用命令node app.js在命令行启动程序，或者用npm start启动。npm start命令会让npm执行定义在package.json文件中的start对应命令：

"scripts": {"start": "node app.js"
}

3. 配置以及启动 http 服务

新建 app.js 文件

const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {res.send('Hello World!')
})
app.listen(port, () => {console.log(`Example app liistening on port ${port}`);
})

启动：命令行窗口中输入 node app.js 即可启动
地址栏输入 localhost:3000，页面如下

4. 安装和访问 MySQL

4.1 安装

npm install mysql

4.2 配置读取文件

新建config.js文件

const configs = {mysql: {host: 'localhost',user: 'dbuser',password: 'password',database:'my_db'}
}
module.exports = configs

4.3 访问 MySQL

app.js 文件中进行访问 MySQL

const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {res.send('Hello World!')
})// 导入配置信息
const configs = require('./config')
var mysql = require('mysql')
var connection = mysql.createConnection(configs.mysql)
// 打开连接
connection.connect()
// 执行SQL
connection.query('SELECT 1 + 1 AS solution', function (ree, rows, fields) {if (err) throw errconsole.log('The solution is:',rows[0].solution)
})
// 关闭连接
connection.end()app.listen(port, () => {console.log(`Example app liistening on port ${port}`);
})

5. 接口实现

// 做参数解析用
npm install body-parser

app.js 文件中

const express = require('express')
var bodyParser = require('body-parser')
const app = express()
// 解析应用程序 /x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// 解析 application/json
app.use(bodyParser.json())
const port = 3000
app.get('/', (req, res) => {res.send('Hello World!')
})// 导入配置信息
const configs = require('./config')
var mysql = require('mysql')
var connection = mysql.createConnection(configs.mysql)
// get 请求，返回json格式list数据
app.get('/get', (req, res) => {let sql = `SELECT * FROM Book`;if (req.query.BookName) {sql = `SELECT * FROM BooK WHERE BookName LIKE '%${req.query.BookName}%'`}connection.query(sql, (err, rows) => {if (!err) {res.send(rows)} else {res.send(err)}})
})
// add
app.post('/add', (req, res) => {let sql = `INSERT INFO BooK(BookName,Author,TypeName,Remarks)Values('${req.body.BookName}','${req.body.Author}','${req.body.TypeName}','${req.body.Remarks}')`;connection.query(sql, (err, rows) => {if (!err) {res.send('操作成功！')} else {res.send(err)}})
})
// edit
app.post('/edit', (req, res) => {let sql = `UPDATE BooK SETBookName = '${req.body.BookName}',Author = '${req.body.Author}',TypeName = '${req.body.TypeName}',Remarks = '${req.body.Remarks}';`;connection.query(sql, (err, rows) => {if (!err) {res.send('操作成功！')} else {res.send(err)}})
})
// delete
app.get('/delete', (req, res) => {let sql = `DELETE FROM BooK WHERE ID=${req.query.Id};`connection.query(sql, (err, rows) => {if (!err) {res.send('操作成功')} else {res.send(err)}})
})
app.listen(port, () => {console.log(`Example app liistening on port ${port}`);
})

前后端联调

针对以上接口我们要在前端进行调用

npm install axios

const get = (BookName: string) => {return axios.get(`/api/get?BookName=${BookName}`)
}
const add = (req: {}) => {return axios.post('/api/add',req)
}
const edit = (req: {}) => {return axios.post('/api/edit',req)
}
const delete = (id: string) => {return axios.get(`/api/delete?Id=${id}`)
}