node express
2015-08-23 20:17
573 查看
在某QQ群里，发现大家都在搞node，为了不被out,这周主要研究了一下，还挺高大上。
参考了下资料，适合初学者学习。
Node和NPM的安装够便捷了，不细说...有几点基础顺手提一下：
安装命令中的 “-g” 表示全局(global)
express的版本不是通常的 “-v” 来查看，而是 “-V”
安装express项目的命令如下
express -e nodejs-product
-e, --ejs add ejs engine support
-J, --jshtml add jshtml engine support (defaults to jade)
PS：模板引擎之类暂时不必care，不过俺当初学习搭建Node+express时用的是ejs，所以也就顺手一直用着了
express项目目录
View Code
参考了下资料，适合初学者学习。
Node和NPM的安装够便捷了，不细说...有几点基础顺手提一下：
安装命令中的 “-g” 表示全局(global)
express的版本不是通常的 “-v” 来查看，而是 “-V”
安装express项目的命令如下
express -e nodejs-product
-e, --ejs add ejs engine support
-J, --jshtml add jshtml engine support (defaults to jade)
PS：模板引擎之类暂时不必care，不过俺当初学习搭建Node+express时用的是ejs，所以也就顺手一直用着了
express项目目录
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title><%= title %></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet">
<!--<link href="/stylesheets/base.css" rel="stylesheet">-->
<!--<link href="/stylesheets/common.css" rel="stylesheet">-->
<!--<link href="/stylesheets/page.css" rel="stylesheet">-->
<!-- 建议在项目中把CSS分好level，好维护和管理 -->
<style>
html, body { overflow-x: hidden;}
body { padding-top: 70px;background:#f1f1f1; }
footer { padding:20px 0 10px;text-align:center;font-weight:bold;border-top:1px solid #ddd;margin-top:30px;}
.header-navbar-style {
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
background: linear-gradient(45deg, rgb(60, 8, 34) 0%, rgb(49, 79, 117) 100%);
border:1px solid #aaa;
font-size:16px;
}
.beige {background:beige;}
.bisque {background:bisque;}
.darkseagreen{ background:darkseagreen;}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top header-navbar-style navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="/">Product</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li class=""><a href="/contactus">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu beige">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class=""><a href="/faq">FAQ</a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
<!-- 以上位置建议创建个header.html维护起来 -->
<style>
@media screen and (max-width: 767px) {
.row-offcanvas { position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-right .sidebar-offcanvas { right: -50%; /* 6 columns */ }
.row-offcanvas-left .sidebar-offcanvas { left: -50%; /* 6 columns */ }
.row-offcanvas-right.active { right: 50%; /* 6 columns */ }
.row-offcanvas-left.active { left: 50%; /* 6 columns */ }
.sidebar-offcanvas { position: absolute; top: 0; width: 50%; /* 6 columns */ } }
</style>
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron bisque">
<h1>Welcome <%= title %>!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row">
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</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 btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</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 btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</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 btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</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 btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</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 btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</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 btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
<a target="_blank" href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
</div><!--/span-->
</div><!--/row-->
</div><!--/.container-->
<!-- 从header.html之后到此可分为page层 -->
<footer class="darkseagreen">
<p>Copyright © 2014. Designed by nieweidong.</p>
</footer>
<script src="/javascripts/jquery-1.11.0.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
</script>
</body>
</html>View Code
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Node.j中path模块对路径的操作
- [Leetcode]Count Complete Tree Nodes
- leetCode 117.Populating Next Right Pointers in Each Node II （为节点添加右指针） 解题思路和方法
- leetCode 116.Populating Next Right Pointers in Each Node （为节点填充右指针） 解题思路和方法
- 用node-webkit把web应用打包成桌面应用
- 25.Reverse Nodes in k-Group (List)
- note.js之 Nodejs+Express4在windows下的配置
- Nodejs积累
- Error (171173): Node from partition Top cannot preserve previous 管脚分配错误
- Nodejs超方便更新方式
- [Node.js] Web Scraping with Pagination and Advanced Selectors
- Reverse Nodes in k-Group
- fedora22搭建node.js服务器环境
- 如何让nodejs同步操作
- 把Nodepad++添加进右键菜单
- node + Express 服务器性能实验
- 终于解决：在客户端和服务端都用dojo Loader来实现异步加载后，Node.js的全局变量__dirname无法使用
- C# 泛型类的实现，链表的封装LinkedListNode
- Remove Nth Node From End of List
- node.js基础：数据存储