为什么要练习这个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进行压缩，但是效果不太明显。需要寻找更好的办法。
网友评论