小白初试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，谢谢大家

转载于:https://juejin.im/post/5c81dae06fb9a049f81a15c5