从零开始搭建Nodejs,Express,Ejs,bootstrap,Jsviews,Mongodb运行环境教程(二)

发表于 | 更新于 | 分类于 ， | 阅读次数： | 阅读次数：
本文字数： 6.9k | 阅读时长 ≈ 6 分钟

在第一篇博客中我们介绍了Nodejs，Express和Ejs的安装，简单的搭建了服务器的基本运行环境，下面再次开始

该系列文章总汇链接
从零开始搭建Nodejs,Express,Ejs,bootstrap,Jsviews,Mongodb运行环境教程(一)
从零开始搭建Nodejs,Express,Ejs,bootstrap,Jsviews,Mongodb运行环境教程(二)
从零开始搭建Nodejs,Express,Ejs,bootstrap,Jsviews,Mongodb运行环境教程(三)
nodeProject的github项目地址:https://github.com/wiliam2015/nodeProject

1.和bootstrap集成

这个就很简单了，我们直接将下载后的bootstrap放到public目录下就可以了然后在相关页面引入bootstrap的css和js文件即可，但npm拥有强大的资源，我们将bootstrap依赖下载后可以直接使用bootstrap模块。本教程就是这样用的。步骤如下：
在node目录下执行

1
npm install bootstrap --save

执行结果如下：

1
2
nodeproject@0.0.0 G:\workspace\project\nodeproject
`-- bootstrap@3.3.7  extraneous

由于bootstrap需要jquery所以也需要安装jquery，执行

1
npm install jquery@1.11.* --save

执行结果

1
2
nodeproject@0.0.0 G:\workspace\project\nodeproject
`-- jquery@1.11.3

可以看到我们安装的bootstrap版本是3.3.7，jquery1.11.3 文件放在node_modules/bootstrap和jquery下
接着我们就来使用bootstrap搭建页面，步骤如下

  • 打开nodeproject下的app.js，找到app.use(express.static(path.join(__dirname, 'public')));在之后添加如下代码:
1
app.use('/lib',express.static(path.join(__dirname, 'node_modules')));

结果如下：

1
2
app.use(express.static(path.join(__dirname, 'public')));
app.use('/lib',express.static(path.join(__dirname, 'node_modules')));

这样就把node_modules下的文件映射为我们的静态资源文件了。

  • 在nodeproject/views目录下打开index.ejs文件,加入对bootstrap和jquery的引用,并增加一些内容，如下：
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css">

	<!-- 可选的Bootstrap主题文件（一般不用引入） -->
	<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap-theme.min.css">

	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="/lib/jquery/dist/jquery.min.js"></script>

	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="/lib/bootstrap/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
	<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<nav class="navbar navbar-default" role="navigation">
				<div class="navbar-header">
					 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#"><%= title %></a>
				</div>
				
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li class="active">
							 <a href="#">首页</a>
						</li>
						<li>
							 <a href="#">链接1</a>
						</li>
						<li class="dropdown">
							 <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<strong class="caret"></strong></a>
							<ul class="dropdown-menu">
								<li>
									 <a href="#">动作1</a>
								</li>
								<li>
									 <a href="#">动作2</a>
								</li>
								<li>
									 <a href="#">动作3</a>
								</li>
								<li class="divider">
								</li>
								<li>
									 <a href="#">分隔动作1</a>
								</li>
								<li class="divider">
								</li>
								<li>
									 <a href="#">分隔动作2</a>
								</li>
							</ul>
						</li>
					</ul>
					<form class="navbar-form navbar-left" role="search">
						<div class="form-group">
							<input type="text" class="form-control" />
						</div> <button type="submit" class="btn btn-default">搜索</button>
					</form>
					<ul class="nav navbar-nav navbar-right">
						<li>
							 <a href="#">链接2</a>
						</li>
						<li class="dropdown">
							 <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单2<strong class="caret"></strong></a>
							<ul class="dropdown-menu">
								<li>
									 <a href="#">动作1</a>
								</li>
								<li>
									 <a href="#">动作2</a>
								</li>
								<li>
									 <a href="#">其他动作</a>
								</li>
								<li class="divider">
								</li>
								<li>
									 <a href="#">其他动作2</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
				
			</nav>
			<div class="jumbotron">
				<h1>
					Hello, world!
				</h1>
				<p>
					This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
				</p>
				<p>
					 <a class="btn btn-primary btn-large" href="#">更多</a>
				</p>
			</div>
		</div>
	</div>
	<div class="row clearfix">
		<div class="col-md-4 column">
			<h2>
				标题1
			</h2>
			<p>
				Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
			</p>
			<p>
				 <a class="btn" href="#">详细信息  »</a>
			</p>
		</div>
		<div class="col-md-4 column">
			<h2>
				标题2
			</h2>
			<p>
				Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
			</p>
			<p>
				 <a class="btn" href="#">详细信息  »</a>
			</p>
		</div>
		<div class="col-md-4 column">
			<h2>
				标题3
			</h2>
			<p>
				Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
			</p>
			<p>
				 <a class="btn" href="#">详细信息 »</a>
			</p>
		</div>
	</div>
	</div>
  </body>
</html>

在浏览器中打开http://localhost:3000，结果如图：
bootstrap1
可以看到成功显示了bootstrap的布局

2.集成Jsviews

Jsviews介绍自己看官网吧,我就不吹了。
集成方法也是参考1节中的方法，知道的同学可以不看教程自己写下，步骤如下：

  • 在nodeproject目录下执行
1
npm install jsviews --save

结果如下：

1
2
nodeproject@0.0.0 G:\workspace\project\nodeProject
`-- jsviews@0.9.84

可以看到jsviews使用的是0.9.84版本

  • 打开nodeproject/views/index.ejs文件，在html的head标签添加对jsviews的引用，部分代码如下：
1
2
3
4
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- 引入 JsViews 核心 JavaScript 文件 -->
<script src="/lib/jsviews/jsviews.min.js"></script>

找到如下代码，大约31-33行：

1
2
3
<li class="active" >
	首页
</li>

换成如下代码：

1
2
3
<li class="active" id="title">

</li>

在index.ejs文件末尾</body>之前添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
<script id="titleTml" type="text/x-jsrender">
        <a href="#">{{:title}}</a>
 </script>
 <script language="JavaScript">

        $(function () {
            var titleData={title:"首页jsviews"};
            $.templates({
                titleTml: "#titleTml"
            });
            $.templates.titleTml.link("#title",titleData);
        });
 </script>

结果如图：
bootstrap1

本篇就到此为止，介绍了和bootstrap,JsViews集成的方法步骤，接下来的博客将介绍和Mongodb的集成

想了解更多技术文章信息，请继续关注wiliam.s Blog，谢谢，欢迎来访！

- The End -

本文标题:从零开始搭建Nodejs,Express,Ejs,bootstrap,Jsviews,Mongodb运行环境教程(二)

文章作者:william

发布时间:2016年12月22日 - 16:12

最后更新:2022年02月03日 - 20:02

原始链接:http://wiliam.me/2016/12/22/20161222162411.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

欣赏此文？求鼓励，求支持！