感謝老哥提供這么好的學(xué)習(xí)資料傳送門
一個(gè)前后端貫通的項(xiàng)目塘慕，項(xiàng)目很簡(jiǎn)單，但包含了express框架蒂胞，路由图呢，ejs模板，數(shù)據(jù)庫配置骗随，數(shù)據(jù)庫操作蛤织，前端等等等等多個(gè)方面，要點(diǎn)太多在此記錄下一些重點(diǎn)鸿染，加深印象= =
1指蚜、項(xiàng)目架構(gòu)
通過npm安裝express，并通過express生成一個(gè)簡(jiǎn)單的配置好的前端項(xiàng)目涨椒，默認(rèn)端口為3000摊鸡，可以在bin配置文件中修改绽媒。
2、項(xiàng)目生產(chǎn)后要做的處理
- 視圖模板配置免猾，express默認(rèn)使用的是jade模板是辕，這里npm安裝ejs，在app.js中
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
app.engine('html', require("ejs").__express);
更換視圖模板引擎猎提，我們可以更方便地使用html去絢爛頁面获三，且可以使用ejs的一些優(yōu)秀的語法(類似于vue數(shù)據(jù)綁定)，根據(jù)請(qǐng)求獲取到的數(shù)據(jù)來渲染視圖锨苏。
- 路由設(shè)置疙教，在router文件夾下，index.js為默認(rèn)首頁入口伞租，update為更新頁面贞谓，服務(wù)器通過get請(qǐng)求路由后
/* GET update listing. */
router.get('/update', function(req, res, next) {
res.render('update', { title: '博客更新頁', name: '博客更新'});
});
- mongoose導(dǎo)入，通過npm安裝mongoose模塊肯夏，在data文件夾中新建mongoose.js導(dǎo)出數(shù)據(jù)庫可操作模型
//引入mongoose模塊
var mongoose = require('mongoose')
//連接數(shù)據(jù)庫
mongoose.connect('mongodb://localhost/blog')
//定義一個(gè)以文件形式存儲(chǔ)的數(shù)據(jù)庫模型骨架经宏，不具備數(shù)據(jù)庫的操作能力，Schema生成model驯击，model可以操作數(shù)據(jù)庫
var blogSchema = new mongoose.Schema({
content:{type:String,unique:true},
date:String
//設(shè)置要發(fā)送到的數(shù)據(jù)庫表名
},{collection:'post'})
//由Schema骨架對(duì)象生成model對(duì)象并發(fā)布
//這里post也可以叫postModel
//需要進(jìn)行操作時(shí)使用model烁兰，如postModel.find({...}),postModel.remove({...})
var post = mongoose.model('post',blogSchema)
//導(dǎo)出的post在app.js入口文件被使用
module.exports = post
- 導(dǎo)出post數(shù)據(jù)庫可操作模型之后，為了方便徊都，在app.js沪斟，將其加入全局對(duì)象的方法中，方便在路由配置時(shí)使用
//給所有的對(duì)象都添加一個(gè)postModel暇矫，該方法是mongoose導(dǎo)出的方法用于各個(gè)路由配置文件中操作數(shù)據(jù)庫
global.post = require('./data/mongoose');
3主之、頁面代碼的編寫
靜態(tài)資源存儲(chǔ)在public中
- 頁面設(shè)置監(jiān)聽事件，觸發(fā)請(qǐng)求李根，之后在路由中設(shè)置處理請(qǐng)求的方法槽奕，請(qǐng)求只有那么幾種，為了辨別請(qǐng)求的接口房轿，或者說是要進(jìn)行的操作粤攒，router.js文件中，通過對(duì)請(qǐng)求傳入的對(duì)象參數(shù)進(jìn)行過濾囱持，從而執(zhí)行開發(fā)者想要執(zhí)行的請(qǐng)求夯接。在index.html和index.js中以刪除為例。
//index.html
var deleteContent = $(this).attr('data-content');
var postData = {
'deleteContent': deleteContent
};
if (confirm('您確定要?jiǎng)h除這條博客嗎纷妆？')) {
$.ajax({
url: '/',
type: 'post',
data: postData,
success: function(data){
// alert('成功盔几！');
location.href = '/';
},
error: function(data){
// alert('失敗掩幢！');
location.href = 'error';
}
});
}
//觸發(fā)請(qǐng)求逊拍，攜帶參數(shù){'deleteContent':content}
//index.js
//刪除處理
var deleteContent = req.body.deleteContent;
if (deleteContent) {
//此處post.remove上鞠，post數(shù)據(jù)庫可操作模型，除了remove刪顺献，還有find旗国，insert，update等方法注整，方法皆傳入一個(gè)對(duì)象參數(shù)和一個(gè)回調(diào)函數(shù)能曾，處理數(shù)據(jù)庫操作
post.remove({content: deleteContent}, function(err) {
if (err) {
console.error(err);
return;
}
//js腳本會(huì)在shell中顯示
console.log('刪除成功！');
res.send(200);
});
}
開發(fā)時(shí)肿轨，應(yīng)當(dāng)先寫html中的ajax請(qǐng)求寿冕，再根據(jù)請(qǐng)求的參數(shù)在路由中配置達(dá)到想要的效果
- 項(xiàng)目的路由跳轉(zhuǎn)使用原生的location請(qǐng)求，參數(shù)解析時(shí)使用decodeUrl
// 更新跳轉(zhuǎn)
$('.update').on('click', function() {
var updateContent = $(this).attr('data-content');
location.href = '/update?updateBlog=' + updateContent;
});
// 解析
// 從url讀取要更新的內(nèi)容椒袍，簡(jiǎn)單粗暴處理
// url里的參數(shù)必須 decodeURI 轉(zhuǎn)碼下才能賦值給文本框
var oldContent = decodeURI(window.location.search.substr(12));
4驼唱、mongodb中save(增操作)和其他操作的不同
在mongoose中，中間件是Schema驹暑，通過var model = mongoose.model('modelname',schemaname)新建一個(gè)數(shù)據(jù)庫操作模型對(duì)象玫恳，而對(duì)這個(gè)對(duì)象進(jìn)行操作時(shí)，刪优俘，改都可以通過類似于
modelname.remove({鍵名:鍵值},function(){})
modelname.update({鍵名:原鍵值},{$set:{鍵名:要修改成的鍵值}},function(){})
來進(jìn)行修改
而增加操作要先通過modelname新建一個(gè)要增加的對(duì)象京办，再使用.save方法將其增加到數(shù)據(jù)庫中，具體代碼如下
var content = req.body.content
var date = req.body.date
//添加處理
if(content&&date){
var newPost = new post({
content:content,
date:date
})
//通過由post新建的對(duì)象帆焕，通過.save方法將新對(duì)象保存到數(shù)據(jù)庫
newPost.save(function(err){
if(err){
console.error(err)
return
}
console.log('保存成功啦!')
res.send(200)
})
5惭婿、項(xiàng)目截圖
