课时78-课时81笔记.md
2018-11-29 本文已影响16人
九旬大爷的梦
课时78 Express-应用生成器上
快速生成一个Express工程目录
Express 应用程序生成器
65b626104bdbc6a7e30ff1745b47b71.png
Express 生成器
安装： npm install express-generator -g
选项列出所有可用的命令选项express -h
设置ejs为视图模板引擎：express --view=ejs demo1
进入目录cd demo1
安装所有依赖npm install
启动应用：
MacOS / Linux : DEBUG=myapp npm start
windoows : set DEBUG=myapp & npm start
（我的可能有问题，我明明是windoows 但是却使用MacOS的也命令启动的，具体看命令中的提示吧。Vscode中好像对命令总包含“*”“&”无法执行，）
成功后在浏览器打开 :
http:localhost:3000/
d437aaf615d8b9aa40b8e049ec0b214.png
如果出现错误：
可能是因为3000端口被占用。 关闭其他node进程启动即可
课时79 Express-应用生成器下
Express工程目录结构：
1c0428dc49a0e63021163689a0ea8e9.png
主要看一下app.js中的代码：
//引用包文件
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
//引用路由
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
//生成Express实例
var app = express();
// view engine setup - 设置视图引擎为ejs
app.set('views', path.join(__dirname, 'views'));//视图引擎的目录
app.set('view engine', 'ejs');//使用ejs为视图引擎
//use=使用 使用Express一些方法
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
//让用户访问到路由
app.use('/', indexRouter);
app.use('/users', usersRouter);
// catch 404 and forward to error handler - 404错误处理 使用了中间件处理
app.use(function(req, res, next) {
next(createError(404));
});
// error handler - 使用了中间件处理错误
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
//把app.js暴露出去
module.exports = app;
课时80 Node进阶-Express-小撩-功能介绍
实现一个小案例：
- 可以登录、注册
- 使用websocket实现一个在线聊天机器人
添加页面步骤：
- 把视图文件（.html或.ejs）放在views文件中
- 把静态文件（css、js、images）放在public中
- 每增加一个页面还要去routes文件中添加路由，
- 在app.js中配置路由
课时81 Node进阶-Express-小撩-资源配置
新添加一个页面的步骤，以login.ejs为例：
- 把视图文件放在views文件中，这里在views文件夹中新建index.ejs:
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<p><a href="/login">登陆</a> <a href="/register">注册</a></p>
</body>
- 把index.ejs需要的静态文件如（css、js、images）放在public中
- 去routes文件中添加一个index.js路由文件:
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'xiaole主页' });
});
module.exports = router;
- 在app.js中配置路由login的路由，这里分两步：
4.1 引用路由
var indexRouter = require('./routes/index');
4.2 设施用户访问的路径
app.use('/', indexRouter);
注意：这里有个小坑，就是routes中的路由文件router.get后面的路由默认都是/， 不要错误以为是用户的访问的路径，用户的路径都在app.js中匹配好了。
