express的初体验

最新推荐文章于 2024-11-14 13:43:34 发布
最新推荐文章于 2024-11-14 13:43:34 发布
阅读量535 收藏
点赞数 1
分类专栏： Web 文章标签： express 开发框架 node.js

目录

此文重点介绍Express3.0的开发框架，其中还会涉及到Mongoose,Ejs,Bootstrap等相关内容。
Express已经升级到4.x，请同时参考文章，Node.js开发框架Express4.x

  1. 建立工程
  2. 目录结构
  3. Express3.0配置文件
  4. Ejs模板使用
  5. Bootstrap界面框架
  6. 路由功能
  7. Session使用
  8. 页面提示
  9. 页面访问控制

开发环境：

Win7旗舰版 64bit
MonogoDB: v2.4.3
nodejs: v0.10.5, npm 1.2.19

1. 建立工程

进入工程目录

cd D:\workspace\project

全局安装express，express作为命令被安装到了系统中

npm install -g express

查看express版本

express -V
3.2.2

使用express命令创建工程，并支持ejs

D:\workspace\project>express -e nodejs-demo
install dependencies:
$ cd nodejs-demo && npm install
run the app:
$ node app

根据提示，下载依赖包

cd nodejs-demo && npm install

模板项目建立成功，启动模板项目。

D:\workspace\project\nodejs-demo>node app.js

本地的3000端口被打开，通过浏览器访问: localhost:3000

通过node启动程序，每次代码修改都需要重新启动。 有一个工具supervisor，每次修改代码后会自动重启，会我们开发省很多的时间。

npm install supervisor

开启再启动服务

D:\workspace\project\nodejs-demo>supervisor app.js

2. 目录结构

  • node_modules, 存放所有的项目依赖库。(每个项目管理自己的依赖，与Maven,Gradle等不同)
  • package.json，项目依赖配置及开发者信息
  • app.js，程序启动文件
  • public，静态文件(css,js,img)
  • routes，路由文件(MVC中的C,controller)
  • Views，页面文件(Ejs模板)

3.Express3.0配置文件

打开app.js文件

/**
* 模块依赖
*/
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path');

var app = express();

//环境变量
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// 开发模式
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}

// 路径解析
app.get('/', routes.index);
app.get('/users', user.list);

// 启动及端口
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});

4. Ejs模板使用

让ejs模板文件，使用扩展名为html的文件。

修改：app.js

app.engine('.html', ejs.__express);
app.set('view engine', 'html');// app.set('view engine', 'ejs');

修改后，ejs变量没有定义，supervisor的程序会一直报错

ReferenceError: ejs is not defined
at Object. (D:\workspace\project\nodejs-demo\app.js:17:21)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:901:3
DEBUG: Program node app.js exited with code 8

在app.js中增加ejs变量

var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path')
, ejs = require('ejs');

访问localhost:3000，程序报错

Error: Failed to lookup view "index"

重命名：views/indes.ejs 为 views/index.html
访问localhost:3000正确

5. 增加Bootstrap界面框架

其实就是把js,css文件复制到项目中对应该的目录里。 包括4个文件：

复制到public/stylesheets目录

bootstrap.min.css
bootstrap-responsive.min.css

复制到public/javascripts目录

bootstrap.min.js
jquery-1.9.1.min.js

接下来，我们把index.html页面切分成3个部分：header.html, index.html, footer.html

header.html, 为html页面的头部区域
index.html, 为内容显示区域
footer.html，为页面底部区域

header.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><%=: title %></title>
<!-- Bootstrap -->
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen"> -->
</head>
<body screen_capture_injected="true">

index.html

<% include header.html %>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<% include footer.html %>

注：express3.0时，ejs嵌入其他页面时使用include，express2.x用法不一样。

footer.html

<script src="/javascripts/jquery-1.9.1.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
</body>
</html>

访问localhost:3000正确。

我们已经成功的使用了EJS模板的功能，把公共的头部和底部从页面中分离出来了。

并已经引入了bootstrap界面框架，后面讲到“登陆界面”的时候，就会看到bootstrap界面效果了。

6. 路由功能

我们设计一下用户登陆业务需求。

访问路径：/，页面：index.html，不需要登陆，可以直接访问。
访问路径：/home，页面：home.html，必须用户登陆后，才可以访问。
访问路径：/login，页面：login.html，登陆页面，用户名密码输入正确，自动跳转到home.html
访问路径：/logout，页面：无，退出登陆后，自动回到index.html页面
打开app.js文件，在增加路由配置

app.get('/', routes.index);
app.get('/login', routes.login);
app.post('/login', routes.doLogin);
app.get('/logout', routes.logout);
app.get('/home', routes.home);

注：get为get请求，post为post请求，all为所有针对这个路径的请求

我们打开routes/index.js文件，增加对应的方法。

exports.index = function(req, res){
res.render('index', { title: 'Index' });
};
exports.login = function(req, res){
res.render('login', { title: '用户登陆'});
};
exports.doLogin = function(req, res){
var user={
username:'admin',
password:'admin'
}
if(req.body.username===user.username && req.body.password===user.password){
res.redirect('/home');
}
res.redirect('/login');
};
exports.logout = function(req, res){
res.redirect('/');
};
exports.home = function(req, res){
var user={
username:'admin',
password:'admin'
}
res.render('home', { title: 'Home',user: user});
};

创建views/login.html和views/home.html两个文件

login.html

<% include header.html %>
<div class="container-fluid">
<form class="form-horizontal" method="post">
<fieldset>
<legend>用户登陆</legend>
<div class="control-group">
<label class="control-label" for="username">用户名</label>
<div class="controls">
<input type="text" class="input-xlarge" id="username" name="username">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">密码</label>
<div class="controls">
<input type="password" class="input-xlarge" id="password" name="password">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">登陆</button>
</div>
</fieldset>
</form>
</div>
<% include footer.html %>
远崽
关注
专栏目录
express初体验
进击的程序猿
06-10 2230
express学习 在express中，我们任然可以直接用nodejs的一些原生的方法，express并没有把那些方法给覆盖，只是新增了一部分更高效有用的方法 常用的一些方法 res.send() 发送一段文本 可以是字符串 数组 对象 都自动设置content-type res.sendFile(path) 发送一个文件的， 都自动设置content-type res.redirect(...
Express初体验
qq_45569925的博客
05-08 367
简单来说，Express是一个封装好的工具包，封装了很多功能，便于我们开发Web应用（HTTP服务）。
Express初体验！
qq_42239440的博客
08-17 224
框架入门代码： //引用express框架 const express = require('express'); //创建网站服务器 const app = express(); app.get('/', (req, res) => { //send() //1.send()方法内部会自动检查响应内容类型 //2.send()方法会自动设置http状态码 //3.send()方法会帮我们自动设置响应的内容类型及编码 res.send("Hello E...
使用Express初体验
CoderPai的博客
05-24 4901
作者：chen_h 微信号 &amp; QQ：862251340 微信公众号：coderpai 十一小长假，学习了一下比较流行的网站开发技术：NodeJS+Express+MongoDB，记录一下初入门感觉。 我安装的软件版本是： Node : v6.3.1 Express: 4.13.4 MongoDB: 3.2.4 接下来，我们新建一个工程，在命令行中输入： $ ...
node之express初体验
yao9788的博客
11-20 86
作为前端开发，node已经成为必不可少的技能之一了。而express作为node最流行和最受欢迎的框架，它帮我们封装了node的api，省略了很多繁琐的细节，让我们可以只专心关心业务！
javascript笔记之express初体验
Daisy花园
01-23 961
Express简介首先，express是node下用于写路由的的一个框架，安装 npm install express 一个简单的使用app.jsvar express=require('express') var app=express() var server=app.listen(port||3000) //开一个端口，默认3000 app.get('/',function(req,res
Express框架初体验
Var-al 的博客
07-02 389
Express框架初体验1. Express框架是什么2. Express框架特性3. 中间件3.1 什么是中间件3.2 app.use中间件用法3.3 中间件应用3.4 错误处理中间件3.5 捕获错误4. Express请求处理4.1 构建模块化路由4.2 GET参数的获取4.3 POST参数的获取4.4 静态资源的处理5. express-art-template模板引擎5.1 模板引擎5.2 app.locals 对象 1. Express框架是什么 Express是一个基于Node平台的web应用开
nodejs之Express框架初体验
ｎｅｗｘｃ
12-11 407
一、Express框架简介 在前面Node基础中我们学习了 Node.js 中的 http 模块，虽然知道使用 Node.js 中的 http 模块是可以开发 Web 应用的，处理静态资源，处理动态资源，请求分发（路由）等等，也可以让开发者对 HTTP 协议的理解更加清晰，但是使用起来比较复杂，开发效率低。 npm 提供了大量的第三方模包，其中不乏许多 Web 框架，我们没有必要重复发明轮子，因而选择使用 Express 作为开发框架，因为它是目前最稳定、使用最广泛，而且 Node.js 官方推荐的唯一
Express框架简介及初体验
weixin_47505105的博客
03-01 245
介绍了Express的框架及其优点，并且与原生Node.js 相比有哪些优点，以及express初体验
express
每天都要努力学习哦~~
03-23 443
简单来说，express 是一个封装好的工具包，封装了很多功能，便于我们开发 WEB 应用（HTTP 服务）express 框架封装了一些 API 来方便获取请求报文中的数据，并且兼容原生 HTTP 模块的获取方式。express 框架封装了一些 API 来方便给客户端响应数据，并且兼容原生 HTTP 模块的获取方式。中间件函数 可以像路由回调一样访问 请求对象（request） ， 响应对象（response）第四步：设置路由中间件，然后使用 request.body 来获取请求体数据。
Visual c++ 2010 Express安装包+码.rar
03-07
总的来说，Visual C++ 2010 Express是C语言编程者不可或缺的工具，无论你是初涉编程的新手，还是有多年经验的老兵，都能从中受益。这个安装包包含了所有你需要开始C++编程的元素，只需下载并安装，即可踏上编程之旅...
初识Express
dxl12345678910的博客
11-27 815
2.1路由的概念1.什么是路由广义上来讲，路由就是映射关系2.现实生活中的路由3. Express中的路由在Express中，路由指的是客户端的请求与服务器处理函数之间的映射关系。Express中的路由分3部分组成，分别是请求的类型、请求的URL地址、外理函数，格式如下:4. Express中的路由的例子5.路由的匹配过程每当一个请求到达服务器之后，需要先经过路由的匹配，只有匹配成功之后，才会调用对应的处理函数。
【NodeJS】005- NodeJS的NVM与express框架
weixin_65251013的博客
01-30 1162
express 是一个基于 Node.js 平台的极简、灵活的 WEB 应用开发框架，官方网址： https://www.expressjs.com.cn/简单来说，express 是一个封装好的工具包，封装了很多功能，便于我们开发 WEB 应用(HTTP 服务)官方定义： 路由确定了应用程序如何响应客户端对特定端点的请求中间件(Middleware) 本质是一个回调函数中间件函数 可以像路由回调一样访问请求对象（request） 响应对象(response)每一个请求到达服务端之后。
宝塔面板实现定时任务删除 logs文件 加条件删除 只删除一个月前的日志
qq_43541326的博客
08-13 929
进入到计划任务 点击添加任务 默认选择 shell脚本。我这里的shell脚本是 删除当前月以前的时间数据。
【NodeJS】Node.js是什么？能做什么？
激流丶的博客
11-13 232
博主从事应用安全和大数据领域，有8年研发经验，5年面试官经验，Java技术专家，WEB架构师，阿里云专家博主，华为云云享专家，51CTO 专家博主。
Node.js 安装及环境配置指南
最新发布
chaosweet的博客
11-14 890
编程不仅仅是编写代码，更是解决问题的艺术。
Node.js 和 Express 搭建一个简单的 Web 应用程序
ljh574649119的专栏
11-13 429
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，而 Express 是一个简洁而灵活的 Node.js Web 应用程序框架。使用 Express，你可以快速搭建一个 Web 服务器，处理 HTTP 请求和响应。
Node.js 版本管理的最终答案 Volta
Hassan的小博客!
11-13 1161
对于存在的每个文件，volta 安装程序将对其进行修改，以包含定义 VOLTA_HOME 的行，并将 $VOLTA_HOME/bin 添加到 PATH 环境变量中。使用 Volta，你可以在手动给项目选择一个 Node 版本，然后再也不必关心它，甚至可以在不同项目目录之间任意切换，也不再需要手动在不同 Node 版本之间切换。但是你怎么能保证所有人都安装volta呢，除非特别规范的团队可以做到，开发工具ide等等的统一，不然没使用volta的人还是得自己手动安装，版本设置必须位于要运行的命令之前。
Node.js 安装配置
lly202406的博客
11-14 1124
Node.js 的安装配置过程相对简单，但确保选择合适的版本和配置对于后续的开发工作至关重要。通过本文的指导，您应该能够在 Windows、macOS 和 Linux 系统上成功安装和配置 Node.js。如果您遇到任何问题，可以查阅官方文档或在开发者社区寻求帮助。
WindowsPhone开发工具详解：Silverlight与XNA新体验
本文是针对《程序员》4月期撰写的，是对WindowsPhone开发工具初次使用的体验分享，基于作者先前的《双重惊喜——WindowsPhoneDeveloperTools初体验》文章，并进行了扩充。主要内容涵盖以下几个方面： 1. **Windows...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值