ファイルのアップロード
考えた
フロントエンドフォーム->バックエンドがファイル自体を受信->サーバーに保存->データベースファイルに情報を記録->ライブラリがnodejs関連情報に戻る-> nodejsがフロントエンドに戻る
前端：<input type = file enctype =“ multipart / form-data” name =“ fieldname”
アップロード方法
app.use(objMulter.image()) //允许上传图片类型
app.use(objMulter.any()) //允许上传什么类型的文件，any代表允许任何类型
実装
Postmanソフトウェア送信インターフェイスと組み合わせて、画像が正常にアップロードされ、
最終的にアドレスをクライアントに返すことができます
res.send({
err:0,
url:"http://localhost:3000/upload/" + req.files[0].filename +path.parse(req.files[0].originalname).ext
})
全体的なコードは次のとおりです。
const express = require("express")
const app = express()
const path = require("path") //引入path模块
const fs =require("fs")
app.listen(3000,()=>console.log("正在监听。。。"))
// 静态资源托管
// 如果用户想在浏览器上直接访问图片或者html页面，需要做一个静态服务器
app.use(express.static("./public"))
// 文件上传 前端上传一张图片，后端需要把图片存入upload文件夹里面
// 1.引入multer中间件
const multer = require("multer")
// 2.实例化multer
let objMulter = multer({dest:'./public/upload'});//data：指定保存位置
// 3.安装中间件
// app.use(objMulter.image()) 允许上传图片类型
app.use(objMulter.any()) //允许上传什么类型的文件，any代表允许任何类型
app.post("/api/reg",(req,res)=>{
// console.log(req.files);
// 4.fs.renameSync("改前"，"改后")
let oldFile = req.files[0].path //更改前的名字
let newFile = req.files[0].path+path.parse(req.files[0].originalname).ext //更改后的名字
fs.renameSync(oldFile,newFile)
//5.把磁盘路径转为网络路径入库操作
// 6.可以把地址返回给客户端
res.send({
err:0,
url:"http://localhost:3000/upload/" + req.files[0].filename +path.parse(req.files[0].originalname).ext
})
})
フィールド名：フォーム名名前
originalname：アップロードされたファイル名
エンコーディング：エンコード方式
mimetype：ファイルタイプ
バッファー：ファイル自体の
サイズ：サイズ
宛先：保存パス
ファイル名：サフィックスなしの保存ファイル名
パス：保存ディスクパス+保存ファイル名前にサフィックス
multer は含まれていません->ファイル名はランダムになります-> fsモジュールの名前が変更されました->パスシステムモジュールはディスクパスを解決します
バックエンド：multerはフォームデータでエンコードされたデータを受け入れます
パスシステムモジュール
const path = require("path") //引入path模块
アップロードしたファイルの名前を変更する
app.post("/api/reg",(req,res)=>{
// console.log(req.files);
// 4.fs.renameSync("改前"，"改后")
let oldFile = req.files[0].path //更改前的名字
let newFile = req.files[0].path+path.parse(req.files[0].originalname).ext //更改后的名字
fs.renameSync(oldFile,newFile)
res.end()
})
影響：変更
前：
変更後：
オペレーティングシステムのディスクパス
コード
ウィンドウズ： c:\\user\\admin\\a.jpg
マック： ~/desktop/1901
UIレンダリング
ウィンドウズ：c:\user\admin
マック：~/desktop/1901
API
ディスクパス分析解析
path.parse('c:\\wamp\\xx.png') // string -> object
//返回
{
root: 'c:\\', 盘符
dir: 'c:\\wamp', 目录
base: 'xx.png', 文件名
ext: '.png', 扩展名
name: 'xx' 文件，不含扩展名
}
フラグメントマージ結合
path.join('磁盘路径1','磁盘路径2'，'磁盘路径n')
__dirnameマジック変数は、現在のファイルが配置されているディスクパスを返します
フラグメントマージの解決
path.resolve('磁盘路径1','磁盘路径n')
ディスクフラグメントをマージし、ルートを右から左に検索し、左から右にスプライスします。ルートが見つかりません。現在のファイルパスをルートとして使用します
マルターミドルウェア
プラグインのインストール
npm i express multer -S
エンコードされたデータを受信multerフォームデータ、音符先端にすべての要件を運ぶときに、例えば：<input type=file enctype="multipart/form-data" name="fieldname"、
使用する
//1 引入
let multer = require('multer');
//2 实例化
let objMulter = multer({ dest: './upload' }); //dest: 指定 保存位置（存到服务器)
//安装中间件，
app.use(objMulter.any()); //允许上传什么类型文件,any 代表任何类型
ミドルウェアはreqリクエストボディを拡張します req.files
app.get('/reg',(req,res)=>{
req.files
})
バックエンドレンダリング
通常、バックエンドから返されたjsonデータに基づいてHTMLを生成することをフロントエンドレンダリングと呼びます。バックエンドレンダリングは、フロントエンドの種類に関係なく、jsonとhtmlを組み合わせてブラウザーに返すバックエンドレンダリングです。
アイデア
- ユーザー->アドレスバー（http [s]リクエスト）-> Webサーバー（受信）-> nodejsプロセスリクエスト（静的および動的に返す）->リクエストデータベースサービス（結果を返す）-> nodejs（受信）->ノードレンダリングページ->ブラウザ（ページを受け取り、最終的なレンダリングを完了します）
テンプレートエンジン
誰が前後にページをレンダリングするかに関係なく、テンプレートエンジンが使用されます。フロントエンドレンダリングページは実際にはdomを操作しており、バックエンドレンダリングページはデータとHTML文字をつなぎ合わせてブラウザーにスローするためのものです。
| エンジン | フロントエンド | バックエンド |
|---|---|---|
| angularJs | √ | × |
| Vue / Mustach | √ | √ |
| 反応する | √ | √ |
| angularTs / mustach | √ | √ |
| ヒスイ/パグ | × | √ |
| ejs | × | √ |
| jquery +アートテンプレート | √ | × |
| handlerbars | √ | × |
ヒスイ
原則：fsはフロントエンドの静的ページ+ jade + data->を返し、send（data）-> browserを返します
機能：煩わしい、強い依存
使用する
let jade = require('jade')
let html = jade.renderFile('jade模板文件'，{数据}，{pretty:true}); //返回字符
jadeテンプレートファイルの構文
父と息子はインデントされている必要があります
属性：ラベル（キー=値、キー2 =値）
コンテンツ：ラベルコンテンツの
使用は次のように示されます：
その他の拡張機能
ejs
原則：fsはフロントエンドの静的ページ+ ejs +データ->送信（データ）->ブラウザーを取得します
特徴：非侵襲的、穏やか、弱く依存
使用する
let ejs = require('ejs')
ejs.renderFile('ejs模板文件',{要合并到html数据},回调(err,data))
err：エラー、nullはエラーなしを意味します
データ：レンダリングされた文字|ストリーム
ejsテンプレート：ejsという名前のサフィックスが付いたhtmlファイル
ejsテンプレートファイルの構文
- ejs構造はhtmlです
- 出力：<％=データ名|属性名|変数名+式％>
- ステートメント：<％ステートメント％>は<%%>でラップする必要があります
- エスケープされていない出力：<％-データ名|変数名+式％>
- 公開ロード：<％-include（ './ hd.ejs'、{data}）％>
次のようにejqデモコードは次のとおりです。
他の拡張機能
