Koa2+MySQL+VUE+ElementIUI搭建简单的后台管理小系统

如题，前端入坑许久，还是写个小东西出来吧

想要搭建自己的一个后台管理，实现简单的增删改查，看起来很简单

其实是真的简单，没有想的那么难，我也就写了一个月吧，

当然是假的，其实也就每天一两个小时，花了大概一周吧

下了最新的vue脚手架也就是3.0版本，还得自己配置config文件

怎么升级3.0，我就不多说了，网上太多了

10分钟上手最新vue脚手架

比如上面这篇讲的还是很通俗易懂的

init之后， npm install 开始下包

 

有人问，elementui这个包不用下载吗，要下载，不过不是通过 npm i element-ui -S 来下下载

而是通过vue3.0的脚手架，以插件的形式下载

从网上搜的图，侵删，

如果你在vue创建项目的时候选的是SCSS那这里就选yes，如果是stylus这种就no，不然会全局覆盖的

具体的内容，可以看这篇

vue cli3.0 增加elementUI包

然后确认页面

登录页

主页->1.查询2.增加3.修改4.删除

根据要实现的功能在views文件夹下建立四个页面　　　

分别对应新增数据页面，主页，修改数据页面，登录页面

然后去router.js，写配置文件

第一个是重定向用的，访问根路由直接就去登录页

app.vue文件也要修改一下

 

login页面

 

 

homepage页面

addNew页面

editInfo页面

 好主要页面确定了，开始搞后台

下包

yarn add koa koa-bodyparser koa-mysql-session koa-router koa-session-minimal koa2-cors mysql -save

bodyparser用来解析请求的，koa-router是后台路由，我是用来做api接口的，koa2-cors用来解决跨域，mysql数据库哇，
axios是可以用在后端和前端的，所以封装好的ajax感觉还是axios好用一点

前端页面写好了之后，要开始写后端了，在根目录下新建server文件夹

我们先看看app.js的内容

都写了注释，引了一堆包，

bodypasr很好用，直接解析请求参数，不需要再自己找半天，解析请求的参数了

cors解决跨域的，感觉挺好用的

koa-router，路由中间件，因为我是直接用作api的，所以还是需要用的

下面是router部分，看index页面

是按业务分成两个？一个登录，一个是增删改查

然后，看登录接口

那么问题来了，这个adminApiConfig是干嘛用的

我们进入login.js看下

这么一看就很清楚了，就是当我们调用api/login的时候，就会调用login页面的adminSignin函数，至于怎么验证就是简单的sql了，我们调用signIn这个方法

我们点进去看下

查表验证，简单明了

我们回到开始，这个接口写好了，那么我们怎么调用这个接口呢

回到我们的前台登录页面的control.js

当我们点击登录，通过adminLogin这个方法调用这个接口

接口需要两个东西，一个 接口地址，一个要传的参数

那么这个axiosPost又是什么东西？

我们点进去看下，我通过axios，自己简单封装了两个函数

这一个Promise，就可以把异步的接口请求，改成同步的请求了，方便很多啊，ES6牛批

 那导入的webconfig这个又是什么东西呢，我们点进去看下

因为是本地用node起的服务，那肯定是要进行重定向的，

因为vue本身自己会起一个服务，然后后台koa2又起一个服务，需要进行重定向，不然是访问不了的。

这里看到端口号是3000，往前看到我的后台app.js里面的监听 app.listen(3000)，这样就对应了

这样一个简单后台增删改查到这里就结束了，具体的源码可以看下面的github链接进入，如果有探讨的小伙伴，可以加我qq或者在github上iss

算是记录自己写的东西，当然少不了copy，不过总归还是要自己搭起来啊

具体源码，可以看我的github【搭建简单的后台管理小系统】,

记得要在develop分支哦，因为master分支代码不一定是最新的

转载于:https://www.cnblogs.com/WhiteM/p/10182155.html