小白初试koa2+vue项目搭建--在线便利贴--我想成为全栈

前记

作为一个从去年六月才开始学习前端的新手，终于终于。。。我花了四天写出了我人生中的第一个先后端都是本身完成的项目，emmm，废话很少说，先放图片和连接

预览地址 前端代码 后端规范

设计思路--后端

这是我写的第一个后端项目，由于对async和await语法的支持我选择了koa2，由于是第一次写后端，前期只是注重实现功能，却对后端返回的数据规范并无进行详细设计，等到我开始写前端的时候，才发现，后端返回的是什么玩意

下面是个人总结，

• 我遵循了RESTful API设计规范，到最后我发现个人请求不是get就是post，对于删除和修改，这样不符合HTTP行为规范
• 后端返回data数据的格式，成功状态必定要统一格式，成功状态必定要统一格式，成功状态必定要统一格式，例如：一边是{status:'ok'}表示成功处理，另外一边是返回{status:0}表示成功处理，到最后前端获取返回值的时候，你就要不停的使用if来判断是否是成功的返回
• 返回数据要有一个良好的设计，好比我第一次编写的时候，登陆成功我把登陆人的我的信息忘记返回回来。。。谁登陆了不清楚，emmm，我又去返工改后端代码，让后端把数据返回回来

个人后端代码地址：note-serve

个人学习参考地址：一块儿学Node.js koa2进阶学习笔记

设计思路--前端

我自己就是在一直写前端代码，而且保持了半年天天都打代码上传GitHub的好习惯（就算没打代码我也要上传GitHub，这是个人GitHub地址：Mrlgm，欢迎宠幸我），前端我使用的是我本身写的UI组件库voir-ui，虽然没有几个组件，但我仍是要说一下

下面是我对于前端的总结

• 要对界面的模块划分有一个准确的思路，好比有几个页面，每一个页面上要有什么模块，哪些模块是可复用的，这些若是提早思考好，对编码的速度会有很大的提高，磨刀不误砍柴工
• 对于本身思考不出来的如何划分模块的项目，那就先动手写，哪怕把一个页面揉杂到一块儿了，可是只要写出来了，再去改就会简单不少了，只不过不少人不肯意去重构代码，常常写完就丢那里了，这样是不行的，这样是不行的，这样是不行的。。。
• 对于那些输入输出都是比较固定的代码段，能够将其封装成函数，例如：axios发送http请求，就能够将其封装成一个promise对象，而且将其输入的域名，请求等参数都固定好，封装成一个个功能函数，只需调用就能够获取输出，这样代码会很是的清晰明了

服务器部署

最后要提一点，nodejs怎么部署到服务器上在一块儿学Node.js中有详细的讲述，可是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就行了，具体使用方法在一块儿学Node.js最后一章节中有详细描述。

后记

这是我第一次在掘金上写文章，有哪些很差的地方，也请你们指出来，我会很是感激，若是有人愿意看详细教程的话，我会将后端我编写的思路详细的写出来，虽然大部分都能在我给的那两个参考资料中找到思路，hhh

另外个人后端API也能够供你们练手前端项目，也但愿你们给我个star，谢谢你们