前记
做为一个从去年六月才开始学习前端的新手，终于终于。。。我花了四天写出了我人生中的第一个前后端都是自己完成的项目，emmm，废话不多说，先放图片和链接
设计思路--后端
这是我写的第一个后端项目，因为对async和await语法的支持我选择了koa2，因为是第一次写后端，前期只是注重实现功能，却对后端返回的数据规范并没有进行详细设计，等到我开始写前端的时候，才发现，后端返回的是什么玩意
下面是我的总结，
- 我遵循了
RESTful API设计规范，到最后我发现我的请求不是get就是post，对于删除和修改，这样不符合HTTP行为规范 - 后端返回
data数据的格式，成功状态一定要统一格式，成功状态一定要统一格式，成功状态一定要统一格式，例如：一边是{status:'ok'}表示成功处理，另一边是返回{status:0}表示成功处理，到最后前端获取返回值的时候，你就要不停的使用if来判断是不是成功的返回 - 返回数据要有一个良好的设计，比如我第一次编写的时候，登录成功我把登录人的个人信息忘记返回回来。。。谁登录了不清楚，emmm，我又去返工改后端代码，让后端把数据返回回来
我的后端代码地址：
我的学习参考地址：
设计思路--前端
我本身就是在一直写前端代码，并且保持了半年每天都打代码上传GitHub的好习惯（就算没打代码我也要上传GitHub，这是我的GitHub地址：，欢迎宠幸我），前端我使用的是我自己写的UI组件库，虽然没有几个组件，但我还是要说一下
下面是我对于前端的总结
- 要对界面的模块划分有一个准确的思路，比如有几个页面，每个页面上要有什么模块，哪些模块是可复用的，这些如果提前思考好，对编码的速度会有很大的提升，磨刀不误砍柴工
- 对于自己思考不出来的如何划分模块的项目，那就先动手写，哪怕把一个页面揉杂到一起了，但是只要写出来了，再去改就会简单很多了，只不过很多人不愿意去重构代码，经常写完就丢那里了，这样是不行的，这样是不行的，这样是不行的。。。
- 对于那些输入输出都是比较固定的代码段，可以将其封装成函数，例如：axios发送http请求，就可以将其封装成一个promise对象，并且将其输入的域名，请求等参数都固定好，封装成一个个功能函数，只需调用就可以获取输出，这样代码会非常的清晰明了
服务器部署
最后要提一点，nodejs怎么部署到服务器上在中有详细的讲述，但是vue打包后的项目怎么部署到服务器上呢？
其实，vue打包后的项目就是静态文件，最简单的方法就是用一个nodejs服务器将其当成静态资源加载就好了，代码很简单，如下
const Koa = require('koa')const path = require('path')const static = require('koa-static')const app = new Koa()// 静态资源目录对于相对入口文件index.js的路径const staticPath = './dist'app.use(static( path.join( __dirname, staticPath)))app.use( async ( ctx ) => { ctx.body = 'hello world'})app.listen(80, () => {})复制代码 就是如此简单，node开启就可以访问了，记得服务器打开80端口，如果想要关闭命令行也能访问，只需使用pm2就好了，具体使用方法在最后一章节中有详细描述。
后记
这是我第一次在掘金上写文章，有哪些不好的地方，也请大家指出来，我会非常感激，如果有人愿意看详细教程的话，我会将后端我编写的思路详细的写出来，虽然大部分都能在我给的那两个参考资料中找到思路，hhh
另外我的后端API也可以供大家练手前端项目，也希望大家给我个star，谢谢大家