Node.js（3）---------express
前端渲染 VS 后端渲染
- 前端渲染是通过ajax请求数据，然后通过js语法将数据展示到页面中，称之为前端渲染
- 后端渲染是通过后端语言 + 后端模板( ejs ) 将 页面整个发送给前端
- 后端模板
- ejs
- pug( jade )
- art-template
- 后端模板
-
现在流行的： 前端渲染
-
之前叫做：前后端耦合
-
问题： 当前后端同时进行项目开发是， 后端数据接口没有写好，但是前端却需要这个接口，这个时候怎么办？
-
分析： 需要一段数据
解决： 模拟假数据（ mock数据 json-server / mock.js ） -
以上这种形式叫做 ： 前后端架构分离
-
问题： 如果遇到了前后端不分离的项目， 你怎么做？
- 找后端，搭建项目启动的环境
- 找后端模板引擎 （ 找类似于 view 这样的目录 ）
- 找静态资源文件目录
- 找对应性文件， index.ejs index.css
- 看效果改js 看效果改css
-
Node.js做项目的时候 ，就有两种选择了
- 前后端分离 ：后端提供接口，前端渲染
- 前后端耦合： 后端渲染
-
直接借助一个工具来搭建一个Node.js项目，这个工具叫做 express-generator ,这个工具帮助我们实现了express框架。
express框架
- 创建express项目的流程
-
安装 express-generator
$ cnpm i express-generator -g -
创建express 项目
$ express -e 项目名称-e是安装 ejs 模板 -
分析目录
- package.json 整个项目的依赖配置文件
- app.js 是整个项目的入口文件
- views/xx.ejs 是整个项目的模板（模板内容是什么，将来页面呈现就是什么）
- routes 是整个项目的路由配置文件
- public 静态资源文件（img css js )
- node_modules 整个项目的依赖包
- bin / www 整个项目的服务器配置文件
-
启动项目package.json中npm 脚本
$ npm run start -
研究项目代码
- 入口文件 aqq.js j
-
// 引入项目所需要的第三方包
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');
var loginRouter = require( './routes/login' )
// 创建app对象
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views')); // 统一配置view静态路径
app.set('view engine', 'ejs');// 定义了模板渲染引擎， ejs
// 应用级中间件
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);
// http:localhost:3000/login
app.use('/', loginRouter)
// catch 404 and forward to error handler
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接口
module.exports = app;
后端渲染页面
- 先在app.js中路由级中间件 添加如：
app.use('/', loginRouter)
- 在routes文件下新建routes.js文件
const express = require('express')；
const router = express.Router()；
// router.get( 路由路径， 中间件)
router.get( '/login',function( req,res,next ) {
res.render('login',{
username: '王二狗',
password: 123
})
})
module.exports = router；
- 然后在views中新建index.ejs
<html>
<head>
<title><%= title %>title>
<link rel='stylesheet' href='/stylesheets/style.css' />
head>
<body>
<p> name: <%= name%> p>
<h3> ejs条件判断语法 h3>
<% if( flag ) { %>
<p> 这是ejs条件判断语法 p>
<% }else { %>
<p> else p>
<%}%>
<h3> ejs 循环输出列表 h3>
<ul>
<% todolist.forEach( function ( item ) { %>
<li> <%= item.task %> li>
<% }) %>
ul>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
body>
html>
提供api接口
- get暴露接口
- api接口暴露的方式有两种：
- 第一种： 使用模板进行暴露，但是要将数据做字符串转换，然后使用ejs的非转义输出
router.get('/',function( req,res,next ) { res.render('mine', { mine: JSON.stringify({ ret: true, username: 'yyb', password: 123 }) }) })- 第二种： 使用json()
router.get('/',function( req,res,next ) { res.json({ ret: true, username: 'yyb', password: 123 }) })
- post暴露接口
const express = require( 'express' )
const router = express.Router()
//api接口 restful api规则
router.post('/',function( req,res,next) {
//req.body post请求的数据从这里得到
let { username,password } = req.body
res.render('mine',{
mine: JSON.stringify({
ret: true,
username,
password
})
})
})
- 其他请求方式
router.put('/',function ( req,res,next ) {
res.render('mine',{
mine: JSON.stringify({
ret: true,
text: '增加'
})
})
})
router.delete('/',function ( req,res,next ) {
res.render('mine',{
mine: JSON.stringify({
ret: true,
text: '删除'
})
})
})
// router.all('/',function( req,res,next ) {
// res.render('mine',{
// mine: JSON.stringify({
// ret: true,
// text: 'all'
// })
// })
// })
express相关知识
中间件（Middleware）
- request 请求
- response 响应
- next 请求和响应中间的循环流程
中间件有三种类型
- 应用级中间件
- 路由中间件
- 错误处理中间件