本文是关于企业门户网站和后台管理系统开发的总结，使用了TP5+Vue+Fastadmin技术栈，开发周期从2023年10月20日至11月19日。前端涉及animate.css等动画库，后端涉及数据处理和数据库设计。在前端遇到的挑战包括组件库选择和动画渲染时机，后端问题主要集中在技术选型和数据处理。项目中强调了前端的懒加载和后端的分页、数据处理等策略。
项目介绍
项目总结
企业门户网站+后台管理（TP5+Vue+Fastadmin）采用最熟悉的技术栈，学习成本较低。
开发周期
2023/10/20——2023/11/1（开发周期）
2023/11/1——2023/11/19（部署、测试、改需求）
关于前端
动画库：animate.css、wow.js、aos、swiper.js(轮播js)
组件库：elementUI、vuetify、bootstrap、fastadmin
资源库：Google Font、Font Awesome Icons
前端设计
弹窗、锚点定位、轮播图、矢量绘图（svg）、交叉渲染（index%2）、悬浮动画、加载动画、定位动画、滚动变色、镂空效果、视觉落差、cookie跳转、图片预览、节点渲染（富文本渲染）、时间戳转换及时间获取、动态修改页面title。
问题思考
1.前期拥抱bootstrap主题，发现纯css库不如组件库好用，在vue兼容方面不合适。
2.后期element ui短板，内容较少过于基础，引入vuetify组件库，同时发现小部分样式冲突（vuetify和自定义类名冲突导致）。
3.ajax数据传递后，发现动画和渲染数据的时间问题，渲染时间事件慢于动画渲染，此处加入定时器解决。同时推荐渲染数据的ajax数据请求设置在mounted中。（定时器的硬伤：受网速影响，定时器设置过长又会影响用户体验）。
4.图片懒加载提高加载效率。
5.样式文件集成度较高，增加了内联样式的覆写，降低了一定的利用率。
6.MVC为单体架构（模型-视图-控制器都在一个应用内），虽是前后端分离的设计模式，但是开发过程中耦合度不低。可以进一步降低耦合度，拥抱前端框架项目结构。
7.善用控制台，监测cookie、http请求，以及快速调整样式。宝塔在线修改前端，真的让人心累。效率太低！过程冗杂！留意硬盘缓存，项目迁移，资源请求失败可能是原始硬盘缓存未更新。
关于后端
后端设计
请求集成、随机读取、分页、数据处理（生成、遍历、计数、分割、去重、转换类型、关联、过滤）、模糊查询、数据库设计（数据类型多测试！贴合生产环境！bigint存放时间戳、varchar（5000）/longtext存放多图地址、text存放链接地址、外码约束需谨慎可以不设置）、分片上传（大文件上传必要手段，不可暴力调参）、全路径配置CDN（全路径暴力破解前端路径读取问题）、框架源码修改（部分）、回显设置、伪静态配置。
问题思考
1.技术选型需要尽快，快速开发不建议使用不熟悉的技术。探索研究耗费时间未知。
2.组件库不合适尽快换，这个成本极低，切勿过多花费时间。
3.善于网络资源，别人写好的组件、模块什么的，很高效。
4.流程建议：本次先前端、数据库、后端、修改前端；下次建议先建立数据库、前端、后端。前端返工工作量不小，较为耗时容易出bug不方便排查。
5.管理模式：起初将所有视图页面建立在一个文件下，最后二级文件无法妥善管理。应分模块处理，最好使用系统项目开发，贴合符合项目规范（如Vue），开发SPA页面。样式文件拆分可细化。
6.测试需要头脑，测试用例的设计需要巧妙。一些逻辑细节问题没有思考到，这个时候就需要测试发挥作用。本次遇见的问题（数据类型有误——数据类型不匹配或长度不合适、条件测试、路径测试）。
Fontend Memo
Code Memo
//背景图片绑定
<div :style= " {background: 'url ('+ img +')'，backgroundSize:cover }" ></div>
<div :style="{ backgroundImage: 'url('+ ModalOne.imageUrl +')' }" ></div>
//导航栏滚动改变背景颜色
<script>
function scroll() {
var scrollTop = $(window).scrollTop(); //获取当前窗口距顶部的高度
if (scrollTop > 0) {
$("#Navbar").css("background-color", "black");
} else {
$("#Navbar").css("background-color", "#FFFFFF00"); //透明色
}
}
$(window).on("scroll", function () {
scroll();
});
</script>
//点击跳转，锚点定位到id的位置
<script>
function scrollToView() {
document.getElementById("ModalTwo").scrollIntoView({
block: "start",
inline: "nearest",
behavior: "smooth",
});
}
</script>
//hove 动画 引入
<!-- animate -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<style>
.footerMTItem:hover {
animation: heartBeat;
animation-duration: 2s;
}
</style>
//svg>path与div存在间距无法消除，Negative Margin（负边距） 有效
//Google Font图标大小修改，属性为fontsize
//视觉落差
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>视差转动</title>
<script type="text/javascript"></script>
<style type="text/css">
.article {
/*heigh重要为了看结果,高度差比较大的话,结果会很明显*/
height: 800px;
/*其他参数只是为了保证图片不反复的填充溢背景空间,重要关注background-attachment: fixed*/
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
/*两个地区离别引入两张背景图*/
.section1 {
background-image: url(./1.png);
}
.section2 {
background-image: url(./1.png);
}
</style>
</head>
<body>
<div class="article section1">啊啊啊啊</div>
<div class="article section2">噢噢噢噢</div>
<div
style="height: 500px; width: 500px; background-color: antiquewhite"
></div>
</body>
</html>
//效果惊艳的渐变
<style>
.background {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.background:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(30deg, rgba(255, 255, 255, 0.6) 0%, #0E5DC4 100%);
opacity: 0.9;
}
</style>
/*图片裁剪方式
属性值 说明
fill 默认值，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain 保持原有尺寸比例。内容被缩放。
cover 保持原有尺寸比例。但是部分内容可能被裁切。
none 保留原有元素内容的长度与宽度，也就是说内容不被重置。
scale-down 保持原有尺寸比例，内容的尺寸与none或者contain中的一个相同，取决于他们两个之间谁得到的对象的尺寸会更小些。*/
<style>
.image {
/* 图片容器宽高 */
width: 255px;
height: 120px;
/* 指定裁剪模式(详见上方) */
object-fit: cover;
}
</style>
Error Memo
Error in render: “TypeError: Cannot read property ‘xxx‘ of undefined
值异步未及时获取/用settimeout、ansy、watch等延迟mounted挂载/v-if条件判断进行渲染。
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with
标签未闭合。
json返回[object Object]
如果是console.log输出JSON.parse的结果的话， 查看下console.log里是否是“+”拼接的话， 换成“,”即可。
Vuetify组件不生效，引入CDN后缺少对象创建
Vuetify内置.row类名，和自己设定的类名冲突了……style内联属性覆写
Backend Memo
Code Memo
TP5和TP6语法有差异。比如，视图渲染的方法:
tp5：$this->fetch();
tp6： view::fetch();
//需要引入文件如下
namespace app\controller;
use think\facade\View;
use think\facade\Db;
use app\BaseController;
结构明晰：模块、控制器（文件首字符大写）、方法
引入文件 namespace app\模块\controller;
use think\Db;
use think\Controller;链接数据库配置文件、debug打开（config.php）
分页（limit）
随机搜索（->orderRaw("rand()")）
数组遍历整合数据结构 foreach($array as $index =>$item){} ; //遍历
array_push($newMember) ; //向数组最后追加一条数据
array(‘name’=>$name) ; //新建数组，可指定数据结构
explode(',', $item['images']) ; //分割字符串
implode(',', $item['images']) ; //数组转字符串
array_unique($array); //一维数组去重
array_unique($array,SROT_REGULAR); //二维数组去重
array_slice($array,0,20); //分割数组（数组，起点，终点）
count($array); //tp5计数函数，而非sql语句中使用
连接符使用.
Error Code
数组越界
参数类型不符（String、Array混用）
php报错，百度解决，注意逻辑即可。
分片报错
1.admin/controller //页面配置php文件，继承自admin/library/traits/Backend.php。对其进行覆写自定义。
2.admin/view //页面视图文件，默认为edit.html、add.html、index.html，修改其相关组件，常用属性：data-source="page_tag_child/index" data-field="tag" data-multiple="true" class="form-control selectpage"name="row[tags]" data-rule="required"。
3.public/assets/js/backend //页面对应js文件，修改数据源相关设置。
4.extra/upload.php //修改文件上传配置'chunking' => true。
5.
data-chunking=true data-maxsize="1024M" //对应页面控件添加。
6.application/extra/upload.php里的maxsize的值。
7.接着修改PHP上传限制，修改你服务器运行环境的php.ini的max_execution_time=300、upload_max_filesize=100M、post_max_size=100M三个配置值。
8.如果使用Nginx还需要修改Nginx的配置client_max_body_size 100M。
9.修改配置后务必重启Web服务和清浏览器缓存。
注意：安装扩展fileinfo
ThrowableError in File.php line 169 致命错误: Call to undefined function think\finfo_open()} /
PS：nginx配置和php配置可以在相关面板
或 /www/server/nginx、/www/server/php/74/etc/php.ini 配置。
完整URL
extra/upload.php //修改文件上传配置
'cdnurl' => 'https://www.xxx/public',
'fullmode' => true,
服务器站点配置问题
1.ssh远程登录、下载宝塔面板（使用服务器自带远程登录也方便）
2.服务器端口安全组规则配置
3.登录面板、下载中间件、服务器搭建
4.服务器端口安全组配置（如nginx）
注意1：下载中间件时服务器可能会重启冷却，导致宝塔登不上！之前一个多小时登不上宝塔
可能是这个原因
注意2：面板配置ssl登录需要查看最新生成的地址（其实就是变成了https）
伪静态配置
可以在框架中配置、或者nginx中配置
这次配置入口文件复制到了根目录（很关键，方面好用），配置完之后直接访问域名即可。
location ~* (runtime|application)/{
return 403;
}
location / {
if (!-e $request_filename){
rewrite ^(.*)$ /index.php?s=$1 last; break;
}
}
域名配置
首先域名解析，域名备案，若未备案网站配置后无法正常访问，可能还需要删除解析过程。
服务器安全组配置，然后nginx的配置需要配置ssl on 并listen 443端口，才可以访问https。
无法访问域名时，可以分发一个端口使用ip地址访问。
ssl证书一般与域名对应，但也有通用ssl证书。
碎碎念
第一次一个人独立完整进行项目开发，收获颇丰。很高兴，也需要注意多测试！这次的测试和用户体验不算特别好。以及！多写注释！！！尤其是后端！！！
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
