计算机毕业设计 268的数字化家谱网站管理系统vue 毕设

第五章系统实现

一、技术路线：

开发语言：Java

前端技术：JavaScript、VUE.js（2.X）、css3

数据库：MySQL 5.7

数据库管理工具：Navicat或sqlyog

开发工具：IDEA或Ecplise

二、项目介绍：

https://www.bilibili.com/video/BV15N4y127F7/

三、运行截图：

5.1管理员功能模块

管理员通过用户名和密码，角色填写完成后进行登录，如图5-1所示。

管理员登录成功后进入到系统操作界面，可以查看首页、个人中心、用户管理、编写人管理、家谱信息管理、家谱成员管理、系统管理等功能模块进行相对应操作。如图5-2所示。

用户管理：管理员通过列表可以获取账号、姓名、性别、手机、邮箱、身份证、照片等内容，可以进行详情、修改操作，如图5-3所示。

图5-1管理员登录页面

图5-2管理员首页页面

图5-3用户管理页面图

编写人管理：管理员通过编写人信息查看编写人账号、编写人姓名、编写人性别、联系方式、身份证、邮箱、头像等信息，进行查看详情、修改操作，如图5-4

图5-10编写人管理界面图

家谱信息管理：管理员通过列表可以获取家家谱名称、始祖、编写人账号、编写人姓名、封面、编写日期等信息，进行详情、修改操作，如图5-5所示。

图5-5家谱信息管理界面图

家谱成员管理：管理员通过家谱成员列表可以进查看编写人账号、编写人姓名、账号、姓名、性别、手机、照片、世代、排行、出承、出生日期、学历、家庭住址、婚姻状况、配偶、子女信息，并进行详情、修改操作，如图5-6所示。

图5-6家谱成员管理界面图

系统管理：该页面为轮播图管理新闻新闻资讯界面。管理员可以在此页面进行首页轮播图的管理、资讯发布，通过新建操作可在轮播图中加入新的图片，还可以对以上传的图片进行修改操作，以及图片的删除，如图5-7所示。

图5-7系统管理界面图

5.2编写人功能模块

编写人通过注册页面填写编写人账号、编写人姓名、编写人性别、联系方式、身份证、邮箱进行注册提交，信息无误进入登录页面填写账号、密码进行登录，如图5-8所示。

编写人点击进入到后台界面，可以查看首页、个人中心、家谱信息管理、家谱成员管理等功能进行查看，如图5-9所示

个人信息：通过列表可以查看编写人账号、编写人姓名、编写人性别、联系方式、身份证、邮箱、头像并进行添加、查看操作，如图5-10所示。

图5-8注册、登陆界面图

图5-9首页界面图

图5-10个人信息界面图

家谱信息管理：编写人通过家谱信息列表可进行查看家谱名称、始祖、编写人账号、编写人姓名、封面、编写日期，可进行新增、详情、修改、删除操作，如图5-11所示。

图5-11家谱信息管理界面图

5.3前台功能模块

家谱管理系统，用户在家谱管理系统首页可以查看首页、家谱信息、个人中心、后台管理等内容，如图5-12所示。

图5-12首页界面图

注册，用户通过注册页面填写账号、密码、姓名、性别、手机、邮箱、身份证等信息进行注册，如图5-13所示。

图5-13注册界面图

登录，在登录页面可以填写账号、密码等信息，如图5-14所示。

图5-14登录界面图

个人中心，用户在个人信息页面可以查看账号、密码、姓名、性别、手机、邮箱、身份证、照片上传等信息可进行添加、修改、删除操作，如图5-15所示。

图5-15个人中心界面图

家谱信息，用户通过点击家谱信息进入详情页面查看，点击入谱进行页面进入家谱成员进行填写编写人账号、编写人姓名、账号、姓名、性别、手机、照片、世代、排行、出承、出生日期、学历、家庭住址、婚姻状况、配偶、子女信息进行提交，如图5-16所示。

图5-16家谱信息界面图

5.4用户功能模块

用户登录成功后进入到后台界面，可以查看首页、个人中心、家谱信息管理、家谱成员管理等功能模块进行相对应操作。如图5-17所示。

图5-17用户首页界面图

家谱信息管理：用户通过家谱信息列表可以查看家谱名称、始祖、编写人账号、编写人姓名、封面、编写日期等信息进行详情查看操作，如图5-18所示。

图5-18家谱信息管理界面图

家谱成员管理：用户进入家谱成员页面中可以查看编写人账号、编写人姓名、账号、姓名、性别、手机、照片、世代、排行、出承、出生日期、学历、家庭住址、婚姻状况、配偶、子女信息等信息，如图5-19所示。

图5-19 家谱成员管理界面图