创建express项目的流程

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42635130/article/details/90297286

前端渲染 vs 后端渲染

  1. 前端渲染是通过ajax请求数据,然后通过js语法将数据展示到页面中,称之为前端渲染

  2. 后端渲染是通过后端语言 + 后端模板( ejs ) 将 页面整个发送给前端

    1. 后端模板
      1. ejs
      2. pug( jade )
      3. art-template

现在流行的: 前端渲染

问题: 当前后端同时进行项目开发是, 后端数据接口没有写y好,但是前端却需要这个接口,这个时候怎么办?
分析: 需要一段数据
解决: 模拟假数据( mock数据 json-server / mock.js )

以上这种形式叫做 : 前后端架构分离

很久以前,没有前端岗位的, 所有的网页都需要后端完成, 那个时候的情况我们称之为: 前后端耦合

  1. Node.js做项目的时候 ,就有两种选择了

    1. 前后端分离 :后端提供接口,前端渲染
    2. 前后端耦合: 后端渲染
  2. 直接借助一个工具来搭建一个Node.js项目,这个工具叫做 express-generator ,这个工具帮助我们实现了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 脚本
    $ cnpm i
    $ npm run start

  5. 研究项目代码

    • 入口文件
// 引入项目所需要的第三方包
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');
});

module.exports = app;

6.添加页面(以login为例)

  • routes路径添加login.js
    代码如下
const express = require('express')
const router = express.Router()


// router.get( 路由路径, 中间件)

router.get( '/login',function( req,res,next ) {
  res.render('login',{
    username: 'yyb',
    password: 123
  })
})


module.exports = router
  • views路径添加login.ejs
  • app入口文件添加
    • 引入项目路由配置文件var loginRouter = require('./routes/login');
    • 路由级中间件的创建 app.use('/', loginRouter)

express 中间件 (Middleware)Express 是一个自身功能极简,完全是由路由和中间件构成一个的 web 开发框架:从本质上来说,一个 Express 应用就是在调用各种中间件。

中间件是一个函数,函数中参数有三个:

  1. request 请求
  2. response 响应
  3. next 请求和响应中间的循环流程

中间件有三种类型

  1. 应用级中间件
  2. 路由中间件
  3. 错误处理中间件
展开阅读全文

没有更多推荐了,返回首页