Java微型博客系统——博客系统登录界面设计

登录界面设计

初步设计一个登录界面，之后可能会有改动
实现用户的登录和注册功能的页面

文件分布

步骤

0.导入依赖

这里需要导入thymeleaf依赖，便于前后端的交互

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

1.设计登录前端

由于我主要发展方向是后端，所以前端的界面略微简单

前端分为登录和跳转到注册两个部分

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>请登录</title>
</head>
<body><h2>请登录</h2>
<form action="/zhz/login" method="get">账号：<input type="text" name="userAccount" placeholder="请输入您的账号" required><br/>密码：<input type="password" name="userPassword" placeholder="请输入您的密码" required><br/><input type="submit" value="确定"><input type="reset" value="重置">
</form><h2>还没有账号？</h2>
<form action="/zhz/register" method="get"><input type="text" name="userAccount" value="null" hidden><input type="submit" value="前往注册">
</form></body>
</html>

2.设计注册界面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="utf-8" /><title>注册页面</title>
</head>
<body><h2>欢迎您注册ZHZ小博客系统</h2>
<form action="/zhz/register" method="get">账号：<input type="text" name="userAccount"  placeholder="请输入您的账号" required><br/>密码：<input type="password" name="userPassword" placeholder="请输入您的密码" required><br/>密码：<input type="password" name="userPassword2" placeholder="请再输入您的密码" required><br/><p th:text="${callback}"></p><input type="submit" value="确定"><input type="reset" value="重置">
</form></body>
</html>

3.编写登录的controller

登录的controller简单一些，只要判断用户是否存在，并将用户名存入session中，转到主界面。
与数据库连接那段暂时没做。

package com.zhz.f.client.controller;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;@Controller
public class LoginController {@RequestMapping("/zhz/login")public String loginServer(HttpServletRequest request, Model model, HttpSession session){//判断是否有该用户，密码是否正确//将用户名存入sessionString userAccount = request.getParameter("userAccount");session.setAttribute("userAccount",userAccount);//进入主界面model.addAttribute("userAccount",userAccount);return "userMain";}
}

4.编写注册的controller

判断两次密码是否一致，不一致则回到注册界面，同时显示错误信息。一致则将用户名存入session中，并转到主界面

package com.zhz.f.client.controller;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;import javax.servlet.http.HttpServletRequest;@Controller
public class RegisterController {@RequestMapping("/zhz/register")public String registerControl(HttpServletRequest request, Model model) {//判断两次密码是否一致String userAccount = request.getParameter("userAccount");String password1 = request.getParameter("userPassword");String password2 = request.getParameter("userPassword2");//没有密码说明是第一次注册if (password1 == null) return "register";if (!password1.equals(password2)) {model.addAttribute("callback", "两次的密码不一致");return "register";}//将用户名存入sessionrequest.getSession().setAttribute("userAccount", userAccount);//注册成功进入主页面model.addAttribute("userAccount",userAccount);return "userMain";}
}

5.主界面的设计

目前只是接收后端传来的用户账号，之后会进一步升级

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="utf-8" /><title>欢迎</title>
</head>
<body><h2>欢迎用户<strong th:text="${userAccount}"></strong></h2></body>
</html>

6.拦截器的设计

也许有人会问为什么要存用户账号到session中呢，是为了以后更好的获取信息吗？确实，这是一点。还一点是为了过滤器的拦截。

我们不希望没有登录的人进入到我们的主页以及后续可能会编写的页面，所以设置了一个拦截器。

package com.zhz.f.client.fliter.configeration;import com.zhz.f.client.fliter.TemInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class TemInterceptorConfiguration implements WebMvcConfigurer {@Beanpublic TemInterceptor registerInterceptor(){return new TemInterceptor();}@Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(registerInterceptor()).addPathPatterns("/zhz/*");}
}

package com.zhz.f.client.fliter;import org.springframework.web.servlet.HandlerInterceptor;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class TemInterceptor implements HandlerInterceptor {@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {//如果没有登录的话则不能访问/zhz/*的内容if (request.getParameter("userAccount")==null&&request.getSession().getAttribute("userAccount")==null){response.sendRedirect("/login");return false;//不让过滤器继续，不然会先去到请求的controller。}return true;}
}

Java微型博客系统——博客系统登录界面设计相关推荐

按钮隐藏_Win10系统：如何隐藏登录界面右下角的电源按钮？(两种方法)
Win10系统:如何隐藏登录界面右下角的电源按钮? Win10系统,在登录界面右下角,通常会有一个[电源按钮],让我们无需登录系统就可以进行"关机.重启.睡眠"等操作,方便用户使用 ...
海尔简爱s11怎么进入bios_海尔简爱s11系统应用商店没有登录界面怎么办?
最近有位海尔简爱s11用户,想要使用win10系统应用商店下载应用的时候,却发现应用商店没有登录界面,无法登录微软账号.那么,win10系统应用商店没有弹出登录界面,应该如何解决呢?下面就来看一下海尔 ...
Y460 安装ubuntu 12.04系统黑屏，登录界面黑屏
ubuntu 12.04系统黑屏,登录界面黑屏,但是命令行界面可以登录,也可以正常使用,当时在装CVS,装完重启就这样了,可能是因为前一天装更新时,突然断电导致图形界面损坏,参考他人方法,终于修复,总 ...
Mac系统开发常见问题-Mac登录界面多了一个其他账户选项
最近在给MacbookPro安装许多应用多了,开机登录页面"其他账户"选项,开机及其丑陋,无法忍受,搜索相关文章发现可以这样解决. 方法: 1.系统偏好设置->用户与群组-& ...
完成如下界面的设计 java登录界面设计
代码如下: package com.itxiaotiancai.Example10_2; import java.awt.*; import javax.swing.*; import javax.s ...
Java可视化界面设计（登录界面设计）
1.界面居中显示 frame.setResizable(false);fame.setLocationRelativeTo(null);frame.setVisible(true) 2.全屏操作 Di ...
java仿qq登录界面设计,Java Swing仿QQ登录界面效果
本文实例为大家分享了Java Swing仿QQ登录界面展示的具体代码,供大家参考,具体内容如下闲来无事将早些时候已实现的QQ登录界面再实现了一遍,纯手工打造(意思是没有用NetBeans.MyEcl ...
java成绩管理系统设计背景_java学生成绩管理系统界面设计
关于学生成绩管理系统的界面设计:代码如下数据库表设计 DROP TABLE IF EXISTS `student`; CREATE TABLE `student` ( `username` varc ...
php设计的个人页面成品,PHP仿个人博客（1）数据库与界面设计
自学PHP大半年多了,断断续续地,但是最终还是坚定了我的想法,将PHP继续下去,所以写这个PHP的博客是为了找个稳定的 PHP工作,不求工资多高,但求一收留之地.我能看懂大部分英语文档,人不蠢,爱学习 ...