一，前言

接触编程，接触前端已经半年了。一直想要写个网站，但是只会前端部分，这几天学了koa和mysql，就想要把这三个串起来，因为比较忙（好吧，其实是比较菜~~），就只写基本的利用koa2搭建本地服务器，然后连接mysql。前端使用vue,利用axios发起请求，然后koa2处理请求，进而连接数据库，对数据库进行增删改查操作（本文仅写查的操作），再将结果返回前端渲染的过程。
也就是说本文只是以最最简单的一个demo来实现vue–koa2—mysql之间的通信！这个系列的文章我会一直更新下去，直到我真正完全建立了自己的网站。大佬别喷我~
大体的过程如下图：

实现效果：

二，后端部分代码

第一个，是app.js,利用koa2在本地创建一个服务器

const Koa = require('koa');
const router = require('./router');   //后端路由设置文件-------------这是第二个文件，路由文件
const cors = require('koa2-cors'); //跨域处理
const bodyParser = require('koa-bodyparser');  //post请求参数处理
const static = require('koa-static');   //静态资源中间件
const path = require('path');   //路径管理中间件
const app = new Koa();


app.use(static(
    path.join(__dirname,'./dist/')
))

app.use(cors());
app.use(bodyParser())
app.use(router.routes()).use(router.allowedMethods())


app.listen(5000, () => {
    console.log('[demo] route-use-middleware is starting at port 5000');
})

第二个：router.js路由文件

const Router = require('koa-router');
const fs = require('fs');
const path = require('path');
const query = require('./mysql');      //这个是封装的查询数据库的方法
let router = new Router();

//这里我只写这一个路由
router.get('/test',async(ctx) => {
    let resParams = ctx.query;
    let sql = 'select * from list';
    let list = await query(sql);
    let json = {
        success:true,
        data:list,
		query:resParams
    };
    ctx.response.body = json;
})


module.exports = router;

第三个：mysql.js文件

这里我没有使用数据池的方法，因为我还不会，，，为了避免数据库连接没断开，再次连接时报错，我就这样写了，让它每次发起查询都连接一下数据库，然后断开。

var mysql = require('mysql');

//封装的query方法
let query = function(sql,values){
	var connection = mysql.createConnection({
	  host: 'localhost',   //主机地址，默认localhost
	  user: 'root',      //数据库账号名
	  password: 'password',   //数据库密码
	  database: 'testdata'     //连接的数据库名
	});
    return new Promise((resolve,reject) => {
		//先连接
        connection.connect(function(err){
            if(err){
                reject(err);
				console.log("数据库连接失败")
            }else{
				//连接成功才查询
				console.log("数据库连接成功")
                connection.query(sql,values,(err,rows) => {
                    if(err){
                        reject(err);
                    }else{
                        resolve(rows);
                    }
					//关闭connection
					connection.end(function(err){
					    if(err){ 
					        return;
					    }
					    console.log('关闭数据库连接');
					});
                })
				
            }
        })
    })
}
module.exports = query;

三，前端部分代码：

前端没啥好说的，就是一个最基本的vue项目，使用的是vue2.0，直接搭建好项目，然后发起后端请求，将返回值渲染到页面就完事了。
主要的代码就是这个：

<template>
  <div class="home">
    <div class="title">使用koa2+vue+MySQL创建的一个demo</div>
	<ul class="contentBox">
		<template v-for="(item,index) in list" >
			<li :key="index" class="item">{{item.content}}</li>
		</template>
	</ul>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
	  return{
		  list:[]
	  }
  },
  components: {
    
  },
  created() {
  	this.getList()
  },
  methods:{
	 async getList(){
		  const {data:res}=await this.$http.get('/test',{
			   params:{
				   id:14
			   },
		   })
		  this.list=res.data
	  }
  }
}
</script>

<style lang="less" scoped>
	.home{
		width: 600px;
		margin: 100px auto;
		.title{
			text-align: center;
			font-size: 30px;
		}
		ul,li{
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.contentBox{
			border: 1px solid #555555;
			margin-top: 20px;
			.item{
				margin: 10px 20px;
				background: pink;
				&:hover{
					background-color: lightgreen;
				}
			}
		}
	}
</style>

四，这三者通信的关系示意

五，项目地址

后端代码：https://gitee.com/ling-xu/nodejs-background
前端代码：https://gitee.com/ling-xu/vue-front-end