前言
本篇将记录整个项目开发中遇到的一些坑，以及学到的技术，本人技术有限，如有遇到不专业之处请多海涵。。。。
关于接口开放
前面有说到，本项目前端的数据是从从后台开放的接口取得，而目Guns框架是具备权限管理功能的，并且对接口的放行也做了权限管理，需要在系统中将不需要过滤的接口填入，才能请求到该接口。而目前最新版的框架也是将不需要过滤的url存在数据库的一张名为sys_config表中了
通过逗号将放行的接口隔开，即可完成放行操作。在刚接触到这个框架时，也是研究了好久，接口死活没法请求到，在项目中也是各种全局搜索，最终在数据库中找到了解。
关于文件上传
因为前端涉及到图片以及视频，那么文件上传功能是必不可少了。起初是设计将前端需要的图片和视频存在本地进行读取，但部署上服务器通过外网访问时就出现了速度缓慢的问题，进而采用了阿里云的对象存储OSS进行优化。（当然是需要收费的），这里先说起初存在本地的方案吧。Guns本身是具备文件上传功能，前端采用了layui的标准文件上传方式以及富文本编辑器tinymce，layui的方式非常简单，就不详细介绍了。而富文本编辑器的使用其实都大同小异。基本上包括如下几点：
1.先引入相关的js文件
2.执行一个初始化方法，在初始化方法中配置一些参数以及指定上传路径
3.编写回调函数
这里稍微分享一下使用tinymce遇到的一些小问题：
首先是初始化它，这里我配置了这些参数：
tinymce.init({
selector: ,
height:,
branding:,
language: ,
plugins: ,
toolbar:,
toolbar_drawer: ,
images_upload_url:,
images_upload_base_path:,
file_picker_types: ,
file_picker_callback: function (callback, value, meta)
每个参数具体是用于做什么就不一一介绍了，这个插件的官方文档有介绍，比较人性化的是有大神将他的官方文档还做了汉化版，在此贴出地址：http://tinymce.ax-z.cn/
这里重点说的是这几个参数：images_upload_url、images_upload_base_path、file_picker_types、file_picker_callback
tinymce是支持许多不同类型的文件上传的，但前提是需要在plugins参数中指定，比如你想支持图片上传，就需要在plugins中填入image，不同的功能用空格隔开。
images_upload_url：从名字不难看出，这个参数是用来指定图片上传路径的，tinymce中单独将图片上传做了一个参数，在plugins中填入了image以及在images_upload_url参数中指定了上传路径，并编写好后台上传逻辑，就可以完成上传图片功能了。不需要增加其他配置，非常方便。这是官方文档中的步骤：
这一种方式实现上传图片功能非常简单，但如果我们需要在上传图片后还执行其他的功能，那么这种方式就无法满足需求了，此时就需要我们自定义上传逻辑了，使用images_upload_handler方法即可 ，这是一个带有三个参数的方法，第一个参数为我们需要上传的图片，而后两个参数分别为上传成功和失败后的回调方法，官方文档中给了一个例子，是可以直接使用的。只需将上传路径改为我们自己的，以及在回调函数中将参数改成我们后台返回的参数名即可。
file_picker_types：这一参数是用来指定tinymce允许上传的文件类型，可以是多种，比如图片、视频、文件等，使用这种方式的话就需要配合上面的自定义上传逻辑一起使用。由于图片上传功能是有自己独特的配置方式，而使用这一参数也可以完成上传功能，也就是说图片上传可以通过两种方式实现。
由于项目需要上传视频，那么首先在tinymce初始化是得在plugins以及toolbar中添加media配置，以及在images_upload_handler 中允许上传media，官方文档中这样写的：
file_picker_callback：这一方法是和上面的file_picker_types参数搭配使用的，即上述配置中的文件上传后执行的回调函数，而只有当我们编写了这个方法，上传视频时的对话框才会出现上传图标
富文本编辑器内容回显问题
使用过富文本编辑器的小伙伴都知道，编辑器中的内容实际上是一段html代码，比如你输入一段纯文本，那么就会给你自动在文字收尾加上p标签，而图片则是img标签等等，而在本项目中，前端需要读取的数据就是从富文本中存进数据库的，而由于它会自动生成标签，那么在前端显示一定会出现问题，所以需要进行一些处理。
1.是纯文本进行去p标签处理，这个问题比较好处理，加入一项配置forced_root_block:false即可。
2.图片与视频存入数据库时我们只需要文件路径， 那么我们在后台返回过来时，就声明一个变量接收它，最后将其替换成我们需要存进数据库的变量即可。
3.视频预览问题：tinymce上传视频后默认会生成一个img标签，像是这样：
而想实现预览功能，在网上我也寻找了许多方法，有提出改动源代码的，有提出手写功能的，但本人手残，怕一个不小心啥也没改成反而还改坏了，但最终在一个大神那找到了好办法，废话不多说直接上代码：
media_url_resolver: function(data, resolve) {
console.log(data.url);
try {
let videoUri = encodeURI(data.url);
let embedHtml = `<p>
<span
class="mce-object mce-object-video"
data-mce-selected="1"
data-mce-object="video"
data-mce-p-width="100%"
data-mce-p-height="auto"
data-mce-p-controls="controls"
data-mce-p-controlslist="nodownload"
data-mce-p-allowfullscreen="true"
data-mce-p-src=${videoUri} >
<video src=${data.url} width="100%" height="auto" controls="controls" controlslist="nodownload">
</video>
</span>
</p>
<p style="text-align: left;"></p>`;
resolve({ html: embedHtml });
} catch (e) {
resolve({ html: "" });
}
}
代码很简单，首先是加入了一个配置media_url_resolver，然后获得视频上传后的地址，并将其以span标签的方式追加到富文本中完成视频预览功能。
关于静态资源读取的问题
Guns框架与传统Springboot配置静态资源的方式稍有不同，并不是在application.yml中进行的配置，而是在SpringMvcConfiguration这个类中配置，且默认路径也与传统的有所不同，这也是为什么我使用thymeleaf出现问题的原因。。
前端视频自动播放的问题
对方要求头部的视频能够在页面打开时就自动播放，原本这是一个很简单的问题，在media标签中设置autoplay便可完成，但在使用谷歌浏览器时，便出现了问题，视频无法自动播放，后面查看控制台，发现报了这么一行错误：
后面查阅资料发现，是新版的谷歌浏览器不再允许视频自动播放，说是为了节省流量，或是什么怕吵到用户。。而解决的办法很多，最简单的方式就是设置静音属性muted，即自动静音播放。或是通过一些巧妙的js实现。
转义符的问题
在编写一个html文件时，不知道是哪里没有写对的原因，项目运行时将html文件中的@符号识别成了某个注解，由于该注解不存在便报错了，于是我用最直接的方式——转义符避开了检测，此处附上一位大佬写的文章：
https://blog.csdn.net/jiegeng2233/article/details/53189138?t=1509284148660&utm_medium=distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-0&spm=1001.2101.3001.4242
获取视频的问题
不同于图片，从后台获取视频时，需要设置响应类型为MP4，否则会报文件类型不支持的错误。
one-task-blog-baidujs_baidulandingword-0&spm=1001.2101.3001.4242
获取视频的问题
不同于图片，从后台获取视频时，需要设置响应类型为MP4，否则会报文件类型不支持的错误。