48 Express脚手架框架开发

2023-12-20 14:27:52

 

48 Express脚手架框架开发

回顾

http状态码。

https://baike.baidu.com/item/HTTP%E7%8A%B6%E6%80%81%E7%A0%81/5053660?fr=aladdin

项目开发流程

把前端给的文件一一归类。

1、html页面放在views文件夹

2、静态资源放在static或public

3、配置一些post中间件（因为要接收post传递过来的参数）

4、配置开放静态资源的中间件

 

let users = JSON.parse( fs.readFileSync( path.join( __dirname,'user.json' ) ).toString() || '[]' )
​
            JSON.parse() //把json字符串转换成对象
            fs.readFileSync() //读取文件中的内容
            path.join() //优化路径的
            读取的内容为buffer所以要toString()

            '' || '[]' => '[]'
​

 

1、文件上传 formidable

formidable：即可以获取文件数据，也可以获取post表单中的普通的元素数据

两个角色 ：

1、用户（前端）

2、后端

实现步骤：

前端：通过form表单、必须是post，并且为form表单添加 enctype=“mutipart/form-data”此属性

 <form action="http://localhost:3000/uploader" method="post" enctype="multipart/form-data">
            <input name="username" placeholder="输入用户名"> <br><br>
            <input type="file" name="fa"> <br><br>
            <button type="submit">上传文件</button>
    </form>

后端：使用第三方中间件接收（ formidable）

const formidable = require('formidable');
​
//在对应的路由中，创建一个form表单的实例
   const form = formidable({ 
        multiples: true,
        uploadDir:'temp',//这是上传的临时目录
     });
    
    //解析数据
    form.parse(req, (err, fields, files) => {
       //fields : 普通表单元素的数据
       //files：文件数据
       //err:错误信息。如果为null，就是成功了。
       console.log( fields,'我是普通元素数据' )
       console.log( files,'我是文件数据' )
       res.send('ok123')
    });

 

files:{
  fa: File {
    _events: [Object: null prototype] {},
    _eventsCount: 0,
    _maxListeners: undefined,
    size: 51154,//文件的大小
    path: 'C:\\Users\\ADMINI~1\\AppData\\Local\\Temp\\upload_1237084f113333e704899416994fa797', //上传的临时路径    通过fs模块把临时路径移动到最终要存储的位置，比如：项目中upload文件夹
    name: '上课时间.JPG', //源文件名
    type: 'image/jpeg',  //文件类型
    hash: null,
    lastModifiedDate: 2021-03-25T02:29:41.049Z,
  }
} 我是文件数据

最后移动文件的时候有两种方案：

1、还是保留源文件名称（ 比如：百度网盘这种产品 ）

2、重命名一个唯一的不重复的名称（ 随机数、 年月日（time-stamp）+随机数、使用第3方包生成一个不重复的名字 ）

uuid 模块

作用：生成一个唯一不重复的字符串。每次执行，生成字符串都不一样

//npm i uuid
​
const { v4: uuidv4 } = require('uuid');
console.log( uuidv4() ); // ⇨ '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'

2、cookie

介绍

cookie的产生也是http的特点所决定的。http一个非常重要的特点是无状态的，也就是说当客户端请求服务器，每一个请求和响应结束以后，这次的连接是马上断开的（也是为了释放资源）。同时服务器是不保留连接者相关的信息。这就说明了，cookie要解决http无状态的问题。

2G网：5元30M。带宽、服务器配置....。

特点：

(1)含有过期时间（默认关闭浏览器，cookie销毁）

(2)大小限制（4KB）

(3)存储在客户端（浏览器端）

(4)数量限制：最多不能超过50个cookie。cookie是很昂贵的

(5)cookie只能存储字符串

(6)页面之间共享

(7)相对不安全

(8)浏览器之间不共享cookie

应用场景

保存登录信息、保存你的浏览爱好以后推送你的爱好。

首先是不是页面之间能够共享的（cookie、session、localStorage）

实现原理

 

 

 

使用cookie步骤

需求：

get: /login (登录成功，存储用户名)

get: /welcome ( 欢迎您：xxx。如果未登录则显示未登录请登录 )

get: /user/edit ( 如果登录了显示：用户可更新自己的信息，如果未登录：不让访问 )

中间件cookie-parser

https://www.npmjs.com/package/cookie-parser

 

1、下载

npm i cookie-parser

2、找到手册配置（复制粘贴）

var cookieParser = require('cookie-parser')

app.use(cookieParser()) //使用cookie中间件
​

3、在具体的路由中设置cookie

比如：把用户名保存到cookie中。

res.cookie( key,value[,option] ) option: 我们可以通过options对象设置cookie过期时间

res.cookie( 'username','swk' )  //没有设置过期时间：关闭浏览器自动销毁（关闭标签页不代表关闭浏览器）
res.cookie( 'username','swk',{ maxAge:20*1000 } )  //以毫秒为单位设置过期时间  7*24*60*60*1000 ： 7天免登录

4、如何获取cookie

req.cookies //获取所有的cookies对象

 

查看cookie

 

 

设置cookie

 

 

 

在以后请求中通过请求头的cookie字段把所有的cookie发送给服务器

 

3、session

简介

session是另一种记录用户状态的机制，不同的是cookie保存在客户端浏览器中，而session保存在服务器上。当服务端使用session后，那么服务器会把session数据信息存储在服务器上，同时session标识也会记录在对应客户端上。

特点

(1)session存储在服务器

(2)依赖cookie

(3)可以存储任意类型

(4)通过客户端的sessionid标识符区分session

(5)session没有大小限制

(6)页面之间共享

应用场景

保存登录信息、保存你的浏览爱好以后推送你的爱好、（ 访问次数一定是用session实现 ）

实现原理

 

 

 

 

 

 

查看session标识

 

 

 

设置session标识

 

 

携带session标识到服务器

 

 

使用session步骤

1、下载中间件

npm install cookie-session

2、引入并使用中间件

var cookieSession = require('cookie-session')
var express = require('express')

var app = express()

app.use(cookieSession({
  //name: 'session',//sessionid的名称，默认可以省略
  keys: ['adfsafdsafdsadf','adfsafdsafdasf','随便猜'], //我们配一把钥匙

  // Cookie Options
  //maxAge: 24 * 60 * 60 * 1000 // 24 hours //session的有效期
}))

 

3、设置一个session值

req.session[key] = value

4、获取session

req.session[key]

 

4、ejs模板引擎

模板引擎其实就是html页面。

模板引擎比html页面功能更强大。模板引擎能够把数据和标签很好的拼接起来。只不过html页面中可以书写ejs代码

list.html

<li>
	标题：
	时间：
	简介：
	阅读次数：
</li>

使用步骤：

1、下载

npm i ejs

2、全局开启ejs

app.set( 'view engine','ejs' )

3、在路由中返回ejs页面

res.render( 'ejs模板文件'[,dataObject] ) 模板文件是以.ejs为后缀并且模板文件放置 views文件夹中。
										注册render的第1个参数 是模板文件不需要带后缀

4、创建ejs文件

放置在views文件夹即可。

ejs常用语法

<%= 值 %>  渲染值或变量
if
<% if(条件){ %>
	<h2></h2>
<% } %>

<% if(条件){ %>
	<h2></h2>
<% }else{ %>
	<h3></h3>
<% } %>
<% for(){ %>
	<li></li>
<% } %>
包含文件: 公共文件
<%- include('文件名，不需要加后缀') %>

 

<p> <%= username %> </p>
    <p> <%= age %> </p>

    <% if( age >= 18 ){ %>
        <h2>成年</h2>
    <% }else{ %>
        <h3>呵呵</h3>
    <% } %>

    <p> <%= person.username  %> </p>

    <ul>
        <% for( let i=0;i<jobs.length;i++ ){ %>
            <li><%= jobs[i] %></li>
        <% } %>
    </ul>

 <%- include('footer') %>

 

5、express脚手架

生成器。就是一个工具，帮我们node开发者，快速生成一个项目基本的结构，我们只需要去写业务即可。

有express、开放静态资源、views（ejs）、路由（模块化）、post( urlencoded、json )、cookie、session、404、逻辑错误处理

npm install -g express-generator

//生成一个项目，使用ejs模板引擎，项目目录名叫myapp
express --view=ejs myapp

 

http://localhost:3000

分析express脚手架生成的文件说明

app.js 项目入口

views ejs模板

routes 各个路由模块

public 静态资源目录

bin/www 项目启动文件

package.json 项目配置文件

 

完整的命令为 npm run start。但是start比较特殊可以省略run ，和npm start等价。但是实际执行的是 node ./bin/www

6、koa框架

npm install -g koa2-generator

koa2 myapp -e --ejs

 

前后端数据交互总结

1层：会前后端交互（使用ajax调用接口）

2层：会用express+mysql写一些接口

3层：前后端一起干（全栈工程师）

请求方法 编码格式（Content-Type） 前端要传输的数据格式 后端如何获取 应用场景
GET url地址后面（querystring） url?key1=value1&key2=value2 不需要中间件:req.query 获取数据
POST applicaion/x-www-form-urlencoded form-data: key1=value1&key2=value2 express.urlencoded( { extend:true } ) 提交数据
POST applicaion/json（只能通过ajax） request-payload: '{ "key1":"value1","key2":"value2" }' express.json() 提交数据
POST mutilpart/form-data（可以使用表单） 文件流   文件上传
DELETE 同post     删除数据
PUT 同post     更新数据
上一篇：MySQL高级--CemtOS安装MySQL并配置


下一篇：WeChall Prime Factory (Training, Math)