前端

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
1

5. 目录结构

6. 修改 Vite 配置文件

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

```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
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

7. Element Plus 介绍

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

7.1 安装

npm install element-plus
1

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')
1
2
3
4
5
6
7
8
9

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

后端 + 数据库

1. Node.js 项目初始化

npm init
1

2. Express 介绍和安装

npm install express
1

拓展：为了解决Express中的异步问题，后来又出现了 下一代web框架koa

npm install koa@2.0.0
1

// 导入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 = '
Hello, koa2!
';
});

// 在端口3000监听:
app.listen(3000);
console.log('app started at port 3000...');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

"scripts": {
    "start": "node app.js"
}
1
2
3

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}`);
})
1
2
3
4
5
6
7
8
9

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

4. 安装和访问 MySQL

4.1 安装

npm install mysql
1

4.2 配置读取文件

• 新建config.js文件

const configs = {
    mysql: {
        host: 'localhost',
        user: 'dbuser',
        password: 'password',
        database:'my_db'
    }
}
module.exports = configs
1
2
3
4
5
6
7
8
9

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 err
    console.log('The solution is:',rows[0].solution)
})
// 关闭连接
connection.end()


app.listen(port, () => {
    console.log(`Example app liistening on port ${port}`);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

5. 接口实现

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

• 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 SET
        BookName = '${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}`);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

前后端联调

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

npm install axios
1

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}`)
}
1
2
3
4
5
6
7
8
9
10
11
12