前言

开始接触Vuejs是在2016年国庆的时候,正好赶上1.0过渡到2.0,也开始了正式的组件化编程.下面我做的简单的多人博客平台是期末考时候就差不多完成的,然后因为时间问题拖到现在才写下这篇总结,效果已经大打折扣…

技术栈

前端 : Vuejs + Vuex + Vue-resource + Vue-router + Sass + webpack + ES6

后端 : Nodejs + Express + MongoDB

具体细节

目录结构

前端:
front-end

api: 负责前端与后端的HTTP请求部分(使用Vue-resource)
components: 公共组件
filter: Vuejs 2.0 移除过滤器之后相应的过滤器文件
public: 静态资源文件夹
router: Vue-router 前端路由文件
store: Vuex 存放组件状态
views: 页面组件
App.vue: 页面入口组件
main.js: 程序入口文件,加载路由,公共组件,组件状态

后端:
Back-End

bin: express的入口文件
config: 配置文件(数据库配置文件)
dao: 数据库操作
models: 抽象出来的模块(comment模块, post模块, user模块
nodes_modules: NPM包
public: 静态资源文件
router: 路由
views: 页面(无用)
app.js: express程序入口文件
packages.json: npm

技术实现

具体实现的功能:

  1. 登录
  2. 注册
  3. 登出
  4. 查看发表的文章(三个板块: 前端, 网络. 安全)
  5. 发表文章
  6. 评论
  7. 点击量的统计

拓展功能(未完成):

  1. 当前用户页
  2. 点赞功能
  3. 评论部分@功能
  4. 文章或者评论被其他用户提到,自动提醒
  5. 其他

webpack loader:

  1. vue-loader: 加载 vue 组件(值得一提的是Vue-loader自身并不具备解析任何文件的能力,它只是给Vue组件里面的资源分类,然后分配给相应的loader)
  2. babel-loader: 编译ES6
  3. json-loader: 自动解析json文件
  4. url-loader: 配合file-loader一起使用
  5. css相关loader: 编译css,并根据Can I Use自动添加前缀
  6. Sass相关: 编译Scss文件,和Vue组件里面Scss语法
  7. html-loader: 模板编译

我这里面要管理的状态就是用户的登录状态,和记录一些当前用户的信息,因为考虑到到文章详情页的时候减少网络的请求,存储了一部分文章内容.但是感觉在文章请求优化上还是有点问题的,和点击量部分有点冲突(点击量的统计就是请求该文章数据库的请求次数)

一些收货

其实做完这个实践之后,里面的技术细节,好好琢磨琢磨文档完全没有问题.我下面就说说我踩的一些坑,和积累的一些知识.(后面是出处)

  1. vue-loader根本没有处理.vue文件里面的内容!根本没有!他只是告诉你应该由其他的方式来loader来处理这个文件.@吐槽一下vue-loader
  2. Vuex会让你的Vue代码足够灵活可控,把数据统一存入state, 只允许通过Actions触发Mutations修改。然而,有时候我们的项目并没有复杂到需要用上Vuex。
    这时候你可以考虑使用Event Bus。
    但是Event Bus也存在一些隐患.@Event Bus 在Vue中的使用
  3. 注意驼峰命名和连字符命名
  4. vue-resource跨域请求数据的时候,后端设置cookie,前端无法解析的问题,要注意加上
    1
    2
    3
    4
    Vue.http.interceptors.push((request, next) => {
    request.credentials = true
    next()
    })

后端加上

1
2
3
4
5
6
7
8
9
10
11
12
13
app.all('*',function (req, res, next) {
res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
res.header('Access-Control-Allow-Credentials', 'true');
if (req.method == 'OPTIONS') {
res.sendStatus(200);
}
else {
next();
}
});

本来用node-inspector来调试后端Nodejs,但是除了一些问题之后发现官方已经许久没有更新该工具了,偶然间看到这个调试Nodejs的方法@
使用 Chrome 直接、并行调试 Node.js 及 JavaScript

思考

如何划分组件比较合理?