使用Express框架应用生成器快速搭建一个应用骨架
2016-04-11 15:27
471 查看
Express是Node.js上最流行的Web开发框架,我们可以通过应用生成器工具快速创建一个应用的骨架
通过如下命令安装
![](https://img-blog.csdn.net/20160411143254010?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
在当前目录下创建一个命名为myapp的应用
注意:这里express myapp命令默认会使用jade模板引擎,建议使用ejs模板引擎,则应将命令改为express -e myapp
![](https://img-blog.csdn.net/20160411143431542?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
然后安装所有依赖包
![](https://img-blog.csdn.net/20160411143537715?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
启动这个应用(Windows平台)
![](https://img-blog.csdn.net/20160411143706046?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
然后在浏览器输入localhost:3000/网址就可以看到这个应用了
通过Express应用生成器创建的应用一般具有如下的目录结构
![](https://img-blog.csdn.net/20160411144007862?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
解释:
app.js 启动文件,入口文件
package.json 存储工程的信息及模块依赖,当添加依赖模块时,运行npm install,npm会检查当前目录下的package.json,并自动安装所有指定的模块
node_modules 存放package.json中安装的模块
public 存放image、css、js文件
routes 存放路由文件
views 存放视图文件,或者说是模板文件
bin 存放可执行文件
路由规则和模板引擎:
下面是routes/index.js文件内容
![](https://img-blog.csdn.net/20160411150350772?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
生成一个路由实例用来捕获访问主页的GET请求,导出这个路由并在app.js中通过app.use('/',routes)加载,这样,当访问主页时,就会调用res.render('index',{title : 'Express'})渲染views/index.ejs模板并显示到浏览器中
下面是views/index.ejs文件内容
![](https://img-blog.csdn.net/20160411150806024?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
在渲染模板时,我们传入了变量title的值,模板引擎会自动将其替换,然后呈现在浏览器中
当然,我们也可以在路由文件中添加新的路由规则,例如添加hello
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
router.get('/hello', function(req, res, next) {
res.send('Hello World!');
});
module.exports = router;在浏览器中输入localhost:3000/hello即可访问到
ejs的标签系统有三种形式:
<% code %> JS代码
<%= code %> 显示替换过HTML特殊字符的内容
<%- code %> 显示原始的HTML内容
例子:传递数组循环显示
路由文件中添加如下代码
var arr = ['a','b','c','d'];
router.get('/', function(req, res, next) {
res.render('index', { arr : arr });
});模板文件中更改代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<ul>
<% for(var i=0; i<arr.length; i++){ %>
<li><%= arr[i] %></li>
<% } %>
</ul>
</body>
</html>参考链接:http://www.expressjs.com.cn/starter/generator.html
通过如下命令安装
在当前目录下创建一个命名为myapp的应用
注意:这里express myapp命令默认会使用jade模板引擎,建议使用ejs模板引擎,则应将命令改为express -e myapp
然后安装所有依赖包
启动这个应用(Windows平台)
然后在浏览器输入localhost:3000/网址就可以看到这个应用了
通过Express应用生成器创建的应用一般具有如下的目录结构
解释:
app.js 启动文件,入口文件
package.json 存储工程的信息及模块依赖,当添加依赖模块时,运行npm install,npm会检查当前目录下的package.json,并自动安装所有指定的模块
node_modules 存放package.json中安装的模块
public 存放image、css、js文件
routes 存放路由文件
views 存放视图文件,或者说是模板文件
bin 存放可执行文件
路由规则和模板引擎:
下面是routes/index.js文件内容
生成一个路由实例用来捕获访问主页的GET请求,导出这个路由并在app.js中通过app.use('/',routes)加载,这样,当访问主页时,就会调用res.render('index',{title : 'Express'})渲染views/index.ejs模板并显示到浏览器中
下面是views/index.ejs文件内容
在渲染模板时,我们传入了变量title的值,模板引擎会自动将其替换,然后呈现在浏览器中
当然,我们也可以在路由文件中添加新的路由规则,例如添加hello
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
router.get('/hello', function(req, res, next) {
res.send('Hello World!');
});
module.exports = router;在浏览器中输入localhost:3000/hello即可访问到
ejs的标签系统有三种形式:
<% code %> JS代码
<%= code %> 显示替换过HTML特殊字符的内容
<%- code %> 显示原始的HTML内容
例子:传递数组循环显示
路由文件中添加如下代码
var arr = ['a','b','c','d'];
router.get('/', function(req, res, next) {
res.render('index', { arr : arr });
});模板文件中更改代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<ul>
<% for(var i=0; i<arr.length; i++){ %>
<li><%= arr[i] %></li>
<% } %>
</ul>
</body>
</html>参考链接:http://www.expressjs.com.cn/starter/generator.html
相关文章推荐
- awk 简明教程
- PHP Warning: PHP Startup: Unable to load dynamic library '/usr/lib64/php/modules/module.so'
- nfcadapter api
- A valid provisioning profile for this executable was not found 问题解答iOS
- Linux下Fork与Exec使用
- .9图片
- 一次性验证码
- 线程同步
- 开发错误记录5:Failed to resolve: com
- 团队项目01
- 调用 webservice 出现:WSDLReader:Loading of the WSDL file failed HRESULT=0×80040154: 没有注册类别 解决方案
- C#通用类型转换 Convert.ChangeType
- Python的Django REST框架中的序列化及请求和返回
- Java学习-4天
- iOS 音频开发经验汇总
- mysql中datetime比较大小问题
- java队列和栈的使用
- CQOI2016 路由表Route - Trie
- char与wchar_t的区别 ANSI Unicode
- 基于双核的双系统制作