vue项目之js对Mysql数据库操作

文章目录

vue项目之js对Mysql数据库操作
前言
一、相关插件安装
二、搭建本地服务器
三、启动服务器
四、前端Vue访问接口进行数据交互
结尾

前言

js对数据库的基本操作

一、相关插件安装

下载express，Express 的作用和 Node.js 内置的 http 模块类似，是专门用来创建 Web 服务器的。

npm install express

下载cors，用于处理接口跨域问题

npm install cors

下载mysql，用于对mysql数据库连接及其相关操作

npm install mysql

下载axios，Axios 是一个基于 promise 的异步 ajax 请求库，前端最流行的 ajax 请求库。简单的讲就是可以发送get、post请求，负责与后端交互。

npm install axios

二、搭建本地服务器

1.在src新建/server/app.js，用于配置服务器相关信息：

// 配置服务器相关信息
let express=require('express')
let app=express()
let cors=require('cors')
let bodyParser=require('body-parser')
let router =require('./router')app.use(bodyParser.json()); //配置解析，用于解析json和urlencoded格式的数据
app.use(bodyParser.urlencoded({extended:false}));
app.use(cors())             //配置跨域，必须在路由之前
app.use(router)            //配置路由app.listen(80,()=>{console.log('服务器启动成功');
})

新建/server/db/index.js，用于配置数据库相关信息:

let mysql=require('mysql')let db=mysql.createPool({host:'localhost',            //数据库IP地址port:'3306',user:'root',                //数据库登录账号password:'88888888',     //数据库登录密码database:'tian'           //要操作的数据库
})module.exports=db;

新建/server/API/select_success.js，用于操作数据库

// 操作数据库
let db=require('../dp/index')exports.get_all=(req,res)=>{var sql='select * from success'db.query(sql,[req.query.id,req.query.date_time,req.query.integral_number,req.query.amount,req.query.integral],(err,data)=>{if(err){return res.send('错误:'+err.message)}res.send(data)})
}

新建/server/router.js，用于配置对应路由,然后在/server/app.js中导入路由配置

// 配置对应路由
let express=require('express')
let router=express.Router()
let select_success=require('./API/select_success')router.get('/select_success',select_success.get_all)module.exports=router

三、启动服务器

在server文件下执行

cd src/server
node app.js 或者 node app

示例：
在这里插入图片描述
注意：运行项目前，一定要先启动服务器，只有服务器启动之后，接口才能被调用，所以需要打开两个终端，分别用于启动服务器和项目

四、前端Vue访问接口进行数据交互

页面设计

<template><div><div><el-button type="text" @click="all">刷新</el-button></div><el-table:data="tableData"style="width: 100%"><el-table-columnproperty="id"label="序号"width="180"></el-table-column><el-table-columnlabel="日期"width="180"><template slot-scope="scope"><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.date_time }}</span></template></el-table-column><el-table-columnproperty="integral_number"label="类别编号"width="180"></el-table-column><el-table-columnproperty="amount"label="数量"width="180"></el-table-column><el-table-columnproperty="integral"label="积分值"width="180"></el-table-column></el-table></div>
</template><script>import axios from 'axios'
export default {name: 'onlySuccess',data() {return {tableData: [{id:'',date_time: '',integral_number: '',amount: '',integral: ''}]}},mounted() {this.all()//每次进入该页面自动执行该方法，即自动读取数据库数据导入到页面当中},methods: {all(){axios.get('http://localhost/select_success').then(res=>{this.tableData=res.data;//数据传递到页面数组console.log("数据查询成功"+res.data)}).catch(err=>{console.log("获取数据失败"+err);})}},
};
</script><style lang="scss" scoped></style>