1.前期准备

前言

最近接了一个某公司的首页网站项目，网站内容很简单，与常规的公司首页相同，需要显示视频、图片文字等内容，可以进行表单提交，并有配套的后台管理系统能够管理用户提交的表单，以及可以对页面的元素进行配置。写下本次博客的目的是为了记录整个开发过程中的经验之谈，以及一些踩坑经验。接下来简述一下前期的准备吧。

项目设计

前端界面

项目分为前后端设计，由于后期需求的增加，前端做了pc端以及移动端两个页面，使用html5以及js实现。涉及到版权问题，就暂时不展示页面效果了，大致的布局图如下：

整个页面中的文字、视频以及图片要求能够进行配置修改，这也是本次开发中消耗时间最多的部分。页面支持英、法、德三国语言切换。

管理端界面

管理端借助了Guns框架进行快速开发，Guns是一款国内优秀的开源项目，用于做后台管理系统非常合适，基于Springboot，界面使用的是layui前端框架，集成了许多功能，如基于springsecurity的权限管理、富文本编辑器等等。框架本身已经具备较为完整的功能，数据库也有搭建完毕。详细介绍可去他们的官网自行查看：Guns 后台管理系统的界面都大同小异，就不再展示了。

流程介绍

项目流程较为简单：

1.前端从后台开放的接口读取页面各元素的配置信息，并进行显示

2.前端向后台提交表单

3.后台对前端的配置项可进行管理、修改，对表单可进行修改以及导出。

使用技术

由于后台借助了Guns框架，基本上就是在这一框架的基础上仿照功能完成页面的配置管理和前端提交的表单管理,也就没有很值得记录的技术，这里就不详细阐述了。

前端数据获取

首先是前端的技术，页面的布局使用html以及css完成，其中的数字滚动、图片轮播等采用第三方的js完成，页面上的数据读取使用的是自己手写的jquery，异步请求调用接口获取到数据后依次对页面上的元素进行设置。其实有更好的办法是采用thyemleaf模板直接在页面上赋值，但本人对Guns框架并没有吃透，在配置thyemleaf时就遇到了一些问题，后面也就放弃了这种方式。

数据库表设计

在Guns自带的数据库中添加了两张表，分别是用于存储页面的配置信息的配置表，以及存储用户提交表单的表单表。

重点说一下配置表吧，页面上的每项配置对应表中的一行数据，其中包括文字、视频或是图片。文字直接存储就好了，而图片和视频则存储的是访问地址，后面会具体说到。而操作人员在操作系统时是能选择不同的配置进行修改的，这里我将配置项插入了数据字典中，通过在配置表中设置一个字段与字典表关联起来，这样在管理配置时就能实现配置项的灵活修改。

静态资源读取

在上面有提到，页面中存在视频以及图片，而且是可以进行替换的，最初设计是想通过文件上传的方式，上传至本地，然后返回一个本地的地址进行读取，但在后期部署上服务器之后，发现这种方式并不是很友好。于是最终采用了阿里云对象存储OSS的方式，将图片上传至OSS，返回访问地址进行读取。

服务器搭建

由于开发时间较紧，并且对方面向的用户群体在海外，于是服务器采用了腾讯云的美国服务器，以及阿里云的美国域名（为了省去备案过程），服务器系统采用CentOS 7，为了简化部署过程装上了宝塔控制面板，并使用Nginx反向代理部署了SSL证书（对方说想解决一下网站不安全的问题。。。），顺便一提的是宝塔面板中的Nginx是一个小坑，后面会详细说明。