Node.js（3）---------express

最新推荐文章于 2023-09-21 16:16:16 发布

王二狗吖

最新推荐文章于 2023-09-21 16:16:16 发布

阅读量123

点赞数 1

分类专栏： node.js

本文链接：https://blog.csdn.net/qq_41885672/article/details/90271228

版权

node.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前端渲染 VS 后端渲染

前端渲染是通过ajax请求数据，然后通过js语法将数据展示到页面中，称之为前端渲染
后端渲染是通过后端语言 + 后端模板( ejs ) 将页面整个发送给前端
1. 后端模板
  1. ejs
  2. pug( jade )
  3. art-template

现在流行的：前端渲染
之前叫做：前后端耦合
问题：当前后端同时进行项目开发是，后端数据接口没有写好，但是前端却需要这个接口，这个时候怎么办？
分析：需要一段数据
解决：模拟假数据（ mock数据 json-server / mock.js ）
以上这种形式叫做：前后端架构分离
问题：如果遇到了前后端不分离的项目，你怎么做？
1. 找后端，搭建项目启动的环境
2. 找后端模板引擎（找类似于 view 这样的目录）
3. 找静态资源文件目录
4. 找对应性文件， index.ejs index.css
5. 看效果改js 看效果改css

Node.js做项目的时候，就有两种选择了
1. 前后端分离：后端提供接口，前端渲染
2. 前后端耦合：后端渲染
直接借助一个工具来搭建一个Node.js项目，这个工具叫做 express-generator ,这个工具帮助我们实现了express框架。

express框架

创建express项目的流程
1. 安装 express-generator
  $ cnpm i express-generator -g
2. 创建express 项目
  $ express -e 项目名称 -e是安装 ejs 模板
3. 分析目录
  - package.json 整个项目的依赖配置文件
  - app.js 是整个项目的入口文件
  - views/xx.ejs 是整个项目的模板（模板内容是什么，将来页面呈现就是什么）
  - routes 是整个项目的路由配置文件
  - public 静态资源文件（img css js )
  - node_modules 整个项目的依赖包
  - bin / www 整个项目的服务器配置文件
4. 启动项目package.json中npm 脚本
  $ npm run start
5. 研究项目代码
  - 入口文件 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 请求和响应中间的循环流程

中间件有三种类型

应用级中间件
路由中间件
错误处理中间件

王二狗吖

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Node.js（3）---------express

前端渲染 VS 后端渲染前端渲染是通过ajax请求数据，然后通过js语法将数据展示到页面中，称之为前端渲染后端渲染是通过后端语言 + 后端模板( ejs ) 将页面整个发送给前端后端模板ejspug( jade )art-template现在流行的：前端渲染之前叫做：前后端耦合问题：当前后端同时进行项目开发是，后端数据接口没有写好，但是前端却需要这个接口，...
复制链接

扫一扫