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);
})
};
