用node.js+express+ejs+bootstrap来建立一个基本网页

最新推荐文章于 2021-02-24 00:01:12 发布

SalmonellaVaccine

最新推荐文章于 2021-02-24 00:01:12 发布

阅读量3.2k

点赞数

分类专栏： Node.js Express

Node.js 同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

Express

10 篇文章 0 订阅

订阅专栏

http://www.w3cfuns.com/blog-5441597-5397741.html

这篇文章旨在介绍前沿技术,不会过多的讨论技术细节和个个技术之间的优缺点.适合想学习新技术的青年.如果你是老手,这篇文章并不适合你.
then. here we go!
step 1: 环境配置
首先要在自己的机器上配置环境(安装node.js和npm).
深入浅出Node.js（二）： Node.js&NPM的安装与配置
更多安装实例:
如果你用的操作系统是:windows 安装node.js实例
如果你用的操作系统是:MacOSX macosx下安装node.js
如果你用的操作系统是:linux linux下安装node.js
其他系统请用必应搜索下.

安装检查
如果你已经安装好了node.js和npm.那么打开你的命令提示符.输入命令会看见下面的效果.

输入npm -v 会出现版本.

更多关于npm 包命令的介绍. npm基础详解

step 2:安装express

由于服务器在国外,网速不好会有卡流的情况.请使用镜像安装. 镜像安装(国内福音)

step 3:建立网站.
使用 express -e -s less helloworld

根据提示输入cd helloworld 回车然后输入 npm install 安装包依赖

安装结束后,进入安装目录可以看见

运行express服务器继续输入 node app.js 打开浏览器127.0.0.1:3000 可以看见

express使用mvc模式开发的.请求由路由分配到对于的模块.
EJS
ejs简介(不复杂)
到 views文件夹下,找到index.ejs文件.

注意,express和模板引擎直接没有绑定关系.不是说express只支持ejs或者jade.express支持几乎所有模板.详细请移步 [url=: http://expressjs.com/guide.html]express指南[/url]

修改模板文件: 使用bootstap 前端框架为了加快布局进度,使用可视化布局 bootstrap可视化布局系统
数据写就写简单点.

<!doctype html>
<html lang="zh-cn">
<head>
<title><%=title%></title>
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<h3 class="text-center">
这是一个简单的<%=title%>网站
</h3>
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a> <a href="#" class="brand">网站名</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active">
<a href="#">主页</a>
</li>
<li>
<a href="#">链接</a>
</li>
<li>
<a href="#">链接</a>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单<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 class="nav-header">
标签
</li>
<li>
<a href="#">链接1</a>
</li>
<li>
<a href="#">链接2</a>
</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li>
<a href="#">右边链接</a>
</li>
<li class="divider-vertical">
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单<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="#">链接3</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<ul class="breadcrumb">
<li>
<a href="#">主页</a> <span class="divider">/</span>
</li>
<li>
<a href="#">类目</a> <span class="divider">/</span>
</li>
<li class="active">
主题
</li>
</ul>
<div class="page-header">
<h1>
页标题范例 <small>此处编写页标题</small>
</h1>
</div>
<h2>
标题
</h2>
<p>
本可视化布局程序在HTML5浏览器上运行更加完美, 能实现自动本地化保存, 即使关闭了网页, 下一次打开仍然能恢复上一次的操作.
</p>
<p>
<a class="btn" href="#">查看更多 »</a>
</p>
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img alt="300x200" src="img/people.jpg" />
<div class="caption">
<h3>
冯诺尔曼结构
</h3>
<p>
也称普林斯顿结构，是一种将程序指令存储器和数据存储器合并在一起的存储器结构。程序指令存储地址和数据存储地址指向同一个存储器的不同物理位置。
</p>
<p>
<a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">分享</a>
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img alt="300x200" src="img/city.jpg" />
<div class="caption">
<h3>
哈佛结构
</h3>
<p>
哈佛结构是一种将程序指令存储和数据存储分开的存储器结构，它的主要特点是将程序和数据存储在不同的存储空间中，进行独立编址。
</p>
<p>
<a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">分享</a>
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img alt="300x200" src="img/sports.jpg" />
<div class="caption">
<h3>
改进型哈佛结构
</h3>
<p>
改进型的哈佛结构具有一条独立的地址总线和一条独立的数据总线，两条总线由程序存储器和数据存储器分时复用，使结构更紧凑。
</p>
<p>
<a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">分享</a>
</p>
</div>
</div>
</li>
</ul>
<div class="progress progress-striped active">
<div class="bar">
</div>
</div>
<a id="modal-612442" href="#modal-container-612442" role="button" class="btn" data-toggle="modal">触发遮罩窗体</a>
<div id="modal-container-612442" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">
标题栏
</h3>
</div>
<div class="modal-body">
<p>
显示信息
</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button> <button class="btn btn-primary">保存设置</button>
</div>
</div>
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>
提示!
</h4> <strong>警告!</strong> 请注意你的个人隐私安全.
</div>
<div class="carousel slide" id="carousel-986330">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-986330">
</li>
<li data-slide-to="1" data-target="#carousel-986330">
</li>
<li data-slide-to="2" data-target="#carousel-986330">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="" src="img/1.jpg" />
<div class="carousel-caption">
<h4>
棒球
</h4>
<p>
棒球运动是一种以棒打球为主要特点，集体性、对抗性很强的球类运动项目，在美国、日本尤为盛行。
</p>
</div>
</div>
<div class="item">
<img alt="" src="img/2.jpg" />
<div class="carousel-caption">
<h4>
冲浪
</h4>
<p>
冲浪是以海浪为动力，利用自身的高超技巧和平衡能力，搏击海浪的一项运动。运动员站立在冲浪板上，或利用腹板、跪板、充气的橡皮垫、划艇、皮艇等驾驭海浪的一项水上运动。
</p>
</div>
</div>
<div class="item">
<img alt="" src="img/3.jpg" />
<div class="carousel-caption">
<h4>
自行车
</h4>
<p>
以自行车为工具比赛骑行速度的体育运动。1896年第一届奥林匹克运动会上被列为正式比赛项目。环法赛为最著名的世界自行车锦标赛。
</p>
</div>
</div>
</div> <a data-slide="prev" href="#carousel-986330" class="left carousel-control">‹</a> <a data-slide="next" href="#carousel-986330" class="right carousel-control">›</a>
</div>
<div class="tabbable" id="tabs-529574">
<ul class="nav nav-tabs">
<li class="active">
<a href="#panel-931288" data-toggle="tab">第一部分</a>
</li>
<li>
<a href="#panel-70665" data-toggle="tab">第二部分</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="panel-931288">
<p>
第一部分内容.
</p>
</div>
<div class="tab-pane" id="panel-70665">
<p>
第二部分内容.
</p>
</div>
</div>
</div>
<div class="hero-unit">
<h1>
Hello, world!
</h1>
<p>
这是一个可视化布局模板, 你可以点击模板里的文字进行修改, 也可以通过点击弹出的编辑框进行富文本修改. 拖动区块能实现排序.
</p>
<p>
<a class="btn btn-primary btn-large" href="#">参看更多 »</a>
</p>
</div> <span class="badge badge-success">1</span> <span class="label badge-success">文字标签</span>
<div class="pagination">
<ul>
<li>
<a href="#">上一页</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">下一页</a>
</li>
</ul>
</div><img class="img-polaroid" alt="140x140" src="img/a.jpg" />
</div>
</div>
</div>
</body>
</html>

复制代码

模板改好了,接下来修改数据.进入routes/index.js文件. 修改{ title: 'Express' }为{title:'w3cfuns'}.
保存后.
进入命令控制符进入helloworld目录输入node app.js 打开浏览器127.0.0.1:3000

你的会是w3cfun网站.这就是模板,实现数据和显示的分离.
至此,你已经大概了解了一个网站的诞生.虽然这个网站不是很全面.但是包括了大多数东西了,够你消化一会了.
网站参考:
js模板引擎:
jade: http://jade-lang.com/
ejs: http://embeddedjs.com/ (需要翻墙)
Npm 包
ejs包: https://www.npmjs.org/package/ejs
express中文网站: http://expressjs.jser.us/3x_zh-cn/api.html
NPM 官网: https://www.npmjs.org/
node
node API中文文档: http://nodeapi.ucdok.com/api/
node 官网: http://nodejs.org/
css
less: http://www.bootcss.com/p/lesscss/
前端开发框架
bootstrap 中文网站: http://www.bootcss.com/
UIframe 中文网站: http://www.uiframe.com/
pure : http://purecss.io/
设计师:
优秀网页设计师联盟: http://www.uisdc.com/

分享到：

笔记作者：marchen

笔记链接：http://www.w3cfuns.com/blog-5441597-5397741.html

SalmonellaVaccine

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用node.js+express+ejs+bootstrap来建立一个基本网页

http://www.w3cfuns.com/blog-5441597-5397741.html这篇文章旨在介绍前沿技术,不会过多的讨论技术细节和个个技术之间的优缺点.适合想学习新技术的青年.如果你是老手,这篇文章并不适合你.then. here we go!step 1: 环境配置首先要在自己的机器上配置环境(安装node.js和npm).深入浅出Node.js（
复制链接

扫一扫