4-1刪除功能及項(xiàng)目生成配置文件
ch4-刪除功能及項(xiàng)目生成配置文件
修改項(xiàng)目結(jié)構(gòu)
靜態(tài)文件目前存儲(chǔ)在bower_components下面郎仆,但是與自定義靜態(tài)文件不便于集中管理。
可以利用bower指定安裝的靜態(tài)文件目錄的功能
.bowerrc 配置文件
{
"directory": "public/libs"
}
刪除“./bower_compinents/”目錄
bower install bootstrap
更改head模板靜態(tài)資源路徑
編寫(xiě)數(shù)據(jù)庫(kù)交互(刪)代碼
app.js
...
//list delete movie
app.delete('/admin/list', function(req, res){
var id = req.query.id;
if(id){
Movie.remove({_id: id}, function(err, movie){
if(err){
console.log(err);
}else{
res.json({success: 1});
}
});
}
})
在list.js中添加事件代理js
extend ../layout
block content
.container
.row
table.table.table-hover.table-bordered
thead
tr
th 電影名字
th 導(dǎo)演
th 國(guó)家
th 上映年份
//- th 錄入時(shí)間
th 查看
th 更新
th 刪除
tbody
each item in movies
tr(class="item-id-#{item._id}")
td #{item.title}
td #{item.doctor}
td #{item.country}
td #{item.year}
//- td #{moment(item.meta.createedAt).format('MM/DD/YYYY')}
td: a(target="_blank", href="../movie/#{item._id}") 查看
td: a(target="_blank", href="../movie/update/#{item._id}") 修改
td
button.btn.btn-danger.del(type="button", data-id="#{item._id}") 刪除
script(src="/js/admin.js")
/public/js/admin.js林说,處理邏輯
$(function(){
$('.del').click(function(e){
var target = $(e.target);
var id = target.data('id');
var tr = $('.item-id-' + id);
$.ajax({
type: 'DELETE',
url: '/admin/list?id=' + id,
}).done(function(results){
if(results.success === 1){
if(tr.length > 0){
tr.remove();
}
}
});
})
})
至此替废,前后端邏輯厘线,包括數(shù)據(jù)庫(kù)都已經(jīng)全部實(shí)現(xiàn)鸳君。
最后牲阁,需要對(duì)前端、后端所依賴的模塊和庫(kù)的版本進(jìn)行鎖定负敏,生成一個(gè)配置文件
生成配置文件
配置前端的靜態(tài)資源 bower init
iMooc-temp Zelda$ bower init
? name iMooc
? description demo-node-express
? main file
? keywords imooc node express
? authors zelda <ze.zh@hotmail.com>
? license MIT
? homepage
? would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes
cidentally published to the registry? (y/N) y
{identally published to the registry? (y/N)
name: 'iMooc',
authors: [
'zelda <ze.zh@hotmail.com>'
],
description: 'demo-node-express',
main: '',
keywords: [
'imooc',
'node',
'express'
],
license: 'MIT',
homepage: '',
private: true,
ignore: [
'**/.*',
'node_modules',
'bower_components',
'public/libs',
'test',
'tests'
],
dependencies: {
bootstrap: '^3.3.7'
}
}
? Looks good? Yes
配置好之后就會(huì)生成bower.json配置文件
{
"name": "iMooc",
"authors": [
"zelda <ze.zh@hotmail.com>"
],
"description": "demo-node-express",
"main": "",
"keywords": [
"imooc",
"node",
"express"
],
"license": "MIT",
"homepage": "",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"public/libs",
"test",
"tests"
],
"dependencies": {
"bootstrap": "^3.3.7"
}
}
配置后端依賴 npm init
iMooc-temp Zelda$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (iMooc-temp) iMooc
Sorry, name can no longer contain capital letters.
name: (iMooc-temp) imooc
version: (1.0.0) 0.0.1
description: demo
entry point: (app.js)
test command:
git repository:
keywords: imooc node express
author: zelda
license: (ISC)
About to write to /Users/Zelda/Dev/demo/iMooc-temp/package.json:
{
"name": "imooc",
"version": "0.0.1",
"description": "demo",
"main": "app.js",
"dependencies": {
"body-parser": "^1.17.1",
"express": "^4.15.2",
"jade": "^1.11.0",
"moment": "^2.17.1",
"mongoose": "^4.9.0",
"serve-static": "^1.12.1",
"underscore": "^1.8.3"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"imooc",
"node",
"express"
],
"author": "zelda",
"license": "ISC"
}
Is this ok? (yes) y
iMooc-temp Zelda$
配置好之后生成package.json配置文件
{
"name": "imooc",
"version": "0.0.1",
"description": "demo",
"main": "app.js",
"dependencies": {
"body-parser": "^1.17.1",
"express": "^4.15.2",
"jade": "^1.11.0",
"moment": "^2.17.1",
"mongoose": "^4.9.0",
"serve-static": "^1.12.1",
"underscore": "^1.8.3"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"imooc",
"node",
"express"
],
"author": "zelda",
"license": "ISC"
}
下一步:
- 電影分類(lèi)
- 角色贡茅、權(quán)限管理
- 還未集成到Grunt自動(dòng)重啟服務(wù)等
- 單元測(cè)試的實(shí)現(xiàn)
高級(jí)課程見(jiàn):http://www.imooc.com/learn/197