此文主要记录学习过程koa中结合vue和mysql,进行数据交互的案例,vue和mysql的相关知识不做介绍,自行安装
整体目录结构:koa文件夹是主要内容,在vue项目的根目录添加一个koa文件夹用于放置服务端的代码
db/index.js主要是放置连接数据库的配置文件,代码如下:
let mysql=require('mysql')
let connection=mysql.createConnection({
host:'localhost',
user:'root',
password:'123456',
database:'test',
})
module.exports=connection
routes/user.js主要是对应数据库user表的数据操作,代码如下:
let connection=require('../db/index')
let userQuery = async (ctx,next)=>{
let res=await new Promise((resolve,reject)=>{
connection.query('select * from user',(error,result,filed)=>{
if (error)return error;
resolve(result)
})
})
ctx.response.body={status:1,msg:'操作成功',data:res}
}
let userSave=async (ctx,next)=>{
var params=ctx.request.body;
let res=await new Promise((resolve,reject)=>{
connection.query('insert into user(id,name,age) values(0,?,?)',[params.name,params.age],(error,result,filed)=>{
if (error)return error;
resolve(result)
})
})
ctx.response.body={status:1,msg:'操作成功',data:res}
}
module.exports={userQuery,userSave}
app.js主要是关于服务器的配置文件,代码如下:
var koa=require('koa')
var route=require('koa-route')//配置路由
var koaBody=require('koa-body')// 解析post请求会用到koa-body
let app=new koa();
app.use(koaBody())
// 连接数据库
let connection=require('./db/index')
connection.connect()
let user=require('./routes/user')
// 配置路由
app.use(route.get('/user/query',user.userQuery))
app.use(route.post('/user/save',user.userSave))
// 启动服务器
app.listen(3000)
vue前端代码如下:
<template>
<div class="hello">
<div>姓名:<input type="text" v-model="name"></div>
<div>年龄:<input type="text" v-model="age"></div>
<div @click="save">保存</div>
<div @click="query">查询</div>
<div>{{msg}}</div>
<div>{{user}}</div>
</div>
</template>
<script>
export default {
data(){
return {
name:'',
age:'',
msg:'',
user:''
}
},
components:{},
props:{},
watch:{},
computed:{},
methods:{
save(){
this.axios.post('/api/user/save',{
name:this.name,
age:this.age,
}).then(res=>{
if(res.data.status==1){
this.msg=res.data.msg
}
})
},
query(){
this.axios.get('/api/user/query').then(res=>{
if(res.data.status==1){
this.user=res.data.data
}
})
},
},
created(){},
mounted(){}
}
</script>
<style>
</style>
代码已经全部完成,需要安装插件
进入到koa文件夹执行命令:cnpm i koa koa-route koa-body mysql --save
然后执行命令:node app 启动服务器
说明:/api/user/save 路径请配置代理