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>
也可以導(dǎo)入引用外部 .less文件
2 使用nodemon實(shí)現(xiàn)node的熱加載
直接按照nodemon即可，然后使用nodemon app.js就可以實(shí)現(xiàn)熱加載
3 使用mongoose操作數(shù)據(jù)庫(kù)時(shí)遇到的坑
------ 在跟著網(wǎng)上教程使用mongoose操作數(shù)據(jù)庫(kù)時(shí)杆逗，因?yàn)楫惒降年P(guān)系導(dǎo)致返回的數(shù)據(jù)為空（因?yàn)榉祷財(cái)?shù)據(jù)在查詢數(shù)據(jù)結(jié)果之前）
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
};
通過(guò)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: '輪播圖獲取失敗'
}
}};
安裝這樣的步驟發(fā)現(xiàn)乡翅，返回的數(shù)據(jù)為空，但是明天查詢到了數(shù)據(jù)罪郊，原因是因?yàn)閞eturn res在res = imgs之前返回給用戶了
3.1
要弄清楚原因首先得知道相關(guān)的概念：
- await
await只能用在async這個(gè)函數(shù)里面蠕蚜，await 表示在這里等待promise或者等待async函數(shù)中的promise返回結(jié)果了，再繼續(xù)執(zhí)行悔橄。 - exec和then
區(qū)別在于： mongoose 的所有查詢操作返回的結(jié)果都是 query （官方文檔是這樣寫(xiě)的）靶累，并非一個(gè)完整的promise。
而加上.exec()則將會(huì)返回成為一個(gè)完整的 promise 對(duì)象癣疟，但是其是 mongoose 自行封裝的 promise 挣柬，與 ES6 標(biāo)準(zhǔn)的 promise 是有所出入的（你應(yīng)該會(huì)在控制臺(tái)看到相關(guān)的警告），而且官方也明確指出睛挚，在未來(lái)的版本將會(huì)廢除自行封裝的promise邪蛔，改為 ES6 標(biāo)準(zhǔn)，因此建議樓主在使用過(guò)程中替換為 ES6 的 promise扎狱，如下：
const mongoose = require('mongoose');
mongoose.Promise = global.Promise;
或者使用bulebird庫(kù)
var mongoose = require('mongoose'),
Promise = require('bluebird');
mongoose.Promise = Promise;
exec和then的參數(shù)是有所不同的侧到，前者是 callback(err,doc)，后者則是 resolved(doc),rejected(err)
3.2 解決方法
- 解決方法一：（適用于簡(jiǎn)單的淤击，不需要對(duì)數(shù)據(jù)進(jìn)行復(fù)雜處理的）
exports. get_banner= async () => {
try {
let query = await Banner.find();
return query;
} catch (err) {
return '查詢失敗';
}
};
- 方法二：（可以對(duì)數(shù)據(jù)進(jìn)行復(fù)雜處理）
exports. get_banner= async () => {
let query = Banner.find();
let res = [];
return await query.exec().then((res)=>{
return res = res;
}).catch((err)=>{
console.log(err);
})
};
