2019-02-26 node+mongoose+vue（二）

1 Vue中使用less

1.1 首先安装less与less-loader

npm install less less-loader

1.2 其次配置loader。在base.config.js中新增rules

{
      test: /\.less$/,
      loader: "style-loader!css-loader!less-loader",
      },

1.3 使用

<style scoped lang="less">//注意：需指定为less
  div {
    font-size: 14px;
  }
</style>

也可以导入引用外部 .less文件

2 使用nodemon实现node的热加载

直接按照nodemon即可，然后使用nodemon app.js就可以实现热加载

3 使用mongoose操作数据库时遇到的坑

------ 在跟着网上教程使用mongoose操作数据库时，因为异步的关系导致返回的数据为空（因为返回数据在查询数据结果之前）

let mongoose = require('mongoose');
let User = mongoose.model('User');

/* 查找图片 */
exports. get_banner= async () => {
    let query = Banner.find();
    let res = [];
    await query.exec(function (err, imgs) {
        if (err) {
            res = [];
        } else {
            res = imgs;
        }
    });
    return res
};

通过Koa查找的图片

/* 获取图片 */
exports. fn_banner= async (ctx, next) => {
    let res = await BannerModel.get_banner();
    if (res !== []) {
        ctx.body = {
            code: 0,
            data: res
        }
    } else {
        ctx.body = {
            code: 1,
            data: '轮播图获取失败'
        }
    }};

安装这样的步骤发现，返回的数据为空，但是明天查询到了数据，原因是因为return res在res = imgs之前返回给用户了

3.1

要弄清楚原因首先得知道相关的概念：

• await
  await只能用在async这个函数里面，await 表示在这里等待promise或者等待async函数中的promise返回结果了，再继续执行。
• exec和then
  区别在于： mongoose 的所有查询操作返回的结果都是 query （官方文档是这样写的），并非一个完整的promise。
  而加上.exec()则将会返回成为一个完整的 promise 对象，但是其是 mongoose 自行封装的 promise ，与 ES6 标准的 promise 是有所出入的（你应该会在控制台看到相关的警告），而且官方也明确指出，在未来的版本将会废除自行封装的promise，改为 ES6 标准，因此建议楼主在使用过程中替换为 ES6 的 promise，如下：

const mongoose = require('mongoose');
mongoose.Promise = global.Promise;

或者使用bulebird库

var mongoose = require('mongoose'),
    Promise = require('bluebird');
    
mongoose.Promise = Promise;

exec和then的参数是有所不同的，前者是 callback(err,doc)，后者则是 resolved(doc),rejected(err)

3.2 解决方法

• 解决方法一：（适用于简单的，不需要对数据进行复杂处理的）

exports. get_banner= async () => {
    try {
           let query = await Banner.find();
            return query;
         } catch (err) {
             return '查询失败';
        }
};

• 方法二：（可以对数据进行复杂处理）

exports. get_banner= async () => {
   let query = Banner.find();
        let res = [];
        return await query.exec().then((res)=>{
            return res = res;
        }).catch((err)=>{
            console.log(err);
        })
};