Nodejs+Vue wzry项目 开发记录

收获

• <el-menu > 这里不加router ，index无法跳转
• ${}这种字符串很香，不再用++拼接了（好无语明明学过，却忘记用…）
• 修改页面和新增页面可以用一个组件，一些选择显示的东西用v-if
• 删除的话，就用delete请求
• async和await，太好用了，以后就不用写回调了
• parent: {type: mongoose.SchemaTypes.ObjectId, ref: "Category"}这里的type类型也可以是String，Number等类型，但是没有理由是，也就是说想搞这种聚合类型的，就不要改这个type。ref就是绑定的Model。等到查询的时候，可以调用populate('key值')进行查找。
• 通用的CRUD接口，细微不同可以用：setOptions来区别。

    app.use('/api/rest/:resource', async (req, res, next) => {
        const modelName = require('inflection').classify(req.params.resource)
        req.Model = require(`../models/${modelName}`)
        next()
    }, router)

inflection模块是名字的单复数转换，一般来说，前端请求路径都是小写复数，Model都是大写单数，所以利用这个模块来转为对应的模块名来引入模块。将引入的模块挂载到req上。这里为了能够使用父级app的动态参数resource，在实例化router时，还要加上express.Router({ mergeParams: true})来合并父级参数。next()是必须的，没有它，app.use执行到挂载req.Model之后，就不再执行。

 const queryOptions = {}

        if (req.Model.modelName === 'Category') {
            queryOptions.populate = 'parent'
        }

        const items = await req.Model.find().setOptions(queryOptions).limit(10)

• js中对象点两次的属性，就必须保证第二级的属性存在。也就是说 model.scores.attack，必须保证model.scores存在，即使是空对象。

• 未定义的属性，不要用是否等于null来判断，要用是否等于undefined来判断。
  没有这种说法，0,"",undefined,null，false都会在条件判断中被判为false，且它们的反!都为true

• 在今天使用vue2-editor时，自定义上传图片，使用到一个事件叫imageAdded，且这里是官网写法。但是发现，怎么弄都不会触发这个事件，后来网上一查，发现这里有一个坑，那就是不要使用驼峰命名法来写事件名。当把事件名改为image-added,就正常了。这就涨了个记性，以后的事件名都不要用驼峰啦！其他名称，例如什么组件名字，暂时还没遇到坑。

• watch可以监听路由的跳转

• 把数组的length设置为0，即可清空数组

• 登录的服务端验证：

  1. 根据用户名在数据库查找，存在下一步，不存在返回错误码
  2. 根据用户名找到的用户信息，使用bcrypt模块解密并对比密码是否正确，正确下一步，不正确返回错误码
  3. 返回一个token，使用jsonwebtoken模块，前端要设置一个请求拦截器，把token提交。

• 在返回以上这些错误码时，可以使用http-assert模块抛出异常，并配置中间件抓住处理。

• 写中间件的时候，导出的最好是一个函数返回的另一个函数，也就是说可以配置的。

• req.app 完全等于app，在中间件无法使用app时，就使用req.app吧

• Vue.mixin

• 为了获取一个可能会发生变化的变量，用一个函数来返回它吧
• <el-dropdown-item @click> 这么写没有触发点击事件，要写成@click.native
• 下面这个代码是，一个表关联多个表的时候，可以以这种方式在通用的CRUD接口中查询多个所需的关联字段。

let queryOptions = {}

    if (req.Model.modelName === 'Hero') {
        queryOptions = [
            {path: 'partner.hero', select: ['avatar', 'name']},
            {path: 'categories', select: ['name']},
            {path: 'items1', select: ['name', 'icon']},
            {path: 'items2', select: ['name', 'icon']}
        ]
        require('../models/Category')
        require('../models/Item')
    }

    const model = await req.Model.findById(req.params.id).populate(queryOptions)
    res.send(model)

已知bug:

• is-active 在地址前进或后退时，容易抽风
• 新建英雄时候，要加载上级分类为英雄的分类，这个需求我觉得是要在后端处理的,即在查询数据库的时候处理。但是我目前的通用CRUD接口无法实现，这里是否需要再写一个接口来满足暂时存疑。目前的解决方法是在前端filter一下。

已经解决的bug：

• 表单回车提交与点击提交行为不一致。（可以用@submit.native.prevent避免）

感受

1.31

怎么感觉比上一次写node简单多了？ 知道是有async的帮助简单很多，但是总觉得没怎么写数据库的脚本耶…
而且使用vue直接传数据不用操作DOM真的太香了，不用写之前的art-template，不用写jQuery脚本操作页面…
真的是写程序越来越方便了，不用反反复复的造轮子，更能专注于业务和逻辑。
这就是新技术之所以会流行起来的原因吗？

2.2

做这个项目真的是收获颇丰哈，不仅能复习node知识，而且能以更加厉害的技术实现。
以前不懂得前后端交互的时候，总想着前端哪个技术/框架，能不能和后端哪个技术/框架混用呢？现在看来完全是没有理解透彻，前后端分离的时代哪用得着考虑这些，后端框架随便选，数据库都不限于一种可用。
我打算把这个项目做完之后，再完善完善，老师没讲到的地方或者我自己感觉有逻辑上/技术上的漏洞，完善完善。做完之后会把这个项目传到csdn上，分享给能用到的同学。

2.3

今天又是学到了好多东西啊，什么加密bcrypt，assert报错，token，还有浏览器的两个存储对象LocalStorage和SessionStorage，对node中的中间件的概念越来越清晰。明天就能写完项目，然后就开始完善。

2.4

完成项目，并且完善了英雄的查看页，也完成了根据req.headers.refer来判断是哪里发来的请求而不是靠资源名。
今天加入了导航守卫，给upload接口也用Vue,ximin配置了接口地址，和请求头。
总之，收获颇丰。
要去上传项目了。

完结…