创建后端项目并实现增删改查

创建项目

1.新建文件夹如 node-backend

2.进入文件夹，地址栏输入cmd

3.npm init -y 初始化项目

4.npm install express 安装后端框架

连接数据库

1.在vscode中打开 node-backend

2.根目录下创建数据库连接文件如 db.js，文件中输入以下代码

javascript 复制代码

const mysql = require('mysql2/promise');

// 创建数据库连接池（推荐）
const pool = mysql.createPool({
  host: 'localhost',       // 数据库地址
  user: 'root',            // 数据库账号（默认一般是root）
  password: '980323',      // 你的数据库密码
  database: 'testdb',      // 数据库名（自己先建好）
  port: 3306,              // 默认端口
  waitForConnections: true,
  connectionLimit: 10,
  queueLimit: 0
});

module.exports = pool;

创建前端服务

1.根目录下创建服务文件如 server.js文件，放入以下代码

javascript 复制代码

const express = require('express'); // 引入 express 框架（用来快速写后端服务的工具）
const pool = require('./db'); // 引入数据库
const app = express(); // 创建一个 express 应用（等于创建一个后端服务）
const PORT = 3000;

app.use(express.json());

// ====================== 数据库接口 ======================

// 1.增 （添加用户）
app.post('/api/user/add', async (req, res) => {
    const { name, id } = req.body;
    try {
        const [result] = await pool.query(
            'INSERT INTO user (name, id) VALUES (?, ?)',
            [name, id]
        );
        res.json({ code: 200, msg: '添加成功', insertId: result.insertId });
    } catch (err) {
        res.json({ code: 500, msg: '添加失败' });
    }
});

// 1. 查 （查找用户）
app.get('/api/user/list', async (req, res) => {
    try {
        //  SELECT * FROM user = 查找 user 表中所有记录
        const [rows] = await pool.query('SELECT * FROM user');
        // 返回给前端 转成json
        res.json({ code: 200, data: rows });
    } catch (err) {
        res.json({ code: 500, msg: '查询失败', error: err.message });
    }
});

// 3. 改 （修改用户）
app.post('/api/user/update', async (req, res) => {
    const { id, name } = req.body;
    console.log(req.body);

    try {
        await pool.query(
            'UPDATE user SET name=? WHERE id=?',
            [name, id]
        );
        res.json({ code: 200, msg: '修改成功' });
    } catch (err) {
        res.json({ code: 500, msg: '修改失败' });
    }
});

// 4. 删 （删除用户）
app.post('/api/user/delete', async (req, res) => {
    const { id } = req.body;
    try {
        await pool.query('DELETE FROM user WHERE id=?', [id]);
        res.json({ code: 200, msg: '删除成功' });
    } catch (err) {
        res.json({ code: 500, msg: '删除失败' });
    }
});


// 5. 根据ID查询单个用户
app.get('/api/user/:id', async (req, res) => {
    const { id } = req.params;
    try {
        const [rows] = await pool.query('SELECT * FROM user WHERE id = ?', [id]);
        res.json({ code: 200, data: rows[0] });
    } catch (err) {
        res.json({ code: 500, msg: '查询失败' });
    }
});

// 启动服务
app.listen(PORT, () => {
    console.log(`服务运行在 http://localhost:${PORT}`);
});

前端设置

1.前端要配置跨域，如下 vite.config.js

javascript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()], // 必须有
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 转发到后端
        changeOrigin: true
      }
    }
  }
})

2.前端封装axios 如下 base.js

javascript 复制代码

import axios from 'axios'

// 创建 axios 实例
const service = axios.create({
  baseURL: '/api',
  timeout: 10000
})

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 发送请求前可以在这里加 token、请求头
    return config
  },
  (error) => {
    console.error('请求错误：', error)
    return Promise.reject(error)
  }
)

// 响应拦截器（统一处理 + 更友好）
service.interceptors.response.use(
  (response) => {
    // 直接返回后端给的 data，和你现在用法一致
    return response.data
  },
  (error) => {
    console.error('响应错误：', error)
    return Promise.reject(error)
  }
)

export default service

3.引用如下

javascript 复制代码

import service from "./base";

// 添加账号
export function loginAdd(data) {
  return service.post("/user/add", data);
}
//查找所有数据
export function userList(data) {
  return service.get("/user/list" + data);
}
//修改用户信息
export function updateUser(data) {
  return service.post("/user/update" , data);
}
//删除用户
export function deleteUser(data) {
  return service.post("/user/delete" , data);
}

4.最后就是根据后端配的要求，调接口就好了