学习目的
通过Koa搭建一个HTTP服务器；通过Mysql2来连接数据库；通过Vue来写前端页面的一个简单例子。前端页面灰常简单，就两个标题，主要是为了学习如何通过这三个技术来实现前后端综合开发的。
代码实现
直接上代码，注释已写在代码里，下面的是Node服务器代码：
'use strict';
var Koa = require('koa');
var app = new Koa();
var router = require('koa-router')();
var bodyparse = require('koa-bodyparser');
var fs = require('fs');
var path = require('path');
//node链接mysql的驱动程序，驱动程序就是为了让我们node写的sql语句发送给mysql并且返回处理结果
var mysql = require('mysql2');
var home = async (ctx,next) => {
console.log('请求进入');
ctx.response.type = 'text/html';
ctx.response.body = fs.createReadStream(path.join(__dirname,'html','home.html'));
};
//写的一个返回json数据的接口，然后会在html页面通过ajax来调用接口来更改页面内容,而不是通过服务器的模板语言渲染进去
var getInfo = async (ctx,next)=>{
console.log('获取用户信息');
ctx.response.type = 'application/json';
//因为是异步调用，所以数据库的query需要放在promise对象里面
var tmp = await new Promise(function(success,fail){
//创建数据库链接的对象，此时还没有链接mysql数据库
var connection = mysql.createConnection({
host:'localhost',
port:3306,
user:'root',
password:'wobuzhidao',
database:'testinfo'
});
//调用connect来链接数据库，接收一个回调函数，参数是err，如果为null则是链接成功，否则失败
connection.connect(function(err) {
if(err) {
console.log(err);
}else {
console.log('连接数据库成功');
//连接数据库成功后，可以发送sql语句了，这里是选取test3表里的所有数据
//结果会在回调函数里返回，第一个参数是错误信息，第二个是返回结果，类型是数组
connection.query('select *from test3',function(err,rows) {
if(err) {
fail(err);
}else {
//之前提到过的，await后面一般是需要一个promise对象的，只要调用success就会把结果返回
success(rows);
//完成数据库的访问后关闭连接
connection.end();
}
});
}
});
});
console.log(tmp);
//转为json字符串返回给浏览器
ctx.response.body = JSON.stringify(tmp);
};
router.get('/home',home);
router.get('/getInfo',getInfo);
app.use(bodyparse());
app.use(router.routes());
app.listen(3000);
console.log('服务器启动了');
下面是前端页面的简单代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- ajax的请求库，灰常好用，使用的是promise语法 -->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
<!-- vue是一个用来构建前端页面的框架，也是神器 -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<title>首页</title>
</head>
<body>
<div id="main">
<h1>{{info.name}}</h1>
<h2>{{info.type}}</h2>
</div>
</body>
</html>
<script>
//创建一个Vue对象
var vm = new Vue({
el:'#main',
data:{
info: {
name:'空',
type:1
}
},
//当实例被创建完后，vue对象会调用该方法
created:function(){
axios.get('http://localhost:3000/getInfo')
.then(function(data){
console.log('获取到了信息',data.data);
//vue实现了数据绑定，只要data里面的数据改变，页面就会重新渲染
vm.info = data.data[0];
})
.catch(function(err) {
console.log('获取信息失败',err);
});
}
});
</script>
上面就是一个非常简单的一个前后端开发的例子，旨在明白如何返回页面，如何返回json数据，并且如何在前端使用该数据。
在学习廖大的教程的时候，教程里有提到使用HTML模板来进行页面的渲染，其实我觉得真的不是很好，比如现在需要的场景是安卓和苹果客户端也获取JSON数据，如果使用模板渲染，返回的是一整个HTML页面，并且如果采用REST接口规范，可以很好的做到页面和数据的分离。所以，强烈不推荐使用服务器的模板来渲染页面，而是尽量遵守REST规范。（REST规范：REST就是一种设计API的模式。最常用的数据格式是JSON。由于JSON能直接被JavaScript读取，所以，以JSON格式编写的REST风格的API具有简单、易读、易用的特点。）
本节涉及到的知识点做个推荐链接：
如果不习惯使用mysql2的原生sql语句的写法，可以使用下面的这个ORM（对象关系映射，把数据库的表映射为JS原生对象，这样只需要操作对象就可以完成对数据库的增删改查）框架：
开发过程中推荐使用ORM框架，这个文档讲解的非常详细，不再写文章记录了。以后学习深入的情况下会去写一个简易版的ORM框架，来了解其原理。