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 err
    console.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 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}`);
})

前后端联调

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

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}`)
}