人口老龄化社区服务与管理平台

@TOC

springboot136人口老龄化社区服务与管理平台

系统概述

1.1 研究背景

人口老龄化社区服务与管理平台是面向居家老人用户、社区的系统与信息平台，并在此基础上提供实时、快捷、高效、低成本的，物联化、互联化、智能化的人口老龄化社区服务服务。

随着科技进步，新型人口老龄化社区服务方式日趋流行,社会上也涌现出一系列如只为父母设计的电视盒子等高科技产品，提升老人的晚年生活质量，最大程度的解决空巢老人寂寞的问题，是智慧人口老龄化社区服务，候鸟式人口老龄化社区服务，信息化人口老龄化社区服务，中国式人口老龄化社区服务的新形式。智慧人口老龄化社区服务经过一年多的良好运营与快速成长，获得了政府、行业、公众及媒体的广泛关注与认可。让老人充分享受物联网带来的便捷和舒适。

随着计算机技术的发展以及计算机网络的逐渐普及，互联网成为人们查找信息的重要场所，二十一世纪是信息的时代，所以信息的管理显得特别重要。因此，使用计算机来管理汽车站车辆运管的相关信息成为必然。开发合适的人口老龄化社区服务与管理平台，可以方便管理人员对人口老龄化社区服务与管理平台的管理，提高信息管理工作效率及查询效率，有利于更好的为人们服务。

1.2研究目的

随着互联网技术的快速发展，网络时代的到来，网络信息也将会改变当今社会。各行各业在日常企业经营管理等方面也在慢慢的向规范化和网络化趋势汇合。人口老龄化社区服务与管理平台的信息化程度体现在将互联网与信息技术应用于经营与管理，以现代化工具代替传统手工作业。无疑，使用网络信息化管理使信息管理更先进、更高效、更科学，信息交流更迅速。

对于之前人口老龄化社区服务系统的管理，大部分都是使用传统的人工方式去管理，这样导致了管理效率低下、出错频率高。而且，时间一长的话，积累下来的数据信息不容易保存，对于查询、更新还有维护会带来不少问题。对于数据交接也存在很大的隐患。如果采用电子化的存储方式就会带来很大的改善，而且给用户的查询带来了很大便利，因此设计一个人口老龄化社区服务与管理平台刻不容缓，能够提高信息的管理水平。

1.3系统设计思想

一个成功的网站应明确建设网站的目的，确定网站的功能，确定网站规模、投入费用，进行必要的市场分析等。只有详细的策划，才能避免在网站建设中出现的很多问题，使网站建设能顺利进行。同时，一个大型的计算机网站系统，必须有一个正确的设计指导思想，通过合理选择数据结构、网络结构、操作系统以及开发环境，构成一个完善的网络体系结构，才能充分发挥计算机信息管理的优势。根据现实生活中网民的实际需求，本系统的设计按照下述原则进行。

有效性：实际上这里的有效性包括两个方面的意思：有用性和可用性。有用性是指站点潜在的能满足用户需求的功能，而可用性是指能够通过站点的操作实现特定的目标。可以看出一个站点如果不能恰当运行或设计得非常槽糕就不是一个好站点。可用站点的效益应该非常高，并易于学习，在实现用户目标时令人满意而不出错。
高可靠性：一个实用的网站同时必须是可靠的，本设计通过合理而先进的网络设计以及软、硬件的优化选型，可保证网站的可靠性与容错性。
高安全性：在设计中，将充分利用网络软、硬件提供的各种安全措施，既可以保证用户共享资源，充分考虑系统及数据资源的容灾、备份、恢复的要求。为系统提供强大的数据库备份工具。可以保证关键数据的安全性。操作权限级，设置不同的角色确保每一步的操作权限，可以由管理员进行设置。
先进性：采用目前国际上最先进的开发技术，使用JSP开发技术，MYSQL作为网站后台数据库。采用这些技术降低了以后的系统运营成本，提高了系统的稳定性和易维护性。
采用标准技术：本网站的所有设计遵循国际上现行的标准进行，以提高系统的开放性。
外观和技术平衡：系统采用Web风格的界面设计，界面友好、美观，使用方便，易学易用。网站设计的关键问题是外观和技术的平衡。外现不好的网站令人厌烦，站点可以运行很好，但却不能带动用户积极性，相反，如果外观非常有表现力，但技术有限，用户则会感到非常失望。在外观与技术之间需要确定一个清晰而连续的关系，即外观与站点的意图相关，对不同类型的网站处理方法不同。

2相关技术

2.1 MYSQL数据库

MySQL是一个真正的多用户、多线程SQL数据库服务器。是基于SQL的客户/服务器模式的关系数据库管理系统，它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等，非常适用于Web站点或者其他应用软件的数据库后端的开发工作。此外，用户可利用许多语言编写访问MySQL数据库的程序。作为开放源代码运动的产物之一，MySQL关系数据库管理系统越来越受到人们的青睐，应用范围也越来越广。速度和易用性使MySQL特别适用于Web站点或应用软件的数据库后端的开发工作。

MYSQL数据库具有以下特点：

1、C和C ++中使用和测试，以确保源代码的编译器的便携性和灵活性。

2、支持多种操作系统AIX的，FreeBSD下，HP-UX，Linux和Mac OS中，Novell公司的Netware，OpenBSD系统，OS/2裹时，Solaris，Windows等。

3、提供了用于不同的编程语言的API。编程语言，如C,, C ++，Python和Java的，的Perl，PHP，埃菲尔铁塔，Ruby和Tcl的。

4、以及使用的CPU资源来支持多线程。

5、算法优化查询SQL，切实提高搜索速度。

6、网络上的客户端和服务器可以用来编程任何独立的编程环境，也有中国，GB2312，BIG5，日文写作，一般基金，用于支持多国语言，并且可以嵌入在数据表和其他软件shift_jis访问柱可以用作的名称。

7、TCP / IP，ODBC和JDBC数据库，并提供连接到其他。

8、管理工具的管理，控制和优化数据库的操作。

9、可以数以千万计的记录在一个大的数据库。

2.2 B/S结构

B/S架构是一种基于互联网系统的软件系统开发架构，是现如今在软件系统开发中采用非常大量的一种软件系统结构。现如今B/S架构已经被大量使用，打破了C/S结构的结构，给基于网络结构的软件系统提供了良好的支持。B/S架构伴随着计算机网络技术发展而逐步的发展和更新。伴随着互联网的进一步发展，就要求大多数的管理系统要求不仅仅可以在一台电脑上使用，同时可以在接入互联网的其他电脑也可以使用对系统进行操作和使用。在这样的背景下基于B/S架构的软件系统设计方法得到了越来越大量的使用，基础部分也在不断的更新。

B/S架构是利用操作系统中的浏览器来进行使用的，不是一种窗体软件系统，不需要在使用系统的电脑上进行安装。B/S架构的运行方式是在远程的服务器上把开发的软件系统部署在远程的服务器上，在部署好软件系统之后就可以实现在任何接入互联网的电脑上访问部署好的软件系统。B/S架构给使用管理系统的用户带来极大的便利。

在三层体系结构的B/S（Browser/Server，浏览器/服务器结构）系统中，用户可以通过浏览器向分布在网络上的众多服务器发出请求。B/S系统极大地简化了客户机的工作量，客户机上只需要安装、配置少量的客户端运行软件即可，服务器将担负大量的工作，对数据库的访问以及应用程序的执行都将由服务器来完成。

B/S架构的不断成熟，主要使用WWW浏览器技术，结合多种浏览器脚本语言，用通用浏览器需要实现原本复杂的专有软件来实现的强大功能，并节约了开发成本，是一种新的软件架构。B/S系统包括：表示逻辑层，控制逻辑层，数据展现层，三层是相对独立又相互关联。

2.3 Spring Boot框架简介

Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。通过这种方式，Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者。

SpringBoot可以与经典的Java开发工具一起使用或者作为命令行工具安装。无论如何，需要JavaSDK1.6或者更高版本，本项目用到的是JDK1.8版本。

2.4 JSP技术

JSP是由Sun微系统公司于1999年6月推出的一项技术，是基于JavaServlet以及整个Java体系的Web开发技术，利用这一技术可以建立先进、安全和跨平台的动态网站。JSP技术在多个方面加速了动态Web页面的开发。

与微软公司的ASP技术相比，JSP具有如下优点：

(1) 开放的技术：JSP技术基于平台和服务器的相互独立，技术支持来自广泛的、专门的、各种工具包，有服务器的组件和数据库产品开发商提供。相比之下，ASP技术主要依赖MICROSOFT支持。

(2) 平台和服务器的独立性：JSP编写的代码可运行在任何符合JAVA语法结构的环境中。这样JSP就能够运行在多种WEB服务器上并支持来自多家开发商提供的各种工具包。

(3) 开放的开发过程，开放的源码：自1995年以来，SUN用开放过程方法同国际JAVA组织合作开发和修改JAVA技术和规范。

(4) JSP标记可扩充性：JSP技术能够为开发者扩展JSP标记，充分利用与XML兼容的标记技术强大的功能，大大减少对脚本语言的依赖。

(5)JSP跨平台的可重用性：JSP组件（EJB，JavaBean或定制的JSP标记）都是跨平台可重用的。

2.5 VUE框架

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。

Vue 介绍

AngularJS是Vue早期开发的灵感来源。然而，AngularJS 中存在的许多问题，在 Vue 中已经得到解决。

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能地驱动复杂的单页应用。

特点编辑

易用

在有HTML，CSS，JavaScript的基础上，快速上手。

灵活

简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

性能

20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化。

2.6Java语言介绍

Java语言是简单的：

Java语言的语法与C语言和C++语言很接近，使得大多数程序员很容易学习和使用。另一方面，Java丢弃了C++中很少使用的、很难理解的、令人迷惑的那些特性，如操作符重载、多继承、自动的强制类型转换。特别地，Java语言不使用指针，而是引用。并提供了自动分配和回收内存空间，使得程序员不必为内存管理而担忧。

Java语言是面向对象的：

Java语言提供类、接口和继承等面向对象的特性，为了简单起见，只支持类之间的单继承，但支持接口之间的多继承，并支持类与接口之间的实现机制（关键字为implements）。Java语言全面支持动态绑定，而C++语言只对虚函数使用动态绑定。总之，Java语言是一个纯的面向对象程序设计语言。

Java语言是分布式的：

Java语言支持Internet应用的开发，在基本的Java应用编程接口中有一个网络应用编程接口（java net），它提供了用于网络应用编程的类库，包括URL、URLConnection、Socket、ServerSocket等。Java的RMI（远程方法激活）机制也是开发分布式应用的重要手段。

Java语言是健壮的：

Java的强类型机制、异常处理、垃圾的自动收集等是Java程序健壮性的重要保证。对指针的丢弃是Java的明智选择。Java的安全检查机制使得Java更具健壮性。

Java语言是安全的：

Java通常被用在网络环境中，为此，Java提供了一个安全机制以防恶意代码的攻击。除了Java语言具有的许多安全特性以外，Java对通过网络下载的类具有一个安全防范机制（类ClassLoader），如分配不同的名字空间以防替代本地的同名类、字节代码检查，并提供安全管理机制（类SecurityManager）让Java应用设置安全哨兵。

Java语言是体系结构中立的：

Java程序（后缀为java的文件）在Java平台上被编译为体系结构中立的字节码格式（后缀为class的文件），然后可以在实现这个Java平台的任何系统中运行。这种途径适合于异构的网络环境和软件的分发。

Java语言是可移植的：

这种可移植性来源于体系结构中立性，另外，Java还严格规定了各个基本数据类型的长度。Java系统本身也具有很强的可移植性，Java编译器是用Java实现的，Java的运行环境是用ANSI C实现的。

Java语言是解释型的：

如前所述，Java程序在Java平台上被编译为字节码格式，然后可以在实现这个Java平台的任何系统中运行。在运行时，Java平台中的Java解释器对这些字节码进行解释执行，执行过程中需要的类在联接阶段被载入到运行环境中。

Java是高性能的：

与那些解释型的高级脚本语言相比，Java的确是高性能的。事实上，Java的运行速度随着JIT(Just-In-Time）编译器技术的发展越来越接近于C++。

Java语言是多线程的：

在Java语言中，线程是一种特殊的对象，它必须由Thread类或其子（孙）类来创建。通常有两种方法来创建线程：其一，使用型构为Thread(Runnable)的构造子类将一个实现了Runnable接口的对象包装成一个线程，其二，从Thread类派生出子类并重写run方法，使用该子类创建的对象即为线程。值得注意的是Thread类已经实现了Runnable接口，因此，任何一个线程均有它的run方法，而run方法中包含了线程所要运行的代码。线程的活动由一组方法来控制。Java语言支持多个线程的同时执行，并提供多线程之间的同步机制（关键字为synchronized）。

Java语言是动态的：

Java语言的设计目标之一是适应于动态变化的环境。Java程序需要的类能够动态地被载入到运行环境，也可以通过网络来载入所需要的类。这也有利于软件的升级。另外，Java中的类有一个运行时刻的表示，能进行运行时刻的类型检查。

2.7 SSM框架简介

SSM框架，是Spring+Spring MVC+MyBatis的缩写，这个是继SSH之后，目前比较主流的Java EE企业级框架，适用于搭建各种大型的企业级应用系统。

1.Spring简介

Spring是一个开源框架，Spring是于2003年兴起的一个轻量级的Java开发框架，由Rod Johnson在其著作Expert One-On-One J2EE Development and Design中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。Spring使用基本的JavaBean来完成以前只可能由EJB完成的事情。然而，Spring的用途不仅限于服务器端的开发。从简单性、可测试性和松耦合的角度而言，任何Java应用都可以从Spring中受益。简单来说，Spring是一个轻量级的控制反转（IoC）和面向切面（AOP）的容器框架。

A.控制反转（IOC）是什么呢？

IOC:控制反转也叫依赖注入。利用了工厂模式将对象交给容器管理，你只需要在spring配置文件总配置相应的bean，以及设置相关的属性，让spring容器来生成类的实例对象以及管理对象。在spring容器启动的时候，spring会把你在配置文件中配置的bean都初始化好，然后在你需要调用的时候，就把它已经初始化好的那些bean分配给你需要调用这些bean的类（假设这个类名是A），分配的方法就是调用A的setter方法来注入，而不需要你在A里面new这些bean了。

B.面向切面(AOP)又是什么呢？

首先，需要说明的一点，AOP只是Spring的特性，它就像OOP一样是一种编程思想，并不是某一种技术,AOP可以说是对OOP的补充和完善。OOP引入封装、继承和多态性等概念来建立一种对象层次结构，用以模拟公共行为的一个集合。当我们需要为分散的对象引入公共行为的时候，OOP则显得无能为力。也就是说，OOP允许你定义从上到下的关系，但并不适合定义从左到右的关系。例如日志功能。日志代码往往水平地散布在所有对象层次中，而与它所散布到的对象的核心功能毫无关系。在OOP设计中，它导致了大量代码的重复，而不利于各个模块的重用。将程序中的交叉业务逻辑（比如安全，日志，事务等），封装成一个切面，然后注入到目标对象（具体业务逻辑）中去。

实现AOP的技术，主要分为两大类：一是采用动态代理技术，利用截取消息的方式，对该消息进行装饰，以取代原有对象行为的执行；二是采用静态织入的方式，引入特定的语法创建“方面”，从而使得编译器可以在编译期间织入有关“方面”的代码。

2.Spring MVC简介

Spring MVC属于Spring Framework的后续产品，已经融合在Spring Web Flow里面，它原生支持的Spring特性，让开发变得非常简单规范。Spring MVC分离了控制器、模型对象、分派器以及处理程序对象的角色，这种分离让它们更容易进行定制。

3.MyBatis简介

MyBatis本是apache的一个开源项目iBatis,2010年这个项目由apache software foundation迁移到了google code，并且改名为MyBatis。MyBatis是一个基于Java的持久层框架。iBATIS提供的持久层框架包括SQL Maps和Data Access Objects（DAO）MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索。MyBatis使用简单的XML或注解用于配置和原始映射，将接口和Java的POJOs（Plain Old Java Objects，普通的Java对象）映射成数据库中的记录。可以这么理解，MyBatis是一个用来帮你管理数据增删改查的框架。

3系统分析

3.1可行性分析

通过对本人口老龄化社区服务与管理平台实行的目的初步调查和分析，提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。

3.1.1技术可行性

本人口老龄化社区服务与管理平台采用Spring Boot框架，JAVA作为开发语言，是基于WEB平台的B/S架构系统。

（1）Java提供了稳定的性能、优秀的升级性、更快速的开发、更简便的管理、全新的语言以及服务。整个系统帮用户做了大部分不重要的琐碎的工作。

（2）基于B/S模式的系统的开发已发展日趋成熟。

（3）众所周知，Java是面向对象的开发语言。程序开发员可以在Eclipse平台上面方便的使用一些已知的解决方案。

因此，人口老龄化社区服务与管理平台在开发技术上具有很高可行性，且开发人员掌握了一定的开发技术，所以此系统的开发技术具有可行性。

3.1.2经济可行性

本人口老龄化社区服务与管理平台采用的软件都是开源的，这样能够削减很多的精力和资源，降低开发成本。同时对计算机的配置要求也极低，即使是淘汰下来的计算机也能够满足需要，因此，本系统在经济上是完全具有可行性的，所以在经济上是十分可行的。

3.1.3操作可行性

本人口老龄化社区服务与管理平台的界面简单易操作，用户只要平时有在用过电脑，都能进行访问和操作。本系统具有易操作、易管理、交互性好的特点，在操作上是非常简单的，因此在操作上具有很高的可行性。

综上所述，此系统开发目标已明确，在技术、经济和操作方面都具有很高的可行性，并且投入少、功能完善、管理方便，因此系统的开发是完全可行的。

3.2系统性能分析

3.2.1 系统安全性

此人口老龄化社区服务与管理平台要严格控制管理权限，具体要求如下：

（1）要想对人口老龄化社区服务与管理平台进行管理，首先要依靠用户名和密码在系统中登陆，无权限的用户不可以通过任何方式登录系统和对系统的任何信息和数据进行查看，这样可以保证系统的安全可靠性和准确性。

（2）在具体实现中对不同的权限进行设定，不同权限的用户在系统中登陆后，不可以越级操作。

3.2.2 数据完整性

（1）所有记录信息要保持全面，信息记录内容不可以是空。

（2）各种数据间相互联系要保持正确。

（3）相同数据在不同记录中要保持一致。

3.3系统界面分析

目前，界面设计已经成为对软件质量进行评价的一条关键指标，一个好的用户界面可以使用户使用系统的信心和兴趣增加，从而使工作效率提高，JSP技术是将JAVA语言作为脚本语言的，JSP网页给整个服务器端的JAVA库单元提供了一个接口用来服务HTTP的应用程序。创建动态页面比较方便。客户界面是指软件系统与用户交互的接口，往往涵盖输出、输入、人机对话的界面格式等。

1.输出设计

输出是由电脑对输入的基本信息进行解决，生成高质量的有效信息，并使之具有一定的格式，提供给管理者使用，这是输出设计的主要责任和目标。

系统开发的过程与实施过程相反，并不是从输入设计到输出设计，而是从输出设计到输入设计。这是由于输出表格与使用者直接相联系，设计的目的应当是确保使用者可以很方便的使用输出表格，并且可以将各部门的有用信息及时的反映出来。输出设计的准绳是既要整体琢磨不同管理层的所有需要，又要简洁，不要提供给用户不需要的信息。

2.输入设计

输入数据的收集和录入是比较麻烦的，需要非常多的人力和一定设备，而且经常出错。一旦输入系统的数据不正确，那么处理后的输出就会扩大这些错误，因此输入的数据的准确性对整个系统的性能起着决定性意义。

输入设计有以下几点原则：

1）输入量应尽量保持在能够满足处理要求的最低限度。输入量越少，错误率就会越少，数据的准备时间也越少。

2）应尽可能的使输入的准备以及输入的过程进行时比较方便，这样使错误的发生率降低。

3）应尽量早检查输入数据（尽量接近原数据发生点）,以便使错误更正比较及时。

4）输入数据尽早地记录成其处理所需的形式，以防止数据由一种介质转移到另一种介质时需要转录而可能发生的错误。

3.4系统流程和逻辑

图3-3登录流程图

图3-4修改密码流程图

4系统概要设计

4.1概述

系统设计原则

以技术先进、系统实用、结构合理、产品主流、低成本、低维护量作为基本建设原则，规划系统的整体构架.

先进性：

在产品设计上，整个系统软硬件设备的设计符合高新技术的潮流，媒体数字化、压缩、解压、传输等关键设备均处于国际领先的技术水平。在满足现期功能的前提下，系统设计具有前瞻性，在今后较长时间内保持一定的技术先进性。

安全性：

系统采取全面的安全保护措施，具有防病毒感染、防黑客攻击措施，同时在防雷击、过载、断电和人为破坏方面进行加强，具有高度的安全性和保密性。对接入系统的设备和用户，进行严格的接入认证，以保证接入的安全性。系统支持对关键设备、关键数据、关键程序模块采取备份、冗余措施，有较强的容错和系统恢复能力，确保系统长期正常运行。

合理性：

在系统设计时，充分考虑系统的容量及功能的扩充，方便系统扩容及平滑升级。系统对运行环境(硬件设备、软件操作系统等)具有较好的适应性，不依赖于某一特定型号计算机设备和固定版本的操作系统软件。

经济性：

在满足系统功能及性能要求的前提下，尽量降低系统建设成本，采用经济实用的技术和设备，利用现有设备和资源，综合考虑系统的建设、升级和维护费用。系统符合向上兼容性、向下兼容性、配套兼容和前后版本转换等功能。

实用性：

本系统提供清晰、简洁、友好的中文人机交互界面，操作简便、灵活、易学易用，便于管理和维护。具有公安行业风格界面和公安行业习惯操作的客户端界面。在快速操作处理突发事件上有较高的时效性，能够满足公安联网指挥的统一行动。

规范性：

系统中采用的控制协议、编解码协议、接口协议、媒体文件格式、传输协议等符合国家标准、行业标准和公安部颁布的技术规范。系统具有良好的兼容性和互联互通性。

可维护性：

系统操作简单，实用性高，具有易操作、易维护的特点，系统具有专业的管理维护终端，方便系统维护。并且，系统具备自检、故障诊断及故障弱化功能，在出现故障时，能得到及时、快速地进行自维护。

可扩展性：

系统具备良好的输入输出接口，可为各种增值业务提供接口，例如GIS电子地图、手机监控、智能识别等系统。同时，系统可以进行功能的定制开发，可以实现与公安内部系统的互联互通。

开放性：

系统设计遵循开放性原则，能够支持多种硬件设备和网络系统，软硬件支持二次开发。各系统采用标准数据接口，具有与其他信息系统进行数据交换和数据共享的能力。

本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式，是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示：

图4-1系统工作原理图

4.2系统结构

本系统是基于B/S架构的网站系统，设计的功能结构图如下图所示：

图4-2功能结构图

4.3.数据库设计

数据库设计(Database Design)是指对于一个给定的应用环境，构造最优的数据库模式，建立数据库及其应用系统，使之能够有效地存储数据，满足各种用户的应用需求（信息要求和处理要求）。在数据库领域内，常常把使用数据库的各类系统统称为数据库应用系统。

数据库设计的设计内容包括：需求分析、概念结构设计、逻辑结构设计、物理结构设计、数据库的实施和数据库的运行和维护。

4.3.1数据库实体

概念设计的目标是设计出反映某个组织部门信息需求的数据库系统概念模式，数据库系统的概念模式独立于数据库系统的逻辑结构、独立于数据库管理系统（DBMS）、独立于计算机系统。

概念模式的设计方法是在需求分析的基础上，用概念数据模型（例如E-R模型）表示数据及数据之间的相互联系，设计出反映用户信息需求和处理需求的数据库系统概念模式。概念设计的目标是准确描述应用领域的信息模式，支持用户的各种应用，这样既容易转换为数据库系统逻辑模式，又容易为用户理解。数据库系统概念模式是面向现实世界的数据模型，不能直接用于数据库系统的实现。在此阶段，用户可以参与和评价数据库系统的设计，从而有利于保证数据库系统的设计与用户的需求相吻合。在概念模式的设计中，E-R模型法是最常见的设计方法。本系统的E-R图如下图所示：

（1）社区资讯信息的实体属性图如下：

图4.12 社区资讯实体属性图

（2）社区文件信息实体属性图如图4.13所示：

图4.13 社区文件信息实体属性图

（3）管理员信息实体属性图如图4.14所示：

图4.14 管理员信息实体属性图

4.3.2数据库设计表

1.表设计原则

\1) 标准化和规范化

遵循三范式：遵守3NF 标准的数据库的表设计原则是：“One Fact in One Place”即某个表只包括其本身基本的属性，当不是它们本身所具有的属性时需进行分解。表之间的关系通过外键相连接。

2)满足三大范式

第一范式：1NF是对属性的原子性约束，要求属性具有原子性，不可再分解；

第二范式：2NF是对记录的惟一性约束，要求记录有惟一标识，即实体的惟一性；

第三范式：3NF是对字段冗余性的约束，即任何字段不能由其他字段派生出来，它要求字段没有冗余。

人口老龄化社区服务与管理平台需要后台数据库，下面介绍数据库中的各个表的详细信息：

表4.1 社区活动评论表

字段	类型	空	默认	注释
id (主键)	bigint(20)	否		主键
addtime	timestamp	否	CURRENT_TIMESTAMP	创建时间
refid	bigint(20)	否		关联表id
userid	bigint(20)	否		用户id
nickname	varchar(200)	是	NULL	用户名
content	longtext	否		评论内容
reply	longtext	是	NULL	回复内容

表4.2 活动报名

字段	类型	空	默认	注释
id (主键)	bigint(20)	否		主键
addtime	timestamp	否	CURRENT_TIMESTAMP	创建时间
huodongmingcheng	varchar(200)	是	NULL	活动名称
huodongdidian	varchar(200)	是	NULL	活动地点
shenqingshuoming	varchar(200)	是	NULL	申请说明
baomingshijian	date	是	NULL	报名时间
yuangonggonghao	varchar(200)	是	NULL	员工工号
zhanghao	varchar(200)	是	NULL	账号
xingming	varchar(200)	是	NULL	姓名
sfsh	varchar(200)	是	否	是否审核
shhf	longtext	是	NULL	审核回复

表4.3 老人信息

字段	类型	空	默认	注释
id (主键)	bigint(20)	否		主键
addtime	timestamp	否	CURRENT_TIMESTAMP	创建时间
laorenxingming	varchar(200)	是	NULL	老人姓名
xingbie	varchar(200)	是	NULL	性别
nianling	int(11)	是	NULL	年龄
zhuzhi	varchar(200)	是	NULL	住址
jiashuxinxi	longtext	是	NULL	家属信息
shifouduju	varchar(200)	是	NULL	是否独居
shifoushengbing	varchar(200)	是	NULL	是否生病
fangwenzhouqi	varchar(200)	是	NULL	访问周期
zhanghao	varchar(200)	是	NULL	账号
xingming	varchar(200)	是	NULL	姓名
yuangonggonghao	varchar(200)	是	NULL	员工工号
yuangongxingming	varchar(200)	是	NULL	员工姓名

表4.4 社区资讯

字段	类型	空	默认	注释
id (主键)	bigint(20)	否		主键
addtime	timestamp	否	CURRENT_TIMESTAMP	创建时间
title	varchar(200)	否		标题
introduction	longtext	是	NULL	简介
picture	varchar(200)	否		图片
content	longtext	否		内容

表4.5 社区服务

字段	类型	空	默认	注释
id (主键)	bigint(20)	否		主键
addtime	timestamp	否	CURRENT_TIMESTAMP	创建时间
fuwumingcheng	varchar(200)	是	NULL	服务名称
fuwuleixing	varchar(200)	是	NULL	服务类型
fuwudizhi	varchar(200)	是	NULL	服务地址
fuwuneirong	longtext	是	NULL	服务内容
shenqingshijian	date	是	NULL	申请时间
beizhu	longtext	是	NULL	备注
zhanghao	varchar(200)	是	NULL	账号
xingming	varchar(200)	是	NULL	姓名
sfsh	varchar(200)	是	否	是否审核
shhf	longtext	是	NULL	审核回复

表4.6 社区活动

字段	类型	空	默认	注释
id (主键)	bigint(20)	否		主键
addtime	timestamp	否	CURRENT_TIMESTAMP	创建时间
huodongmingcheng	varchar(200)	是	NULL	活动名称
huodongdidian	varchar(200)	是	NULL	活动地点
baomingtiaojian	longtext	是	NULL	报名条件
kaishishijian	date	是	NULL	开始时间
jieshushijian	date	是	NULL	结束时间
huodongneirong	longtext	是	NULL	活动内容
yuangonggonghao	varchar(200)	是	NULL	员工工号
lianxidianhua	varchar(200)	是	NULL	联系电话
huodongtupian	varchar(200)	是	NULL	活动图片

表4.7 社区文件

字段	类型	空	默认	注释
id (主键)	bigint(20)	否		主键
addtime	timestamp	否	CURRENT_TIMESTAMP	创建时间
wenjianbianhao	varchar(200)	是	NULL	文件编号
wenjianmingcheng	varchar(200)	是	NULL	文件名称
wenjianneirong	longtext	是	NULL	文件内容
wenjianxiazai	varchar(200)	是	NULL	文件下载
faburen	varchar(200)	是	NULL	发布人
faburiqi	date	是	NULL	发布日期
tupian	varchar(200)	是	NULL	图片

表4.8 社区信息

字段	类型	空	默认	注释
id (主键)	bigint(20)	否		主键
addtime	timestamp	否	CURRENT_TIMESTAMP	创建时间
shequmingcheng	varchar(200)	是	NULL	社区名称
lishujiedao	varchar(200)	是	NULL	隶属街道
shequdizhi	varchar(200)	是	NULL	社区地址
changzhurenkou	int(11)	是	NULL	常住人口
laolingrenkou	int(11)	是	NULL	老龄人口
shequjieshao	longtext	是	NULL	社区介绍
shequyouxiang	varchar(200)	是	NULL	社区邮箱
lianxidianhua	varchar(200)	是	NULL	联系电话
shequtupian	varchar(200)	是	NULL	社区图片

表4.9 收藏表

字段	类型	空	默认	注释
id (主键)	bigint(20)	否		主键
addtime	timestamp	否	CURRENT_TIMESTAMP	创建时间
userid	bigint(20)	否		用户id
refid	bigint(20)	是	NULL	收藏id
tablename	varchar(200)	是	NULL	表名
name	varchar(200)	否		收藏名称
picture	varchar(200)	否		收藏图片
type	varchar(200)	是	1	类型(1:收藏,2:赞,3:踩)

表4.10 管理员表

字段	类型	空	默认	注释
id (主键)	bigint(20)	否		主键
username	varchar(100)	否		用户名
password	varchar(100)	否		密码
role	varchar(100)	是	管理员	角色
addtime	timestamp	否	CURRENT_TIMESTAMP	新增时间

表4.11 用户

字段	类型	空	默认	注释
id (主键)	bigint(20)	否		主键
addtime	timestamp	否	CURRENT_TIMESTAMP	创建时间
zhanghao	varchar(200)	否		账号
mima	varchar(200)	否		密码
xingming	varchar(200)	否		姓名
xingbie	varchar(200)	是	NULL	性别
xiaoqumingcheng	varchar(200)	是	NULL	小区名称
loufanghao	varchar(200)	是	NULL	楼房号
shouji	varchar(200)	是	NULL	手机
shenfenzheng	varchar(200)	是	NULL	身份证
shengri	varchar(200)	是	NULL	生日
touxiang	varchar(200)	是	NULL	头像

表4.12 员工

字段	类型	空	默认	注释
id (主键)	bigint(20)	否		主键
addtime	timestamp	否	CURRENT_TIMESTAMP	创建时间
yuangonggonghao	varchar(200)	否		员工工号
mima	varchar(200)	否		密码
yuangongxingming	varchar(200)	否		员工姓名
xingbie	varchar(200)	是	NULL	性别
xiaoqumingcheng	varchar(200)	是	NULL	小区名称
zhiwu	varchar(200)	是	NULL	职务
lianxidianhua	varchar(200)	是	NULL	联系电话
shenfenzheng	varchar(200)	是	NULL	身份证
touxiang	varchar(200)	是	NULL	头像

表4.13 走访任务

字段	类型	空	默认	注释
id (主键)	bigint(20)	否		主键
addtime	timestamp	否	CURRENT_TIMESTAMP	创建时间
renwumingcheng	varchar(200)	是	NULL	任务名称
renwuleixing	varchar(200)	是	NULL	任务类型
renwudidian	varchar(200)	是	NULL	任务地点
renwumubiao	varchar(200)	是	NULL	任务目标
renwuneirong	longtext	是	NULL	任务内容
renwuriqi	date	是	NULL	任务日期
beizhu	longtext	是	NULL	备注
yuangonggonghao	varchar(200)	是	NULL	员工工号
yuangongxingming	varchar(200)	是	NULL	员工姓名

表4.14 走访信息

字段	类型	空	默认	注释
id (主键)	bigint(20)	否		主键
addtime	timestamp	否	CURRENT_TIMESTAMP	创建时间
zoufangduixiang	varchar(200)	是	NULL	走访对象
zoufangdizhi	varchar(200)	是	NULL	走访地址
jibenqingkuang	longtext	是	NULL	基本情况
fangwenneirong	longtext	是	NULL	访问内容
daijiejuewenti	longtext	是	NULL	待解决问题
beizhu	longtext	是	NULL	备注
zoufangriqi	date	是	NULL	走访日期
zhaopian	varchar(200)	是	NULL	照片
yuangonggonghao	varchar(200)	是	NULL	员工工号
yuangongxingming	varchar(200)	是	NULL	员工姓名

打开新的 phpMyAdmin 窗口

5系统详细实现

5.1 用户信息管理

人口老龄化社区服务与管理平台的系统管理员可以对用户信息添加修改删除以及查询操作。具体界面的展示如图5.1所示。

图5.1 用户信息管理界面

5.2 员工信息管理

系统管理员可以对员工信息进行添加，修改，删除操作。具体界面如图5.2所示。

图5.2 用户信息管理界面

5.3 社区信息管理

系统管理员可以对社区信息进行添加，修改，删除以及查询操作。具体界面如图5.2所示。

图5.3 社区信息管理界面

5.4 老人信息查看

管理员可以对员工添加的员工信息进行查看。具体界面如图5.2所示。

图5.4 老人信息查看界面

5.5 社区文件管理

系统管理员可以对社区文件信息进行添加修改删除操作。具体界面如图5.2所示。

图5.5 社区文件管理界面

5.6 走访任务管理

系统管理员可以对走访任务进行添加修改删除操作，走访任务主要是对员工进行布置的，走访任务里面需要选择员工信息的。具体界面如图5.2所示。

图5.6 走访任务管理界面

5.7 走访信息查看

管理员可以对走访信息进行查看，走访信息是员工添加的。界面如下图所示：

图5.7 走访信息查看界面

5.8 社区活动管理

员工可以对社区活动机进行添加，修改，删除，查询操作。界面如下图所示：

图5.8 社区活动管理界面

5.9 活动报名

用户登录后可以在首页查看相关信息，并且可以在社区活动栏目查看社区活动信息，并且可以进行活动报名。界面如下图所示：

图5.9 活动报名界面

DiscussshequhuodongServiceImpl.java

package com.service.impl;

import org.springframework.stereotype.Service;
import java.util.Map;
import java.util.List;

import com.baomidou.mybatisplus.mapper.Wrapper;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.utils.PageUtils;
import com.utils.Query;


import com.dao.DiscussshequhuodongDao;
import com.entity.DiscussshequhuodongEntity;
import com.service.DiscussshequhuodongService;
import com.entity.vo.DiscussshequhuodongVO;
import com.entity.view.DiscussshequhuodongView;

@Service("discussshequhuodongService")
public class DiscussshequhuodongServiceImpl extends ServiceImpl<DiscussshequhuodongDao, DiscussshequhuodongEntity> implements DiscussshequhuodongService {
	
	
    @Override
    public PageUtils queryPage(Map<String, Object> params) {
        Page<DiscussshequhuodongEntity> page = this.selectPage(
                new Query<DiscussshequhuodongEntity>(params).getPage(),
                new EntityWrapper<DiscussshequhuodongEntity>()
        );
        return new PageUtils(page);
    }
    
    @Override
	public PageUtils queryPage(Map<String, Object> params, Wrapper<DiscussshequhuodongEntity> wrapper) {
		  Page<DiscussshequhuodongView> page =new Query<DiscussshequhuodongView>(params).getPage();
	        page.setRecords(baseMapper.selectListView(page,wrapper));
	    	PageUtils pageUtil = new PageUtils(page);
	    	return pageUtil;
 	}
    
    @Override
	public List<DiscussshequhuodongVO> selectListVO(Wrapper<DiscussshequhuodongEntity> wrapper) {
 		return baseMapper.selectListVO(wrapper);
	}
	
	@Override
	public DiscussshequhuodongVO selectVO(Wrapper<DiscussshequhuodongEntity> wrapper) {
 		return baseMapper.selectVO(wrapper);
	}
	
	@Override
	public List<DiscussshequhuodongView> selectListView(Wrapper<DiscussshequhuodongEntity> wrapper) {
		return baseMapper.selectListView(wrapper);
	}

	@Override
	public DiscussshequhuodongView selectView(Wrapper<DiscussshequhuodongEntity> wrapper) {
		return baseMapper.selectView(wrapper);
	}

}

ShequwenjianController.java

package com.controller;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Calendar;
import java.util.Map;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Date;
import java.util.List;
import javax.servlet.http.HttpServletRequest;

import com.utils.ValidatorUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.annotation.IgnoreAuth;

import com.entity.ShequwenjianEntity;
import com.entity.view.ShequwenjianView;

import com.service.ShequwenjianService;
import com.service.TokenService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.MD5Util;
import com.utils.MPUtil;
import com.utils.CommonUtil;


/**
 * 社区文件
 * 后端接口
 * @author 
 * @email 
 * @date 2021-05-28 13:20:53
 */
@RestController
@RequestMapping("/shequwenjian")
public class ShequwenjianController {
    @Autowired
    private ShequwenjianService shequwenjianService;
    


    /**
     * 后端列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,ShequwenjianEntity shequwenjian,
		HttpServletRequest request){
        EntityWrapper<ShequwenjianEntity> ew = new EntityWrapper<ShequwenjianEntity>();
		PageUtils page = shequwenjianService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, shequwenjian), params), params));

        return R.ok().put("data", page);
    }
    
    /**
     * 前端列表
     */
	@IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params,ShequwenjianEntity shequwenjian, 
		HttpServletRequest request){
        EntityWrapper<ShequwenjianEntity> ew = new EntityWrapper<ShequwenjianEntity>();
		PageUtils page = shequwenjianService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, shequwenjian), params), params));
        return R.ok().put("data", page);
    }

	/**
     * 列表
     */
    @RequestMapping("/lists")
    public R list( ShequwenjianEntity shequwenjian){
       	EntityWrapper<ShequwenjianEntity> ew = new EntityWrapper<ShequwenjianEntity>();
      	ew.allEq(MPUtil.allEQMapPre( shequwenjian, "shequwenjian")); 
        return R.ok().put("data", shequwenjianService.selectListView(ew));
    }

	 /**
     * 查询
     */
    @RequestMapping("/query")
    public R query(ShequwenjianEntity shequwenjian){
        EntityWrapper< ShequwenjianEntity> ew = new EntityWrapper< ShequwenjianEntity>();
 		ew.allEq(MPUtil.allEQMapPre( shequwenjian, "shequwenjian")); 
		ShequwenjianView shequwenjianView =  shequwenjianService.selectView(ew);
		return R.ok("查询社区文件成功").put("data", shequwenjianView);
    }
	
    /**
     * 后端详情
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id){
        ShequwenjianEntity shequwenjian = shequwenjianService.selectById(id);
        return R.ok().put("data", shequwenjian);
    }

    /**
     * 前端详情
     */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id){
        ShequwenjianEntity shequwenjian = shequwenjianService.selectById(id);
        return R.ok().put("data", shequwenjian);
    }
    



    /**
     * 后端保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody ShequwenjianEntity shequwenjian, HttpServletRequest request){
    	shequwenjian.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(shequwenjian);
        shequwenjianService.insert(shequwenjian);
        return R.ok();
    }
    
    /**
     * 前端保存
     */
    @RequestMapping("/add")
    public R add(@RequestBody ShequwenjianEntity shequwenjian, HttpServletRequest request){
    	shequwenjian.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(shequwenjian);
        shequwenjianService.insert(shequwenjian);
        return R.ok();
    }

    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody ShequwenjianEntity shequwenjian, HttpServletRequest request){
        //ValidatorUtils.validateEntity(shequwenjian);
        shequwenjianService.updateById(shequwenjian);//全部更新
        return R.ok();
    }
    

    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        shequwenjianService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
    
    /**
     * 提醒接口
     */
	@RequestMapping("/remind/{columnName}/{type}")
	public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request, 
						 @PathVariable("type") String type,@RequestParam Map<String, Object> map) {
		map.put("column", columnName);
		map.put("type", type);
		
		if(type.equals("2")) {
			SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
			Calendar c = Calendar.getInstance();
			Date remindStartDate = null;
			Date remindEndDate = null;
			if(map.get("remindstart")!=null) {
				Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
				c.setTime(new Date()); 
				c.add(Calendar.DAY_OF_MONTH,remindStart);
				remindStartDate = c.getTime();
				map.put("remindstart", sdf.format(remindStartDate));
			}
			if(map.get("remindend")!=null) {
				Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
				c.setTime(new Date());
				c.add(Calendar.DAY_OF_MONTH,remindEnd);
				remindEndDate = c.getTime();
				map.put("remindend", sdf.format(remindEndDate));
			}
		}
		
		Wrapper<ShequwenjianEntity> wrapper = new EntityWrapper<ShequwenjianEntity>();
		if(map.get("remindstart")!=null) {
			wrapper.ge(columnName, map.get("remindstart"));
		}
		if(map.get("remindend")!=null) {
			wrapper.le(columnName, map.get("remindend"));
		}


		int count = shequwenjianService.selectCount(wrapper);
		return R.ok().put("count", count);
	}
	


}

YonghuController.java

package com.controller;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Calendar;
import java.util.Map;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Date;
import java.util.List;
import javax.servlet.http.HttpServletRequest;

import com.utils.ValidatorUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.annotation.IgnoreAuth;

import com.entity.YonghuEntity;
import com.entity.view.YonghuView;

import com.service.YonghuService;
import com.service.TokenService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.MD5Util;
import com.utils.MPUtil;
import com.utils.CommonUtil;


/**
 * 用户
 * 后端接口
 * @author 
 * @email 
 * @date 2021-05-28 13:20:53
 */
@RestController
@RequestMapping("/yonghu")
public class YonghuController {
    @Autowired
    private YonghuService yonghuService;
    
	@Autowired
	private TokenService tokenService;
	
	/**
	 * 登录
	 */
	@IgnoreAuth
	@RequestMapping(value = "/login")
	public R login(String username, String password, String captcha, HttpServletRequest request) {
		YonghuEntity user = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("zhanghao", username));
		if(user==null || !user.getMima().equals(password)) {
			return R.error("账号或密码不正确");
		}
		
		String token = tokenService.generateToken(user.getId(), username,"yonghu",  "用户" );
		return R.ok().put("token", token);
	}
	
	/**
     * 注册
     */
	@IgnoreAuth
    @RequestMapping("/register")
    public R register(@RequestBody YonghuEntity yonghu){
    	//ValidatorUtils.validateEntity(yonghu);
    	YonghuEntity user = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("zhanghao", yonghu.getZhanghao()));
		if(user!=null) {
			return R.error("注册用户已存在");
		}
		Long uId = new Date().getTime();
		yonghu.setId(uId);
        yonghuService.insert(yonghu);
        return R.ok();
    }
	
	/**
	 * 退出
	 */
	@RequestMapping("/logout")
	public R logout(HttpServletRequest request) {
		request.getSession().invalidate();
		return R.ok("退出成功");
	}
	
	/**
     * 获取用户的session用户信息
     */
    @RequestMapping("/session")
    public R getCurrUser(HttpServletRequest request){
    	Long id = (Long)request.getSession().getAttribute("userId");
        YonghuEntity user = yonghuService.selectById(id);
        return R.ok().put("data", user);
    }
    
    /**
     * 密码重置
     */
    @IgnoreAuth
	@RequestMapping(value = "/resetPass")
    public R resetPass(String username, HttpServletRequest request){
    	YonghuEntity user = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("zhanghao", username));
    	if(user==null) {
    		return R.error("账号不存在");
    	}
        user.setMima("123456");
        yonghuService.updateById(user);
        return R.ok("密码已重置为：123456");
    }


    /**
     * 后端列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,YonghuEntity yonghu,
		HttpServletRequest request){
        EntityWrapper<YonghuEntity> ew = new EntityWrapper<YonghuEntity>();
		PageUtils page = yonghuService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, yonghu), params), params));

        return R.ok().put("data", page);
    }
    
    /**
     * 前端列表
     */
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params,YonghuEntity yonghu, 
		HttpServletRequest request){
        EntityWrapper<YonghuEntity> ew = new EntityWrapper<YonghuEntity>();
		PageUtils page = yonghuService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, yonghu), params), params));
        return R.ok().put("data", page);
    }

	/**
     * 列表
     */
    @RequestMapping("/lists")
    public R list( YonghuEntity yonghu){
       	EntityWrapper<YonghuEntity> ew = new EntityWrapper<YonghuEntity>();
      	ew.allEq(MPUtil.allEQMapPre( yonghu, "yonghu")); 
        return R.ok().put("data", yonghuService.selectListView(ew));
    }

	 /**
     * 查询
     */
    @RequestMapping("/query")
    public R query(YonghuEntity yonghu){
        EntityWrapper< YonghuEntity> ew = new EntityWrapper< YonghuEntity>();
 		ew.allEq(MPUtil.allEQMapPre( yonghu, "yonghu")); 
		YonghuView yonghuView =  yonghuService.selectView(ew);
		return R.ok("查询用户成功").put("data", yonghuView);
    }
	
    /**
     * 后端详情
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id){
        YonghuEntity yonghu = yonghuService.selectById(id);
        return R.ok().put("data", yonghu);
    }

    /**
     * 前端详情
     */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id){
        YonghuEntity yonghu = yonghuService.selectById(id);
        return R.ok().put("data", yonghu);
    }
    



    /**
     * 后端保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody YonghuEntity yonghu, HttpServletRequest request){
    	yonghu.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(yonghu);
    	YonghuEntity user = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("zhanghao", yonghu.getZhanghao()));
		if(user!=null) {
			return R.error("用户已存在");
		}
		yonghu.setId(new Date().getTime());
        yonghuService.insert(yonghu);
        return R.ok();
    }
    
    /**
     * 前端保存
     */
    @RequestMapping("/add")
    public R add(@RequestBody YonghuEntity yonghu, HttpServletRequest request){
    	yonghu.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(yonghu);
    	YonghuEntity user = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("zhanghao", yonghu.getZhanghao()));
		if(user!=null) {
			return R.error("用户已存在");
		}
		yonghu.setId(new Date().getTime());
        yonghuService.insert(yonghu);
        return R.ok();
    }

    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody YonghuEntity yonghu, HttpServletRequest request){
        //ValidatorUtils.validateEntity(yonghu);
        yonghuService.updateById(yonghu);//全部更新
        return R.ok();
    }
    

    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        yonghuService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
    
    /**
     * 提醒接口
     */
	@RequestMapping("/remind/{columnName}/{type}")
	public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request, 
						 @PathVariable("type") String type,@RequestParam Map<String, Object> map) {
		map.put("column", columnName);
		map.put("type", type);
		
		if(type.equals("2")) {
			SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
			Calendar c = Calendar.getInstance();
			Date remindStartDate = null;
			Date remindEndDate = null;
			if(map.get("remindstart")!=null) {
				Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
				c.setTime(new Date()); 
				c.add(Calendar.DAY_OF_MONTH,remindStart);
				remindStartDate = c.getTime();
				map.put("remindstart", sdf.format(remindStartDate));
			}
			if(map.get("remindend")!=null) {
				Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
				c.setTime(new Date());
				c.add(Calendar.DAY_OF_MONTH,remindEnd);
				remindEndDate = c.getTime();
				map.put("remindend", sdf.format(remindEndDate));
			}
		}
		
		Wrapper<YonghuEntity> wrapper = new EntityWrapper<YonghuEntity>();
		if(map.get("remindstart")!=null) {
			wrapper.ge(columnName, map.get("remindstart"));
		}
		if(map.get("remindend")!=null) {
			wrapper.le(columnName, map.get("remindend"));
		}


		int count = yonghuService.selectCount(wrapper);
		return R.ok().put("count", count);
	}
	


}

login.vue

<template>
  <div>
    <div class="container loginIn" style="backgroundImage: url(http://codegen.caihongy.cn/20210528/05f80abfe91d4343a281eced2578dc1a.jpg)">

      <div :class="2 == 1 ? 'left' : 2 == 2 ? 'left center' : 'left right'" style="backgroundColor: rgba(244, 244, 239, 0.95)">
        <el-form class="login-form" label-position="left" :label-width="1 == 3 ? '56px' : '0px'">
          <div class="title-container"><h3 class="title" style="color: rgba(21, 21, 20, 1)">人口老龄化社区服务与管理平台登录</h3></div>
          <el-form-item :label="1 == 3 ? '用户名' : ''" :class="'style'+1">
            <span v-if="1 != 3" class="svg-container" style="color:rgba(183, 131, 59, 1);line-height:44px"><svg-icon icon-class="user" /></span>
            <el-input placeholder="请输入用户名" name="username" type="text" v-model="rulesForm.username" />
          </el-form-item>
          <el-form-item :label="1 == 3 ? '密码' : ''" :class="'style'+1">
            <span v-if="1 != 3" class="svg-container" style="color:rgba(183, 131, 59, 1);line-height:44px"><svg-icon icon-class="password" /></span>
            <el-input placeholder="请输入密码" name="password" type="password" v-model="rulesForm.password" />
          </el-form-item>
          <el-form-item v-if="0 == '1'" class="code" :label="1 == 3 ? '验证码' : ''" :class="'style'+1">
            <span v-if="1 != 3" class="svg-container" style="color:rgba(183, 131, 59, 1);line-height:44px"><svg-icon icon-class="code" /></span>
            <el-input placeholder="请输入验证码" name="code" type="text" v-model="rulesForm.code" />
            <div class="getCodeBt" @click="getRandCode(4)" style="height:44px;line-height:44px">
              <span v-for="(item, index) in codes" :key="index" :style="{color:item.color,transform:item.rotate,fontSize:item.size}">{{ item.num }}</span>
            </div>
          </el-form-item>
          <el-form-item label="角色" prop="loginInRole" class="role">
            <el-radio
              v-for="item in menus"
	      v-if="item.hasBackLogin=='是'"
              v-bind:key="item.roleName"
              v-model="rulesForm.role"
              :label="item.roleName"
            >{{item.roleName}}</el-radio>
          </el-form-item>
          <el-button type="primary" @click="login()" class="loginInBt" style="padding:0;font-size:16px;border-radius:20px;height:44px;line-height:44px;width:100%;backgroundColor:rgba(203, 185, 86, 1); borderColor:rgba(203, 185, 86, 1); color:rgba(47, 43, 43, 1)">{{'1' == '1' ? '登录' : 'login'}}</el-button>
          <el-form-item class="setting">
            <!-- <div style="color:rgba(26, 24, 20, 0.85)" class="reset">修改密码</div> -->
          </el-form-item>
        </el-form>
      </div>

    </div>
  </div>
</template>
<script>
import menu from "@/utils/menu";
export default {
  data() {
    return {
      rulesForm: {
        username: "",
        password: "",
        role: "",
        code: '',
      },
      menus: [],
      tableName: "",
      codes: [{
        num: 1,
        color: '#000',
        rotate: '10deg',
        size: '16px'
      },{
        num: 2,
        color: '#000',
        rotate: '10deg',
        size: '16px'
      },{
        num: 3,
        color: '#000',
        rotate: '10deg',
        size: '16px'
      },{
        num: 4,
        color: '#000',
        rotate: '10deg',
        size: '16px'
      }],
    };
  },
  mounted() {
    let menus = menu.list();
    this.menus = menus;
  },
  created() {
    this.setInputColor()
    this.getRandCode()
  },
  methods: {
    setInputColor(){
      this.$nextTick(()=>{
        document.querySelectorAll('.loginIn .el-input__inner').forEach(el=>{
          el.style.backgroundColor = "rgba(211, 204, 204, 0.26)"
          el.style.color = "rgba(120, 118, 118, 1)"
          el.style.height = "44px"
          el.style.lineHeight = "44px"
          el.style.borderRadius = "20px"
        })
        document.querySelectorAll('.loginIn .style3 .el-form-item__label').forEach(el=>{
          el.style.height = "44px"
          el.style.lineHeight = "44px"
        })
        document.querySelectorAll('.loginIn .el-form-item__label').forEach(el=>{
          el.style.color = "rgba(183, 131, 59, 1)"
        })
        setTimeout(()=>{
          document.querySelectorAll('.loginIn .role .el-radio__label').forEach(el=>{
            el.style.color = "rgba(183, 131, 59, 1)"
          })
        },350)
      })

    },
    register(tableName){
      this.$storage.set("loginTable", tableName);
      this.$router.push({path:'/register'})
    },
    // 登陆
    login() {
      let code = ''
      for(let i in this.codes) {
        code += this.codes[i].num
      }
	  if ('0' == '1' && !this.rulesForm.code) {
	     this.$message.error("请输入验证码");
	    return;
	  }
      if ('0' == '1' && this.rulesForm.code.toLowerCase() != code.toLowerCase()) {
         this.$message.error("验证码输入有误");
		this.getRandCode()
        return;
      }
      if (!this.rulesForm.username) {
         this.$message.error("请输入用户名");
        return;
      }
      if (!this.rulesForm.password) {
         this.$message.error("请输入密码");
        return;
      }
      if (!this.rulesForm.role) {
         this.$message.error("请选择角色");
        return;
      }
      let menus = this.menus;
      for (let i = 0; i < menus.length; i++) {
        if (menus[i].roleName == this.rulesForm.role) {
          this.tableName = menus[i].tableName;
        }
      }
      this.$http({
        url: `${this.tableName}/login?username=${this.rulesForm.username}&password=${this.rulesForm.password}`,
        method: "post"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$storage.set("Token", data.token);
          this.$storage.set("role", this.rulesForm.role);
          this.$storage.set("sessionTable", this.tableName);
          this.$storage.set("adminName", this.rulesForm.username);
          this.$router.replace({ path: "/index/" });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    getRandCode(len = 4){
      this.randomString(len)
    },
    randomString(len = 4) {
      let chars = [
          "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k",
          "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v",
          "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G",
          "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",
          "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2",
          "3", "4", "5", "6", "7", "8", "9"
      ]
      let colors = ["0", "1", "2","3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]
      let sizes = ['14', '15', '16', '17', '18']

      let output = [];
      for (let i = 0; i < len; i++) {
        // 随机验证码
        let key = Math.floor(Math.random()*chars.length)
        this.codes[i].num = chars[key]
        // 随机验证码颜色
        let code = '#'
        for (let j = 0; j < 6; j++) {
          let key = Math.floor(Math.random()*colors.length)
          code += colors[key]
        }
        this.codes[i].color = code
        // 随机验证码方向
        let rotate = Math.floor(Math.random()*60)
        let plus = Math.floor(Math.random()*2)
        if(plus == 1) rotate = '-'+rotate
        this.codes[i].rotate = 'rotate('+rotate+'deg)'
        // 随机验证码字体大小
        let size = Math.floor(Math.random()*sizes.length)
        this.codes[i].size = sizes[size]+'px'
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.loginIn {
  min-height: 100vh;
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  .left {
    position: absolute;
    left: 0;
    top: 0;
    width: 360px;
    height: 100%;

    .login-form {
      background-color: transparent;
      width: 100%;
      right: inherit;
      padding: 0 12px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }

    .title-container {
      text-align: center;
      font-size: 24px;

      .title {
        margin: 20px 0;
      }
    }

    .el-form-item {
      position: relative;

      .svg-container {
        padding: 6px 5px 6px 15px;
        color: #889aa4;
        vertical-align: middle;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        padding: 0;
        line-height: 40px;
        width: 30px;
        text-align: center;
      }

      .el-input {
        display: inline-block;
        height: 40px;
        width: 100%;

        & /deep/ input {
          background: transparent;
          border: 0px;
          -webkit-appearance: none;
          padding: 0 15px 0 30px;
          color: #fff;
          height: 40px;
        }
      }

    }


  }

  .center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 360px;
    transform: translate3d(-50%,-50%,0);
    height: 446px;
    border-radius: 8px;
  }

  .right {
    position: absolute;
    left: inherit;
    right: 0;
    top: 0;
    width: 360px;
    height: 100%;
  }

  .code {
    .el-form-item__content {
      position: relative;

      .getCodeBt {
        position: absolute;
        right: 0;
        top: 0;
        line-height: 40px;
        width: 100px;
        background-color: rgba(51,51,51,0.4);
        color: #fff;
        text-align: center;
        border-radius: 0 4px 4px 0;
        height: 40px;
        overflow: hidden;

        span {
          padding: 0 5px;
          display: inline-block;
          font-size: 16px;
          font-weight: 600;
        }
      }

      .el-input {
        & /deep/ input {
          padding: 0 130px 0 30px;
        }
      }
    }
  }

  .setting {
    & /deep/ .el-form-item__content {
      padding: 0 15px;
      box-sizing: border-box;
      line-height: 32px;
      height: 32px;
      font-size: 14px;
      color: #999;
      margin: 0 !important;

      .register {
        float: left;
        width: 50%;
      }

      .reset {
        float: right;
        width: 50%;
        text-align: right;
      }
    }
  }

  .style2 {
    padding-left: 30px;

    .svg-container {
      left: -30px !important;
    }

    .el-input {
      & /deep/ input {
        padding: 0 15px !important;
      }
    }
  }

  .code.style2, .code.style3 {
    .el-input {
      & /deep/ input {
        padding: 0 115px 0 15px;
      }
    }
  }

  .style3 {
    & /deep/ .el-form-item__label {
      padding-right: 6px;
    }

    .el-input {
      & /deep/ input {
        padding: 0 15px !important;
      }
    }
  }

  .role {
    & /deep/ .el-form-item__label {
      width: 56px !important;
    }

    & /deep/ .el-radio {
      margin-right: 12px;
    }
  }

}
</style>