电子族谱网站平台设计与实现

摘要：家风文化不仅是中华传统文化的重要组成部分，更是传承传统文化最有力的载体。通过分析市场调研结果，建设一个以中老年用户为主体，可以在线进行族谱修缮、族内消息展示的电子族谱网站平台，具有广阔的发展空间。该文基于B/S架构，使用HTML、CSS、JavaScript、Java等语言和Bootstrap、jQuery等技术框架，逐步完成了电子族谱网站平台的设计与实现。

关键词：电子族谱；家风文化；B/S架构

1引言

族谱是记载姓氏家族、重要人物及其主要事迹的史籍资料，是记述血缘集团世系的载体[1]，反映出社会与文化的祖先崇拜、血缘意识文化与社会组织结构[2]。传统的纸质族谱只能查阅先祖姓名及迁徙情况，记载不了先祖的丰功伟绩和先祖对后世的期望，后世也就无法深刻领略家族的家风、家训。因此，建立一个集族谱修缮、族内动态展示等功能于一体的电子族谱网站平台是十分必要的。本文基于B/S架构，使用HTML、CSS、JavaScript、Java等语言和Bootstrap、jQuery等技术框架设计了一款电子家族谱网站平台，解决了族谱修缮困难的问题。

2市场需求

通过对笔者在网络上发放的问卷进行整理和分析，绘制出了数据图。数据显示，有78%的人可以接受通过网络平台进行族谱修缮。有51%的人因没有合适的平台而没有使用电子族谱进行族谱修缮。由此可见，建立一个以族谱修缮、族内消息展示为主要功能的电子族谱网站平台具有广阔的发展空间。

3开发原理

网站基于B/S架构，使用HTML、CSS、JavaScript、Java等语言和Bootstrap、jQuery等技术框架进行开发。B/S结构的网站设计不需要进行一系列的逻辑处理和系统界面的展现，可以大大节约开发成本，也为管理者后期对网站的维护和升级提供便捷。HTML是所谓的“超文本标记语言”，是一种标记语言，而不是一种编程语言[3]。CSS语言又称之为层叠样式表，一般搭配HTML进行使用，其作用就是用来渲染HTML框架的样式，同时也可以为XML语言增添样式的一种语言。CSS几乎支持所有的字体样式，对网页对象模型和网页的模型样式有编辑修改能力[4]。JavaScript是一种具备动态类型、弱引用类型、且基于原型的脚本的语言，其内部包含各种支持类型[5]。jQuery主要的作用就是使用户能更方便地处理HTML、从而简便地使页面具备动画效果[6]。Bootstrap就是一个封装了大量HTML和CSS为组件的前端框架[7]。

4设计方案

4.1总体设计

网站的总体设计如图3所示，包含了UI页面、业务层、持久层及数据库的设计。UI页面主要包括注册登录页面、首页页面、家族码生成和获取页面、族谱展示页面、族谱信息录入页面。业务层主要包括用户信息校验、家族码生成和查询、族谱信息的存储、家族信息的展示等功能。持久层是与用户信息和。

4.2详细设计

4.2.1数据库的设计通过对网站的功能进行分析，设计的数据库结构由用户表和家庭成员表共两张表组成。用户表用于存储用户的账号、密码、姓名、电话等信息，家庭成员表用于存放家族成员的节点ID、姓名、性别、头像地址、人物介绍等信息。两张表的关联是fid字段，通过fid字段可以将两张表的信息拼接起来，避免数据大量重复的问题。用户表和家庭成员表的结构分别如表1、表2所示。4.2.2基本功能模块电子族谱的基本功能模块包括用户模块、族谱管理模块、家族码生成模块和族谱修缮模块。各模块之间相互交融与配合，共同支撑起平台各项功能。网站的基本功能模块主要为用户模块和族谱管理模块。模块之间的相互配合使族谱网站得以稳定运行。用户模块贯穿整个平台，主要包括用户的注册与登录，用户的家族信息等内容。族谱管理模块是平台功能模块，主要包括家族码的生成、家族码的查询、族谱修缮、族内消息展示等内容。用户模块是用户使用网站的前提，用户需要先注册账号才能使用网站功能。注册时用户在前端注册页面填写好注册信息后提交到服务器，通过查询数据库验证用户ID是否已经存在，未存在的用户ID才可注册成功。用户注册成功后会自动跳转到登录页面，用户输入对应的信息进行登录。登录时系统会先进行表单的验证，判断用户输入的信息是否符合规范，如果符合规范去数据库中查询对应的用户ID进行账户和密码的匹配，匹配成功则跳转到首页，并且将数据存入Session中。如果表单校验不成功则在对应的输入框提示错误信息。如果输入的密码或用户ID与数据库中的数据不匹配，则在表单提示用户ID或密码错误等信息。注册页面如图4(a)所示。家族码生成模块是用户开始族谱创建的基础，用户可以通过该模块获得对应的家族码。通过家族码，用户可以进入到对应的家族谱系中，并且可以对该谱系进行修改。家族码是用来唯一标志族谱的标志，每个家族谱都对应着不同的家族码。用户在进入获取家族码的页面时，请求就会被拦截器所拦截，拦截器会判断Session中是否存在用户信息。如果发现用户没有登录信息，则触发转发请求跳转到登录页面，此时要求用户必须进行登录后才能继续后面的操作。根据存入Session域中的用户信息，可以判断用户是否存在家族码，如果存在则显示如图4(b)所示的家族码查询界面，如果不存在则为用户创建家族码并且保存到用户的信息中。族谱修缮模块是电子族谱的功能模块，族谱修缮板块主要功能是将用户输入的族谱信息存入数据库，同时根据用户的信息判断用户在家族中的位置，同时展示家族成员对应的称呼。族谱修缮的逻辑如图5所示。在进入族谱修缮板块之前，操作会被拦截器所拦截，判断用户是否处于登录状态，如果处于登录状态，则通过用户的登录信息判断用户处于哪个族谱内。同时展示对应的族谱。此时用户可以对族内信息进行编辑，用户编辑后可以将信息存入到数据库中。此时还会根据用户的身份信息判断族谱中存在的成员与用户之间的关系，并且展示给用户，对应成员的称呼。在族谱修缮界面，用户可以通过对应的成员节点对成员信息进行修改。如图4(c)所示，点击头像时，系统会查询数据库中是否有该节点的信息，如果有则在信息输入框展示已经录入的成员信息，修改完对应的信息后保存到数据库。如对应节点没有信息，则显示如图4(d)所示的空输入模板，用户填写完成后点击提交按钮将节点信息插入到数据库中。4.2.3数据传输与验证后台与前端之间的交互采用的是Ajax进行交互，交互的数据形式是Json格式。用户产生的所有HTTP请求经过参数验证、用户身份认证等一系列检查后进入业务流程，业务模型负责处理业务数据并与数据库进行交互，并将业务处理结果通过指定的JSON格式返回给终端，实现客户端与接口系统的通信[8]。4.2.4系统部署与运行电子族谱网站平台搭载Tomcat服务器运行，部署于阿里云ECS服务器，用户通过浏览器可以直接访问到网站部署在的服务器上[9]。Tomcat的默认端口号是8080，通过Tomcat服务器，电子族谱网站可以正常地运行，通过浏览器访问阿里云的地址加上端口号可以直接对网页进行访问。用户对网页操作的数据将保存在MySQL数据库中。

5难点攻坚

在项目中，电子族谱网站平台只考虑了单机情况下的运行结果，并没有进行压力测试，不能保证系统在高并发的情况下还能继续运行。同时由于用户基数少，系统的数据库在设计之初没有设计对应的索引。没有考虑用户基数大的情况下的访问速度等。所以后续需要对数据库进行重新设计，修改表的结构和表与表之间的关系。同时还需要添加数据库的索引，保证访问的快捷性。此外，为了保证系统可以在高并发的情况下保证正常的运行，在简单的冒烟测试下，必须还得保证每个接口在大数据量的情况下可以被访问。出于对接口的健壮性考虑，接口除了可以在大数据量的情况下进行正常的运行，还需要防止接口的恶意访问。必须在可能会出现问题的接口上添加拦截验证，不能让接口被无限制地访问。同时为了保证接口调用数据库时的安全性，需要在接口与数据库之间添加一层缓存层。使用户不能频繁地访问数据库，从而对数据库产生巨大的压力。为了一个更加稳健，更加安全的系统，我们需要不断地去掌握更新的技术，不断地对代码进行优化。

6结束语

电子家族谱网站平台的设计与开发项目整体使用B/S模式架构，开发过程主要使用的开发工具为IntelliJIDEA。主要用到的技术有HTML、CSS、JavaScript、Java、Bootstrap、jQuery。开发更加高效信息化的电子族谱有利于推动中国传统文化的发展和传播，并且对社会学和经济学等方面的研究也有着不可替代的独特功能。项目经过测试达到预期效果，有一定发展前景，但仍存在许多不足，需不断地努力完善与维护。

参考文献：

[1]王鹤鸣.中国家谱通论[M].上海:上海古籍出版社,2010:4.

[2]常建华.中国族谱资料的整理、研究和数字化建设[J].安徽大学学报(哲学社会科学版),2014,38(1):95-105.

[3]夏立新,方志,刘启强.XML在信息组织中的应用初探[J].情报科学,2006,24(6):859-863.

[4]朱杰.浅谈电子商务网站web前端网页制作[J].商情,2018(15):161.

[5]项可旺.基于Django框架的载体管理系统的设计与实现[D].沈阳:东北大学,2016.

[6]陈霏.基于WebService的网页元素评价系统设计与实现[D].上海:复旦大学,2012.

[7]陈乐天.基于HTML5视频控制技术的在线学习平台视频模块设计与实现[D].天津:天津师范大学,2017.

[8]李沛熹,朱晓君,姜建,等.基于微信小程序的校园二手书籍交易平台设计与实现[J].电脑知识与技术,2021,17(23):57-59,67.

[9]赵纪伟.基于云平台的视频监控和存储系统研究与实现[D].呼和浩特:内蒙古大学,2017.

作者：张雨浩 李权 柳汛 朱晓君 肖斌 单位：江西理工大学能源与机械工程学院 江西理工大学