Nodejs初阶之express
- 安装命令中的 “-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,所以也就顺手一直用着了
- app.js: 项目入口,反正express爱叫app.js没辙,你可以改成index.js或者main.js都成。相当于php项目中的 index.php、index.html
- node_modules: 存放项目的依赖库
- package.json: 项目依赖配置及开发者信息(这个要说就说多了,还是看文档好,俺就不误人子弟了。下期看看抽个小段单说Node模块)
- public: 静态文件如 css,js,img (PS:俺其实习惯叫static)
- routes: 路由文件(学习的重要攻克对象。尼玛业务好不好,路由是关键)
- Views: 页面文件(Ejs或者jade的模板,默认是jade,俺这用Ejs,在初阶练手最重要,所以都可以试试)
- “app.set(‘view engine‘, ‘ejs‘);” 变成 “app.engine(‘.html‘, ejs.__express);app.set(‘view engine‘, ‘html‘);”
- 上一行出现的ejs变量需要require ejs模块,增加代码“var ejs = require(‘ejs‘);”
var express = require(‘express‘); var app = express(); app.get(‘/‘, function(req, res){ res.send(‘hello world‘); console.log(‘hello world‘); }); app.listen(‘8808‘);
- 第一种方式就是在当前的routes/index.js或者routes/test.js中加几行代码如下
exports.test = function(req, res){ res.send(‘test welcome.‘); };
- 在app.js文件设置路由那块加上app.get(‘/test‘, routes.test);
<!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>
如果样式有问题请检查下bootstrap的路径是否正确引入。
启动项目之后觉得 高大上 很简单,有木有!!
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。