[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.topics",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":16,"_30":31,"_32":33},"loginname","xxxgitone","page",1,"limit",20,"total","id","27907","avatar_url","https://avatars2.githubusercontent.com/u/19681723?v=4","githubUsername","create_at","2017-04-16 06:53:11.603","score",35,"topic_count","reply_count",6,"is_star",false,{"_20":35,"_36":21,"_37":38,"_39":40,"_41":42,"_43":44,"_45":33,"_46":33,"_30":47,"_48":49,"_25":50,"_51":52},"27152","author_id","tab","share","content","# vn-pastime\r\n基于vue全家桶、mongodb和nodejs的全栈项目,其实是个大杂烩。通过这个项目，了解前后端的整合，以及产品上线的基本流程\r\n\r\n前端使用axios与后台api交互获取数据，vue全家桶进行数据的管理和渲染，mongodb存储网上爬取的原始数据以及用户后期产生的数据，nodejs主要提供api接口以及token的签发与验证\r\n\r\n线上使用阿里云服务器部署，nginx进行http反向代理，pm2管理Node应用的进程\r\n\r\n* 线上地址： [http://www.xxxuthus.cn](http://www.xxxuthus.cn/home)\r\n* 仓库地址: [https://github.com/xxxgitone/vue-node-pastime](https://github.com/xxxgitone/vue-node-pastime)\r\n\r\n## 功能介绍\r\n\r\n这个项目本身并不复杂，最主要的是清扫了一些后台的盲区，满足了自己的好奇心，特别是在项目部署这一块。虽然还没有达到熟悉的地步，但提起也不至于什么也不知道。\r\n\r\n后期将会优化前端的代码，比如代码的结构和书写规范，以及vue的组件规范，还有响应式的实现，也可能会添加一些新的模块。\r\n\r\n**主要目录**\r\n\r\n ├── app.js // 后台入口\r\n ├── index.html\r\n ├── server // 服务端文件\r\n │ ├── api // api借口\r\n │ ├── middlewares\r\n │ │ └── jwtMid.js // token验证中间件\r\n │ ├── models // mongodb的文档模型\r\n │ └── public\r\n ├── src // 前端主文件\r\n │ ├── api // 前端api，与后台api的交互\r\n │ ├── App.vue\r\n │ ├── assets // 静态资源\r\n │ │ ├── font\r\n │ │ ├── img\r\n │ │ └── scss\r\n │ ├── components // 单个组件\r\n │ ├── main.js\r\n │ ├── router\r\n │ ├── store\r\n │ ├── utils // axios拦截器\r\n │ │ └── axiosService.js\r\n │ └── views // 页面级组件\r\n\r\n**主要功能**(期待更多)\r\n\r\n- [x] 视频播放列表的展示\r\n- [x] 视频播放器自定义样式\r\n- [x] 视频评论功能，包括二级评论，自定义简单的富文本组件，用于评论的编辑\r\n- [x] 基于token进行登录验证\r\n- [x] 图片的展示列表\r\n- [x] 图片滚动加载\r\n- [x] 图片详情页展示，支持上下张切换以及评论\r\n- [x] 使用socket.io进行简单聊天室\r\n- [x] 图片上传预览\r\n\r\n## 项目总结和感想\r\n#### 组件编写应该规范\r\nvue上手容易，可以很轻松的实现一些功能。但是要让代码变得更加容易维护和扩展，还得做点其他工作。组件编写规范化便是一个非常有效的方法，组件一般分为基础组件和业务组件，组件应该各司其职，比如基础组件就不应该包含跟业务相关的具体代码，只是返回一个信息，给引用它的组件。这样可以降低组件的耦合度，提升组件的可复用性。\r\n\r\n比如一个confirm组件\r\n\r\n```\r\n\r\n\r\n\r\n```\r\n\r\n在点击确认后，不应该直接在这里组件里面处理接下来的逻辑（比如删除或着清空），而是应该通过`this.$emit('confirm')`向父组件传递一个确认的信息，父组件监听这个方法，然后再处理接下来的逻辑\r\n\r\n这个项目后续将会重点围绕这点来进行优化\r\n\r\n#### 前后端如何分离\r\n这是之前我最想知道的问题，听过很多前后端分离，但是都是只闻其声，不见其形。\r\n\r\n之前同学问过我这样一个问题，**为什么前端也要单独起一个服务**，当时我脑海里，闪过的第一个答案就是，现在前端构建项目需要依赖很多包，需要通过node环境来安装各种依赖工作，帮助我们工作。\r\n\r\n现在看来这个答案大错特错了，问的是服务，而不是node环境。其实这个问题的答案和前后端分离也和相关\r\n\r\n在传统web开发的时候，前端和后端的工作比较耦合，后端人员要做着很多前端的工作，不停切换，比如发送后台请求。这样导致前后端分工不明确，效率反而更加低。不仅如此，而且前后端还要搭建同样的开发环境，让前端开发去搭建一个Java开发环境，显得有些复杂，而且确实没必要。\r\n\r\n现代web开发，前后端各司其职，开发之前约定好数据接口和格式，就可以同时开发了。\r\n\r\n前端负责静态样式的编写，以及发送ajax请求，后台负责api的开发和测试。双方都不用管对方具体怎么实现。\r\n\r\n![](http://i1.nbimg.com/605011/2a88410dc66eb685.png)\r\n\r\n前面也说到过前端不应该去搭建一个复杂的Java或者其他后台服务，我们可以通过nodejs来搭建一个服务器，寥寥几行代码，便可快速搭建，搭建nodejs服务器的好处\r\n\r\n* 可以模拟线上环境，毕竟本地静态文件和线上还是有些差别，比如路径等\r\n* 发送ajax，还要处理跨域\r\n* 部署线上，中间层，用于加载静态文件\r\n\r\n### 前后端如何部署\r\n在前后端完全分离的情况下，前端和后端当然是分别部署(本案例由于是自己一个人写的，并且后台语言正好是nodejs，所以没有将前后端分别部署），比如`www.xxxuthus.cn`，那么后台api可以使用一个二级域名`api.xxxuthus.cn`\r\n\r\n前端部署，nodejs为一个中间层，作为静态文件服务器，比如将`webpack`打包后的`dist`作为静态资源\r\n\r\n```javascript\r\nconst express = require('express')\r\nconst env = process.env.NODE_ENV || 'development'\r\nconst app = express()\r\n\r\napp.use(express.static('./dist'))\r\n\r\nconst server = app.listen(4000, () => {\r\n console.log(`Express started in ${app.get('env')} mode on http://localhsot:4000`)\r\n})\r\n```\r\n\r\n使用nginx进行反向代理，当用户访问静态资源的时候，返回静态资源，当前台访问api的时候，转发到后台服务器\r\n\r\n该配置文件是该项目的，该项目没有严格按照前后端分离部署，所以其它场景配置文件仅供参考\r\n\r\n```nginx\r\n upstream xxxuthus {\r\n server 127.0.0.1:4000;\r\n}\r\n\r\nserver {\r\n listen 80;\r\n server_name www.xxxuthus.cn;\r\n\r\n location / {\r\n proxy_set_header X-Real-IP $remote_addr;\r\n proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;\r\n proxy_set_header Host $http_host;\r\n proxy_set_header X-Nginx-Proxt true;\r\n\r\n proxy_pass http://xxxuthus;\r\n proxy_redirect off;\r\n }\r\n\r\n location ~* ^.+\\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt) {\r\n root /www/vnpastime/production/current/dist;\r\n }\r\n}\r\n```\r\n\r\n![](http://i4.fuimg.com/605011/eab2fb317a1632e0.png)\r\n\r\n### 跨域\r\n前后端分离，就会面临着跨域问题，比较常用的跨域CORS，proxy代理以及nginx反向代理\r\n\r\n在开发环境中我一般使用proxy代理的方式，通过在`config/index.js`下面设置\r\n\r\n```javascript\r\nproxyTable: {\r\n '/api':{\r\n target: 'http://localhost:4000',\r\n changeOrigin: true\r\n },\r\n '/auth':{\r\n target: 'http://localhost:4000',\r\n changeOrigin: true\r\n }\r\n},\r\n```\r\n\r\n我们前端服务为`8080`，当我们访问`/api/**`的时候，便会转发到端口为`4000`的服务上\r\n\r\n生产环境我使用的是nginx代理，前面已经有所介绍\r\n\r\n### nodejs项目部署工具pm2\r\n\r\npm2是node的一个进程管理器，能够保证进程永远或者，使用它部署变得相当容易\r\n\r\n```bash\r\nnpm install pm2 -g\r\n```\r\n\r\n配置文件，在项目根目录项新建文件`ecosystem.json`\r\n\r\n```\r\n\r\n{\r\n \"apps\": [\r\n {\r\n \"name\": \"vnpastime\",\r\n \"script\": \"app.js\",\r\n \"env\": {\r\n \"COMMON_VARIABLE\": \"true\"\r\n },\r\n \"env_production\" : {\r\n \"NODE_ENV\": \"production\"\r\n }\r\n }\r\n ],\r\n \"deploy\": {\r\n \"production\": {\r\n \"user\": \"xuthus_y\",\r\n \"host\": [\"106.14.173.2\"],\r\n \"port\": \"22\",\r\n \"ref\": \"origin/master\",\r\n \"repo\": \"git@github.com:xxxgitone/vue-node-pastime.git\",\r\n \"path\": \"/www/vnpastime/production\",\r\n \"ssh_options\": \"StrictHostKeyChecking=no\",\r\n \"post-deploy\" : \"npm install && npm run build && pm2 startOrRestart ecosystem.json --env production\",\r\n \"env\" : {\r\n \"NODE_ENV\": \"production\"\r\n }\r\n }\r\n }\r\n}\r\n```\r\n\r\n将该文件push到github中，初次启动执行\r\n```bash\r\npm2 deploy ecosystem.json production setup\r\n```\r\n\r\n然后\r\n```bash\r\npm2 deploy ecosystem.json production\r\n```\r\n可以在服务器，通过`pm2 list`和`pm2 logs`分别查看部署成功的应用和部署日志\r\n\r\n以后每次修改的项目，push到github后，直接在本地通过\r\n```bash\r\npm2 deploy ecosystem.json production\r\n```\r\n就可以更新线上的内容了\r\n\r\n> [这里](https://github.com/xxxgitone/learningProcess/blob/master/linux/%E4%BA%91%E6%9C%8D%E5%8A%A1%E9%83%A8%E7%BD%B2.md)记录了我部署过程中的一些关键步骤，可以参考\r\n\r\n## Build Setup\r\n\r\n``` bash\r\n# clone项目\r\ngit clone git@github.com:xxxgitone/vue-node-pastime.git\r\n\r\ncd vue-node-pastime\r\n\r\n# install dependencies\r\nnpm install\r\n\r\n# 还原数据，为了方便展示，我将数据库上传到了项目中，文件名为vnpastime\r\n# --host 数据库服务\r\n# -d 数据库名\r\n# 最后面是备份文件的路径,如果不在该目录下记得填写绝对路径\r\nmongorestore --host 127.0.0.1:27017 -d vnpastime ./vnpastime/\r\n\r\n# 启动mongodb服务\r\nmongo\r\n\r\n# 启动后台服务\r\nnode app.js\r\n\r\n# 再启动前台\r\nnpm run dev\r\n\r\n# build for production with minification\r\nnpm run build\r\n```","title","初探全栈，基于vue全家桶和nodejs写的一个小项目，讲述开发和部署过程","last_reply_at","2018-05-29 08:39:54.272","good","top",10,"visit_count",29325,"2017-08-14 08:14:16.065","author",{"_13":14,"_22":23}]