vue 创建API接口案例

原创已于 2023-03-26 16:08:50 修改 · 1.3k 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2023-03-26 16:00:14 首次发布

本文详细介绍了如何使用Vue.js初始化项目，并结合Express和MySQL2创建API接口。步骤包括：Vue项目的初始化，设置es6模块化，安装依赖，创建服务器，建立数据库操作模块，实现用户控制器和路由模块，最后通过try...catch处理异常，确保接口的健壮性。

vue初始化项目

1、创建文件夹code1
2、使用vs code 打开文件夹，并打开vs code终端，执行如下命令初始化工程
npm init -y
3、在codel1文件夹中生成了package.json文件
在这里插入图片描述
4、在package.json 添加es6模块化支持"type": “module”,

5、安装express、mysql2插件，@后为指定的版本号
执行npm i express@4.17.1 mysql2@2.2.5

6、创建基本的服务器
在根目录下新建app.js，写入如下代码

import express from 'express'
const app = express()
app.listen(80,() =>{
    console.log('server running at http://127.0.0.1')
})

执行如下命令nodemon app.js 启动服务，如果如下错误则需要安装组件
在这里插入图片描述
执行命令npm install -g nodemon安装组件

安装nodemon后执行nodemon app.js 还报错，提示无权限

则提升，在命令行输入Set-ExecutionPolicy -Scope CurrentUser按回车
再输入值RemoteSigned回车即可

再命令nodemon app.js 启动服务，启动完成
在这里插入图片描述

创建db数据库操作模块

1、创建如下文件
在这里插入图片描述
2、编写如下代码

import mysql from 'mysql2'

const pool = mysql.createPool({
    host:'127.0.0.1',
    port:3306,
    database:'test',
    user:'root',
    password:'root',
})

export default pool.promise()

创建user_ctrl模块

1、创建如下文件
在这里插入图片描述
2、编写如下代码

import db from '../db/index.js'

// 按需导出
export async function getAllUser(req, res){
    const [rows] = await db.query('select id,name from user_t')
    res.send({
        status:0,
        message:'获取用户列表数据成功！',
        data:rows,

    })
}

创建并使用user_router路由模块

1、创建如下文件
在这里插入图片描述
2、编写如下代码

import express from 'express'
import {getAllUser} from '../controller/user_ctrl.js'

const router = new express.Router()
router.get('/user', getAllUser)

export default router

3、在app.js中挂载路由文件
在这里插入图片描述

import express from 'express'
import userRouter from './router/user_router.js'

const app = express()
app.use('/api',userRouter)
app.listen(80,() =>{
    console.log('server running at http://127.0.0.1')
})

4、执行请求，正常获取到用户数据
在这里插入图片描述

使用try…catch 捕获异常

在这里插入图片描述

代码修改如下，try…catch捕获异常

import db from '../db/index.js'

// 按需导出
export async function getAllUser(req, res){
    try {
        const [rows] = await db.query('select id,name,xxx from user_t')
        res.send({
            status:0,
            message:'获取用户列表数据成功！',
            data:rows,
        })
    } catch (error) {
        res.send({
            status:1,
            message:'获取用户列表数据失败！',
            desc:error.message,
        })
    }   
}