admin 管理员组文章数量: 1086019
2024年3月12日发(作者：mediumtext默认值)
ISSN1009-3044
ComputerKnowledgeandTechnology
第17卷第10期(2021年4月)
电脑知识
与技术
Vol.17,No.10
April
2021
E-mail：*************.cn
ComputerKnowledgeandTechnology
电脑知识
与技术
http：//
Tel：+86-551-6569
基于jQuery的电子工资条前端页面设计与开发
曾玉红
（江西服装学院，江西南昌330201）
摘要：企业微信，作为一种高效办公平台，已经被各行各业广泛使用。值得一提的是，企业微信支持企业内部应用开发，因
此企业管理员可以根据企业微信API开发个性化办公应用。如今一些学校也紧跟时代，开通了企业微信，以此来提高学校
的服务水平。根据江西服装学院智慧校园的建设需要，同时为更好地服务教职工，在企业微信API的基础上，学校的网络
与信息化管理中心部门开发并实现了电子工资条应用小程序。该应用小程序的前端页面采用了jQuery和Ajax技术相结
合的方式，以提高数据加载的效率和前端开发效率。
关键词：企业微信；电子工资条；应用小程序；前端开发；jQuery；Ajax技术
中图分类号：TP311.5文献标识码：A
开放科学（资源服务）标识码（OSID）：
DesignandDevelopmentofFrontEndPageofElectronicPayrollBasedonjQuery
ZENGYu-hong
(JiangxiInstituteofFashionTechnology,Nanchang330201,China)
文章编号：1009-3044(2021)10-0079-02
Abstract:Asahighlyefficientofficeplatform,rthmentioning
thatEnterpriseWeChatsupportsenterpriseinternalapplicationdevelopment,soenterpriseadministratorscandeveloppersonal⁃
ys,someschoolsarealsokeepingupwiththetimesandopening
ingtotheconstructionneedsofthesmartcampusofJiangxiInstitute
ofFashionTechnology,andatthesametimetobetterservethefacultyandstaff,basedontheenterpriseWeChatAPI,theschool's
Network&InformationManagementCenterdepartm
front-endpageoftheapplicationappletusesacombinationofjQueryandAjaxtechnologytoimprovedataloadingefficiencyand
front-enddevelopmentefficiency.
Keywords:enterpriseWeChat;electronicpayroll;applicationapplet;webandmobilefront-enddevelopment;jQuery;Ajaxtechnol⁃
ogy
1背景
随着时代的发展，工资条形式逐步发生变化。由于企业微
信的出现，各类第三方应用小程序也随之而来，常见的就有公
[1]
告、考勤、请假、报销等。而公司要想使用优质的第三方应用
小程序就要付出一笔费用，因此公司内部需要开发属于自身的
内部应用小程序来减免一部分开销。文章接下来主要是对电
子工资条前端页面的设计与开发进行详细的介绍。
it_。
移动端要实现普通用户查询工资详情和反馈意见等功能，
包括三个页面：app_、app_search_wage_、
app_。
3Ajax调接口
2前端页面介绍
电子工资条项目是企业微信的内部应用小程序，采用了前
后端分离的方式开发，前端主要通过Ajax调用后台接口。电子
工资条项目分为网页端和移动端，其中网页端要实现管理员用
户登录、修改密码、上传Excel文件、查询上传记录、查询工资详
情以及下发工资信息功能，包括以下八个页面：、in⁃
、、upload_arch_upload_⁃
ml、search_wage_、search_和ed⁃
jQuery调用后台接口有三种方式，分别是$.ajax({})、$.post
[2]
({})和$.get({})，本项目采用的是ajax方法
。以登录页为例，通
过设置请求方式为POST，数据类型为json，来向后台提交账号
和密码参数
[3]
,接下来可在本地通过浏览器的开发者工具查看
返回的数据，返回错误码为0则登录成功，跳转至网页端首页。
4网页端
4.1首页菜单实现
首页排版参照了柏慧通电子工资条网页的菜单样式设计，
通过设置ullia样式和jQuery的toggleClass方法来达到菜单点
收稿日期：2020-11-25
作者简介：曾玉红（1996—），女，江西赣州人，助教，学士，研究方向为软件设计与开发。
本栏目责任编辑：谢媛媛
软件设计开发
79
ComputerKnowledgeandTechnology
电脑知识
与技术
击有展开折叠
[4]
的效果。
由于本项目网页端页面较少，因此菜单链接采用了iframe
标签
data-src
（页面嵌套）。在菜单li标签中设置html5里面出的新属性
data-src
[5]
,
果，从而精简代码。当然，
传入
再写一个函数即当用户点击某个
iframe标签中的
为了页面美观，
src中，来达到内嵌页面跳转的效
li标签时，相应的
项目中将iframe标签
的边界设置为0，宽高设置为100%。为了各页面的安全性，每
个页面都有判断是否登录的方法来防止用户跳过登录界面直
接访问
[6]
。
4.2上传Excel文件
date_time_picker
导入工资条页面因为有发放月份的字段，
于后台接收的日期参数是时间戳到秒，
的样式和js文件，方便用户进行日期选择。由
因此引用了
所以input框接收到的
数据还需要经过处理(date)/1000，然后以formData的
形式将各参数和文件传给后台
[7]
。在测试中，发现input框总是
记住上一次输入日期，
plete="off"
给用户带来不便，就通过设置autocom⁃
型的文件，
来消除上一次的输入内容；
,
也可在上传文件input框中设置
为避免用户上传其他类
accept="application/
tion/-excel"
applica⁃
4.3有条件的分页查询
。
根据后台接口传来的json数据，需要对数据进行有条件的
分页查询，所以工资条上传记录页和详情页都使用了较为灵活
的分页插件。此分页插件之所以灵活，是因为调
用该方法较为简单，
nator(pagination)
只需要写出
全局变量。
即可。Pagination
$("#pagination-bottom").jqPagi⁃
为一个集合，里面的元素可为
拼接分页数据时，可通过if语句判断是否要传递当前页和
一页显示记录数以外参数，以达到点击查询按钮查询的效果。
但是查询条件拉去的数据跟之前默认的分页数据是不一样
的
[8]
，所以要通过$("#pagination-bottom").jqPaginator('destroy')语
句销毁之前拼接好的数据。有一点需要注意，ajax请求后台数
据时，需要设置async为false，让所有的请求均为同步请求，分
页效果才能正常。
因为没有使用完整的jQuery框架，所以在测试时发现项目
没有切换一页记录数的功能。为了改进其功能，
select
而让分页功能更加贴近用户习惯。
的onchange事件，让用户自由选择一页显示的记录数，
项目增加了
从
4.4下发工资信息
查询工资详情页除了条件查询分页功能以外，还有一个下
发消息按钮。实现原理则是设置按钮只能被点击一次，
sendStatus
根据
的是jQuery
的状态判断用户是否可以再进行点击。项目中使用
中的hide()和show()方法
[9]
。当用户点击发送按钮，
页面拉取后台数据，返回数据中的错误码为0则发送成功，按
钮隐藏，就算重新打开页面按钮也会隐藏，避免用户重复
点击
[10]
。
4.5其他基础知识
前端开发人员可以通过浏览器的开发者工具调试代码，当
发现页面有缓存问题时，
(()*100)
可以在各个链接地址后面添加随机数
项目内实现返回上一页功能可用
来解决。
onclick="Javascript:win⁃
80
软件设计开发
第17卷第10期(2021年4月)
(-1)"
5移动端
，其中的(-1)表示后退与刷新。
5.1动态构建年月下拉框
移动端页面主要引用了的样式和js文件，因
为页面是在企业微信内使用，所以首页一开始就要通过企业微
信的code换取用户的id，然后动态构建年月select下拉框。
页面通过getFullYear()方法获取当前年份，再用for循环将
最近五年的数字通过语句
year
显
true)
示
+
。
，
">"
$("#year").append(" 要用 +year 移动 + 端 "") 刷新语句 放入 $("#year"). option中。为了让数据正常 selectmenu('refresh', 当同一个月下发了两次工资时，例如有绩效奖金，月份下 拉框可以通过Map方法去掉重复的月份来保持页面美观性。 用户可以在下一个页面用工资名称查询相应的工资情况。 5.2个人工资信息展示 个人工资信息展示页面主要用到了jQuery控制css类的知 识点，通过条件判断页面的div显示与隐藏问题。这需要前端 开发人员有清晰的思维，在编写代码前有一个设计框架，再逐 步调试和改进。 6结束语 电子工资条项目经过用户的体验测试，前端页面进行了部 分修改，已正式投入使用。通过这个项目的开发，可以知道，前 端设计和开发不仅仅要求前端开发人员掌握html、css、js等基 础，还需具备一定的审美，了解用户的需求和习惯，这样才能让 项目更加受欢迎。 参考文献： [1]郑李园.基于企业微信的高校移动办公平台建设[J].中国电 [2] 力教育 JackFranklin,Russ ,2019(2):77-78. yImageSlider[M]//Begin⁃ [3] ning Hotel Camino jQuery. HJ Apress, B,Olalo 2017. RJC,SalamoDD,-Based [4] ture 赵爱涛 Approach[J].Cloud,2013,1(1). ManagementSystemImplementingThree-TierArchitec⁃ [5] 学院学报 .实现网页下拉菜单的常用方法 ,2017,29(2):42-44. [J].石家庄职业技术 [6] vaScript[M]// JeanineMeyer. 贾轩,王栋轩 The Quiz: . Essential Using Guide Games toHTML5 toLearn ，2018. HTML5andJa⁃ [7] 实现 基于SSM框架下用户注册登录界面的设计与 徐迪新 [J]. , 信息系统工程 吴长孙.基于 ,2019(2):54. .NET平台jQueryAjax [8] 数据应用 熊慧.jQuery [J].科技广场 技术在网页美工中的应用 ,2017(4):77-80. 异步处理JSON [J].中国新通信 [9] 20(6):100. ,2018, Specifications ShuaiWang,WenshengDou,APIType wareEngineering for Conference JavaScript[C]//2017 (APSEC).IEEE 24thAsia-Pacific ComputerSociety, Soft⁃ [10] 2017. 计与实现 张艳敏,乔阳阳 [J].数码世界 .基于 ,2018(8):92-93. HTML5的移动端游戏助手APP的设 【通联编辑：谢媛媛】 本栏目责任编辑：谢媛媛
版权声明：本文标题：基于jQuery 的电子工资条前端页面设计与开发 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1710241118a563932.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论