vue3 访问数据库中的数据

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、需要的工具

• Node.js
• VsCode
• Express
• Mysql2
• MYSQL Workbench

二、使用步骤

(1)项目结构

（2）创建项目

在VsCode新建名为code的文件夹

（3）初始化项目

npm init -y

• package.json

//新增type节点值为module
{
    
  "type":"module",
  "name": "database-assess",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    
    "express": "^4.18.1",
    "mysql2": "^2.3.3"
  }
}

(4)编写模块

1. 路由模块

• 引入express

npm install express

• use_router.js

import express from 'express'
import {
     getAllUser } from '../controller/user_ctrl.js'
// 定义express的router方法
const router = new express.Router()  
router.get('/user', getAllUser)
export default router

2. 数据库模块

• 引入mysql

npm install mysql2

• index.js

import mysql from 'mysql2'
const pool = mysql.createPool({
    
  host: '127.0.0.1',
  port: '3306',
  database: 'mysql_db01',
  user: 'root',
  password: ''//数据库密码
})
export default pool.promise()

3. 数据控制模块

• user_ctrl.js

import db from '../db/index.js'
export async function getAllUser(req, res) {
    
  try {
    
    const [row] = await db.query('select id,username,nickname from ev_users')
    res.send({
    
      status: 0,
      message: '获取用户数据成功！',
      data: row
    })
  } catch (err) {
    
    res.send({
    
      status: 1,
      message: '获取用户列表错误',
      desc: err.message
    })
  }
}

4. app.js

// ES6语法引入express模块
import express from 'express'
import userRouter from './router/user_router.js'
const app = express()
// 定义路由
app.use('/api', userRouter)
// 监听8080端口
app.listen(80, () => {
    
  console.log('serve running in http://127.0.0.1')
})

5.数据库表

(5)测试

1. 项目目录下运行node app.js
2. 访问127.0.0.1/api/user
3. 数据获取成功
   

(6)项目地址

database-access