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的路径是否正确引入。
启动项目之后觉得 高大上 很简单,有木有!!
Nodejs初阶之express的更多相关文章
- R语言实战(一)介绍、数据集与图形初阶
本文对应<R语言实战>前3章,因为里面大部分内容已经比较熟悉,所以在这里只是起一个索引的作用. 第1章 R语言介绍 获取帮助函数 help(), ? 查看函数帮助 exampl ...
- 【转载】nodejs,npm,express分别什么?
很多刚刚接触nodejs的初学者,都会经历一个很繁冗的环境安装过程. 一般主要要安装nodejs,npm和express三样东西.那么这三样东西分别是干什么的呢? 本篇文章就大致介绍一下这三样东西分别 ...
- Windows 7 搭建 nodejs、npm、express 环境
准备工作: 下载nodejs (exe format)(http://nodejs.org/) 下载npm(zip format)(http://nodejs.org/dist/npm/) 开始安装 ...
- 平衡树初阶——AVL平衡二叉查找树+三大平衡树(Treap + Splay + SBT)模板【超详解】
平衡树初阶——AVL平衡二叉查找树 一.什么是二叉树 1. 什么是树. 计算机科学里面的树本质是一个树状图.树首先是一个有向无环图,由根节点指向子结点.但是不严格的说,我们也研究无向树.所谓无向树就是 ...
- # nodejs模块学习: express 解析
# nodejs模块学习: express 解析 nodejs 发展很快,从 npm 上面的包托管数量就可以看出来.不过从另一方面来看,也是反映了 nodejs 的基础不稳固,需要开发者创造大量的轮子 ...
- Mac下nodeJS初体验
Mac下nodeJS初体验 这两天博主出门在外,抽空体验一下大名鼎鼎的node 安装 brew install node 安装测试 $ node -v v8.4.0 运行本地脚本 用文本编辑器编辑一段 ...
- 重温ASP.NET WebAPI(一)初阶
重温ASP.NET WebAPI(一)初阶 前言 本文为个人对WebApi的回顾无参考价值.主要简单介绍WEB api和webapi项目的基本结构,并创建简单地webaapi项目实现CRUD操作. ...
- Nodejs进阶:基于express+multer的文件上传
关于作者 程序猿小卡,前腾讯IMWEB团队成员,阿里云栖社区专家博主.欢迎加入 Express前端交流群(197339705). 正在填坑:<Nodejs学习笔记> / <Expre ...
- CentOS安装NodeJS v0.10.25 + Express
安装必需组件 yum -y install gcc make gcc-c++ openssl-devel wget cd ~wget http://nodejs.org/dist/v0.10.25/n ...
随机推荐
- Servlet读取Excel标准化数据库过程记录
完成数据库的连接 获取连接参数 拷贝1.数据库URL 2.驱动程序类 3.用户 编写Servlet 1.创建连接对象 Connection con = null; PreparedStatement ...
- 2016 Multi-University Training Contest 2 D. Differencia
Differencia Time Limit: 10000/10000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tot ...
- 数据库访问性能优化 Oracle
特别说明: 1. 本文只是面对数据库应用开发的程序员,不适合专业DBA,DBA在数据库性能优化方面需要了解更多的知识: 2. 本文许多示例及概念是基于Oracle数据库描述,对于其它关系型数据库也 ...
- JDBC驱动自身问题引发的FullGC
公众号HelloJava刊出一篇<MySQL Statement cancellation timer 故障排查分享>,作者的某服务的线上机器报 502(502是 nginx 做后端健康检 ...
- linux下 SVN切换仓库地址命令
svn switch --relocate (Old Repository Root) (New Repository Root)
- Redis集群最佳实践
今天我们来聊一聊Redis集群.先看看集群的特点,我对它的理解是要需要同时满足高可用性以及可扩展性,即任何时候对外的接口都要是基本可用的并具备一定的灾备能力,同时节点的数量能够根据业务量级的大小动态的 ...
- linux下ftp配置文件详解
# 匿名用户配置 anonymous_enable=YES # 是否允许匿名ftp,如否则选择NO anon_upload_enable=YES # 匿名用户是否能上传 anon_mkdir_writ ...
- *HDU2254 矩阵乘法
奥运 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submissi ...
- *HDU1848 博弈
Fibonacci again and again Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Jav ...
- HDU 2202 计算几何
最大三角形 Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...