利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能

这学期选了javaweb课,做了一个小的个人博客系统,因为还要准备毕业论文,实在是没时间了,先把一个只有登陆与注册功能的发上来,以后有时间在补充。


JavaWeb课程项目:个人博客系统

姓名:姜博文 学号:PB14203249

 

1.框架概述

1.1系统属性

1.1.1前端

页面展示:html,jsp

1.1.2前后端交互

js,jquery

1.1.3后端

后端语言:java

后端框架:Spring主要是使用了其SpringMVC和SpringJDBC

数据库:MySQL

数据库操作界面:PHPmyadmin

服务器:Tomcat,阿里云学生服务器

 

2.系统功能

2.1注册

2.1.1前端

邮箱输入框做正则表达式限制,限制长度不超过30位

密码输入框做长度限制6-20位

确认密码输入框做长度限制6-20位,同时密码与确认密码应相同

对不符合上述要求的在前端页面对应部分做提示

邮箱输入框输入@之后提示可选邮箱,并可通过方向键和回车选择

提交时检测是否各项信息均填写完整

每点击其他输入框时检查已填写输入框是否符合要求

2.1.2后端

写入用户名以及密码

2.2登录

2.1.1前端

邮箱输入框做正则表达式限制,同时长度不超过30位

密码输入框做长度限制6-20位

记住账户存储cookies,记住密码同时存储账户和密码的cookies

点击登录若账户密码存在则跳转至主页面,同时存储用于记录登录状态的cookies

点击登录若账户密码不存在则提示密码错误

点击登录若信息填写不完整则提示信息不完整

2.1.2后端

查询账号密码是否同时为一条记录的信息,若是则返回true,否返回false

2.3主页

2.3.1前端

查询是否为已登录状态,已登录则修改页面左上角的欢迎词

三条滚动展示的图片消息,页脚为友情链接

3. 项目框架如图所示

利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第1张图片

项目名myBlog

3.1源码存放位置src

包名com.myBlog

①MyBlogController

用于页面和前后端信息的转发的控制器

②User

用于记录账号密码的用户类

③UserDAO

用于用户访问数据库的对象的接口

④UserJDBCTemplet

用户数据库访问对象接口的实现类

⑤UserMapper

用于接收数据库查询到的用户数据

 

3.2静态文件存放位置static

①css

Bootstrap的css文件

②image

首页展示的九张图片

③js

Bootstrap和jquery的js文件

负责登录、注册和邮箱提示的js文件

 

3.3WEB-INF

①classes

类文件,在创建项目时将构建路径修改为该位置

②jsp

首页的前端展示

③Beans.xml

用于数据库连接的javabean

④myBlog-servlet.xml

SpringMVC用于页面转发,必须以-servlet.xml结尾

⑤web.xml

配置文件,将所有目录的访问都交给DispatcherServlet再由controller进行转发,具体的mapping配置在controller中以注释的形式配置。

配置了静态目录,以使得在静态目录中的js,css等可以被直接以路径访问。

⑥lib

Spring,mysql等引入的jar包

 

 

4. 页面调用流程

当一位游客通过url:

http://101.132.149.219:83/myBlog/homepage

访问主页时。

SpringMVC开始发挥它的功效。MVC 框架提供了模型-视图-控制的体系结构和可以用来开发灵活、松散耦合的 web 应用程序的组件。MVC 模式导致了应用程序的不同方面(输入逻辑、业务逻辑和 UI 逻辑)的分离,同时提供了在这些元素之间的松散耦合。

Spring Web 模型-视图-控制(MVC)框架是围绕 DispatcherServlet 设计的,DispatcherServlet 用来处理所有的 HTTP 请求和响应。Spring Web MVC DispatcherServlet 的请求处理的工作流程如下图所示:

 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第2张图片

 

首先由web.xml(下图)截获本条访问,并以第一优先级将其发送给DispatcherServlet

 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第3张图片

DispatcherServlet通过jar包引入将其转发给controller(下图),controller返回homepage到DispatcherServlet

 

DispatcherServlethomepage转发给ViewResolver也就是myBlog-servlet.xml。

myBlog-servlet.xml将返回值homepage加上前缀和后缀

并找到对应的view资源homepage.jsp

 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第4张图片利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第5张图片

homepage.jsp其中引入了一些静态文件,这些文件放在WebContent文件夹中,该文件夹的内容不能够直接通过url引入,所以在web.xml中做了配置

 

使得静态文件夹中的内容可以引入。

 

当游客点击右上角的Login/Registeda链接时,页面上产生一个模态框,在原先的jsp中,该模态框的内容为空,是通过login.js文件写入的

 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第6张图片


利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第7张图片 

写入的同时检查是否曾经选择过记住账号和记住密码(即检查是否存在cookies),如果曾经写过,则自动填写账号密码

 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第8张图片

同时检查该账号是否在短时间内登陆过,如果登陆过则直接切换为已登录的状态,并修改页面左上角的欢迎词

 

当用户从登录页面切换为注册页面时,调用registed.js中的代码,更改模态框内容

 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第9张图片


利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第10张图片 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第11张图片

 

在注册和登录界面输入的信息如果不符合格式要求,则会将其设置为错误标记

 

符合要求设为成功标记

 

点击注册时首先检查注册页面的信息是否按照规定格式填写

 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第12张图片

若信息按照规定格式填写,则会通过ajex与数据库产生链接

 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第13张图片

Ajex将其url转移到myBlog/registed,controller将其截获

 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第14张图片

Controller首先获取beans文件,从中找到负责链接数据库的userJDBCTemplate

 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第15张图片

bean调用类com.myBlog.UserJDBCTemplate该类继承了接口,该接口有注册和登录两个方法

 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第16张图片

并且该类实现了该接口的两个方法,并连接了数据库

 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第17张图片

在数据库方面,我通过phpmyadmin进行界面化管理,并部署在9.9元/月的阿里云服务器上

 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第18张图片

注册成功后,registed调用gotologin()进入到登录界面

 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第19张图片

登录同样有前端限制,在login.js文件中,这里就不赘述了。

辅助以cookies的记录,用于记住账号和密码,是可以供用户进行选择的。

 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第20张图片

点击登录按钮,系统的操作基本上如注册一样,连接数据库,此时需要查找数据库中是否有一条记录同时存储了符合输入的用户名和密码。

这里使用了UserMapper类用于记录返回结果

 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第21张图片

返回结果如果不为空的话,UserJDBCTemplet返回true

 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第22张图片

Controller接收到了返回的true值,则会返回一个json给login.js,json的message属性值为true

 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第23张图片

Login.js的ajex收到了json才会进入success,并且在客户端存储两个cookies,这里也可以在服务器端存储session,方便起见,不考虑复杂情况直接在客户端存储了。

 利用SpringMVC和SpringJDBC搭建一个个人博客系统 实现登陆与注册功能_第24张图片

登录成功后,页面被重新定向到主页,主页加载时会检测上述的两个cookies是否已经存在,若存在则会在修改左上角的欢迎词,为欢迎当前账号。

 

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(功能设计,JAVA,Spring)