豫ICP备17040950号-2

Node.js学习笔记（二）

设计开发
文章目录
  1. 1. 伪造模板数据跑通前后端交互流程
    1. 1.1. 工程结构
    2. 1.2. 操作步骤
    3. 1.3. 报错处理
    4. 1.4. 效果图
    5. 1.5. 结束

整理自：慕课网

伪造模板数据跑通前后端交互流程

本篇博客用到的代码，小伙伴们直接复制粘贴就可以了，你们可知道小编一行行敲得多么辛苦T_T，复制粘贴前给个赞啊！

工程结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
helloworld/
  -bower_components/
  -node_modules/
  -views/
    -includes/
      -head.jade
      -header.jade
    -pages/
      -index.jade
      -detail.jade
      -admin.jade
      -list.jade
    -layout.jade
  -app.js

操作步骤

我们在上次helloworld工程的基础上接着做！
1、在views文件夹下新建文件夹includes和pages
2、在views文件夹下，删除index.jade，新建layout.jade，输入内容：

1
2
3
4
5
6
7
8
9
doctype
html
	head
		meta(charset="utf-8")
		title #{title}
		include ./includes/head
	body
		include ./includes/header
		block content

3、在includes文件夹下，新建文件head.jade和header.jade，分别输入内容：

1
2
3
link(href="/bootstrap/dist/css/bootstrap.min.css",rel="stylesheet")
script(src="/jquery/dist/jquery.min.js")
script(src="/bootstrap/dist/js/bootstrap.min.js")
1
2
3
4
5
.container
	.row
		.page-header
			h1 #{title}
			small 天印电影

4、在pages文件夹下，新建文件index.jade、detail.jade、admin.jade和list.jade，分别输入内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
extends ../layout

block content
	.container
		.row
			each item in movies
				.col-md-2
					.thumbnail
						a(href="/movie/#{item._id}")
							img(src="#{item.poster}",alt="#{item.title}")
						.caption
							h3 #{item.title}
							p: a.btn.btn-primary(href="/movie/#{item._id}",role="button")
								观看预告片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
extends ../layout

block content
	.container
		.row
			.col-md-7
				embed(src="#{movie.flash}",allowFullScreen="true",quality="high",width="720",height="500",align="middle",type="application/x-shock")
			.col-md-5
				dl.dl-horizontal
					dt 电影名字
					dd= movie.title
					dt 导演
					dd= movie.doctor
					dt 国家
					dd= movie.country
					dt 语言
					dd= movie.language
					dt 上映年份
					dd= movie.year
					dt 简介
					dd= movie.summary
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
extends ../layout

block content
	.container
		.row
			form.form-horizontal(method="post",action="/admin/movie/new")
				.form-group
					label.col-sm-3.control-label(for="inputTitle") 电影名字
					.col-sm-10
						input#inputTitle.form-control(type="text",name="movie[title]",value="#{movie.title}")
				.form-group
					label.col-sm-3.control-label(for="inputDoctor") 导演
					.col-sm-10
						input#inputTitle.form-control(type="text",name="movie[doctor]",value="#{movie.doctor}")
				.form-group
					label.col-sm-3.control-label(for="inputCountry") 国家
					.col-sm-10
						input#inputTitle.form-control(type="text",name="movie[country]",value="#{movie.country}")
				.form-group
					label.col-sm-3.control-label(for="inputLanguage") 语言
					.col-sm-10
						input#inputTitle.form-control(type="text",name="movie[language]",value="#{movie.language}")
				.form-group
					label.col-sm-3.control-label(for="inputYear") 上映年份
					.col-sm-10
						input#inputTitle.form-control(type="text",name="movie[year]",value="#{movie.year}")
				.form-group
					label.col-sm-3.control-label(for="inputSummary") 简介
					.col-sm-10
						input#inputTitle.form-control(type="text",name="movie[summary]",value="#{movie.summary}")
						
				.form-group
					label.col-sm-3.control-label(for="inputPoster") 海报地址
					.col-sm-10
						input#inputTitle.form-control(type="text",name="movie[poster]",value="#{movie.poster}")
				.form-group
					label.col-sm-3.control-label(for="inputFlash") 片源地址
					.col-sm-10
						input#inputTitle.form-control(type="text",name="movie[flash]",value="#{movie.flash}")
						
						
				.form-group
					.col-sm-offset-2.col-sum-10
					button.btn.btn-default(type="submit") 录入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
extends ../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.createdAt).format('MM/DD/YYYY')}
							td: a(target="_blank",href="../movie/#{item._id}") 查看
							td: a(target="_blank",href="../admin/update/#{item._id}") 修改
							td
								button.btn.btn-danger.del(type="button",data-id="#{item._id}") 删除

5、修改helloworld文件夹下app.js，主要是加入模拟数据，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
var express = require('express');
var path = require('path');
var port = process.env.PORT || 3000 ;
var app = express();

app.set('views','./views/pages');
app.set('view engine','jade');
app.use(express.bodyParser());
app.use(express.static(path.join(__dirname, 'bower_components')));
app.listen(port);

console.log('helloworld started on port ' + port);

app.get('/', function(req, res){
  res.render('index',{
  title:'首页',
  movies: [
	  {
		title: '机械战警',
		_id: 1,
		poster: 'http://ihelloworld.qiniudn.com/%40%2Fimgs%2FiNJIT.jpg',
	  },
	  {
		title: '机械战警',
		_id: 2,
		poster: 'http://ihelloworld.qiniudn.com/%40%2Fimgs%2FiNJIT.jpg',
	  }  
  ]
  })
})

app.get('/movie/:id', function(req, res){
  res.render('detail',{
  title:'详情页',
  movie: {
	doctor: '未知',
	country: '美国',
	title: '机械战警',
	year: '2014',
	poster: 'http://ihelloworld.qiniudn.com/%40%2Fimgs%2FiNJIT.jpg',
	language: '英语',
	flash: 'http://player.youku.com/player.php/sid/XNjM3Njc3MTY4/v.swf',
	summary: '无',
  }
  })
})

app.get('/admin/movie', function(req, res){
  res.render('admin',{
  title:'后台录入页',
  movie: {
	doctor: '',
	country: '',
	title: '',
	year: '',
	poster: '',
	language: '',
	flash: '',
	summary: '',
  }
  })
})

app.get('/admin/list', function(req, res){
  res.render('list',{
  title:'列表页',
  movies: [
	  {
		_id: 1,
		doctor: '未知',
		country: '美国',
		title: '机械战警',
		year: '2014',
		poster: 'http://ihelloworld.qiniudn.com/%40%2Fimgs%2FiNJIT.jpg',
		language: '英语',
		flash: 'http://player.youku.com/player.php/sid/XNjM3Njc3MTY4/v.swf',
		summary: '无',
	  },
	  {
		_id: 2,
		doctor: '未知',
		country: '美国',
		title: '机械战警',
		year: '2014',
		poster: 'http://ihelloworld.qiniudn.com/%40%2Fimgs%2FiNJIT.jpg',
		language: '英语',
		flash: 'http://player.youku.com/player.php/sid/XNjM3Njc3MTY4/v.swf',
		summary: '无',
	  }
  ]
  })
})

报错处理

至此，已经敲完了Scott大神给的代码，马上就能看到效果了，好激动！
哎呦我靠！报错，我改！又报错，我再改！还报错……诶？坏了，改不出来了！记录错误如下：
bodyParser使用报错
百度“nodejs使用app.use(express.bodyParser());出错”，得到如下结论：
1、node.js和windows的兼容性不如POSIX操作系统，因此npm提供给windows的第三方模块较少。
2、bodyParser以前是集成在express中的，现在需要单独安装。
无论哪个结论，解决办法都是安装body-parser：

1
npm install body-parser

然后在代码中如下使用：

var bodyParser = require(‘body-parser’);
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json());

即把app.js的内容修改为如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
var express = require('express');
var path = require('path');
var port = process.env.PORT || 3000 ;
var app = express();
var bodyParser = require('body-parser');

app.set('views','./views/pages');
app.set('view engine','jade');
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'bower_components')));
app.listen(port);

console.log('helloworld started on port ' + port);

app.get('/', function(req, res){
  res.render('index',{
  title:'首页',
  movies: [
	  {
		title: '机械战警',
		_id: 1,
		poster: 'http://ihelloworld.qiniudn.com/%40%2Fimgs%2FiNJIT.jpg',
	  },
	  {
		title: '机械战警',
		_id: 2,
		poster: 'http://ihelloworld.qiniudn.com/%40%2Fimgs%2FiNJIT.jpg',
	  }  
  ]
  })
})

app.get('/movie/:id', function(req, res){
  res.render('detail',{
  title:'详情页',
  movie: {
	doctor: '未知',
	country: '美国',
	title: '机械战警',
	year: '2014',
	poster: 'http://ihelloworld.qiniudn.com/%40%2Fimgs%2FiNJIT.jpg',
	language: '英语',
	flash: 'http://player.youku.com/player.php/sid/XNjM3Njc3MTY4/v.swf',
	summary: '无',
  }
  })
})

app.get('/admin/movie', function(req, res){
  res.render('admin',{
  title:'后台录入页',
  movie: {
	doctor: '',
	country: '',
	title: '',
	year: '',
	poster: '',
	language: '',
	flash: '',
	summary: '',
  }
  })
})

app.get('/admin/list', function(req, res){
  res.render('list',{
  title:'列表页',
  movies: [
	  {
		_id: 1,
		doctor: '未知',
		country: '美国',
		title: '机械战警',
		year: '2014',
		poster: 'http://ihelloworld.qiniudn.com/%40%2Fimgs%2FiNJIT.jpg',
		language: '英语',
		flash: 'http://player.youku.com/player.php/sid/XNjM3Njc3MTY4/v.swf',
		summary: '无',
	  },
	  {
		_id: 2,
		doctor: '未知',
		country: '美国',
		title: '机械战警',
		year: '2014',
		poster: 'http://ihelloworld.qiniudn.com/%40%2Fimgs%2FiNJIT.jpg',
		language: '英语',
		flash: 'http://player.youku.com/player.php/sid/XNjM3Njc3MTY4/v.swf',
		summary: '无',
	  }
  ]
  })
})

效果图

吼吼，终于搞定了！有图有真相！
效果图1
效果图2
效果图3
效果图4

结束

操作过程中的其他小错误，在此不作记录，有任何问题欢迎留言！