前言
前面也学习了一些Node.js的基本入门知道,现在开始进入Web开发的部分;下面我们直接从Express框架着手去进行Web开发,它实现好了更高层的接口,让Web开发更简单快捷...
简介和安装
Express是一个轻量级、简洁、易用的Node.js Web MVC开发框架,它基于Node.js原有进行了很多Web开发所需的功能封装...https://www.npmjs.org/package/express
安装express
npm install -g express-generator注意:-g:表示全局安装,这样,后面才能使用express来安装ejs等框架。
到此express就在全局环境中安装成功!
PS:用npm安装有时可能进度不动,多试几次!
模版引擎 ejs
在上面创建的testWebApp中express默认使用的模版擎为jade,个人觉得jade虽然简洁但不直观,所以选择了更易上手的ejs。
ejs:Embedded JavaScript
https://github.com/visionmedia/ejs
创建一个express + ejs的项目express -e testEjsWebApp cd testEjsWebApp npm install创建成功后,打开app.js,添加8100端口监听
var server = app.listen(8100, function () { var host = server.address().address; var port = server.address().port; console.log("应用实例,访问地址为 http://%s:%s", host, port); });运行页面,查看结果
ejs使用和说明
ejs速度不是最快的,推荐最多大概是因为其简单的语法结构。主要通过<% %><%=%>来嵌套代码。比如符合阅读逻辑,同时也省去不少学习语法的成本。
另有一些自定义的方法:如link_to(name, url),img_tag(url)等。
还可以支持json。
ejs的特性:
ejs的include的使用,引入对应的ejs文件
login.ejs的内容:
<!DOCTYPE html> <html> <head> <title>用户登录</title> <% include ../inc/css.ejs %> </head> <body> <h1>登录</h1> <div> 用户名:<input type="text" name="username" value=""/> </div> <div> 密码:<input type="password" name="password" value=""/> </div> <div> <input type="button" name="login" value="登录"/> </div> <% include ../inc/js.ejs %> </body> </html>
js.ejs内容为:
<script type="text/javascript" src="/statics/resources/js/jquery.min.js"></script>
这样运行的结果为:
<!DOCTYPE html> <html> <head> <title>用户登录</title> <script type="text/javascript" src="http://gc.kis.scr.kaspersky-labs.com/1B74BD89-2A22-4B93-B451-1C9E1052A0EC/main.js" charset="UTF-8"></script></head> <body> <h1>登录</h1> <div> 用户名:<input type="text" name="username" value=""/> </div> <div> 密码:<input type="password" name="password" value=""/> </div> <div> <input type="button" name="login" value="登录"/> </div> <script type="text/javascript" src="/statics/resources/js/jquery.min.js"></script> </body> </html>
从结果可以看出,login.ejs和js.ejs的内容都被编译问普通的html内容。
此外ejs还提供了一些辅助函数,用于代替使用javascript代码,使得更加方便的操纵数据。
感谢您的阅读,希望对您有帮助,本文版权归 #惊讶# 所有