yyshino blogs

yyshino大约 8 分钟

遇到的问题

回答问题先说结论

http://101.35.227.27/

跨域问题：

由于我们项目擦用前后端分离，前端和后端的服务不在同一个源（两个 URL 的协议open in new window、端口 (en-US)open in new window（如果有指定的话）和主机open in new window都相同）下，当前端访问后端接口时会产生跨域问题。

前端解决方案：

本地开发时，利用Vite/Webpack 配置代理DevServer，将/api下的接口请求，重写并代理转发到后端接口所在端口
```
  devServer: {
    port: port, 
    open: true,
    proxy: { // 配置代理
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://120.46.214.246:8080`, // 目标主机（协议+主机名）
        // target: `http://116.63.165.100:8080`, // 线上测试
        // target: `http://localhost:8080`, // 本地测试
        changeOrigin: true,
        pathRewrite: { // 路径重写
          ['^' + 'api']: ''
        }
      }
    },
    disableHostCheck: true
  }
```
1. 原理： webpack中的proxy只是一层代理，用于把指定的path，代理去后端提供的地址，背后使用node来做server。可能有人疑惑，为什么只适用本地开发？因为该技术只是在webpack打包阶段在本地临时生成了node server，来实现类似nginx 的proxy_pass的反向代理效果
  proxy工作原理实质上是利用http-proxy-middleware 这个http代理中间件，实现请求转发给其他服务器。例如：本地主机A为http://localhost:3000，该主机浏览器发送一个请求，接口为/api，这个请求的数据（响应）在另外一台服务器Bhttp://10.231.133.22:80上，这时，就可以通过A主机设置webpack proxy，直接将请求发送给B主机。
部署到云服务器上时，利用Nginx反向代理，重写/api路径下的请求，代理转发到相应后端接口地址
- 原理：反向代理（Reverse Proxy）方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器。
  举个例子，比如我想访问 http://www.test.com/readme，但www.test.com上并不存在readme页面，于是他是偷偷从另外一台服务器上取回来，然后作为自己的内容返回用户，但用户并不知情。这里所提到的 www.test.com 这个域名open in new window对应的服务器就设置了反向代理功能。
  结论就是，反向代理服务器对于客户端而言它就像是原始服务器，并且客户端不需要进行任何特别的设置。客户端向反向代理的命名空间(name-space)中的内容发送普通请求，接着反向代理服务器将判断向何处(原始服务器)转交请求，并将获得的内容返回给客户端，就像这些内容原本就是它自己的一样。
  正向代理，既然有反向代理，就肯定有正向代理。什么叫正向代理呢？
  正向代理（Forward Proxy）通常都被简称为代理，就是在用户无法正常访问外部资源，比方说受到GFW的影响无法访问twitter的时候，我们可以通过代理的方式，让用户绕过防火墙，从而连接到目标网络或者服务。
  正向代理的工作原理就像一个跳板，比如：我访问不了google.com，但是我能访问一个代理服务器A，A能访问google.com，于是我先连上代理服务器A，告诉他我需要google.com的内容，A就去取回来，然后返回给我。从网站的角度，只在代理服务器来取内容的时候有一次记录，有时候并不知道是用户的请求，也隐藏了用户的资料，这取决于代理告不告诉网站。
  结论就是，正向代理是一个位于客户端和原始服务器(origin server)之间的服务器。为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标(原始服务器)，然后代理向原始服务器转交请求并将获得的内容返回给客户端。
- [通俗易懂的Nginx工作原理 - 腾讯云开发者社区-腾讯云 (tencent.com)](https://cloud.tencent.com/developer/article/1427219#:~:text=通俗易懂的Nginx工作原理 1 1.1 概念反向代理（Reverse Proxy）方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器。 ... 2,... 7 3.2 一个简单的HTTP请求 ... 8 3.3 请求完整处理过程)

选择node-sassopen in new window的版本

node版本与node-sass的版本需要对应。这一点非常重要，版本不对应会出现各种各样的问题，导致node-sass下载失败。由于我使用的node版本是14.16.0，所以选择node-sass 4.14.1。

动画图片来源

图标字体：阿里巴巴矢量图标

svg可伸缩矢量图形：使用的是unDraw免费开源图形库

动态图片来源lottiefiles，轻量级的，可扩展的动画，为您的广告和社交媒体lottiefiles带走了复杂的运动设计。它可以让你以最简单的方式创建、编辑、测试、协作和发布Lottie。

持久化存储用户信息

页面跳转时，你的用户的导航栏的用户信息如何获取？

通过登录时获取的用户信息，然后存储在localStorage之中，页面跳转时在Mounted中调用localStorage.get()传入key进行获取。

增/改。登录后获取用户信息，通过调用localStorage.setItem()传入key和用户信息对象进行存储。除非手动删除或者设置过期时间，否则不会因浏览器的关闭而清空。
查。需要获取时调用localStorage.getItem()传入key，获取相应对象。
删。localStorage.removeItem()

ElementUI

无限滚动（Infinite Scroll）

触底触发load()方法
load()方法中添加新的数据
当没有数据可以添加时，显示触底动画

骨架屏的实现

预先编译好一段相同结构的纯HTMLCSS代码
通过v-if这个Vue指令，在数据还获取的这段时间展示预先编译好的这段代码，获取到之后取反标识，展示我们的帖子数据。

浏览器在获取和渲染大量的数据时，是需要时间的，而这段时间页面通常会显示白屏。为了解决这个问题，我们通过预先编译好一段相同结构的纯HTMLCSS代码，然后定义一个标识（标识数据是否获取到了），通过v-if这个Vue指令，在数据还获取的这段时间展示预先编译好的这段代码，获取到之后取反标识，展示我们的帖子数据。

文件的上传功能模块

短篇不支持富文本，而长篇支持富文本。逻辑这部分基本相同。

文件上传逻辑

添加请求头 'Conten-Type': "multipart/form-data"，由于上传文件需要一定时间设置timeout超时时间为180秒，保证文件上传的成功性。
文件数据转换为FormData格式
调用后端接口上传文件

文件上传时的异常处理：

文件上传成功，但发布失败，此时调用oss文件删除接口
文件上传失败

帖子详情查看

逻辑：通过获取文件后缀，进行判断，动态渲染目标文件。

文件预览

图片
- 通过嵌入img标签
视频
- 通过第三方库Video库
文档类
- 通过嵌入IFrame标签，提供文档链接，使用微软提供的Office Online进行预览
- 使用微软提供的Office Online平台只需要一个网址即可在线查看Xls,doc,PPT等文档
```
http://view.officeapps.live.com/op/view.aspx?src=要查看的文档地址
```

搜索功能

调用后台接口获取数据

输入搜索信息，通过JavaScript 中的include查找搜索信息、filter方法过滤数组。动态搜索帖子

后台

地图显示

通过百度地图开放平台获取的API key，结合Bmap插件，由ECharts生成。

百度地图审图号：

ECharts图表展示

通过传入ECharts配置文件，调用后端接口获取数据，由ECharts初始化并渲染图表。

地图是通过百度开放平台获取API key，结合Bmap插件和ECharts渲染地图。

导出Excel

调用接口设置请求头 responseType:'blob'接收后台传递过来的文件数据，存入blob对象中
通过window.URL.createObjectURL(blob)传入blob对象生成url
动态创建a标签接收接收blob url，设置download属性，模拟a标签点击事件，下载Excel文件
最后删除a标签

解决问题

联盟链特点：

既可以

成本可控

# 遇到的问题

# 跨域问题：

# 选择node-sassopen in new window的版本

# 动画图片来源

# 持久化存储用户信息

# ElementUI

# 无限滚动（Infinite Scroll）

# 骨架屏的实现

# 文件的上传功能模块

# 帖子详情查看

# 搜索功能

# 后台

# 地图显示

# ECharts图表展示

# 导出Excel

# 解决问题