广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
模块化做为一种现代化的设计方法，这个概念最早起源于生产制造行业。如今这个概念已经被各行各业来衍生应用，在软件开发中也大量的采用了模块化思想。
所谓的模块化思想，将一个大程序按照功能划分为若干个小的模块，每个小程序模块完成一个特定的功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求功能的程序设计方法。【推荐：node.JS视频教程】
(一)、为什么需要模块化模块化可以使你的代码低耦合，功能模块直接不相互影响。
为什么需要模块化：
程序复杂度上升代码越写越多，在一个文件里代码就会越来越长，不易维护。（把完成特定功能的代码分组，分别放到不同的文件里，这样，每个文件包含的代码就相对较少）
JavaScript 有复杂的依赖关系的时候就很容易出现一些变量的属性或方法被覆盖或改写，导致变量污染。这是因为js没有命名空间，不像其他语言通过命名空间可以有效的避免重名问题。
想要存在JavaScript 私有的变量
模块化思想解决问题：
可维护性：每个模块都是单独定义的，之间相互独立。模块尽可能的需要和外部撇清关系，方便我们独立的对其进行维护与改造。维护一个模块比在全局中修改逻辑判断要好的多。
命名冲突：为了避免在JavaScript中的全局污染，我们通过模块化的方式利用函数作用域来构建命名空间，避免命名冲突。
文件依赖：一个功能可能依赖一个或多个其他文件，使用是除了引入它本身还需要考虑依赖文件，通过模块化 我们只需要引入文件，无需考虑文件依赖(模块化可以帮助我们解决文件依赖问题)。
可复用性：虽然粘贴复制很简单，但是要考虑到我们之后的维护以及迭代。
(二)、什么是Nodejs模块为了让Nodejs的文件可以相互调用，Nodejs基于CommonJS规范提供了一个简单的模块系统。(nodejs实现并遵守CommonJS规范的)。
把具有公共功能的，抽离成一个单独的js文件作位一个模块。默认情况下，模块里的方法或属性，外面是访问不到的。如果想要在外面访问这些属性，方法，就必须在模块里通过exports和module.exports暴露，在需要使用的地方通过require()进行引入。
//exports语法示例// sum.jsexports.sum = function(a,b){ return a+b;}// main.jsvar m = require("./sum");var num = m.sum(10,20);console.log(num);//modules.exports语法示例//sum.jsfunction sum(a,b){ return a+b;}module.exports= sum;//main.jsvar sum = require('./sum');sum(10,20);// 30登录后复制CommonJS 规定：
每个模块内部，module 变量代表当前模块
module 变量是一个对象，它的 exports 属性（即 module.exports）是对外的接口
加载某个模块，其实是加载该模块的 module.exports 属性。require() 方法用于加载模块。
(三)、nodejs中的模块分类与加载方式Node.js 中根据模块来源的不同，将模块分为了 3 大类，分别是：
内置模块（内置模块是由 Node.js 官方提供的，例如 fs、path、http 等）
自定义模块（用户创建的每个 .js 文件，都是自定义模块）
第三方模块（包）（由第三方开发出来的模块，并非官方提供的内置模块，也不是用户创建的自定义模块，使用前需要先下载）
//1.加载内置模块不需要指定路径var http = require('http');//2.加载用户的自定义模块var sum = require('./sum.js');//3.加载第三方模块const md5=require("md5");登录后复制(四)、模块作用域和函数作用域类似，在自定义模块中定义的变量、方法等成员，只能在当前模块内被访问，这种模块级别的访问限制，叫做模块作用域。模块作用域的好处：防止了全局变量污染的问题二、npm与包(一)、包的介绍Node.js 中的第三方模块又叫做包。包是由第三方个人或团队开发出来的，免费供所有人使用。Node.js 的内置模块仅提供了一些底层的 API，导致在基于内置模块进行项目开发的时，效率很低。 包是基于内置模块封装出来的，提供了更高级、更方便的 API，极大的提高了开发效率。国外有一家 IT 公司，叫做 npm, Inc. 这家公司旗下有一个非常著名的网站： https://www.npmjs.com/ ，它是全球最大的包共享平台。我们可以使用这个包管理工具， npm ，来对包进行管理，这个包管理工具随着 Node.js 的安装包一起被安装到了用户的电脑上。检测其版本。npm -v(二)、npm的使用npm init 进行初始化，生成package.json 文件，记录项目的信息，记录包的信息npm install 包名 npm i 包名 下载包，放到node_modules文件夹里npm i 包名 --save npm i 包名 -S (开发环境中)npm i 包名 --save-dev npm i 包名 -D (生产环境中)npm list 列举当前目录下安装的包npm i 包名@1 安装指定的版本npm i 包名 -g 安装全局包npm uninstall 包名 卸载包(三)、全局安装nrm nodemonnrm 是一个管理 npm 源的工具。有时候国外资源太慢，使用这个就可以快速的在npm源间切换。
手动切换方法：
npm config set registry=https://registry.npm.taobao.org登录后复制
安装 nrm:
$ npm i nrm -g登录后复制
查看nrm 内置的几个 npm 源的地址：
$ nrm ls登录后复制
结果如下:
npm ---- https://registry.npmjs.org/ cnpm --- http://r.cnpmjs.org/* taobao - https://registry.npm.taobao.org/ nj ----- https://registry.nodejitsu.com/ rednpm - http://registry.mirror.cqupt.edu.cn/ npmMirror https://skimdb.npmjs.com/registry/ edunpm - http://registry.enpmjs.org/登录后复制
切换nrm：
$ nrm use npm登录后复制
查看当前的镜像源：
npm config get register登录后复制(四)、淘宝cnpm工具
淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm -registry=https://registry.npm.taobao.org登录后复制
安装包
cnpm install [模块名]登录后复制三、路由
路由：根据不同的路径返回不同的页面。
案例：server.js；static；route.js；route对象；render()；api.js；封装server.js到index.js；合并对象
获取请求参数：login页面发get，post请求，到/api/login
express静态资源托管：
一、下载与安装Express是一个基于 Node.js 平台，快速、开放、极简的 Web 开发框架。
//1.加载内置模块不需要指定路径var http = require('http');//2.加载用户的自定义模块var sum = require('./sum.js');//3.加载第三方模块const md5=require("md5");0登录后复制二、路由案例：第一个express案例。
所谓的路由就是客户端用来与后端服务器进行交互的一种方式，客户端采用特定的URL与请求方法来访问服务器端，服务器端通过响应返回特定资源。
路由的定义由如下结构组成：
//1.加载内置模块不需要指定路径var http = require('http');//2.加载用户的自定义模块var sum = require('./sum.js');//3.加载第三方模块const md5=require("md5");1登录后复制路由路径和请求方法一起定义了请求的端点，它可以是字符串，字符串模式以及正则表达式。
//1.加载内置模块不需要指定路径var http = require('http');//2.加载用户的自定义模块var sum = require('./sum.js');//3.加载第三方模块const md5=require("md5");2登录后复制使用字符串模式的路由路径示例：
//1.加载内置模块不需要指定路径var http = require('http');//2.加载用户的自定义模块var sum = require('./sum.js');//3.加载第三方模块const md5=require("md5");3登录后复制可以为请求处理提供多个回调函数，其行为类似中间件。
案例：中间件f1,f2
//1.加载内置模块不需要指定路径var http = require('http');//2.加载用户的自定义模块var sum = require('./sum.js');//3.加载第三方模块const md5=require("md5");4登录后复制//1.加载内置模块不需要指定路径var http = require('http');//2.加载用户的自定义模块var sum = require('./sum.js');//3.加载第三方模块const md5=require("md5");5登录后复制//1.加载内置模块不需要指定路径var http = require('http');//2.加载用户的自定义模块var sum = require('./sum.js');//3.加载第三方模块const md5=require("md5");6登录后复制三、中间件1.应用级中间件在Express程序中，使用
app.use()和app.METHOD()方法将中间件绑定到应用程序对象(app)。凡是挂载在app身上的都是应用级中间件。
app.use() : 应用中的每个请求都可以执行其代码
//1.加载内置模块不需要指定路径var http = require('http');//2.加载用户的自定义模块var sum = require('./sum.js');//3.加载第三方模块const md5=require("md5");7登录后复制//1.加载内置模块不需要指定路径var http = require('http');//2.加载用户的自定义模块var sum = require('./sum.js');//3.加载第三方模块const md5=require("md5");8登录后复制2.路由级中间件路由器级中间件的工作方式与应用级中间件相同，只是它绑定到express.Router().
//1.加载内置模块不需要指定路径var http = require('http');//2.加载用户的自定义模块var sum = require('./sum.js');//3.加载第三方模块const md5=require("md5");9登录后复制var express = require('express')var app = express()//1.加载内置模块不需要指定路径var http = require('http');//2.加载用户的自定义模块var sum = require('./sum.js');//3.加载第三方模块const md5=require("md5");9router.use(function (req, res, next) { console.log('Time:', Date.now()) next()})router.get('/user/:id', function (req, res, next) { console.log('Request URL:', req.originalUrl) next()}, function (req, res, next) { console.log('Request Type:', req.method) next()})登录后复制3.错误处理中间件案例： / ; /home , /list
与其他中间件函数相同的方式定义错误处理中间件函数，但是使用四个参数
(err, req, res, next),放到最后。
npm config set registry=https://registry.npm.taobao.org1登录后复制4.内置中间件
express.static提供静态资源，例如 HTML 文件、图像等。
express.json使用 JSON 有效负载解析传入请求。注意：可用于 Express 4.16.0+
application/json
由于JSON规范的流行，现在越来越多的开发者将application/json这个Content-Type作为响应头。用来告诉服务端消息主体是序列化后的JSON字符串。除了低版本IE之外各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理JSON的函数，JSON能格式支持比键值对复杂得多的结构化数据，普通键值对中的值只能是字符串，而使用json，键值对可以重复嵌套。
npm config set registry=https://registry.npm.taobao.org2登录后复制
express.urlencoded解析带有 URL 编码负载的传入请求。 注意：可用于 Express 4.16.0+
application/x-www-form-urlencoded 浏览器的原生form表单，如果不设置enctype属性，那么最终就会以 application/x-www-form-urlencoded方式提交数据。Content-Type被指定为application/x-www-form-urlencoded提交的数据按照key=val&key=val的方式进行编码，并且key和val都进行了URL转码。
npm config set registry=https://registry.npm.taobao.org3登录后复制5.第三方中间件四、获取请求参数req.query 是一个可获取客户端get请求 查询字符串 转成的对象，默认为{}。req.body 包含在请求体中提交的数据键值对。默认情况下undefined，当使用解析中间件
express.json()、express.urlencoded()五、静态资源托管语法：为了提供诸如图像、CSS 文件和 JavaScript 文件之类的静态文件，请使用 Express 中的 express.static 内置中间件函数。
express.static内置中间件函数语法：
npm config set registry=https://registry.npm.taobao.org4登录后复制root参数指定提供静态资源的根目录。静态资源示例：
例如，通过如下代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了：
npm config set registry=https://registry.npm.taobao.org5登录后复制
现在，你就可以访问 public 目录中的所有文件了：
npm config set registry=https://registry.npm.taobao.org6登录后复制
多个静态资源目录：Express 在静态目录查找文件，因此，存放静态文件的目录名不会出现在 URL 中。
如果要使用多个静态资源目录，请多次调用 express.static 中间件函数：
npm config set registry=https://registry.npm.taobao.org5app.use(express.static('uploads'))登录后复制访问静态资源文件时，express.static 中间件函数会根据目录的添加顺序查找所需的文件。
express.static中间件函数可以为某些静态资源服务创建虚拟路径前缀（该路径实际上并不存在于文件系统中），请指定静态目录的挂载路径，如下所示：
npm config set registry=https://registry.npm.taobao.org8登录后复制
现在，你就可以通过带有 /static 前缀地址来访问 public 目录中的文件了。
npm config set registry=https://registry.npm.taobao.org9登录后复制六、模板引擎一、.服务端渲染
SSR做好静态页面，动态效果把前端代码提供给后端，后端要把静态html以及里面的假数据给删掉，通过模板进行动态生成html的内容后端嵌套模板，后端渲染模板 （后端把页面组装起来）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jL70ca3p-1658387147221)(C:\Users\11933\Desktop\前端全栈\课件\前后台交互\imgs\服务器端渲染.png)]
二、前后端分离，BSR做好静态页面，动态效果json模拟，ajax动态创建页面真实接口数据，前后联调（前后端分离，通过通用的json数据形式，不挑后端的语言）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pXRCidw2-1658387147223)(C:\Users\11933\Desktop\前端全栈\课件\前后台交互\imgs\前后端分离.png)]
三、模板引擎Express模板引擎模板引擎能够在应用程序中使用静态模板文件。在运行时，模板引擎将模板文件中的变量替换为实际值，并将模板转换为发送给客户端的 HTML 文件。这种方法使设计 HTML 页面变得更加容易。
与 Express 一起使用的一些流行模板引擎是Pug、 Mustache和EJS。Express 应用程序生成器默认使用Pug，但它也支持其他几个。
需要在应用中进行如下设置才能让Express渲染模板引擎：
views，放模板文件的目录。例如：app.set('views', './views')。view engine，要使用的模板引擎。例如，要使用 Pug 模板引擎：app.set('view engine', 'pug').在路由中渲染模板在路由渲染模板并将渲染后的 HTML 字符串发送到客户端。
$ npm i nrm -g0登录后复制view：一个字符串，view是要渲染的模板文件的文件路径。locals：一个对象，其属性定义视图的局部变量。
$ npm i nrm -g1登录后复制四、ejs模板引擎的使用安装ejs
$ npm i nrm -g2登录后复制在express配置ejs模板引擎使用ejs模板引擎
在app.js中添加如下代码，配置Express使用ejs模板引擎。
$ npm i nrm -g3登录后复制
设置模板后缀为html注意：此时指定的模板目录为
views，且模板文件的后缀名为.ejs。
在app.js中添加如下代码，配置Express使用ejs模板引擎。并指定模板后缀名为html。
$ npm i nrm -g4登录后复制
ejs模板语法注意：此时指定的模板目录为
views，且模板文件的后缀名为.html。
$ npm i nrm -g5登录后复制MVC框架：
JSON：一、概念：是一种设计模式，是软件架构得模式，是在web开发过程中总结的一些套路或者是模块化的内容。M是指业务模型（module），V是指用户界面（view），C则是控制器（controller）。使用mvc最大的优势就是分层，目的是将M和V的实现代码分离，存在的目的则是确保M和V的同步，一旦M改变，V应该同步更新。MVC是相互独立的，M,C（后端）; V（前端）。路由规划为Controller。
JSON（
JavaScriptObjectNotation, JS对象表示法）简单来讲，JSON 就是 Javascript 对象和数组的字符串表示法，因此，JSON 的本质是字符串。
作用：JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML 更小、更快、更易解析。
二、JSON的两种结构现状：JSON 是在 2001 年开始被推广和使用的数据格式，到现今为止，JSON 已经成为了主流的数据交换格式。
JSON 就是用字符串来表示 Javascript 的对象和数组。所以，JSON 中包含对象和数组两种结构，通过这两种结构的相互嵌套，可以表示各种复杂的数据结构。
对象结构：对象结构在 JSON 中表示为 { } 括起来的内容。数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
$ npm i nrm -g6登录后复制
数组结构：数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ “java”, “javascript”, 30, true … ] 。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
$ npm i nrm -g7登录后复制三、JSON语法的注意事项属性名必须使用双引号包裹字符串类型的值必须使用双引号包裹JSON 中不允许使用单引号表示字符串JSON 中不能写注释JSON 的最外层必须是对象或数组格式不能使用 undefined 或函数作为 JSON 的值JSON 的作用：在计算机与网络之间存储和传输数据JSON 的本质：用字符串来表示 Javascript 对象数据或数组数据四、JSON和JS对象的关系
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
$ npm i nrm -g8登录后复制五、JSON和JS对象的互转要实现从 JSON 字符串转换为 JS 对象，使用 JSON.parse() 方法要实现从 JS 对象转换为 JSON 字符串，使用 JSON.stringify() 方法HTTP一、概念
二、请求（请求报文）HTTP 协议即超文本传送协议 (HyperText Transfer Protocol) ，它规定了客户端与服务器之间进行网页内容传输时，所必须遵守的传输格式。（是一种约定与规则）
请求消息的组成客户端发起的请求叫做 HTTP 请求，客户端发送到服务器的消息，叫做 HTTP 请求消息，又叫做 HTTP 请求报文。
HTTP 请求消息由请求行（request line）、请求头部（ header ） 、空行 和 请求体 4 个部分组成。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G502I2rT-1658387147224)(C:\Users\11933\Desktop\前端全栈\课件\前后台交互\imgs\请求消息组成部分.png)]
请求行：由请求方式（get,post）、URL （/login?）和 HTTP 协议版本 3 个部分组成，他们之间使用空格隔开。请求头部：用来描述客户端的基本信息，从而把客户端相关的信息告知服务器。请求头部由多行 键/值对 组成，每行的键和值之间用英文的冒号分隔。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ImfA8U4y-1658387147225)(C:\Users\11933\Desktop\前端全栈\课件\前后台交互\imgs\请求头部字段.png)]
空行：最后一个请求头字段的后面是一个空行，通知服务器请求头部至此结束。请求消息中的空行，用来分隔请求头部与请求体。请求体：请求体中存放的，是要通过 POST 方式提交到服务器的数据。只有 POST 请求才有请求体，GET 请求没有请求体！三、响应（响应报文）响应消息的组成：响应消息就是服务器响应给客户端的消息内容，也叫作响应报文。
HTTP响应消息由状态行、响应头部、空行 和 响应体 4 个部分组成。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N0rfsHa8-1658387147225)(C:\Users\11933\Desktop\前端全栈\课件\前后台交互\imgs\响应消息组成部分.png)]
状态行：由 HTTP 协议版本、状态码和状态码的描述文本 3 个部分组成，他们之间使用空格隔开;响应头部：用来描述服务器的基本信息。响应头部由多行 键/值对 组成，每行的键和值之间用英文的冒号分隔。空行：在最后一个响应头部字段结束之后，会紧跟一个空行，用来通知客户端响应头部至此结束。响应消息中的空行，用来分隔响应头部与响应体。响应体：中存放的，是服务器响应给客户端的资源内容。四、HTTP请求方法HTTP 请求方法，属于 HTTP 协议中的一部分，请求方法的作用是：用来表明要对服务器上的资源执行的操作。最常用的请求方法是 GET 和 POST。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vwQMQrAp-1658387147226)(C:\Users\11933\Desktop\前端全栈\课件\前后台交互\imgs\http请求的方法.png)]
五、响应的状态码[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-28YRkP8m-1658387147227)(C:\Users\11933\Desktop\前端全栈\课件\前后台交互\imgs\http响应状态码.png)]
Ajax：一、概念二、XMLXML 指可扩展标记语⾔，HTML 超文本标记语言XML被设计用来传输和存储数据XML和HTML类似，不同的是HTML都是预定义的标签，而XML没有预定义标签，全部都是自定义的标签，用来表示一些数据。AJAX 全称为（Asynchronous JavaScript And XML），是异步的JavaScript和XML。通过 ajax可以在浏览器向服务器发送异步请求。最大的优势，
无刷新获取数据。也就是说AJAX可以在不重新加载整个页面的情况下，与服务器交换数据。这种异步交互的方式，使用户单击后，不必刷新页面也能获取新数据。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
最开始是前后台进行数据交互的语言，现在是JSON。
$ npm i nrm -g9登录后复制三、特点优点：可以无需刷新页面与服务器进行通信允许你根据用户事件来更新部分页面内容缺点：没有浏览历史不能回退存在跨越问题 同源策略：协议，域名，端口号SEO不友好四、发送请求get方式，以及请求参数
$ nrm ls0登录后复制项目：一、对密码进行加密处理
JavaScript使用
CryptoJS加解密。CryptoJS时一个JavaScript的加解密的工具包。它支持多种的算法：MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列，进行 AES、DES、Rabbit、RC4、Triple DES 加解密。在项目中如果要对前后端传输的数据双向加密， 比如避免使用明文传输用户名，密码等数据。 就需要对前后端数据用同种方法进行加密，方便解密。
使用步骤：
运行如下命令，安装CryptoJS ：$ nrm ls1登录后复制在
/login.js 中，导入 crypto-js ：$ nrm ls2登录后复制以
ASE进行纯文本加密：$ nrm ls3登录后复制二、表单校验规则
在实际开发中，前后端都需要对表单的数据进行合法性的验证，而且，后端做为数据合法性验证的最后一个关口，在拦截非法数据方面，起到了至关重要的作用。使用第三方数据验证模块，来降低出错率、提高验证的效率与可维护性。
步骤：
安装joi 包，为表单中携带的每个数据项，定义验证规则：$ nrm ls4登录后复制安装
@escook/express-joi 中间件，来实现自动对表单数据进行验证的功能：$ nrm ls5登录后复制新建
/schema/login.js 用户信息验证规则模块：$ nrm ls6登录后复制修改
/router/admin/login.js 中的代码：$ nrm ls7登录后复制在
index.js 的全局错误级别中间件中，捕获验证失败的错误，并把验证失败的结果响应给客户端：$ nrm ls8登录后复制三、四种常见的POST提交数据方式
HTTP协议是以ASCII码传输，建立在TCP/IP协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。协议规定 POST 提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式Content-Type。
服务端根据请求头（headers）中的Content-Type字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。所以说到POST提交数据方案，包含了Content-Type 和消息主体编码方式两部分。Content-Type的四种值分别代表四种方式，具体如下：
方式一：application/x-www-form-urlencoded浏览器的原生form表单，如果不设置enctype属性，那么最终就会以 application/x-www-form-urlencoded方式提交数据。Content-Type被指定为application/x-www-form-urlencoded提交的数据按照key=val&key=val的方式进行编码，并且key和val都进行了URL转码。服务端例如 PHP 中，使用$_POST[′key′]可以获取到值。
方式二：multipart/form-data常见的POST数据提交的方式。这种方式支持文件上传，不过必须要设置form的enctyped等于这个值。使用multipart/form-data方式会生成了一个boundary 来分割不同的字段，为了避免与正文重复，boundary是一段很长的随机拼接的字符串。然后Content-Type指明数据是以mutipart/form-data来编码并包括进本次请求的boundary 值。消息主体最后以 --boundary–标示结束。
方式三：application/json由于JSON规范的流行，现在越来越多的开发者将application/json这个Content-Type作为响应头。用来告诉服务端消息主体是序列化后的JSON字符串。除了低版本IE之外各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理JSON的函数，JSON能格式支持比键值对复杂得多的结构化数据，普通键值对中的值只能是字符串，而使用json，键值对可以重复嵌套。
方式四：text/xml它是一种使用HTTP作为传输协议，XML作为编码方式的远程调用规范。不过后来使用很少。也许在十多年前，在json还未出来之前数据交互对接。
总之application/x-www-form-urlencoded和multipart/form-data两种POST方式都是浏览器原生支持的，是普遍使用的两种方式，application/json是现在比较流行的新趋势。
四、multer安装multer$ nrm ls9登录后复制导入multer
npm ---- https://registry.npmjs.org/ cnpm --- http://r.cnpmjs.org/* taobao - https://registry.npm.taobao.org/ nj ----- https://registry.nodejitsu.com/ rednpm - http://registry.mirror.cqupt.edu.cn/ npmMirror https://skimdb.npmjs.com/registry/ edunpm - http://registry.enpmjs.org/0登录后复制配置multer接收到的文件存储的文件夹和，存放的图片的名字
npm ---- https://registry.npmjs.org/ cnpm --- http://r.cnpmjs.org/* taobao - https://registry.npm.taobao.org/ nj ----- https://registry.nodejitsu.com/ rednpm - http://registry.mirror.cqupt.edu.cn/ npmMirror https://skimdb.npmjs.com/registry/ edunpm - http://registry.enpmjs.org/1登录后复制
应用这个配置到multer实例里面1.sotrage是一个配置对象。他是通过multer.diskstorage存储引擎生成的。multer.diskstorage需要传递一个配置对象，这里的配置对象里面接收两个参数。第一个参数为destination，它的值为一个路径字符串，代表的含义是当multer处理完成前端传递过来的文件之后要把这个文件存储在哪里。这个文件夹无需手动创建，在接受文件的时候会自动创建。这里建议使用path模块进行拼接，不容易出错。第二个参数为一个回调函数，这里形参要用三个进行占位。multer中间件在解析前端提交的文件的时候会调用这个方法，调用的时候会给这个filename指向的函数传递三个参数，第二个值为前端传递过来文件信息，第三个参数cb为一个函数，cb函数调用的第二个参数指定的就是当前解析完成后的保存到destination指向的目录的文件名。
npm ---- https://registry.npmjs.org/ cnpm --- http://r.cnpmjs.org/* taobao - https://registry.npm.taobao.org/ nj ----- https://registry.nodejitsu.com/ rednpm - http://registry.mirror.cqupt.edu.cn/ npmMirror https://skimdb.npmjs.com/registry/ edunpm - http://registry.enpmjs.org/2登录后复制在需要接收文件的路由里面应用upload.single(‘file’)中间件
npm ---- https://registry.npmjs.org/ cnpm --- http://r.cnpmjs.org/* taobao - https://registry.npm.taobao.org/ nj ----- https://registry.nodejitsu.com/ rednpm - http://registry.mirror.cqupt.edu.cn/ npmMirror https://skimdb.npmjs.com/registry/ edunpm - http://registry.enpmjs.org/3登录后复制总体思路梳理：
实际网页开发当中，我们前端需要向后端提交一些像mp4，mp3，图片系列的东西，需要在后端进行接收。那么这里就可以使用Multer中间件来接收文件，对前端传递过来的文件做一些处理。
multer是啥？ Multer是Express官方推出的，用于node.js 处理前端以multipart/form-data请求数据处理的一个中间件。注意: Multer 不会处理任何非 multipart/form-data 类型的表单数据
原理： Multer实例的single(‘###’) 是一个方法，这个方法被当作中间件放在某一个路由上时。就会给express 的 request 对象中添加一个 body 对象 以及 file 或 files 对象 。 body 对象包含表单的文本域信息，file 或 files 对象包含对象表单上传的文件信息。下图就是req.file的模样。当前端请求后台接口。匹配当前路由的时候，先经过这个multer中间件，这个中间件就会解析前端传过来的文件，会把文件保存在上面第三步配置文件解析完成后的文件夹内，名字也会重命名成上面第三步配置文件解析完成的文件名。同时，会在req的身上挂载一个file对象。这个file对象就是当前上传文件的信息。我们可以通过req.file.filename拿到这个重命名后的文件名，然后把这个文件名保存到数据库里面。前端如果想访问之前上传的图片，后台只需要把数据库里的文件名取到，随后映射成我们请求的路径，去请求public静态资源下的存放这些文件的文件夹就可以了。
multer是一个中间件，我建议把这个中间件写成一个单独的文件，最后把配置好的multer实例暴露出去，在需要他的路由里面当作中间件去应用它。就可以很快捷的处理前端发送过来的文件。而无需每个文件都写一遍。也更加符合我们模块化编程的思想。下图是我multer文件的配置。
五、富文本编辑器富文本编辑器，Multi-function Text Editor, 简称 MTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于 Microsoft Word 的编辑功能，容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱。
富文本编辑器不同于文本编辑器，程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里（当然付费的功能会更强大些），方便用户编辑文章或信息。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9D1VzMYl-1658387147228)(C:\Users\11933\Desktop\前端全栈\课件\前后台交互\imgs\富文本编辑器.png)]
layui 富文本编辑器（layedit）：使用：
npm ---- https://registry.npmjs.org/ cnpm --- http://r.cnpmjs.org/* taobao - https://registry.npm.taobao.org/ nj ----- https://registry.nodejitsu.com/ rednpm - http://registry.mirror.cqupt.edu.cn/ npmMirror https://skimdb.npmjs.com/registry/ edunpm - http://registry.enpmjs.org/4登录后复制
layedit基础的方法：
编辑器属性设置：
富文本编辑器工具栏：
npm ---- https://registry.npmjs.org/ cnpm --- http://r.cnpmjs.org/* taobao - https://registry.npm.taobao.org/ nj ----- https://registry.nodejitsu.com/ rednpm - http://registry.mirror.cqupt.edu.cn/ npmMirror https://skimdb.npmjs.com/registry/ edunpm - http://registry.enpmjs.org/5登录后复制六、express-session
（一）、Session简单介绍 session 是另一种记录客户状态的机制，不同的是 Cookie 保存在客户端浏览器中，而 session 保存在服务器上。Session的用途： session运行在服务器端，当客户端第一次访问服务器时，可以将客户的登录信息保存。 当客户访问其他页面时，可以判断客户的登录状态，做出提示，相当于登录拦截。 session可以和Redis或者数据库等结合做持久化操作，当服务器挂掉时也不会导致某些客户信息（购物车） 丢失。
（二）、Session的工作流程 当浏览器访问服务器并发送第一次请求时，服务器端会创建一个session对象，生成一个类似于 key,value的键值对，然后将key(cookie)返回到浏览器(客户)端，浏览器下次再访问时，携带key(cookie)， 找到对应的session(value)。 客户的信息都保存在session中。
（三）、Cookie和Session区别：
cookie 数据存放在客户的浏览器上，session 数据放在服务器上。
cookie 不是很安全，别人可以分析存放在本地的 COOKIE 并进行 COOKIE 欺骗 考虑到安全应当使用 session。
session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能 考虑到减轻服务器性能方面，应当使用 COOKIE。
单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个站点最多保存 20 个 cookie。
（四）、express-session的使用
安装 express-session：
npm ---- https://registry.npmjs.org/ cnpm --- http://r.cnpmjs.org/* taobao - https://registry.npm.taobao.org/ nj ----- https://registry.nodejitsu.com/ rednpm - http://registry.mirror.cqupt.edu.cn/ npmMirror https://skimdb.npmjs.com/registry/ edunpm - http://registry.enpmjs.org/6登录后复制
引入express-session：
npm ---- https://registry.npmjs.org/ cnpm --- http://r.cnpmjs.org/* taobao - https://registry.npm.taobao.org/ nj ----- https://registry.nodejitsu.com/ rednpm - http://registry.mirror.cqupt.edu.cn/ npmMirror https://skimdb.npmjs.com/registry/ edunpm - http://registry.enpmjs.org/7登录后复制
设置官方文档提供的中间件：
npm ---- https://registry.npmjs.org/ cnpm --- http://r.cnpmjs.org/* taobao - https://registry.npm.taobao.org/ nj ----- https://registry.nodejitsu.com/ rednpm - http://registry.mirror.cqupt.edu.cn/ npmMirror https://skimdb.npmjs.com/registry/ edunpm - http://registry.enpmjs.org/8登录后复制
使用：
npm ---- https://registry.npmjs.org/ cnpm --- http://r.cnpmjs.org/* taobao - https://registry.npm.taobao.org/ nj ----- https://registry.nodejitsu.com/ rednpm - http://registry.mirror.cqupt.edu.cn/ npmMirror https://skimdb.npmjs.com/registry/ edunpm - http://registry.enpmjs.org/9登录后复制
express-session的常用参数：
$ nrm use npm0登录后复制express-session的常用方法：
$ nrm use npm1登录后复制使用案例：
$ nrm use npm2登录后复制七、表单事件Form 对象属性：
以上就是总结Node.js模块开发及常用技巧分享的详细内容，更多请关注9543建站博客其它相关文章！
发表评论