２０１７年２月下 论述２０３ 论《招生录取管理系统》开发设计与实现 单智峰（杭州汽车高级技工学校） 【摘 要】随着近年来我校招生规模的不断扩大，录取工作的高效性和准确性显得尤为重要。为了能更好地完成招生录取工作，本人结合所学的计 算机专业知识和多年的招生录取经验，开发了《招生录取管理系统》１．０版本，并经过多次测试能很好地解决学校在录取环节中出现的问题。 【关键词】录取；系统；设计 【中图分类号］ＴＰ３１１．５ 【文献标识码】Ａ 【文章编号１１００６—４２２２（２０１７）０４—０２０３—０４ １开发背景与现状 ３系统技术架构 近年来，随着社会经济的快速发展，中等职业教育异军突 ３．１后台框架架构 起，加上政府连续出台一系列推进中职教育发展的重大政策 本系统使用ｊａｖａ微服务框架Ｓｐｒｉｎｇ Ｂｏｏｔ。Ｓｐｒｉｎｇ Ｂｏｏｔ是 措施，可以说职业教育的春天已经到来。如我校作为杭州市创 由Ｐｉｖｏｔａｌ团队提供的全新框架。其设计目的是用来简化新 办最早的汽车维修类技术学校，在专业上有着明显的优势。因 Ｓｐｒｉｎｇ应用的初始搭建以及开发过程。该框架使用了特定的方 此，每年报考我校的学生数比较多，且报考人数还在逐年增 式来进行配置，从而使开发人员不再需要定义样板化的配置 加。同时，学校开设的专业数量较多，报考学生又可以同时填 ３．１．１对应的技术 报三个专业志愿。这都给录取工作带来了巨大的考验．如何能 ｊｄｋ１．８．０＿１０１版本，Ｓｐｒｉｎｇ Ｂｏｏｔ １ ３，Ｍｙｂａｔｉｓ３．４，ｄｒｕｉｄ１．０．１ １ 快速准确地录取学生成为了学校关注的热点。本人作为招就 系统是基于微框架Ｓｐｒｉｎｇ Ｂｏｏｔ搭建的ｒｅｓｔｆｕｌ后台架构风格。 处的招生老师，从事招生工作多年，结合自己所学的计算机专 ｄｒｕｉｄ负责数据库链接，Ｍｙｂａｔｉｓ负责数据持久层，ｓｐｒｉｎｇ作为控 业知识，开发了《招生录取管理系统》１．０版本，该系统能很好 制层。 地解决学校在录取环节中所面临的问题．达到准确化、系统 由于Ｍｙｂａｔｉｓ和Ｓｐｒｉｎｇ Ｂｏｏｔ都是用注解的方式．所以整个 化、智能化的目标。 系统代码管理看上去非常简介。 ２开发平台介绍 ３．１．２系统中对于Ｍｙｂａｔｉｓ的运用 ２．１开发语言 ①在ａｐｐｌｉｃａｔｉｏｎ．ｙｍｌ中加入相关数据库选项的配置。②再 Ｊａｖａ是一门面向对象编程语言．不仅吸取了Ｃ＋＋语言的 添加一个ＭｙｂａｔｉｓＣｏｎｆｉｇ类实现Ｓｐｒｉｎｇ中的ＥｎｖｉｒｏｎｍｅｎｔＡｗａｒｅ 各种优点．还摒弃了Ｃ＋＋里难以理解的多继承、指针等概念。 接口，并在类面前增加注释＠Ｃｏｎｆｉｇｕｒａｔｉｏｎ（表示这个类可以 还具有简单性、面向对象、分布式、健壮性、安全性、平台独立 使用ＳｐｒｉｎｇＩｏＣ容器作为ｂｅａｎ定义的来源），以及＠Ｅｎａｂｌｅ． 与可移植性、多线程、动态性等特点。本系统后台应用的正是 ＴｒａｎｓａｃｔｉｏｎＭａｎａｇｅｍｅｎｔ（通知Ｓｐｒｉｎｇ，＠Ｔｒａｎｓａｃｔｉｏｎａｌ注解的类 这种语言．目前后台开发的主流语言也是ＪＡＶＡ．且本人对 被事务的切面包围，这样＠Ｔｒａｎｓａｃｔｉｏｎａｌ就可以使用了）。在 ＪＡＶＡ语言比较熟悉。 ＭｙｂａｔｉｓＣｏｎｆｉｇ类中引入配置属性使用对象ＲｅｌａｘｅｄＰｒｏｐｅｒｔｙＲｅ— 前端展示则是用国内比较流行的ｉａｖａｓｃｒｉｐｔ框架Ｖｕｅ。 ｓｏｌｖｅｒ，引入之后就可以使用。 Ｖｕｅ是一套构建用户界面的渐进式框架。与其他重量级框架 具体代码如下： 不同的是。Ｖｕｅ采用自底向上增量开发的设计。Ｖｕｅ的核心库 ＲｅｌａｘｅｄＰｒｏｐｅｒｔｙＲｅｓｏｌｖｅｒ ｐｒｏｐｅｒｔｙＲｅｓｏｌｖｅｒ； 只关注视图层．并且非常容易学习。另一方面，Ｖｕｅ完全有能 ｔｈｉｓ．ｐｒｏｐｅ￣ｙ Ｒｅｓｏｌｖｅｒ＝ｎｅｗ ＲｅｌａｘｅｄＰｒｏｐｅｒｔｙＲｅｓｏｌｖｅｒ（ｅｎｖ．” 力驱动采用单文件组件和Ｖｕｅ生态系统支持的库开发的复杂 ｓｐｒｉｎｇ．ｄａｔａｓｏｕｒｃｅ．”） 单页应用。 ｄｅｓｔｒｏｙＭｅｔｈｏｄ表示销毁ｂｅａｎ ｄａｔａｓｏｕｒｃｅ之前要做的操 基于本人所学的专业知识．且热衷于新潮的计算机语言 作调用ｃｌｏｓｅ方法．初始化要调用ｉｎｉｔ方法 ／ ’ 学习。抱着学以致用的目的，在本次开发中选择Ｖｕｅ作为前端 ＠Ｂｅａｎ（ｄｅｓｔｒｏｙＭｅｔｈｏｄ＝”ｃｌｏｓｅ”，ｉｎｉｔＭｅｔｈｏｄ＝”ｉｎｉｔ”） 开发框架。 ｐｕｂｌｉｃ ＤａｔａＳｏｕｒｃｅ ｄａｔａＳｏｕｒｃｅ０｛ ２．２数据库 ＤｒｕｉｄＤａｔａＳｏｕｒｃｅ ｄａｔａｓｏｕｒｃｅ ｎｅｗ ＤｒｕｉｄＤａｔａＳｏｕｒｅｅ０； 本系统数据库是选用ＭａｒｉａＤＢ，它是ＭｙＳＱＬ的一个分支， ｄａｔａｓｏｕｒｃｅ．ｓｅｔＵｒｉ（ｐｒｏｐｅｒｔｙＲｅｓｏｌｖｅｒ．ｇｅｔＰｒｏｐｅｒｔｙ（”ｕ ））； 采用ＧＰＬ授权许可。ＭａｒｉａＤＢ的目的是完全兼容ＭｙＳＱＬ．包 ｄａｔａｓｏｕｒｃｅ．ｓｅｔＤｒｉｖｅｒＣｌａｓｓＮａｍｅ（ｐｒｏｐｅｒｔｙＲｅｓｏｌｖｅｒ．ｇｅｔＰｒｏｐｅｒｔｙ 括ＡＰＩ和命令行，使之能轻松成为ＭｙＳＱＬ的代替品。在存储 （”ｄｒｉｖｅｒＣｌａｓｓＮａｍｅ”））；，／数据库链接地址 引擎方面．使用ＸｔｒａＤＢ来代替ＭｙＳＱＬ的ＩｎｎｏＤＢ。ＭａｒｉａＤＢ是 ｄａｔａｓｏｕｒｃｅ．ｓｅｔＵｓｅｍａｍｅ（ｐｒｏｐｅｒｔｙＲｅｓｏｌｖｅｒ．ｇｅｔＰｒｏｐｅｒｔｙ ｆ．ｔｕｓｅｒ— 基于事务的Ｍａｒｉａ存储引擎。 ｎａｍｅ”））；／，登陆名 ＭａｒｉａＤＢ内建的复制功能是构建大型．高性能应用程序 ｄａｔａｓｏｕｒｃｅ．ｓｅｔＰａｓｓｗｏｒｄ（ｐｒｏｐｅｒｔｙＲｅｓｏｌｖｅｒ．ｇｅｔＰｒｏｐｅｒｔｙ（”ｐａｓｓ－ 的基础。将ＭｙＳＱＬ的数据分布到多个系统上去，以备一台系 ｗｏｒｄ”））；，／密码 统奔溃导致整个数据没了。 ｄａｔａｓｏｕｒｃｅ．ｓｅｔｌｎｉｔｉａｌＳｉｚｅ（Ｉｎｔｅｇｅｒ．ｖａｌｕｅＯｆ（ｐｒｏｐｅｒｔ） Ｒｅｓｏｌｖｅｒ． 我们数据库是做了主从备份的．通过将ＭａｒｉａＤＢ的某一 ｇｅｔＰｒｏｐｅｒｔｙ（”ｉｎｉｔｉａｌＳｉｚｅ”）））；，／初始化连接大小 台主机的数据复制到其它主机上，并重新执行一遍来实现的。 ｄａｔａｓｏｕｒｅｅ．ｓｅｔＭｉｎＩｄｌｅ（Ｉｎｔｅｇｅｒ．ｖａｌｕｅ０ｆ（ｐｒｏｐｅｒｔｙＲｅｓｏｌｖｅｒ．ｇｅｔ－ 复制过程中一个服务器充当主服务器．另外一台作为从服务 Ｐｒｏｐｅｒｔｙ（”ｍｉｎＩｄｌｅ”）））；／／连接池最小空闲 器，其中主服务器生成日志，然后复制到从服务器上再执行日 ｄａｔａｓｏｕｒｃｅ．ｓｅｔＭａｘＷａｉｔ（Ｌｏｎｇ．ｖａｌｕｅＯｆ（ｐｒｏｐｅｒｔｙＲｅｓｏｌｖｅｒ．ｇｅｔ— 志所对应的操作。 Ｐｒｏｐｅｒｔｙ（”ｍａｘＷａｉｔ”）））；／／获取连接最大等待时间 ２０４论述 ２０１７年２月下 ｄａｔａｓｏｕｒｃｅ．ｓｅｔＭａｘＡｃｔｉｖｅ（Ｉｎｔｅｇｅｒ．ｖＭｕｅＯｆ（ｐｒｏｐｅｒｔｙＲｅｓｏｌｖｅｒ． ｇｅｔＰｒｏｐｅｒｔｙ（”ｍａｘＡｃｔｉｖｅ”）））；／／连接池最大使用连接数 ｄａｔａｓｏｕｒｃｅ．ｓｅｔＭｉｎＥｖｉｃｔａｂｌｅｌｄｌｅＴｉｍｅＭｉｌｉｓ（Ｌｏｎｇ．ｖａｌｕｅＯｆ（ｐｒｏｐ— ｅｒｔｙＲｅｓｏｌｖｅｒ．ｇｅｔＰｒｏｐｅｒｔｙ（”ｍｉｎＥｖｉｃｔａｂｌｅＩｄｌｅＴｉｍｅＭｉｌｌｉｓ”）））； ｝ 因为Ｍｙｂａｔｉｓ没有带分页插件所以，分页需要自己实现， 所以需要在ｓｑｌＳｅｓｓｉｏｎＦａｃｔｏｒｙ的Ｂｅａｎ中实现分页插件。 查询实现如下： ｒｏＵｔｅｓ ｝） ３．２．２ Ｖｕｅｘ 它是作用是减少数据传递，实现对数据统一存放管理。 代码具体如下： ｉｍｐｏｒｔ ｓｔｏｒｅ ｆｒｏｍ ．／ｖｕｅｘ／ｓｔｏｒｅ ｉｍｐｏｒｔ Ｖｕｅｘ ｆｒｏｍ ｖｕｅｘ ｖｕｅ最近技术：ｅｌｅｍｅｎｔ ｕｉ，ｎｏｄｅｊｓ打包等各项技术， ＮＰｒｏｇｒｅｓｓ ＠Ｍａｐｐｅｒ ｍｙｂａｔｉｓ注解方式注入，查询如下： ＠Ｓｅｌｅｃｔ ｆＩＩｓｅｌｅｃｔ ｆｒｏｍ ＳＴＵＤＥＮＴ ＷＨＥＲＥ ｎａｍｅ ｌｉｋｅ＃ 页面切换等进度条显示来平滑过度。 ｛ｎａｍｅｌ ＡＮＤ ｃｏｄｅ ｌｉｋｅ＃｛ｃｏｄｅ］”）。 实现分页则如下： Ｐａｇｅ＜Ｓｔｕｄｅｎｔ＞ｐａｇｅＳｔｕ＝ｎｅｗ Ｐａｇｅ＜Ｓｔｕｄｅｎｔ＞（ｐａｇｅ）； ｓｔｕ．ｓｅｔＰａｇｅ（ｐａｇｅＳｔｕ）； ｐａｇｅＳｔｕ．ｓｅｔＬｉｓｔ（ｓｔｕｄｅｎｔＭａｐｐｅｒ．ｉｆｎｄＬｉｓｔ（ｓｔｕ））； 返回给前台则Ｃｏｎｔｒｏｌｌｅｒ层使用＠ＲｅｓｔＣｏｎｔｒｏｌｌｅｒ注解．方 法注解＠ＲｅｑｕｅｓｔＭａｐｐｉｎｇ（ｖａｌｕｅ＝”／ｓｔｕ／ｌｉｓｔ”，ｍｅｔｈｏｄ＝ＧＥＴ），返 回内容Ｐａｇｅ＜Ｓｔｕｄｅｎｔ＞．因为是ＲｅｓｔＣｏｎｔｒｏｌｌｅｒ注解所以前台收 到的则是Ｐａｇｅ＜Ｓｔｕｄｅｎｔ＞ ｊｓｏｎ格式。 ３．２前端技术实现 前端环境要求Ｎｏｄｅ Ｊｓ大于ｖ５，ＮＰＭ大于ｖ３，Ｗｅｂｐａｃｋ大 于ｖ２。 使用的技术版本如下： ”ｄｅｐｅｎｄｅｎｃｉｅｓ”： ｛ ”ａｘｉｏｓ”：”＾ｏ．１５．３”． ”ｅｃｈａｒｔｓ’。：” ３．３．２”． ”ｆｌｅｘ．ＣＳＳ”：” １．１．６”． ”ｎｐｒｏｇｒｅｓｓ”：” ．２．０“． ”ｒｕｅ”：”＾２．１．１０”． ”ｖｕｅｘ”：”＾２．０．０一ｒｅ．６” ｝ ３．２．１ ｖｕｅ—ｒｏｕｔｅｒ 它是Ｖｕｅ．ｊｓ官方的路由插件，它和ｖｕｅ．ｊｓ是深度集成的， 适合用于构建单页面应用。ｖｕｅ的单页面应用是基于路由和组 件的，路由用于设定访问路径．并将路径和组件映射起来。 具体代码如下： ｉｍｐｏｒｔ ＶｕｅＲｏｕｔｅｒ ｆｒｏｍ ｒｕｅ－ｒｏｕｔｅｒ ｅｏｎｓｔ ｒｏｕｔｅｓ＝【 ｛ ｐａｔｈ： ／ｌｏｇｉｎ ， ｃｏｍｐｏｎｅｎｔ：Ｌｏｇｉｎ， ｈｉｄｄｅｎ：ｔｒｕｅ／／不显示在导航中 ｝， ／／｛ｐａｔｈ： ／ｍａｉｎ ，ｃｏｍｐｏｎｅｎｔ：Ｍａｉｎ｝， ｛ ｐａｔｈ：ｆｆ ． ｃｏｍｐｏｎｅｎｔ：Ｈｏｍｅ， ｎａｍｅ： 录取管理 ． ｉｃｏｎＣＩｓ： ｅｌ－ｉｃｏｎ－ｍｅｓｓａｇｅ 。，／图标样式ｃｌａｓｓ ｃｈｉｌｄｒｅｎ：【 ／／ｆ ｐａｔｈ： ／ｍａｉｎ ，ｃｏｍｐｏｎｅｎｔ：Ｍａｉｎ｝， ｛ｐａｔｈ： ／ｇｒａｄｅ ，ｃｏｍｐｏｎｅｎｔ：Ｇｒａｄｅ，ｎａｍｅ： 分数查询 ） 】 １］ ｃｏｎｓｔ ｒｏｕｔｅｒ＝ｎｅｗ ＶｕｅＲｏｕｔｅｒ（｛ ｉｍｐｏｒｔ ＮＰｒｏｇｒｅｓｓ ｆｒｏｍ ｎｐｒｏｇｒｅｓｓ ，／页面顶部进度条 ｉｍｐｏｒｔ ｎｐｒｏｇｒｅｓｓ／ｎｐｒｏｇｒｅｓｓ．ＣＳＳ ３．２．３ Ｅｌｅｍｅｎｔ ＵＩ——饿了么ＵＩ ＥｌｅｍｅｎｔＵＩ是一套采用Ｖｕｅ２．０作为基础框架实现的组件 库。它面向企业级的后台应用，能够帮助你快速地搭建网站， 极大地减少研发的人力与时间成本。 代码具体如下： ｉｍｐｏｒｔ ＥｌｅｍｅｎｔＵＩ ｆｒｏｍ ｅｌｅｍｅｎｔ－ｕｉ ｉｍｐｏｒｔ ｅｌｅｍｅｎｔ—ｕｉ／ｌｉｂ／ｔｈｅｍｅ—ｄｅｆａｕｌｔ／ｉｎｄｅｘ．ＣＳＳ ３．２．４ Ｍｏｃｋ Ｍｏｃｋ能生成随机数据．具有拦截Ａｊａｘ请求。 具体代码如下： ｉｍｐｏｒｔ Ｍｏｃｋ ｆｒｏｍ ．／ｍｏｃｋ ； Ｍｏｃｋ．ｂｏｏｔｓｔｒａｐ０； Ｖｕｅ．ｕｓｅ（ＥｌｅｍｅｎｔＵＩ） Ｖｕｅ．ｕｓｅ（ＶｕｅＲｏｕｔｅｒ） Ｖｕｅ．ｕｓｅ（Ｖｕｅｘ） ｎｅｗ Ｖｕｅ（｛ ｅｌ： ＃ａｐｐ ， ｔｅｍｐｌａｔｅ： ＜Ａｐｐ／＞ ， ｒｏｕｔｅｒ， ｓｔｏｒｅ， ｃｏｍｐｏｎｅｎｔｓ：｛Ａｐｐ｝ ／／ｒｅｎｄｅｒ：ｈ＝＞ｈ（Ｉｘ）ｇｉｎ、 ））．￥ｍｏｕｎｔ（ ＃ａｐｐ ） ３．２．５跟后台交互 后台交互的代码集中在Ａｐｉ．ｊｓ，引入ａｘｉｏｓ作为交互的插 件。ｖｕｅ更新到２．０之后，ｖｕｅ作者就宣告不再对ｖｕｅ—ｒｅｓｏｕｒｃｅ 更新，而是推荐的ａｘｉｏｓ，所以我们也使用ａｘｉｏｓ作为后台交互 插件。 系统菜单实现：ｒｏｕｔｅｒ．ｏｐｔｉｏｎｓ．ｒｏｕｔｅｓ中配置相应的菜单数 据，然后如下循环控制。点击则自动在导航栏上显示名称。其 中包括＠ｏｐｅｎ＝”ｈａｎｄｌｅｏｐｅｎ”＠ｃｌｏｓｅ＝”ｈａｎｄｌｅｃｌｏｓｅ”＠ｓｅｌｅｃｔ＝” ｈａｎｄｌｅｓｅｌｅｃｔ”三个事件。 具体代码如下： ＜ｅｌ—ｍｅｎｕ：ｄｅｆａｕｌｔ—ａｃｔｉｖｅ＝”ｃｕｒｒｅｎｔＰａｔｈ”ｃｌａｓｓ＝”ｅｌ—ｍｅｎｕ— ｖｅｒｔｉｃａｌ—ｄｅｍｏ”＠ｏｐｅｎ＝”ｈａｎｄｌｅｏｐｅｎ”＠ｃｌｏｓｅ＝”ｈａｎｄｌｅｃｌｏｓｅ” ＠ｓｅｌｅｃｔ＝”ｈａｎｄｌｅｓｅｌｅｃｔ” ｔｈｅｍｅ＝”ｄａｒｋ”ｕｎｉｑｕｅ—ｏｐｅｎｅｄ ｒｏｕｔｅｒ＞ ＜ｔｅｍｐｌａｔｅ ｖ－ｆｏｒ＝”（ｉｔｅｍ，ｉｎｄｅｘ）ｉｎ Ｓｒｏｕｔｅｒ．ｏｐｔｉｏｎｓ．ｒｏｕｔｅｓ” ｖ—ｉｆ－”！ｉｔｅｍ．ｈｉｄｄｅｎ”＞ ＜ｅｌ—ｓｕｂｍｅｎｕ：ｉｎｄｅｘ＝”ｉｎｄｅｘ＋””Ｖ—ｉｆ－”！ｉｔｅｍ．１ｅａｆ。＞ ＜ｔｅｍｐｌａｔｅ ｓｌｏｔ＝”ｔｉｔｌｅ”＞＜ｉ：ｃｌａｓｓ＝”ｉｔｅｍ．ｉｃｏｎＣｌｓ”＞＜／ｉ＞｛｛ｉｔｅｍ．ｎａｍｅ｝１＜／ ｔｅｍｐｌａｔｅ＞ ＜ｅｌ—ｍｅｎｕ—ｉｔｅｍ Ｖ—ｆｏｒ＝”ｃｈｉｌｄ ｉｎ ｉｔｅｍ．ｃｈｉｌ— ２０ｌ７年２月下 论述２０５ ｄｒｅｎ”：ｉｎｄｅｘ＝”ｃｈｉｌｄ。ｐａｔｈ”＞｛｛ｃｈｉｌｄ．ｎａｍｅ｝｝＜／ｅｌ—ｍｅｎｕ—ｉｔｅｍ＞ ＜／ｅｌ—ｓｕｂｍｅｎｕ＞ ＜ｅｌ——ｍｅｎｕ—．ｉｔｅｍ ＜／ｅｌ－ｔａｂｌｅ＞ ＜／ｔｅｍｐｌａｔｅ＞ ４系统功能模块分析 本系统采用Ｂ／Ｓ架构．基于Ｂ／Ｓ架构的《招生录取管理系 可使用手机游览器或者微信． ．ｖ－ｉｆ＿”ｉｔｅｍ．１ｅａｆ＆＆ｉｔｅｍ．ｃｈｉｌｄｒｅｎ．１ｅｎｇｔｈ＞０”：ｉｎｄｅｘ＝”ｉｔｅｍ．ｃｈｉｌ． ｄｒｅｎ［０］．ｐａｔｈ”＞＜ｊ：ｃｌａｓｓ＝”ｉｔｅｍ．ｉｃｏｎＣｌｓ”＞＜／ｉ＞｛｛ｉｔｅｍ．ｃｈｉｌｄｒｅｎ［０】． 统》．客户端是通用的游览器（ＩＥ９以上、谷歌、火狐），录取查询 ｎａｍｅ｝｝＜／ｅｌ——ｍｅｎｕ——ｉｔｅｍ＞ ＜，ｔｅｍｐｌａｔｅ＞ ＜／ｅ】－ｍｅｍＩ＞ 系统中查询设置．由于涉及到的学生和专业数据有一定 数据量．所以查询的参数部是以右模糊查询的，这样查询的条 件可以走索引．速度较快。本系统有下列几个模块： ３．２．６系统表格列表实现 首先通过ａｐｉ中ａｘｉｏｓ，请求后台并获取相应的数据，然后 展示分页列表。代码如下： ４．１系统登录 打开谷歌游览器．在地址栏里输入ｈｔｔｐ：／／１ｏｃａｌｈｏｓｔ打开登 陆界面．如图１所示 ｅｘｐｏｒｔ ｃｏｎｓｔ ｇｅｔＳｔｕｄｅｎｔＰａｇｅ ｐａｒａｍｓ：＞ｆ ｒｅｔｕｒｎ ａｘｉｏｓ。ｇｅｔ（ ￥｛ｈａｓｅ｝／ｓｔｕ／ｐａｇｅ ，ｆ ｐａｒａｍｓ：ｐａｒａｍｓ １）；｝； ｇｅｔＳｔｕｄｅｎｔｓ０｛ ｌｅｔ ｐａｒａ＝｛ ｐａｇｅ：ｔｈｉｓ．ｐａｇｅ， ｎａｍｅ：ｔｈｉｓ．ｉｌｆｔｅｒｓ．ｎａｍｅ， ｃｏｄｅ：ｔｈｉｓ．ｉｆｌｔｅｒｓ．ｃｏｄｅ ｝； ｔｈｉｓ．１ｉｓｔｌ￣ｏａｄｉｎｇ ｔｒｕｅ； ＮＰｒｏｇｒｅｓｓ．ｓｔａｒｔ０； 图１ ｇｅｔＳｔｕｄｅｎｔＰａｇｅ（ｐａｒａ）．ｔｈｅｎ（（ｒｅｓ）：＞｛ ｃｏｎｓｏｌｅ．１ｏｇ（ｒｅｓ）； ｔｈｉｓ．ｔｏｔａｌ＝Ｙｅｓ．ｄａｔａ．ｃｏｕｎｔ； ｔｈｉｓ．ｓｔｕｄｅｎｔｓ＝ｒｅｓ．ｄａｔａ．１ｉｓｔ； 输入正确的用户名和密码登陆．输入错误用户名、密码或 用户类型，用户无法登陆，登陆后如图２所示。 ＮＰｒｏｇｒｅｓｓ．ｄｏｎｅＯ； ｝）； ｝ 数据模板如下： ＜！一一 ，Ｊ表一一＞ ＜ｔｅｍｐｌａｔｅ＞ ＜ｅｌ－ｔａｂｌｅ：ｄａｔａ＝’’ｕｓｅｒｓ”ｈｉｇｈｌｉｇｈｔ—ｃｕｒｒｅｎｔ—ｒｏｗ Ｖ— ｌｏａｄｉｎｇ＝”ｌｉｓｔＬｏａｄｉｎｇ”ｓｔｙｌｅ＝”ｗｉｄｔｈ：１００％；”：ｒｏｗ—ｃｌａｓｓ—ｎａｍｅ＝” ｔａｂｋＲ０ｗＣｌａｓｓＮａｍｅ”＞ 图２ ＜ｅｌ—ｔａｂｌｅ—ｃｏｌｕｍｎ ｐｒｏｐ＝”ｃｏｄｅ”ｌａｂｅｌ＝”学号“ ｓｏｒｔａｂｌｅ＞＜／ｅｌ—ｔａｂｌｅ—ｃｏｌｕｍｎ＞ ＜ｅｌ—ｔａｂｌｅ—ｃｏｌｕｍｎ ｐｒｏｐ＝”ｎａｍｅ“ｌａｂｅｌ＝”姓名” ｓ０ｒｔａｂｌｅ＞＜／ｅｌ—ｔａｂｌｅ—ｃｏｌｕｍｎ＞ ４．２录取管理 该模块包括分数查询、志愿查询、专业管理、录取详情 （１）分数查询：学生的中考成绩（包括语文、数学、英语、科 学、文科综合、体育以及总分）以及性别，同时也可输入姓名或 ＜ｅｌ—ｔａｂｌｅ—ｃｏｌｕｍｎ ｐｒｏｐ＝”ｓｅｘ”ｌａｂｅｌ＝”性别”： ｆｏｒｍａｔｔｅｒ＝－”ｆｏｒｍａｔＳｅｘ’’＞ 者学号进行查询．如图３所示 —＿ －－＿ ¨ …●＾ ’＿ ＩＩ一 ＜ｅｌ—ｔａｂｌｅ—ｃｏｌｍｎｎ ｐｒｏｐ＝”ｓｐｏｒｔｓ”ｌａｂｅｌ＝”体育” ｓｏｒｔａｂｌｅ＞＜／ｅｌ—ｔａ．ｂｌｅ—ｃｏｌｕｍｎ＞ ＜ｅｌ—ｔａｂｌｅ—ｃｏｌｕｍｎ ｉｎｌｉｎｅ—ｔｅｍｐｌａｔｅ：ｃｏｎｔｅｘｔ＝” 一－ｔ ● ● ● ●－＾ ●…● …－ ＿ ｝Ｊ ＿● ● ｒ － ， － ●。 － －＿＿棚一＿ ｔ ｔ ， ¨ － － Ｉ － － ｌ － ｕ ＿ Ｈ ● 口 － Ｉ ■ ＇－ － － － － － ● － ＿ ● － ■ ● ● ｗ ｔ ＿ ｆ－ ｔ－ ● ４ ＾ Ｈ ■ ＿ ¨ ●Ｉ ● 々 ＿ ■ ｓｅｗ’ｌａｂｅｌ＝”总分”＞＜ｓｐａｎ＞｛｛ｒｏｗ．ｃｈｉｎｅｓｅ＋ｒｏｗ．ｍａｔｈｓ＋ｒｏｗ． ● ● ‘ ＿ ｍ一 ■ ● ● ● ● ，， ● ＿ ● ＿ ＿ Ｊ●● ●－一 ＿ ‘ ｅｎｇｌｉｓｈ＋ｒｏｗ．ｓｃｉｅｎｃｅ＋ｒｏｗ．ｐｏｌｉｔｉｃｓ＋ｒｏｗ．ｓｐｏｒｔｓ｝ｌ＜／ｓｐａｎ＞＜／ｅｌ— ｔａｂｌｅ—ｃｏｌｕｎｍ＞ ＜！一一 ＜ｅｌ—ｔａｂｌｅ—ｃｏｌｕｍｎ ｉｎｌｉｎｅ—ｔｅｍｐｌａｔｅ：ｃｏｎｔｅｘｔ＝” － ＿ ＿ ● ■ － 圈３ （２）志愿查询：该模块中能罗列出各个学生所填写的志 愿．如果是可调剂的则可直接修改相应志愿，如图４所示。 ｓｅｌｌ １ａｂｅｌ＝“操作”ｍｉｎ—ｗｉｄｔｈ＝”ｌ ５０”＞ ＜ｓｐａｎ＞ （３）专业管理：该模块可以显示各个专业，并可增删改查 如图５所示 ＜ｅｌ—ｂｕｔｔｏｎ ｓｉｚｅ＝”ｓｍａｌｌ”＠ｃｌｉｃｋ＝”ｈａｎ— ｄｌｅＥｄｉｔ（ｒｏｗ）”＞编辑＜／ｅｌ—ｂｕｔｔｏｎ＞ ＜ｅｌ—ｂｕｔｔｏｎ ｔｙｐｅ＝’ ｄａｎｇｅｒ”ｓｉｚｅ＝”ｓｍａｌｌ ‘ ①增加（修改）专业（见图６） 新增专业时，录取分数和录取人数有相应的限制，只能是 数字且有默认值，可以直接在输入框里输入也可以点击旁边 按钮增加或者减少修改专业界面基本上跟新增一样，就是多 ＠ｃｌｉｃｋ＝”ｈａｎｄｌｅＤｅｌ（ｒｏｗ）”＞删除＜／ｅｌ—ｂｕｔｔｏｎ＞ ＜／ｓｐａｎ＞ ／ｅＩ＜－ｔａｂｌｅ—ｃｆ）ｌ１ｌｎ１ｎ＞－－＞ ２０６论述 ２０１７年２月下 ｒ一＿ 图４ 瞄圈 … ～ … 一 一 ＿ 图９ 到统计分析各个专业录取人数的目的，其中横坐标表示专业， 纵坐标表示录取人数，效果图如图ｌ０所示。 Ｉ薯 蕾 ＿ 鞫■ 衄 ｌ曩 ｌ曩 ■● ■■ ∞ ‘…ｒ … ，ｌ ’ ‘・ｔ 一 ¨ ，Ｈ 一。 －＿ －・ 、“ ”” 。 。－－＿‘＿＿售专业帚敷情况 ＿－ ．】 、 ¨ ・●曩 ●图５ 图１０ ５运行环境及测试 ５．１软件运行环境 本系统运行在Ｃｅｎｔｏｓ６．５系统上，前端代码运行在ｎｇ— ｉｎｘ１．１０上，后台通过ｎｇｉｎｘ代理，运行在ｔｏｍｃａｔ ８．０．３６ ５．２硬件运行环境 计算机使用ＣＰＵ双核３．０Ｇ以上．内存４Ｇ以上 、 图６ ６结束语 通过不懈努力，《招生录取管理系统》１．０版本终于完成。 个编号显示。 ②删除专业 经过测试，该系统能很好地解决学校在录取环节中出现的效 率低、出错率高、操作不便等问题，达到准确化、系统化、智能 化的目标。同时，我会在以后的工作和学习过程中不断完善该 系统，使它能更好地服务于招生录取工作． ．图７ 参考文献 【１］陈陆扬．Ｖｕｅ．ｊｓ前端开发快速入ｆ＇ｌ与专业应用．人民邮电出版社 ２０１７，０１． 删除专业时需要确认才可以删除。 （４）录取详情：针对专业的录取情况，排序按总分倒序排 ［２］张耀春．Ｈｅ．ｊｓ权威指南．电子工业出版社，２０１６，０９． 序，查询可根据专业或者学号查询，如图８所示。 ［３】毕广吉．Ｊａｖａ程序设计实例教程【Ｍ】．北京：冶金工业出版社，２００７． ｆ４１李兴华．Ｊａｖａ开发实战经典．北京：清华大学出版社，２００９，８． Ｉ５１扬昭编．Ｊａｖａ语言程序设计教程．中国水利水电出版社，２００６． 收稿Ｌ１期：２０１７—１一Ｉ６ 圈８ ４＿３数据导入模块 该模块包含成绩、志愿导入。其中，导入的格式需要指定 模板的ｅｘｅｅ］（字段包括：学生编号、姓名、性别、各科成绩．所 报志愿等）。在导入过程中，选择指定的ｅｘｃｅｌ导入即可 导入 界面如图９所示、 ４．４图表分析 我们使用ｅｃｈａｒｔｓ作为图表插件来实现图表的展示．以达