一，前言

接触编程，接触前端已经半年了。一直想要写个网站，但是只会前端部分，这几天学了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',   //主机地址，默认localhostuser: '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);}//关闭connectionconnection.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

nodejs后台系列--第三篇-最简单的全栈demo:koa2+mysql+vue相关推荐

【三十六】Python全栈之路--MySQL
文章目录 1. mysql_where子句_聚合函数 2. mysql_其他子句语法 3. mysql_子查询 4. exists关键字 5. 练习所需表数据 6. 小练习 1. mysql_wher ...
【三十五】Python全栈之路--MySQL
文章目录 1. mysql约束 2. 外键_联合主键_唯一索引 3. 存储引擎_表关系 1. mysql约束 # ### char varchar (补充) char 字符长度 255个 varcha ...
javascript面向对象系列第三篇——实现继承的3种形式
前面的话学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.开宗明义,继承是指在原有对象的基础上,略作修改,得到一个新的对象.javascript主要包括类式继承.原型继承和拷贝继承这三种 ...
[深度][PyTorch] DDP系列第三篇：实战与技巧
[深度][PyTorch] DDP系列第三篇:实战与技巧转自:https://zhuanlan.zhihu.com/p/250471767 零. 概览想要让你的PyTorch神经网络在多卡环境上跑 ...
深入理解javascript作用域系列第三篇
前面的话一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javascript作用域系列第三篇--声明提升(hois ...
android远程打电话,Android打电话功能 Android实战教程第三篇之简单实现拨打电话功能...
想了解Android实战教程第三篇之简单实现拨打电话功能的相关内容吗,杨道龙在本文为您仔细讲解Android打电话功能的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Android拨打电话 ...
【Windows编程】系列第三篇：文本字符输出
2019独角兽企业重金招聘Python工程师标准>>> 上一篇我们展示了如何使用Windows SDK创建基本控件,本篇来讨论如何输出文本字符. 在使用Win32编程时,我们常常要输 ...
“睡服”面试官系列第三篇之变量的结构赋值（建议收藏学习）
目录变量的解构赋值 1. 数组的解构赋值 2. 对象的解构赋值 3. 字符串的解构赋值 4. 数值和布尔值的解构赋值 5. 函数参数的解构赋值 6. 圆括号问题 7. 用途变量的解构赋值 1. 数 ...
Linux 基础知识系列第三篇
精选30+云产品,助力企业轻松上云!>>> Linux 03 今日学习目标 [x] 网络进程 [x] 系统服务 [x] 定时任务 [x] Linux安全 [x] 常用命令操作 [x] ...
kafka创建topic_Kafka系列第三篇！10 分钟学会如何在 Spring Boot 程序中使用 Kafka 作为消息队列?...
Guide哥答应大家的 Kafka系列的第3篇原创文章,写的非常详细,没有接触过 Kafka 的朋友应该都可以看懂,觉得不错的话一定要点亮你们的在看!在看就是对Guide 哥最大的鼓励! 为了保证内容 ...

nodejs后台系列--第三篇-最简单的全栈demo:koa2+mysql+vue