前端工程架构
文章平均质量分 52
记录前端工程架构相关的知识点
凯小默
专注前端领域开发。
展开
-
100 # mongoose 的使用
【代码】100 # mongoose 的使用。原创 2023-10-22 23:57:20 · 452 阅读 · 0 评论 -
99 # mongo 的基本安装和配置
上面的原因是因为连着的 MongoDB 中的 user 数据库它是有用户名和密码的,在没有进行登录的情况下,想直接查看数据库集合名称时,遭到了拒绝,因此,首先要进行登录操作,获得查看 collections 的权限。下面创建根用户,在创建一个数据库分配这个数据库的权限,默认可以在 admin 中创建根用户,创建其他数据库,在针对某个数据库中,创建用户,赋予当前权限,下次链接这个数据库时可以登录这个账号。手动启动:自己启动服务端,并且指向路径储存的路径,然后启动客户端,需配置环境变量。原创 2023-10-12 21:09:19 · 203 阅读 · 0 评论 -
98 # jwt
JSON WEB TOKEN (jwt) 是目前最流行的跨域身份验证解决方案。解决问题:session 不支持分布式框架,无法支持横向扩展,只能通过数据库来保存会话数据实现共享,如果持久层失效就会出现认证失败。优点:服务器不保存任何会话数据,即服务器变为无状态,使其更容易扩展。原创 2023-10-09 20:35:07 · 162 阅读 · 0 评论 -
97 # session
Koa 的简单会话中间件。默认为基于 Cookie 的会话并支持外部存储。koa 里内置了设置 cookie 的方法。办卡例子:给一个固定的卡号。原创 2023-10-08 19:43:17 · 166 阅读 · 0 评论 -
96 # cookie
在密码学中,是指通过在密码任意固定位置插入特定的字符串,让散列后的结果和使用原始密码的散列结果不相符,这种过程称之为“加盐”。采用另外一种方式,使用 sha256 加盐算法,根据内容和秘钥算出一个签名(不能反解),相同的秘钥签名的结果是相同的。当给浏览器设置 cookie 的时候,可以增加签名,根据数据内容创建一个唯一的签名(MD5),这种方式可以伪造,写入cookie,分别读取 cookie。文件,增加自定义本地访问域名。改动 cookie 里的值。原创 2023-09-27 20:22:29 · 163 阅读 · 0 评论 -
94 # express 兼容老的路由写法
new 特点:当 new 一个函数时,这个函数返回一个引用类型,那么这个引用类型会作为 this。然后声明一个 proto 对象,通过让路由的实例可以通过链找到原来的方法就能兼容老的路由写法。上一节实现了错误处理中间件,这一节来实现兼容老的路由写法。另外两个文件改成 引用自己实现的 express 即可。看个 express 的二级路由的例子。里添加 Router。原创 2023-09-25 18:57:17 · 141 阅读 · 0 评论 -
93 # 实现 express 错误处理中间件
错误处理中间价,里面必须要有 4 个 参数(取函数的长度),放到栈的最底下。上一节实现了 express 的中间件,这一节来实现错误处理中间件。执行某一步出错了,统一规定调用 next 传递的参数就是错误信息。先看 express 实现的demo。原创 2023-09-25 02:23:34 · 457 阅读 · 0 评论 -
92 # express 中的中间件的实现
下面实现 express 中间件如图:我们需要在 Router 的前面添加中间件,它没有 route 属性,有路径跟 handler。上一节实现 express 的优化处理,这一节来实现 express 的中间件。先看 express 的中间件 demo。原创 2023-09-24 02:06:10 · 164 阅读 · 0 评论 -
91 # 实现 express 的优化处理
上一节实现 express 的请求处理,这一节来进行实现 express 的优化处理。,可以看到没有优化的时候会请求这些方法。layer 进行加速匹配 demo。批量生成方法测试 demo 如下。优化之后可以看到就没有请求了。原创 2023-09-20 01:19:31 · 164 阅读 · 0 评论 -
90 # 实现 express 请求处理
上一节构建 layer 和 route 的关系,这一节来实现 express 请求处理。测试 demo 如下。原创 2023-09-18 02:28:46 · 138 阅读 · 0 评论 -
89 # express 构建 layer 和 route 的关系
上一节实现了实现应用和路由的分离,这一节来构建 layer 和 route 的关系。先看个例子如下:路由中间件,将处理的逻辑拆分成一个个的模块。原创 2023-09-18 01:25:30 · 193 阅读 · 0 评论 -
88 # express 应用和路由的分离
上一节实现了应用和创建应用的分离,这一节来实现应用和路由的分离。然后我们新建 router 文件夹,里面添加。原创 2023-09-18 00:05:18 · 134 阅读 · 0 评论 -
87 # express 应用和创建应用的分离
每次创建一个应用,路由系统应该是毫无关系的,应该创建一个全新的路由系统。原创 2023-09-17 23:14:34 · 123 阅读 · 0 评论 -
86 # express 基本实现
下面完成这个功能,有一个默认的路由,默认找不到时会执行 404 功能,配置的路由会默认从上到下来进行匹配。文件夹,添加对应的文件。原创 2023-09-14 02:04:51 · 138 阅读 · 0 评论 -
85 # koa 使用 koa-router 以及 koa-views 实现路由视图逻辑分离
能将多个路由合并成一个路由使用 (跟 redux 里的 combineReducers 类似)中间件情况下,如果接口是 get 请求,而前端使用 post 请求,会返回。命中路径后,调用对应的控制器 controller 来处理。,提示方法不被允许 ,并在响应头有添加允许的请求方式(找不到请求地址,并且响应头没有添加允许的请求方式。下面实现一个路由视图逻辑分离例子,先安装依赖。而在不加这个中间件这种情况下,则会返回。没有分离的时候,路由视图逻辑都是混在一起的。,分离之后的写法如下。原创 2023-09-13 20:40:30 · 198 阅读 · 0 评论 -
84 # koa 实现文件上传功能
测试代码,upload 文件夹为上传文件的放置的地方。最后可以看到文件已经上传到了 upload 文件夹。中间件,然后进行类型区分开发。这里主要使用上次开发的。原创 2023-09-12 20:53:57 · 204 阅读 · 0 评论 -
83 # 静态服务中间件 koa-static 的使用以及实现
中间件可以决定是否向下执行,如果自己可以处理,那么直接处理完毕结束,如果自己处理不了,next 方法会继续向下执行。新建 public 文件夹,里面添加。,需要安装 mime。原创 2023-09-11 19:58:25 · 780 阅读 · 0 评论 -
82 # koa-bodyparser 中间件的使用以及实现
koa 中所有的异步都必须是 promise,只有 promise 才有等待效果,必须所有的 next 方法前需要有 await、return 否则没有等待效果。koa 中不能用回调的方式来实现,因为 async 函数执行的时候不会等待回调完成。将业务代码的引用自己实现的。实现一个表单提交功能。输入账号密码,点击提交。原创 2023-09-11 18:53:00 · 674 阅读 · 0 评论 -
81 # 多语言
2、前端来实现多语言(先配置好两种语言,动态切换内容),比如。3、服务端的 header 来实现切换多语言。1、一个完整多个路径来实现多语言。原创 2023-09-11 01:22:03 · 228 阅读 · 0 评论 -
80 # 图片防盗链
另外可以加上 meta 标签,不带 referer,如果网站没有 referer 会导致发送任何资源都不会带 referer。如果要实现引用我的人和我的域不是同一个,应该返回错误图片,我们应该进行校验。,我们可以看到 docker 的图片访问不了,而是展示了防盗的图片。referer 来源,表示这个资源被谁引用过,可以用来做防盗链。要展示 docker 图片的话,我们就应该去访问 访问。,可以看到图片直接打开是不会增加 referer 的。,我们可以看到图片的请求头加上了 referer。原创 2023-09-08 14:02:27 · 248 阅读 · 0 评论 -
79 # koa 相应结果设置
返回的类型可能是文件流,或者是对象的等方式,需要我们对。判断是否是 string 或者 buffer 、流、对象。的类型进行判断在返回。添加结果类型的判断设置。编写代码测试流,新建。,就会直接下一个文件。原创 2023-09-06 01:12:04 · 117 阅读 · 0 评论 -
78 # koa 中间件的实现
上上节实现了上下文的,上一节使用了一下中间件,这一节来实现 koa 的中间件这个洋葱模型。代码实现如下:核心就是组合方法的实现。原创 2023-09-06 00:20:17 · 649 阅读 · 0 评论 -
77 # koa 中间件的应用
koa 的中间件原理:会将所有的中间件组合成一个大的 promise,当这个 promise 执行完毕后,会采用当前的 ctx,body 进行结果的响应(next 前面必须要有 await 或者 return 否则执行顺序可能达不到预期)如果都是同步执行,加不加 await 都无所谓,由于不知道后续是否有异步逻辑,写的时候都要加上 await。koa 中要求每个 next 方法前面都必须增加 await 否则不存在等待效果。会取中间件第一个执行完的结果。表示执行下一个中间件。原创 2023-09-05 20:21:54 · 697 阅读 · 0 评论 -
76 # koa 上下文的实现原理
备注: 此特性已弃用,建议使用对象初始化语法或 Object.defineProperty() API 来定义 setter。该方法的行为只针对 Web 兼容性进行了规定,在任何平台上都不需要实现该方法。该方法的行为只针对 Web 兼容性进行了规定,在任何平台上都不需要实现该方法。以后使用 ctx 变量时,会很少使用原生的 req 和 res,一般使用的都是 request,reponse,或者直接使用的方式。上一节实现了 koa 基本逻辑实现以及属性的扩展,下面继续实现上下文的实现。原创 2023-09-05 00:43:22 · 140 阅读 · 0 评论 -
75 # koa 基本逻辑实现以及属性的扩展
ctx 中整合了 request 和 response,req 以及 res。:koa 中自己实现的 request 的对象,进行属性扩展。内部使用了 url 模块进行解析。原创 2023-08-31 00:11:29 · 366 阅读 · 0 评论 -
74 # koa 的基本使用
koa 是对 http 的一个封装,实现了一个 node 框架,可以根据这个框架实现自己的 MVC 框架。每个人用 koa 的方式都大不一样,无法做到约定性,所以才会有 egg 基于 koa 封装的约定性的框架。原创 2023-08-30 01:08:56 · 186 阅读 · 0 评论 -
73 # 发布自己的 http-server 到 npm
6、查看发布情况,发布成功之后,等一会,我们就能看到自己的包在 npm 上了。1、添加 .npmignore 文件,忽略不需要的文件。然后随便去一个文件夹下执行下面命令。3、切换到官方源,然后检查确认。7、更新版本,我们添加一个。检查自己的包名是否被占用。我们可以看到都生效可以了。4、登录 npm 账号。原创 2023-08-23 23:50:27 · 566 阅读 · 0 评论 -
72 # http 缓存策略
并且实现了 gzip 的压缩,下面通过前面几节学习的缓存知识来添加一下缓存。大致就是先强制缓存 10s,然后采用协商(对比)缓存,大致图如下。过了 10s 再次刷新我们可以看到变成协商缓存。我们立即刷新,可以看到强制缓存。原创 2023-08-23 20:44:37 · 593 阅读 · 0 评论 -
71 # 协商缓存的配置:通过内容
客户端第一次请求服务器的时候,服务器会把数据进行缓存,同时会生成一个缓存标识符,这个缓存标识符会被发送到客户端,客户端第二次请求服务器的时候,会把缓存标识符发送到服务器,服务器会根据缓存标识符进行判断,如果缓存标识符相同,则服务器会判断缓存是否过期,如果没有过期,则服务器会返回 304,告诉客户端使用缓存,如果缓存标识符不同,则服务器会返回 200,同时返回新的数据。比较一下再去决定是用缓存还是重新获取数据,这样会减少网络请求,提高性能。上一节使用了修改时间的方式,这一节用内容来处理。原创 2023-08-18 02:19:05 · 1248 阅读 · 0 评论 -
70 # 协商缓存的配置:通过修改时间
客户端第一次请求服务器的时候,服务器会把数据进行缓存,同时会生成一个缓存标识符,这个缓存标识符会被发送到客户端,客户端第二次请求服务器的时候,会把缓存标识符发送到服务器,服务器会根据缓存标识符进行判断,如果缓存标识符相同,则服务器会判断缓存是否过期,如果没有过期,则服务器会返回 304,告诉客户端使用缓存,如果缓存标识符不同,则服务器会返回 200,同时返回新的数据。文件,背景改成 pink,然后刷新访问,我们可以看到状态码变成 200,读取到了新的资源。然后新建 public 文件夹,里面添加。原创 2023-08-18 01:27:20 · 806 阅读 · 0 评论 -
69 # 强制缓存的配置
默认强制缓存,不缓存首页(如果已经断网,那这个页面应该也访问不到,所以首页不会被强制缓存),引用的资源可以被缓存下来,后续找缓存,不会向服务器发送请求。强制缓存不会向服务器发送请求,所以不会判断缓存是否过期,所以需要设置缓存过期时间,否则缓存永远不会过期,会导致页面修改后,视图依旧采用老的。,加了缓存头之后,css 资源第一次之后就从缓存中读取了,过了 10 s 之后才继续请求一次服务器。然后新建 public 文件夹,里面添加。不在浏览器中进行缓存,每次请求服务器。缓存但是每次都请求服务器。原创 2023-08-18 00:43:36 · 566 阅读 · 0 评论 -
68 # 中间层如何请求其他服务
前端 ajax 有跨域问题,可以先访问中间层,在通过 node 去请求别的服务端口,可以解决跨域问题。我们启动服务端的服务,然后执行中间层。原创 2023-08-17 01:06:20 · 230 阅读 · 0 评论 -
67 # 对象的处理
/ ajax 4部曲 1.创建 xhr 对象 2.开启请求 3.发送请求 4.监听状态变化。上一节学习了 form 数据的处理,这一节学习 Ajax 的方式提交数据。启动服务,点击提交就能看到请求成功,也可以自己去掉跨域头试试。// 默认如果域名,端口号,协议不一致会有跨域问题。// 浏览器自动将相应的结果转化为对象。原创 2023-08-11 02:00:28 · 174 阅读 · 0 评论 -
66 # form 数据格式化
实现一个 http 服务器 客户端会发送请求 GET POST。然后后编写测试 form 数据提交。要处理不同的请求体的类型。原创 2023-08-09 00:52:54 · 225 阅读 · 0 评论 -
65 # 实现 http-server 里的 gzip 压缩
文件用来测试压缩,里面写的都是1,大概有个 10k 的样子,两种方式执行之后都会生成压缩文件。里是否包含 gzip 来判断浏览器是否支持 gzip 压缩,如果支持就创建转化流处理。方式二:用转化流(可读可写)的方式,服务端的文件 => 压缩 => 客户端。方式一:读取文件压缩,如果文件大的话都读取到内存中,耗内存。gzip 根据替换来实现的,重复率越高,压缩后的结果越小。下面实现 http-server 里的 gzip 压缩。服务端优化都是:压缩 + 缓存。我们启动服务,去访问。原创 2023-08-05 01:40:27 · 1820 阅读 · 0 评论 -
64 # 实现一个 http-server
上一节实现了通过 commander 的配置获取到用户的参数,下面完成借用 promise 写成类的方法一节没有完成的任务,实现一个。控制台我们输入下面命令启动一个端口为 4000 的服务。是一个简单的零配置命令行静态 HTTP 服务器。我们在进入 public2 文件,里面没有。我们在进入 public 文件,里面有。我们可以点击任何的文件查看:比如。点击 public2 目录进入。点击 public 目录进入。原创 2023-08-04 01:58:13 · 1391 阅读 · 0 评论 -
63 # commander 的配置
添加 commander 相关代码。新建 bin 文件夹,下面添加。新建文件夹 63,执行。使用下面命令添加全局命令。然后就可以执行我们的命令。原创 2023-07-31 20:58:44 · 304 阅读 · 0 评论 -
62 # 借用 promise 写成类的方法
注意:处理请求是单线程(代码尽量采用异步,否则会阻塞主线程)就会导致访问时一直转,需要等待 sum 处理完毕。新建 62 文件夹,里面添加三个文件。比如:下面的写法就会阻塞,先访问。路径,实现可以直接访问到。需要先判断文件是否存在。原创 2023-07-31 01:41:56 · 271 阅读 · 0 评论 -
61 # http 数据处理
node 中的核心模块 http 可以快速的创建一个 web 服务使用 curl 请求。原创 2023-07-31 00:02:47 · 977 阅读 · 0 评论 -
60 # http 的基本概念
通常的网络是在TCP/IP协议族的基础上来运作的,HTTP 是一个子集。http 基于 tcp 的协议,在 tcp 的基础上增加了一些规范,就是 header,学习 http 就是学习每个 header 它有什么作用。原创 2023-07-28 00:32:05 · 1611 阅读 · 0 评论