Express框架是依赖connect框架创建而成的,connect是node的一个中间框架
1.创建项目
Express -e vlan 创建完整的项目
生成四个文件
Bin 项目启动文件 配置以什么方式启动项目,修改端口 默认启动npm start
Public 项目的静态文件 前端目录 放js css img文件
Routes 项目的路由信息文件 控制地址路由
Views 视图文件 放模板文件ejs或jade等 相当于html
Express是MVC框架模式 是web项目的基本构成
2.文件信息分析
Package.json 项目主要信息在这里产生
{
"name": "test", 名称
"version": "0.0.0", 包版本
"private": true, 私人模块
"scripts": { 脚本
"start": "node ./bin/www"
},
"dependencies": { 项目应用运行依赖模块
"body-parser": "~1.12.0", 解析器 中间件 解析http请求体
"cookie-parser": "~1.3.4",解析器 中间件 获取web浏览器发送的cookie中的内容
"debug": "~2.1.1",程序调试工具,检查内存中任何地方的字节以及修改任何地方的字节
"ejs": "~2.3.1", js模板库从json数据中生成html子符串
"express": "~4.12.2", 版本号
"morgan": "~1.5.1", 记录日志
"serve-favicon": "~2.2.0" 请求网页logo
}
}
App.js 能够继续导出给bin文件夹下www文件使用
1 var express = require('express'); 导入express等
2 var path = require('path');
3 var favicon = require('serve-favicon'); 网页图标logo
4 var logger = require('morgan');
5 var cookieParser = require('cookie-parser');
6 var bodyParser = require('body-parser');
7
8 var routes = require('./routes/index'); 导入路由位置
9 var users = require('./routes/users');
10
11 var app = express();
12
13 // view engine setup
14 app.set('views', path.join(__dirname, 'views')); 获取当前模块文件所在目录的绝对路径
15 app.set('view engine', 'ejs'); 视图引擎 ejs模板库
16
17 // uncomment after placing your favicon in /public
18 //app.use(favicon(__dirname + '/public/favicon.ico'));
19 app.use(logger('dev')); app.use用来给path注册中间函数的,用来处理任何请求
Connect内建的中间件,终端显示不同颜色的日志,logger日志
20 app.use(bodyParser.json()); 返回用来解析json格式的中间件,中间件能接受任何unicode编码字符,自动解析gzip和zlib
21 app.use(bodyParser.urlencoded({ extended: false }));返回中间件,中间件能解析urlencoded字符,只支持utf-8编码的字符,自动解析gzip和zlib 扩展:假
22 app.use(cookieParser());
23 app.use(express.static(path.join(__dirname, 'public'))); 设置静态文件目录
path默认是”/” static:静态,静止
25 app.use('/', routes);
26 app.use('/users', users);
27
28 // catch 404 and forward to error handler
29 app.use(function(req, res, next) {
30 var err = new Error('Not Found'); 错误,404
31 err.status = 404;
32 next(err);
33 });
34
35 // error handlers
36
37 // development error handler
38 // will print stacktrace 发展,进化;新产品,开发区
39 if (app.get('env') === 'development') { 开发环境下的错误处理,输出错误原因
40 app.use(function(err, req, res, next) {
41 res.status(err.status || 500);
42 res.render('error', {
43 message: err.message,
44 error: err
45 });
46 });
47 }
48
49 // production error handler
50 // no stacktraces leaked to user
51 app.use(function(err, req, res, next) {
52 res.status(err.status || 500);
53 res.render('error', {
54 message: err.message,
55 error: {}
56 });
57 });
58
59
60 module.exports = app;
View里的index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title> title的值通过路由routes文件夹下index.js代码转入
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
Ejs简单使用
2
3
<h1><%=title %></h1> 注：会把title里面存的值给显示出来在h1中。
<p><%= 'hello world' %></p> 注：会把hello world显示在h1中。
<h1><%= '<b>hello world</b>' %></h1> 注：会把hello world变粗，然后显示在h1中。
<%- code %>将不会进行转义；，这一行代码不会执行，像是被注释了一样，然后显示原来的html。也不会影响整个页面的执行。
<h1><%-title %>asd</h1> 最后显示asd，及显示原网页
<p><%# 'hello world' %>asd</p> 最后显示asd，及显示原网页
设计流程
一个初始界面（其实就是原始地址：比如 localhost:3000(index.html 路径为/ ) ，在初始界面选择登录或注册
跳进来之后会先跳进登录界面（login.html 路径为 /login)，可以选择先注册（跳转 register.html 路径为/register)
跳进注册界面后就会跳进（register.html 路径为 /register)，注册成功后就跳转登录界面(login.html 路径为 /login)
在登录界面登录成功后就跳转(home.html 路径为 /home). 在home这里还提供了注销的功能（无页面文件，它的路径为 /logout
如果浏览器直接输入localhost:3000/home 要先判断是否登录成功，未登录不允许进入
