モジュール化現代の設計手法として、この概念が最初に誕生しました。製造業出身。現在、この概念はあらゆる分野に派生して適用されており、モジュール思考はソフトウェア開発にも広く採用されています。
いわゆる モジュール化の考え方 は、大きなプログラムを機能に応じていくつかの小さなモジュールに分割します。各小さなプログラム モジュールは特定の機能を完了し、すべてのモジュールは機能に応じていくつかの小さなモジュールに分割されます。システム全体で必要な機能を完成させるために全体を組み立てるプログラミング手法です。 [推奨: node.js ビデオ チュートリアル ]
モジュール化によりコードが低結合になる可能性がありますが、機能モジュールは低結合になりません。お互いに直接影響を及ぼします。
モジュール化が必要な理由:
プログラムの複雑さは増加します。コードを作成するほど、ファイル内のコードは長くなります。維持するのが難しいです。 (特定の関数を完了するコードをグループ化し、それらを別のファイルに配置すると、各ファイルに含まれるコードが比較的少なくなります)
JavaScript に複雑な依存関係がある場合、一部の変数属性またはメソッドが簡単に使用できなくなります。上書きまたは書き換えられ、さまざまな汚染につながります。これは、名前空間を通じて名前の重複の問題を効果的に回避できる他の言語とは異なり、js には名前空間がないためです。
パブリック関数をモジュールとして別の js ファイルに抽出します。デフォルトでは、モジュール内のメソッドまたはプロパティには外部からアクセスできません。これらのプロパティとメソッドに外部からアクセスしたい場合は、モジュール内のexports
および module.exports を通じてそれらを公開し、必要な場所に require()## を渡す必要があります。 #ご紹介します。
//exports语法示例
// sum.js
exports.sum = function(a,b){
return a+b;
}
// main.js
var m = require("./sum");
var num = m.sum(10,20);
console.log(num);
//modules.exports语法示例
//sum.js
function sum(a,b){
return a+b;
}
module.exports= sum;
//main.js
var sum = require('./sum');
sum(10,20);// 30CommonJS では次のように規定されています: 各モジュール内で、モジュール変数は現在のモジュールを表します#組み込みモジュール (fs、path、http などの組み込みモジュールは Node.js によって公式に提供されます)
カスタム モジュール (ユーザーが作成したすべての .js ファイルはカスタム モジュールです)
サードパーティ モジュール (パッケージ) (サードパーティによって開発されたモジュールは、正式に提供される組み込みモジュールではありません。これはユーザーが作成したカスタム モジュールではないため、使用前にダウンロードする必要があります)
//1.加载内置模块不需要指定路径
var http = require('http');
//2.加载用户的自定义模块
var sum = require('./sum.js');
//3.加载第三方模块
const md5=require("md5");npm -vnpm 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 是一个管理 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
淘宝 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是一个基于 Node.js 平台，快速、开放、极简的 Web 开发框架。
$ npm install express --save
案例：第一个express案例。
所谓的路由就是客户端用来与后端服务器进行交互的一种方式，客户端采用特定的URL与请求方法来访问服务器端，服务器端通过响应返回特定资源。
路由的定义由如下结构组成：
app.METHOD(PATH, HANDLER)
| 名称 | 描述 |
|---|---|
| app | app 是一个 express 实例 |
| METHOD | METHOD用于指定要匹配的HTTP请求方式 |
| PATH | PATH是服务器端的路径 |
| HANDLER | 是当路由匹配时需要执行的处理程序(回调函数) |
路由路径和请求方法一起定义了请求的端点，它可以是字符串，字符串模式以及正则表达式。
app.get('/', function (req, res) {
res.send('root')})app.get('/about', function (req, res) {
res.send('about')})app.get('/random.text', function (req, res) {
res.send('random.text')})使用字符串模式的路由路径示例：
app.get('/ab?cd', function (req, res) {
res.send('ab?cd') //abcd ,acd})app.get('/ab/:id', function (req, res) {
res.send('ab/:id') })app.get('/ab+cd', function (req, res) {
res.send('ab+cd') //b可以一次或者多次的重复})app.get('/ab*cd', function (req, res) {
res.send('ab*cd') //在ab,cd之间随意写入任意字符})app.get('/ab(cd)?e', function (req, res) {
res.send('ab(cd)?e')})可以为请求处理提供多个回调函数，其行为类似中间件。
案例：中间件f1,f2
app.get('/example/b', function (req, res, next) {
console.log('the response will be sent by the next function ...')
next()}, function (req, res) {
res.send('Hello from B!')})var cb0 = function (req, res, next) {
console.log('CB0')
next()}var cb1 = function (req, res, next) {
console.log('CB1')
next()}var cb2 = function (req, res) {
res.send('Hello from C!')}app.get('/example/c', [cb0, cb1, cb2])var cb0 = function (req, res, next) {
console.log('CB0')
next()}var cb1 = function (req, res, next) {
console.log('CB1')
next()}app.get('/example/d', [cb0, cb1], function (req, res, next) {
console.log('the response will be sent by the next function ...')
next()}, function (req, res) {
res.send('Hello from D!')})在Express程序中，使用
app.use()和app.METHOD()方法将中间件绑定到应用程序对象(app)。凡是挂载在app身上的都是应用级中间件。
app.use() : 应用中的每个请求都可以执行其代码
//万能中间件var express = require('express')var app = express()app.use(function (req, res, next) {
console.log('Time:', Date.now())
next()})//特定路由的应用中间件app.use("/login"，function (req, res, next) {
console.log('Time:', Date.now())})路由器级中间件的工作方式与应用级中间件相同，只是它绑定到express.Router().
var router = express.Router()
var express = require('express')var app = express()var router = express.Router()router.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()})案例： / ; /home , /list
与其他中间件函数相同的方式定义错误处理中间件函数，但是使用四个参数
(err, req, res, next),放到最后。
app.use(function (err, req, res, next) {
console.error(err.stack)
res.status(404).send('Something broke!')})express.static提供静态资源，例如 HTML 文件、图像等。
express.json使用 JSON 有效负载解析传入请求。注意：可用于 Express 4.16.0+
application/json
由于JSON规范的流行，现在越来越多的开发者将application/json这个Content-Type作为响应头。用来告诉服务端消息主体是序列化后的JSON字符串。除了低版本IE之外各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理JSON的函数，JSON能格式支持比键值对复杂得多的结构化数据，普通键值对中的值只能是字符串，而使用json，键值对可以重复嵌套。
// 应用级别中间件，获取post--json参数app.use(express.json());
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转码。
// 应用级别中间件，获取post--form参数app.use(express.urlencoded({extended:false}));express.json()、express.urlencoded()为了提供诸如图像、CSS 文件和 JavaScript 文件之类的静态文件，请使用 Express 中的 express.static 内置中间件函数。
express.static内置中间件函数语法：
express.static(root, [options])
例如，通过如下代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了：
app.use(express.static('public'))
现在，你就可以访问 public 目录中的所有文件了：
http://localhost:3000/images/kitten.jpg http://localhost:3000/css/style.css http://localhost:3000/js/app.js http://localhost:3000/images/bg.png http://localhost:3000/hello.html
Express 在静态目录查找文件，因此，存放静态文件的目录名不会出现在 URL 中。
如果要使用多个静态资源目录，请多次调用 express.static 中间件函数：
app.use(express.static('public'))
app.use(express.static('uploads'))访问静态资源文件时，express.static 中间件函数会根据目录的添加顺序查找所需的文件。
express.static中间件函数可以为某些静态资源服务创建虚拟路径前缀（该路径实际上并不存在于文件系统中），请指定静态目录的挂载路径，如下所示：
app.use('/static', express.static('public'))
现在，你就可以通过带有 /static 前缀地址来访问 public 目录中的文件了。
http://localhost:3000/static/images/kitten.jpg http://localhost:3000/static/css/style.css http://localhost:3000/static/js/app.js http://localhost:3000/static/images/bg.png http://localhost:3000/static/hello.html
SSR后端嵌套模板，后端渲染模板 （后端把页面组装起来）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jL70ca3p-1658387147221)(C:\Users\11933\Desktop\前端全栈\课件\前后台交互\imgs\服务器端渲染.png)]
BSR（前后端分离，通过通用的json数据形式，不挑后端的语言）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pXRCidw2-1658387147223)(C:\Users\11933\Desktop\前端全栈\课件\前后台交互\imgs\前后端分离.png)]
模板引擎能够在应用程序中使用静态模板文件。在运行时，模板引擎将模板文件中的变量替换为实际值，并将模板转换为发送给客户端的 HTML 文件。这种方法使设计 HTML 页面变得更加容易。
与 Express 一起使用的一些流行模板引擎是Pug、 Mustache和EJS。Express 应用程序生成器默认使用Pug，但它也支持其他几个。
需要在应用中进行如下设置才能让Express渲染模板引擎：
app.set('views', './views')。app.set('view engine', 'pug').在路由渲染模板并将渲染后的 HTML 字符串发送到客户端。
res.render(view [, locals] [, callback])
app.get('/', function (req, res) {
res.render('index', { title: 'Hey', message: 'Hello there!' })
})npm install ejs
在app.js中添加如下代码，配置Express使用ejs模板引擎。
app.set('views',path.join(__dirname,'views')); //设置模板存储位置app.set('view engine','ejs');
注意：此时指定的模板目录为
views，且模板文件的后缀名为.ejs。
在app.js中添加如下代码，配置Express使用ejs模板引擎。并指定模板后缀名为html。
app.set('views',path.join(__dirname,'views')); //设置模板存储位置app.set('view engine','html');app.engine('html',require('ejs').renderFile); //使用ejs模板引擎解析html
注意：此时指定的模板目录为
views，且模板文件的后缀名为.html。
<%= %> 输出标签
<%- %> 输出html标签（html会被浏览器解析）
<%# %> 注释标签
<% %> 流程控制标签（写的是if,else,for）
<%- include("user/show",{user:user})%> 导入公共的模板内容是一种设计模式，是软件架构得模式，是在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 是在 2001 年开始被推广和使用的数据格式，到现今为止，JSON 已经成为了主流的数据交换格式。
JSON 就是用字符串来表示 Javascript 的对象和数组。所以，JSON 中包含对象和数组两种结构，通过这两种结构的相互嵌套，可以表示各种复杂的数据结构。
对象结构：对象结构在 JSON 中表示为 { } 括起来的内容。数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
{
"name": "zs",
"age": 20,
"gender": "男",
"hobby": ["吃饭", "睡觉"]}数组结构：数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ “java”, “javascript”, 30, true … ] 。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
[ 100, 200, 300 ][ true, false, null ][ { "name": "zs", "age": 20}, { "name": "ls", "age": 30} ][ [ "aaa", "bbb", "ccc" ], [ 1, 2, 3 ] ]JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
//这是一个对象var obj = {a: 'Hello', b: 'World'}//这是一个 JSON 字符串，本质是一个字符串var json = '{"a": "Hello", "b": "World"}'HTTP 协议即超文本传送协议 (HyperText Transfer Protocol) ，它规定了客户端与服务器之间进行网页内容传输时，所必须遵守的传输格式。（是一种约定与规则）
客户端发起的请求叫做 HTTP 请求，客户端发送到服务器的消息，叫做 HTTP 请求消息，又叫做 HTTP 请求报文。
HTTP 请求消息由请求行（request line）、请求头部（ header ） 、空行 和 请求体 4 个部分组成。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G502I2rT-1658387147224)(C:\Users\11933\Desktop\前端全栈\课件\前后台交互\imgs\请求消息组成部分.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ImfA8U4y-1658387147225)(C:\Users\11933\Desktop\前端全栈\课件\前后台交互\imgs\请求头部字段.png)]
响应消息就是服务器响应给客户端的消息内容，也叫作响应报文。
HTTP响应消息由状态行、响应头部、空行 和 响应体 4 个部分组成。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N0rfsHa8-1658387147225)(C:\Users\11933\Desktop\前端全栈\课件\前后台交互\imgs\响应消息组成部分.png)]
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 全称为（Asynchronous JavaScript And XML），是异步的JavaScript和XML。通过 ajax可以在浏览器向服务器发送异步请求。最大的优势，
无刷新获取数据。也就是说AJAX可以在不重新加载整个页面的情况下，与服务器交换数据。这种异步交互的方式，使用户单击后，不必刷新页面也能获取新数据。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
最开始是前后台进行数据交互的语言，现在是JSON。
'{"title":"三体","author":"zs","price":30}'<book>
<title>三体</title>
<author>刘慈欣</author>
<price>30.00</price></book>// 1.创建对象var xhr=new XMLHttpRequest();// 2.初始化，设置请求方法和urlxhr.open("GET","http://127.0.0.1:3000/server?username=zs&password=1234");// 3.发送xhr.send();// 4.绑定事件，处理服务端返回得结果// readstate xhr得属性 状态 0,1,2,3,4xhr.onreadystatechange=function(){
// 服务器返回得结果
if(xhr.readyState==4){
// 判断响应得状态码
if(xhr.status==200){
// 行，头，体
console.log(xhr.status);
console.log(xhr.statusText);
console.log(xhr.response);
console.log(xhr.getAllResponseHeaders());
}
}}JavaScript使用
CryptoJS加解密。CryptoJS时一个JavaScript的加解密的工具包。它支持多种的算法：MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列，进行 AES、DES、Rabbit、RC4、Triple DES 加解密。在项目中如果要对前后端传输的数据双向加密， 比如避免使用明文传输用户名，密码等数据。 就需要对前后端数据用同种方法进行加密，方便解密。
使用步骤：
CryptoJS ：npm i crypto-js
/login.js 中，导入 crypto-js ：const crypto = require('crypto-js')
ASE进行纯文本加密：//加密var a=crypto.AES.encrypt("abc","key").toString(); //SecrectKey 秘钥//解密var b=crypto.AES.decrypt(a,"key").toString(crypto.enc.Utf8); //按照UTF8编码解析出原始字符串在实际开发中，前后端都需要对表单的数据进行合法性的验证，而且，后端做为数据合法性验证的最后一个关口，在拦截非法数据方面，起到了至关重要的作用。使用第三方数据验证模块，来降低出错率、提高验证的效率与可维护性。
步骤：
joi 包，为表单中携带的每个数据项，定义验证规则：npm install joi
@escook/express-joi 中间件，来实现自动对表单数据进行验证的功能：npm i @escook/express-joi
/schema/login.js 用户信息验证规则模块：const joi = require('joi')/**
* string() 值必须是字符串
* alphanum() 值只能是包含 a-zA-Z0-9 的字符串
* min(length) 最小长度
* max(length) 最大长度
* required() 值是必填项，不能为 undefined
* pattern(正则表达式) 值必须符合正则表达式的规则
*/// 用户名的验证规则const username = joi.string().required();// 密码的验证规则const password = joi.string().pattern(/^[\S]{6,12}$/).required();// 登录表单的验证规则对象exports.login_schema = {
// 表示需要对 req.body 中的数据进行验证
body: {
username,
password,
},}/router/admin/login.js 中的代码：// 1. 导入验证表单数据的中间件const expressJoi = require('@escook/express-joi')// 2. 导入需要的验证规则对象const { login_schema } = require('../../schema/login');// 3登录功能router.post("/",expressJoi(login_schema),(req,res)=>{}];index.js 的全局错误级别中间件中，捕获验证失败的错误，并把验证失败的结果响应给客户端：const joi = require('joi')// 错误中间件app.use(function (err, req, res, next) {
// 数据验证失败
if (err instanceof joi.ValidationError) return res.send(err);
// 未知错误
res.send(err)})HTTP协议是以ASCII码传输，建立在TCP/IP协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。协议规定 POST 提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式Content-Type。
服务端根据请求头（headers）中的Content-Type字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。所以说到POST提交数据方案，包含了Content-Type 和消息主体编码方式两部分。Content-Type的四种值分别代表四种方式，具体如下：
浏览器的原生form表单，如果不设置enctype属性，那么最终就会以 application/x-www-form-urlencoded方式提交数据。Content-Type被指定为application/x-www-form-urlencoded提交的数据按照key=val&key=val的方式进行编码，并且key和val都进行了URL转码。服务端例如 PHP 中，使用$_POST[′key′]可以获取到值。
常见的POST数据提交的方式。这种方式支持文件上传，不过必须要设置form的enctyped等于这个值。使用multipart/form-data方式会生成了一个boundary 来分割不同的字段，为了避免与正文重复，boundary是一段很长的随机拼接的字符串。然后Content-Type指明数据是以mutipart/form-data来编码并包括进本次请求的boundary 值。消息主体最后以 --boundary–标示结束。
由于JSON规范的流行，现在越来越多的开发者将application/json这个Content-Type作为响应头。用来告诉服务端消息主体是序列化后的JSON字符串。除了低版本IE之外各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理JSON的函数，JSON能格式支持比键值对复杂得多的结构化数据，普通键值对中的值只能是字符串，而使用json，键值对可以重复嵌套。
它是一种使用HTTP作为传输协议，XML作为编码方式的远程调用规范。不过后来使用很少。也许在十多年前，在json还未出来之前数据交互对接。
总之application/x-www-form-urlencoded和multipart/form-data两种POST方式都是浏览器原生支持的，是普遍使用的两种方式，application/json是现在比较流行的新趋势。
npm i multer
const multer = require('multer')
//上传文件存放路径、及文件命名const storage = multer.diskStorage({
destination: path.join(__dirname ,'../static/uploads'), //确定上传文件的物理位置
filename: function (req, file, cb) { //自定义设置文件的名字，根据上传时间的时间戳来命名
let type = file.originalname.split('.')[1]
cb(null, `${file.fieldname}-${Date.now().toString(16)}.${type}`)
}})1.sotrage是一个配置对象。他是通过multer.diskstorage存储引擎生成的。multer.diskstorage需要传递一个配置对象，这里的配置对象里面接收两个参数。第一个参数为destination，它的值为一个路径字符串，代表的含义是当multer处理完成前端传递过来的文件之后要把这个文件存储在哪里。这个文件夹无需手动创建，在接受文件的时候会自动创建。这里建议使用path模块进行拼接，不容易出错。第二个参数为一个回调函数，这里形参要用三个进行占位。multer中间件在解析前端提交的文件的时候会调用这个方法，调用的时候会给这个filename指向的函数传递三个参数，第二个值为前端传递过来文件信息，第三个参数cb为一个函数，cb函数调用的第二个参数指定的就是当前解析完成后的保存到destination指向的目录的文件名。
const upload = multer({storage});(1).这个file是前端提交表单过来的时候表单的字段名称。(2).upload是用multer这个库里的顶级构造函数生成的实例。
实际网页开发当中，我们前端需要向后端提交一些像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)]
使用：
<textarea id="demo" style="display: none;"></textarea>layui.use(['layedit'],function(){
layedit.build("demo")})layedit基础的方法：
| 方法名 | 描述 |
|---|---|
| var index = layedit.build(id, options) | 用于建立编辑器的核心方法index：即该方法返回的索引参数 id： 实例元素（一般为textarea）的id值参数 options：编辑器的可配置项，下文会做进一步介绍 |
| layedit.set(options) | 设置编辑器的全局属性即上述build方法的options |
| layedit.getContent(index) | 获得编辑器的内容参数 index： 即执行layedit.build返回的值 |
| layedit.getText(index) | 获得编辑器的纯文本内容参数 index： 同上 |
| layedit.sync(index) | 用于同步编辑器内容到textarea（一般用于异步提交）参数 index： 同上 |
| layedit.getSelection(index) | 获取编辑器选中的文本参数 index： 同上 |
编辑器属性设置：
| 属性 | 类型 | 描述 |
|---|---|---|
| tool | Array | 重新定制编辑器工具栏，如： tool: [‘link’, ‘unlink’, ‘face’] |
| hideTool | Array | 不显示编辑器工具栏，一般用于隐藏默认配置的工具bar |
| height | Number | 设定编辑器的初始高度 |
| uploadImage | Object | 设定图片上传接口，如：uploadImage: {url: ‘/upload/’, type: ‘post’} |
富文本编辑器工具栏：
let richtextInex = layedit.build('richtext', {
tool: [
'strong' //加粗
, 'italic' //斜体
, 'underline' //下划线
, 'del' //删除线
, '|' //分割线
, 'left' //左对齐
, 'center' //居中对齐
, 'right' //右对齐
, 'image' //插入图片
],
uploadImage:{url:'/uploadrichtext',type:'POST'}
})（一）、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 install express-session
引入express-session：
var session = require("express-session");设置官方文档提供的中间件：
app.use(session({
secret: 'keyboard cat',
resave: true,
saveUninitialized: true
}))使用：
设置值 req.session.username = "张三"; 获取值 req.session.username
express-session的常用参数：
1. name - cookie的名字（原属性名为 key）。（默认：’connect.sid’）2. store - session存储实例3. secret - 用它来对session cookie签名，防止篡改4. cookie - session cookie设置 （默认：{ path: ‘/‘, httpOnly: true,secure: false, maxAge: null }）5. genid - 生成新session ID的函数 （默认使用uid2库）6. rolling - 在每次请求时强行设置cookie，这将重置cookie过期时间（默认：false）7. resave - 强制保存session即使它并没有变化 （默认： true）8. proxy - 当设置了secure cookies（通过”x-forwarded-proto” header ）时信任反向代理。当设定为true时，
”x-forwarded-proto” header 将被使用。当设定为false时，所有headers将被忽略。当该属性没有被设定时，将使用Express的trust proxy。9. saveUninitialized - 强制将未初始化的session存储。当新建了一个session且未设定属性或值时，它就处于
未初始化状态。在设定一个cookie前，这对于登陆验证，减轻服务端存储压力，权限控制是有帮助的。（默认：true）10. unset - 控制req.session是否取消（例如通过 delete，或者将它的值设置为null）。这可以使session保持1. Session.destroy():删除session，当检测到客户端关闭时调用。2. Session.reload():当session有修改时，刷新session。3. Session.regenerate()：将已有session初始化。4. Session.save()：保存session。
//配置中间件app.use(session({
secret: 'this is string key', // 可以随便写。一个 String 类型的字符串，作为服务器端生成 session 的签名
name:'session_id',/*保存在本地cookie的一个名字 默认connect.sid 可以不设置*/
resave: false, /*强制保存 session 即使它并没有变化,。默认为 true。建议设置成 false。*/
saveUninitialized: true, //强制将未初始化的 session 存储。 默认值是true 建议设置成true
cookie: {
maxAge:5000 /*过期时间*/
}, /*secure https这样的情况才可以访问cookie*/
//设置过期时间比如是30分钟，只要游览页面，30分钟没有操作的话在过期
rolling:true //在每次请求时强行设置 cookie，这将重置 cookie 过期时间（默认：false）}))| 属性 | 描述 |
|---|---|
| action | 接收请求的URL |
| elements | 表单中的所有控件元素集合 |
| length | 表单控件的个数 |
| enctype | 编码类型 例：enctype=“multipart/form-data” |
| name | 表单元素名称 |
| 方法 | 描述 |
|---|---|
| reset() | 把表单的所有输入元素重置为它们的默认值。 |
| submit() | 提交表单。 |
| イベント | 説明 |
|---|---|
| フォーム要素をリセットする前に呼び出されます。 | |
| フォームを送信する前に呼び出されます。 |
| 説明 | |
|---|---|
| 値の取得と設定 | |
| Gettingまたは設定フォーム コントロールが無効かどうか、値は true または false | |
| フォーム コントロールのタイプを読み取ります | |
| それが配置されているフォーム要素オブジェクト | |
| コントロールの読み取り専用属性ブール値は変更できません。コピーと読み取りのみ可能 | |
| 名前フィールドの取得と設定 name |
| Description | |
|---|---|
| フォーカスが失われたとき | |
| フォーカスを取得したとき | |
| コンテンツが変更されてフォーカスを失ったとき | |
| トリガー |
| Description | |
|---|---|
| フォーカスを取得 | |
| フォーカスを失った | |
| テキスト コントロール内のすべてのテキスト コンテンツを選択します |
以上がNode.js モジュール開発の概要と共通テクニックの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![Node.js の完全な入門チュートリアル [es6+npm+express+webpack+promise]](https://img.php.cn/upload/course/000/000/068/6242b4c8f1a39624.png)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
