4-1删除功能及项目生成配置文件
ch4-删除功能及项目生成配置文件
修改项目结构
静态文件目前存储在bower_components下面，但是与自定义静态文件不便于集中管理。
可以利用bower指定安装的静态文件目录的功能
.bowerrc 配置文件
{
"directory": "public/libs"
}
删除“./bower_compinents/”目录
bower install bootstrap
更改head模板静态资源路径
编写数据库交互（删）代码
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 导演
th 国家
th 上映年份
//- th 录入时间
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();
}
}
});
})
})
至此，前后端逻辑，包括数据库都已经全部实现。
最后，需要对前端、后端所依赖的模块和库的版本进行锁定，生成一个配置文件
生成配置文件
配置前端的静态资源 bower init
iMooc-temp Zelda$ bower init
? name iMooc
? description demo-node-express
? main file
? keywords imooc node express
? authors zelda
? 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 '
],
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
配置好之后就会生成bower.json配置文件
{
"name": "iMooc",
"authors": [
"zelda "
],
"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 --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"
}
下一步：
- 电影分类
- 角色、权限管理
- 还未集成到Grunt自动重启服务等
- 单元测试的实现
高级课程见：http://www.imooc.com/learn/197