vue+koa+mysql交互案例

此文主要记录学习过程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 路径请配置代理