嘉兴企业网站建设系统,hxsp最新域名是什么,前端培训需要多久,龙岗爱联有学网站建设1.引言 最近确实体会到了前端找工作的难处#xff0c;不过大家还是要稳住心态#xff0c;毕竟有一些前端大神说的有道理#xff0c;前端发展了近20年#xff0c;诞生了很多leader级别的大神#xff0c;这些大神可能都没有合适的坑位#xff0c;我们新手入坑自然难一些不过大家还是要稳住心态毕竟有一些前端大神说的有道理前端发展了近20年诞生了很多leader级别的大神这些大神可能都没有合适的坑位我们新手入坑自然难一些前端现在对于新手的高要求也能够理解只能硬着头皮完善自我了。而且距离自己3月20找工作底线时间还有两周同花顺和恒生电子的笔试在还进展中实在不行真得二战我倒也不怕。闲来无聊写一篇“应用文”吧不过最近应用文会大幅减少毕竟讲不清楚原理才是真得凉凉。
2.场景描述 我们经常遇到前端列表需要进行分页处理一般前端会说那是后端的任务但是其实前端也是有工作量的后端的分页任务其实不大如果会一点sql语句就明白了一句sql就能够实现当然我这里没有包括必要参数检测和优化、错误反馈、防注入等内容。 在实现上对于后端而言主要是怎么告诉前端已经没有数据了对于前端而言怎么确定需要再次请求数据了另外前端还需要对数据进行缓存提高性能。
3.后端设计与实现 后端代码如下主要做的是前端传入参数的检测和数据是否查询完毕了。说一下思路参数检测可以利用强制转换来判断传入的参数的类型包括是否传入、传入的参数是否正确、请求的数据量是否合理如果不做限制想想select *吧。在查询结束上我这里分了两次查询就是额外请求一次数据库查询当前符合要求的被分页获取的数据的总数。实现的代码如下
async function getMatchList(ctx) {let { id, page, limit } ctx.query;//这里对分组id详细说明由于前端页面有多个分组所以这里多一个分组idid Number(id).toString() NaN ? 1 : Number(id);//分组信息默认请求第一组的信息page Number(page).toString() NaN ? 1 : Number(page);//分页默认请求第一页limit Number(limit).toString() NaN ? 5 : Number(limit);//分页默认请求5篇let total await countByGroup(id);//获取总数//console.log(输出请求参数, id, page, limit);await matchList(id, page, limit).then((data) {let isTotal limit * page total ? 1 : 0;sendData(ctx, {list: data,isTotal});}).catch((err) {console.log(输出错误信息, err);throwError(ctx, -1);});
};接下来贴的是与数据库交互的代码因为我接触thinkphp6比较早对于thinkphp6的MVC设计模式影响比较深刻所以一般写后端会自觉将与数据库交互的内容从controller层抽离这样代码结构也更加清晰当然你如果喜欢使用ORM架构的话nodejs是有一个叫Sequelize的第三方依赖包的但是这个不是很火哈。
//这里是对数据库的连接每请求一次连接一次数据库
//不是的我这里使用的是单例模式
//构造了一个数据库连接的单例类如果有连接实例存在直接使用否则实例化一个数据交互类
const MysqlConnect require(../config/connect-mysql);
const mysqlDB new MysqlConnect();
async function countByGroup(group_id) {return new Promise((resolve, reject) {const sql select count(*) sum from match_list where group_id ${group_id};mysqlDB.query(sql, (err, result) {if (err) {console.log(数据表match查询数据出错, err);reject(err);} else {resolve(result[0].sum);}})})
}
async function matchInfo() {return new Promise((resolve, reject) {const sql select id,banner,tag from match_group order by id asc;mysqlDB.query(sql, (err, result) {if (err) {console.log(数据表match查询数据出错, err);reject();}resolve(result);})});
}
async function matchList(group_id, page, limit) {return new Promise((resolve, reject) {const sql select id,swiperList,title,detail,goods from match_list where group_id ${group_id} order by id asc limit ${(page - 1) * limit},${limit};mysqlDB.query(sql, (err, result) {if (err) {console.log(数据表match查询数据出错, err);reject();}resolve(result);})});
}
module.exports { matchInfo, matchList,countByGroup };4.前端的实现与缓存 可能大家更关心前端怎么实现的吧前端的实现有一个关键点就是监听滑动事件实现上使用的是 scrollpageScroll然后监听event对象里面的3个重要的属性scrollTop、clientHeight 和scrollHeight。解释这三个参数的含义举例大盒子顶部的举例、用户视口可视区、具备滑动能力的盒子的总高度在dom渲染之后这个属性可以自动更新。
pageScroll(e) {if (e.target.scrollTop e.target.clientHeight 20 e.target.scrollHeight) {//重新发送请求获取新一批文章this.currentPage;console.log(输出数据, this.isTotal);if (!this.isTotal) {showLoadingToast({message: 加载中...,forbidClick: true,loadingType: spinner,});this.getMatchList(this.currentTabId, this.currentPage, this.limit);} else {showToast({message: 再怎么找也没有啦~,wordBreak: break-word});}}}注意为了能够有效监听到这些参数需要对css稍微设置一下
.share-container {background-color: #181818;padding: 0px 10px;padding-bottom: 60px;height: calc(100vh - 90px);//底部留白设计避免不方便阅读最下面的内容//同时也能够增加一个没有更多的友好提示overflow: scroll;
}.share-container::-webkit-scrollbar {//这个是为了防止默认滚动条的出现影响了flex布局直接给隐藏掉display: none;/*Safari and Chrome*/
}如今的前端会这些可不够我这里展示一下期望有的功能 我这里的目标平台是h5vantUI组件库,如果是uniapp或者小程序的话直接提供了用户滑动触底函数更简单了都不用自己监听。上面的效果也有一个是前端的比较常用的——吸顶式布局position:stikcy不细说了在切换tab的时候可以采用缓存每次切换之后存到localstorage里面存储方式推荐用JSON.stringify来存读完之后JSON.parse()转回来你可能想说要是小程序呢在uniapp和微信小程序都是提供了缓存读写的可以查看对应的用法。需要注意的是为了保证数据安全可以使用一个简单的加密解密比如crypto-js依赖不够的话再撒点“盐”能够防止用户直接查看你存储的信息。
5.代码优化方案 因为我这里写的是毕设的一部分代码可能在企业应用上看不够严谨还有很多可以优化的这里补充一些方案 1在数据加载的时候可以使用骨架屏因为如果是涉及到图片等加载比较慢容易出现比较严重的闪频特别是图片内存比较大的时候 2因为这里使用的是分页可滑动“懒加载”请求出战因为这里有滑动“虚拟列表”请求出战 3因为这里有缓存需要考虑到缓存的有效期问题如何刷新缓存当然上面我使用的是切换tab的时候写缓存和读切换目标的缓存在单纯数据追加上还是说的过去但是如果信息被修改了就会出现不及时的情况这里有一个不是很好的方案全局配置多加一个网站配置请求决定是否使用系统缓存的变量系统资源更新时修改提示放弃使用缓存 4一般列表的图片等可以考虑CDN部署提均衡多地区的用户体验也就是让远离服务器的用户能够更快获得响应 5这里的localstorage有些情况下不能使用可能需要使用redis再来缓存数据当然这是后端的任务同时可以利用redis来对请求满足要求的列表数量总数缓存一下减少额外查库其实查的是同一个数据。 最后祝各位找工作的好兄弟们加油坚持就是顺利
