软件设计开发
本栏目责任编辑：谢媛媛
基于jQuery 的电子工资条前端页面设计与开发
曾玉红
（江西服装学院，江西南昌330201）
摘要：企业，作为一种高效办公平台，已经被各行各业广泛使用。值得一提的是，企业支持企业内部应用开发，因
此企业管理员可以根据企业API 开发个性化办公应用。如今一些学校也紧跟时代，开通了企业，以此来提高学校的服务水平。根据江西服装学院智慧校园的建设需要，同时为更好地服务教职工，在企业API 的基础上，学校的网络与信息化管理中心部门开发并实现了电子工资条应用小程序。该应用小程序的前端页面采用了jQuery 和Ajax 技术相结合的方式，以提高数据加载的效率和前端开发效率。
关键词：企业；电子工资条；应用小程序；前端开发；jQuery ；Ajax 技术中图分类号：TP311.5
文献标识码：A
文章编号：1009-3044(2021)10-0079-02
开放科学（资源服务）标识码（OSID ）：
Design and Development of Front End Page of Electronic Payroll Based on jQuery ZENG Yu-hong
(Jiangxi Institute of Fashion Technology,Nanchang 330201,China)Abstract:As a highly efficient office platform,Enterprise WeChat has been widely used by all walks of life.It is worth mentioning that Enterprise WeChat supports enterprise internal application development,so enterprise administrators can develop personal⁃ized office applications based on enterprise WeChat API.Nowadays,some schools are also keeping up with the times and opening up WeChat to improve the service level of the school.According to the construction needs of the smart campus of Jiangxi Institute of Fashion Technology,and at the same time to better serve the faculty and staff,based on the enterprise WeChat API,the school's Network &Information Management Center department developed and implemented the electronic payroll application applet.The front-end page of the application applet us
es a combination of jQuery and Ajax technology to improve data loading efficiency and front-end development efficiency.
Key words:enterprise WeChat;electronic payroll;application applet;web and mobile front-end development;jQuery;Ajax technol⁃ogy
1背景
随着时代的发展，工资条形式逐步发生变化。由于企业的出现，各类第三方应用小程序也随之而来，常见的就有公
告、考勤、请假、报销等[1]
。而公司要想使用优质的第三方应用小程序就要付出一笔费用，因此公司内部需要开发属于自身的内部应用小程序来减免一部分开销。文章接下来主要是对电子工资条前端页面的设计与开发进行详细的介绍。
2前端页面介绍
电子工资条项目是企业的内部应用小程序，采用了前后端分离的方式开发，前端主要通过Ajax 调
用后台接口。电子工资条项目分为网页端和移动端，其中网页端要实现管理员用户登录、修改密码、上传Excel 文件、查询上传记录、查询工资详情以及下发工资信息功能，包括以下八个页面：login.html 、in⁃dex.html 、main.html 、upload_excel.html search_upload_record.ht⁃ml 、search_wage_detail.html 、search_getFeedback.html 和ed⁃
it_password.html 。
移动端要实现普通用户查询工资详情和反馈意见等功能，包括三个页面：app_index.html 、app_search_wage_detail.html 、app_feedback.html 。
3Ajax 调接口
jQuery 调用后台接口有三种方式，分别是$.ajax({})、$.post
({})和$.get({})，本项目采用的是ajax 方法[2]
。以登录页为例，通过设置请求方式为POST ，数据类型为json ，来向后台提交账号和密码参数[3]，接下来可在本地通过浏览器的开发者工具查看返回的数据，返回错误码为0则登录成功，跳转至网页端首页。
4网页端
jquery是什么软件4.1首页菜单实现
首页排版参照了柏慧通电子工资条网页的菜单样式设计，通过设置ul li a 样式和jQuery 的toggleClass 方法来达到菜单点
收稿日期：2020-11-25作者简介：曾玉红（1996—），女，江西赣州人，助教，学士，研究方向为软件设计与开发。
79
本栏目责任编辑：谢媛媛
软件设计开发Computer Knowledge and Technology 电脑知识与技术第17卷第10期(2021年4月)
击有展开折叠[4]的效果。
由于本项目网页端页面较少，因此菜单链接采用了iframe 标签（页面嵌套）。在菜单li 标签中设置html5里面出的新属性data-src [5]，再写一个函数即当用户点击某个li 标签时，相应的data-src 传入iframe 标签中的src 中，来达到内嵌页面跳转的效果，从而精简代码。当然，为了页面美观，项目中将iframe 标签的边界设置为0，宽高设置为100%。为了各页面的安全性，每个页面都有判断是否登录的方法来防止用户跳过登录界面直接访问[6]。4.2上传Excel 文件
导入工资条页面因为有发放月份的字段，因此引用了
date_time_picker 的样式和js 文件，方便用户进行日期选择。由于后台接收的日期参数是时间戳到秒，所以input 框接收到的数据还需要经过处理Date.parse(date)/1000，然后以formData 的
形式将各参数和文件传给后台[7]
。在测试中，发现input 框总是记住上一次输入日期，给用户带来不便，就通过设置autocom⁃plete="off"来消除上一次的输入内容；为避免用户上传其他类型的文件，也可在上传文件input 框中设置accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,applica⁃tion/vnd.ms-excel"。4.3有条件的分页查询
根据后台接口传来的json 数据，需要对数据进行有条件的分页查询，所以工资条上传记录页和详情页都使用了较为灵活的jq-paginator.js 分页插件。此分页插件之所以灵活，是因为调用该方法较为简单，只需要写出$("#pagination-bottom").jqPagi⁃nator(pagination)即可。Pagination 为一个集合，里面的元素可为全局变量。
拼接分页数据时，可通过if 语句判断是否要传递当前页和一页显示记录数以外参数，以达到点击查询按钮查询的效果。但是查询条件拉去的数据跟之前默认的分页数据是不一样的[8]，所以要通过$("#pag
ination-bottom").jqPaginator('destroy')语句销毁之前拼接好的数据。有一点需要注意，ajax 请求后台数据时，需要设置async 为false ，让所有的请求均为同步请求，分页效果才能正常。
因为没有使用完整的jQuery 框架，所以在测试时发现项目没有切换一页记录数的功能。为了改进其功能，项目增加了select 的onchange 事件，让用户自由选择一页显示的记录数，从而让分页功能更加贴近用户习惯。4.4下发工资信息
查询工资详情页除了条件查询分页功能以外，还有一个下
发消息按钮。实现原理则是设置按钮只能被点击一次，根据sendStatus 的状态判断用户是否可以再进行点击。项目中使用的是jQuery 中的hide()和show()方法[9]。当用户点击发送按钮，页面拉取后台数据，返回数据中的错误码为0则发送成功，按钮隐藏，就算重新打开页面按钮也会隐藏，避免用户重复
点击[10]
。4.5其他基础知识
前端开发人员可以通过浏览器的开发者工具调试代码，当发现页面有缓存问题时，可以在各个链接地址后面添加随机数und(Math.random()*100)来解决。
项目内实现返回上一页功能可用onclick="Javascript:win⁃
(-1)"，其中的(-1)表示后退与刷新。
5移动端
5.1动态构建年月下拉框
移动端页面主要引用了bile 的样式和js 文件，因为页面是在企业内使用，所以首页一开始就要通过企业的code 换取用户的id ，然后动态构建年月select 下拉框。
页面通过getFullYear()方法获取当前年份，再用for 循环将最近五年的数字通过语句$("#year").append("<option value="+year +">"+year +"</option>")放入option 中。为了让数据正常显示，要用移动端刷新语句$("#year").selectmenu('refresh',true)。
当同一个月下发了两次工资时，例如有绩效奖金，月份下拉框可以通过Map 方法去掉重复的月份来保持页面美观性。用户可以在下一个页面用工资名称查询相应的工资情况。5.2个人工资信息展示
个人工资信息展示页面主要用到了jQuery 控制css 类的知识点，通过条件判断页面的div 显示与隐藏问题。这需要前端开发人员有清晰的思维，在编写代码前有一个设计框架，再逐步调试和改进。
6结束语
电子工资条项目经过用户的体验测试，前端页面进行了部分修改，已正式投入使用。通过这个项目的开发，可以知道，前端设计和开发不仅仅要求前端开发人员掌握html 、css 、js 等基础，还需具备一定的审美，了解用户的需求和习惯，这样才能让项目更加受欢迎。
参考文献：
[1]郑李园.基于企业的高校移动办公平台建设[J].中国电力教育,2019(2):77-78.
[2]Jack Franklin,Russ Ferguson.A jQuery Image Slider[M]//Begin⁃ning jQuery.Apress,2017.
[3]Camino H J B,Olalo R J C,Salamo D D,et al.An Ajax-Based Hotel Management System Implementing Three-Tier Architec⁃ture Approach[J].Cloud,2013,1(1).
[4]赵爱涛.实现网页下拉菜单的常用方法[J].石家庄职业技术学院学报,2017,29(2):42-44.
[5]Jeanine Meyer.Quiz:Using Games to Learn HTML5and Ja⁃vaScript[M]//The Essential Guide to HTML5，2018.
[6]贾轩，王栋轩.基于SSM 框架下用户注册登录界面的设计与实现[J].信息系统工程,2019(2):54.
[7]徐迪新，吴长孙.基于.NET 平台jQuery Ajax 异步处理JSON 数据应用[J].科技广场,2017(4):77-80.
[8]熊慧.jQuery 技术在网页美工中的应用[J].中国新通信,2018,20(6):100.
[9]Shuai Wang,Wensheng Dou,Chushu Gao.Mining API Type Specifications for JavaScript[C]//201724th Asia-Pacific Soft⁃ware Engineering Conference (APSEC).IEEE Computer Society,2017.
[10]张艳敏，乔阳阳.基于HTML5的移动端游戏助手APP 的设计与实现[J].数码世界,2018(8):92-93.
【通联编辑：谢媛媛】
80

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。