前端渲染 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
<!DOCTYPE html>
<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 请求和响应中间的循环流程
中间件有三种类型
- 应用级中间件
- 路由中间件
- 错误处理中间件