Day14-1-NodeJS后端工程化

一 前端和后端概念

前端

• 前端：指运用html+css+JavaScript等技术实现用户体验良好的web应用界面
• 工作
  • 根据设计原稿高保真实现页面及交互
  • 和后端人员协同完成项目的接口设计与编写文档。
  • 和测试人员协同工作，完成bug的修复和跟踪
  • 根据产品需求完成对应的功能（nodejs）
• 技术栈
  • 基础：html+css+JavaScript
  • 框架：vue体系 、react体系
  • 团队开发：git、apifox
  • 进阶：大屏可视化、桌面应用、微前端

后端

• 概念：是指利用编程技术来获取和处理web应用所有数据的统称，后端也称为服务器端编程。
• 工作
  • 完成服务器端程序编写：接受和处理数据，和数据库完成数据交互
  • 完成数据库的设计和实现，并和程序进行交互实现。
  • 协同前端人员完成应用接口的设计和实现。接口：决定前后端数据的交互标准。
  • 和测试人员协同工作，完成bug的修复和跟踪
• 技术栈
  • java、php、c、Python、nodejs（JavaScript）

前端和后端之间的关系

• 前提：一个完整的web应用（网站、app、小程序）包含前端和后端。
• 关系
  • 前端负责web应用的页面开发，用户交互实现以及数据渲染，数据来源于后端。
  • 后端就负责接受和处理前端发送过来的数据，并把处理后的数据返回给前端。

就好比一个综艺节日, 节目分成台前和幕后。 观众只能看到台前的内容（用户只能看见web应用的界面），无法看到界面的幕后具体工作（用户无法感知web应用的数据是如何处理的）

前后端交互流程

二 后端模块化

后端代码在编写的时候，一个js文件中内容太多，不好维护，我们将这些内容提前到其它js文件，暴露内容，其他文件引入这个内容

使用的是Commonjs规范

1 暴露一个变量/函数

2 暴露多个内容

三 搭建后端工程

我们用express工具来帮我们搭建一套完整的后端工程。

(1)在本地创建一个项目

(2)使用express-generator这个工具搭建项目

npx express-generator

(3)下载依赖到本地

npm i

(4)启动项目

npm run start

(5)浏览器访问这个项目

http://127.0.0.1:3000

(6)浏览器出现如下界面,表示项目启动成功

四 项目结构

bin/www

这是项目默认的启动程序

执行 npm run start 默认加载bin/www文件，调用我们app.js代码启动程序

app.js

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
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

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);


//后端项目的404错误处理代码
// 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;

我们还可以在app.js中添加监听代码

//配置后端项目的监听器 3001代表项目的端口号,监听函数在项目启动的时候会自动调用
app.listen(3001,()=>{
  console.log("后端服务器启动了,端口号3001");
})

五 项目热启动

为了让以后代码修改后，服务器自动重启，我们需要下载nodemon插件。

npm i nodemon -g

-g代表全局安装依赖

全局安装的依赖会直接安装到电脑上,以后所有的后端项目都可以使用到这个依赖

启动命令，代码发生变化，项目自动热加载。

nodemon app.js

六 路由

前端访问后端的时候，后端有很多程序，前端想要访问哪一个程序，需要通过路由匹配

分类

路由：即访问后端项目的网址。一般分为一级路由和二级路由

路由示例：http://127.0.0.1:3000/movie/add
一级路由：/movie
二级路由: /add

http://127.0.0.1:3000/movie
	http://127.0.0.1:3000/movie/findAll
	http://127.0.0.1:3000/movie/add
	http://127.0.0.1:3000/movie/update
	http://127.0.0.1:3000/movie/delete

http://127.0.0.1:3000/user
	http://127.0.0.1:3000/user/login
	http://127.0.0.1:3000/user/register

搭建路由

1 新建路由模块

2 在app.js中引入路由模块

3 在app.js中配置一级路由规则

4 在路由模块中配置二级路由规则

var express = require('express');
var router = express.Router();

/**
 * 二级路由的配置
 *  /queryAll 二级路由
 *  二级路由匹配的函数 req(请求) res(相应)
 */
router.get("/findAll",function(req,res){
    console.log("查询所有电影数据");
    //向前端响应数据
    res.send({code:1,data:"电影数据"})
})

router.get("/findById",function(req,res){
    console.log("根据id查询");
    res.send({code:1,data:"根据id查询的电影数据"})
})

module.exports = router

参数说明
	req:获取前端请求的数据
	res:后端向前端响应的数据

5 在浏览器访问

http://127.0.0.1:3001/movie/findAll
http://127.0.0.1:3001/movie/findById