vue+mysql实现前端对接数据库

最新推荐文章于 2025-06-11 21:13:46 发布

原创

最新推荐文章于 2025-06-11 21:13:46 发布 · 3.7k 阅读

50 ·

CC 4.0 BY-SA版权

文章标签：

#android #前端 #后端

本文介绍了如何在Vue项目中实现与MySQL数据库的对接。首先通过安装必要的依赖如mysql、axios、body-parser等，然后在main.js中引入axios并配置Vue原型。接着在src/server目录下创建db.js和index.js配置数据库连接。进一步，创建api文件夹，以SysUser.js为例创建API接口。最后，展示了在前端如何调用这些API接口获取数据。作者是一位有多年经验的开发者，分享了其实践经验和学习资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载引入相关依赖

1、cnpm install --save mysql

2、cnpm install --save axios

3、cnpm install --save body-parser

4、cnpm install --save express

5、cnpm install --savecrypto

在main中引入axios

import Axios from ‘axios’

Vue.prototype.$axios = axios

配置连接

在src下新建文件夹server,在其中新建db.js文件,index.js文件，其中db是数据库配置，index是node后端服务配置

db.js内容

module.exports = {
  mysql: {
    host: 'localhost', // 新建数据库连接时的 主机名或ID地址 内容
    user: 'name', // 连接的数据用户名
    password: '***', // 密码
    database: 'apitest', // 数据库名
    port: '3306'
  }
}

index.js内容

// node 后端服务器
const UserApi = require('./api/SysUser')
const bodyParser = require('body-parser')
const express = require('express')
const app = express()
//采用设置所有均可访问的方法解决跨域问题
app.all("*", function(req, res, next) {
  //设置允许跨域的域名，*代表允许任意域名跨域
  res.header("Access-Control-Allow-Origin", "*");
  //允许的header类型
  res.header("Access-Control-Allow-Headers", "content-type");
  //跨域允许的请求方式
  res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
  if (req.method.toLowerCase() == 'options')
    res.send(200); //让options尝试请求快速结束
  else
    next();
})

// 以json格式返回出去
app.use(bodyParser.json()) 
app.use(bodyParser.urlencoded({ extended: false }))

// 后端api路由
app.use('/api/sysuser', UserApi)


// 监听端口
app.listen(3000)
console.log('success listen at port:3000......')

创建api

在新建文件夹api，在api下新建文件SysUser.js文件，这个就是之后需要使用到的接口api

const models = require('../server/db')
const express = require('express')
const router = express.Router()
const mysql = require('mysql')
const crypto = require('crypto')

// 连接数据库
const conn = mysql.createConnect