Express

Express 是整个 Node.js 之中最为常见的一个框架(开发包),可以帮助我们快速构建一个WEB项目。(http://expressjs.com

1.在 F 盘新建 nodejsdemo,cd nodejsdemo ,执行

npm install express

F:\nodejsdemo,可想象为 Eclipse 的工作区,一个工作区可定义多个项目。

2.创建express项目,在 F:\nodejsdemo 中有了 myprojuect 文件夹,目录详细如下

F:\nodejsdemo>express -e myproject

   create : myproject
create : myproject/package.json
create : myproject/app.js
create : myproject/public
create : myproject/public/javascripts
create : myproject/public/images
create : myproject/public/stylesheets
create : myproject/public/stylesheets/style.css
create : myproject/routes
create : myproject/routes/index.js
create : myproject/routes/user.js
create : myproject/views
create : myproject/views/index.ejs install dependencies:
$ cd myproject && npm install run the app:
$ node app

app.js 作为了整个程序运行的主文件,即:只需要执行它,就可以运行 HTTP Server

app.set('port', process.env.PORT || );

http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});

此时,Http服务将在 3000 端口监听用户请求。启动服务器方式如下

F:\nodejsdemo\myproject>node app.js
Express server listening on port

打开浏览器输入:http://localhost:3000/,会发现 Http 服务报错缺少 ejs,ejs 在 app.js 有定义,下载 ejs

F:\nodejsdemo>npm install ejs

再次打开http://localhost:3000/,显示正常, 默认的页面保存在 myproject/views 中。

node_modules   存放所有项目的依赖库

package.json     项目依赖配置和开发者信息

app.js               程序启动文件

public                静态文件(css、js、img)

routes               路由文件(MVC 中的C,controller)

views                页面文件(ejs 模板)

2.安装 supervisor

为了方便开发,不用每次修改 app.js 之后都重新启动,安装 supervisor 执行 supervisor app.js ,会自动加载新的 app.js 。

F:\nodejsdemo>npm install -g supervisor

3.ejs

ejs 是 web 的模板引擎之一,EJS 是一个Javascript模板库,用来从 Json 数据中生成 HTML 字符串。可方便的给用户明确、维护性良好的HTML结构。

保存所有页面都保存在 views 中,此时的 index.ejs 是一个HTML页面,若要修改为 html 格式则需要配置模板

1)在 app.js 定义加载的模块,并增加相关配置

var ejs = require('ejs');
app.engine('html',ejs.__express);
app.set('view engine', 'html'); //修改 app.set('view engine', 'html');

2)index.ejs 名改为 index.html

建立登录功能 :login.html、welcome.html,注意:所有的文件格式必须为 UTF-8

index.html

<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<p><a href="login">用户登录</a></p>
</body>
</html>

login.html

<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<form method="post">
用 户:<input type="text" name="userid" id="userid"><br>
密 码:<input type="password" name="password" id="password"><br>
<input type="submit" value="登录">
<input type="reset" value="重置">
</form>
</body>
</html>

welcome.html

<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>欢迎<%=user.userid%>光临!</h1>
<h1><a href="logout">注销</a></h1>
</body>
</html>

在每一个页面之中并没有定义直接的链接,因为 Node.js  依然属于 MVC 设计模式范畴,所以针对 MVC 的实现,此处所编写的全部都属于映射名称,所有的映射路径都需要通过 app.js 进行相应的路由配置。

配置 app.js

app.get('/', routes.index);            //进入首页
app.get('/login', routes.login); //此处还需配置 routes/index.js
app.post('/login', routes.doLogin); //post请求,表单提交。
app.get('/logout', routes.logout); //注销 (通过logout找到routes/index.js中exports.logout,完成页面跳转。)
app.get('/welcome', routes.welcome);//欢迎

routes/index.js 配置相关的回调函数

exports.index = function(req, res){
res.render('index', { title: '首页' });
};
exports.login = function(req, res){
res.render('login', { title: '登录' }); //res.render--跳转至login页面
};
exports.doLogin = function(req, res){
var user = {userid:'admin',password:''}; // 定义用户密码
if(req.body.userid==user.userid && req.body.password==user.password){
res.redirect('welcome?uid='+user.userid); // 重定向 res.redirect--app.js必须配置/welcome(app.get('/welcome', routes.welcome))
}else{
res.render('login', { title: '重新输入' });
}
};
exports.logout = function(req, res){
res.render('index', { title: '注销' });
};
exports.welcome = function(req, res){
//如果是地址栏参数可 req.query.参数名称 接收
var user = {userid:req.query.uid};
res.render('welcome', { title: '欢迎', user: user });
};

在整个基础过程中,最为重要的步骤就配置 app.js 中的路由,路由的最终控制是通过 routes/index.js 配置,类似于 Servlet ,负责跳转。

Node.js 搭建Web的更多相关文章

  1. 使用 Node.js 搭建 Web 服务器

    使用Node.js搭建Web服务器是学习Node.js比较全面的入门教程,因为实现Web服务器需要用到几个比较重要的模块:http模块.文件系统.url解析模块.路径解析模块.以及301重定向技术等, ...

  2. 学习 node.js 搭建web服务器

    开始 学习使用 node.js 首先完成搭建一个 web服务器.myweb.js var http = require('http'); var url = require('url'); var h ...

  3. node.js搭建Web服务器

    Node.js 博客搭建 一. 学习需求 Node 的安装运行 会安装node,搭建node环境 会运行node. 基础模块的使用 Buffer:二进制数据处理模块 Event:事件模块 fs:文件系 ...

  4. Node.js学习笔记(五) --- 使用Node.js搭建Web服务器

    1. Node.js 创建的第一个应用 1.引入http模块 var http = require("http"); 2. 创建服务器接下来我们使用 http.createServ ...

  5. 快速使用node.js进行web开发

    首先关于node.js的学习,这里推荐一本比较好的教程,nodejs web开发指南,该书通俗易懂地将node.js语言特性讲解完之后,又从一个项目角度带领读者使用node.js学习web开发.相信这 ...

  6. 使用 Node.js 搭建微服务网关

    目录 Node.js 是什么 安装 node.js Node.js 入门 Node.js 应用场景 npm 镜像 使用 Node.js 搭建微服务网关 什么是微服务架构 使用 Node.js 实现反向 ...

  7. 使用Node.js搭建静态资源服务器

    对于Node.js新手,搭建一个静态资源服务器是个不错的锻炼,从最简单的返回文件或错误开始,渐进增强,还可以逐步加深对http的理解.那就开始吧,让我们的双手沾满网络请求! Note: 当然在项目中如 ...

  8. koa : Express出品的下一代基于Node.js的web框架

    https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434501579966a ...

  9. 7个Node.js的Web框架

    NodeJS也就是Node,是众所周知的使用javascript构建Web应用框架,它启动一个服务器非常简单,如下: var http = require('http'); http.createSe ...

随机推荐

  1. WebSocket的几个模块(node.js)(未完)

    1.ws模块 npm install ws 2.nodejs-websocket npm nodejs-websocket 3.socket.io模块 npm install socket.io

  2. PHP.ini中配置屏蔽错误信息显示和保存错误日志

    在PHP程序运行过程中如果有错误发生,在浏览器上是否显示错误信息,以及显示错误信息的级别是我们在程序开发.调试.运营过程中需要控制的. root@(none):/alidata/www/default ...

  3. 李洪强iOS开发之Block和协议

    李洪强iOS开发之Block和协议 OC语言BLOCK和协议 一.BOLCK (一)简介 BLOCK是什么?苹果推荐的类型,效率高,在运行中保存代码.用来封装和保存代码,有点像函数,BLOCK可以在任 ...

  4. java 清除 bom

    参考工具  http://akini.mbnet.fi/java/unicodereader/ Utf8BomRemover 清除bom的方法 package cn.com.do1.component ...

  5. sql 记录

    INSERT INTO B([name],[info]) SELECT [name,'10'] FROM A 级联更新1:update tb1, tb2 set tb1.a=tb2.a,tb1.b=t ...

  6. python学习笔记(8)--爬虫下载占位图片

    说明: 1. 虽然很简单,但总忘,所以还是记下来吧! 2. http://placekitten.com/300/300这个画猫的网站老是打开没有图片,改成了http://placehold.it/3 ...

  7. IIS网站本机可以访问,局域网其他机器无法访问

    [开始]打开[控制面板],选择[WINDOWS 防火墙],进入 步骤阅读 2 在防火墙界面,选择左侧边栏的[高级设置] 步骤阅读 3 在弹出的高级安全Windows防火墙界面中,选择左侧边栏的[入站规 ...

  8. 一款纯css3实现的发光屏幕旋转特效

    今天给大家带来一款纯css3实现的发光屏幕旋转特效.该屏幕由纯css3实现带发光旋转特效,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="s ...

  9. 转:Andriod studio技巧合集

    1. 书签(Bookmarks) 描述:这是一个很有用的功能,让你可以在某处做个标记(书签),方便后面再跳转到此处. 调用:Menu → Navigate → Bookmarks 快捷键: 添加/移除 ...

  10. [转]Vim插件管理工具Vundle

    原文:http://www.linuxzen.com/vimpei-zhi-xi-lie-cha-jian-guan-li.html 当转载成为一种习惯.. 最近对Vim进行了一番较大的配置变动,所以 ...