nodejs实现便利贴后端

为什么要练习这个node项目

在前边的几次练习中，都是前后端分离，只需要用ajax获取、处理、展示数据就可以，一直对服务器是如何实现的非常的感兴趣。在这个项目中，选择express+mongodb+mongoose技术栈实现一个基本的后端项目。（已部署上线）

如何测试访问？

使用curl进行测试，地址为：http://47.91.156.35:3777
运行：curl http://47.91.156.35:3777/notes
如图：

getNotes.png

API说明：
新增节点：/note/create
删除节点：/note/delete
修改节点文本：/note/edit
修改节点完成状态：/note/finish
获取全部节点：/notes

有什么问题？

1.项目结构的搭建，直接使用了express generate
2.直接使用mongodb有点复杂，选择mongoose较大的简化了链接、创建、查询、修改等整个过程。
用schema定义文档，一个便利贴所需要的结构为：创建时间（createdAt）、文本(text)、重要程度(value)、是否完成(finish)

let NoteSchema = new Schema({
  createdAt: {type: Date, default: Date.now},
  text: String,
  value: Number,
  finish: {type: Boolean, default: false},
})

3.API需要提前设计好，在写路由的时候，直接用就可以。在数据库中查询完数据后，放在响应数据中返回给客户端。

4.前后端跨域问题，借助cros，直接设置app.use(cros())就可以，前端访问服务器，在服务器中每个路径都设置Access-Control-Allow-Origin等过于麻烦，使用工具直接解决。

5.有一个问题没有解决，本地测试正常，但是github page已经升级为https，而服务器部署上去并没有支持https，在chrome中前后端无法正常的连接。

6.兄弟组件间的通信。
前端页面分为两部分：上Header，下Content，我们在Header中有相应 的操作，需要在Content中体现出来。这个时候就涉及到兄弟组件间的通信。

父子组件间的通信通过props，很简单的就可以实现。兄弟组件如果我们引入vuex进行状态管理，一个数据状态也是很容易就实现，但是这个例子中，涉及的逻辑很简单，并不需要复杂的状态管理。

这个时候，采用eventBus来实现兄弟组件间的通信。我们在Header中利用eventBus.$emit('xxx)来触发事件，在Content中利用eventBus.$on('xxx', this.methodsA)来监听事件，并且执行相关的操作。
7.利用ref操作DOM。
用原生js或者jquery操作dom都是比较方便的办法，但是在vue中就显得不是很方便。
需求：当我们要删除一个便利贴的时候，需要删除这个dom节点，并且发送一个请求，删除数据库中对应的数据。我们关注前端的逻辑。
由于便利贴都是用列表渲染出来的，每个节点都有对应的id，在渲染的时候，可以给其加上:ref=item.id的属性，这样，我们就可以用this.$refs对相应id的dom进行删除。不过确实不太方便，也不符合vue提倡的用法。
8.webpack的相关问题
用vue-cli3搭建的项目，需要配置vue.config.js

var webpack = require('webpack')
var UglifyJsPlugin=require('uglifyjs-webpack-plugin');
module.exports = {
  // 选项...
  assetsDir: './',
  publicPath: '/stickyPreview/',
  productionSourceMap: false,
  configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: false
          }
        })
      ]
    },
  }
}

使用UglifyJsPlugin对js进行压缩，但是效果不太明显。需要寻找更好的办法。