对于一个系统来说,其第一个功能就是应该实现账号的登录注册功能,本章节继续前端的代码,实现登录验证然后跳转index主页的新功能
2023/11/2
1.实现登录查询验证
我们要实现登录的功能,首先前端页面我们需要一个表单,内容应该包括账号密码,这里我加一个账号类型,方便我们后续做管理员和普通用户的区分,然后应该有一个登录按钮,如果用户没有账号,应该同时提供一个注册按钮,代码逐个分析:
新建一个实体用来存储用户信息-实体User
@Data
public class User {
int id;
String username;
String password;
String usertype;
}
对应的数据库建表
create table user(
id int auto_increment PRIMARY KEY,
username varchar(255) not null,
password varchar(255) not null,
usertype int
)
新建对应的service和service实现类,这里我采用的方法逻辑为,如果用户要登录,当输入账号密码后,我首先使用一个查询username是否存在的方法selectUserByUsername,返回一个布尔类型,如果存在再进行密码的验证。这里我们使用selectpassword方法,具体代码如下:
@Service
public interface UserService {
void save(User user);
Boolean selectUserByUsername(String username);
String selectpassword(String username);
}
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public void save(User user) {
userMapper.save(user);
}
public Boolean selectUserByUsername(String username){
return userMapper.selectUserByUsername(username);
}
public String selectpassword(String username){
return userMapper.selectpassword(username);
}
}
#sql语句
<insert id="save">
insert into user (username,password,usertype)values (#{username},#{password},#{usertype})
</insert>
<select id="selectUserByUsername" resultType="java.lang.Boolean">
select count(*)>0 from `user` where username=#{username}
</select>
<select id="selectpassword" resultType="java.lang.String">
select password from user where username=#{username}
</select>
方法写好之后,写我们的后端controller逻辑,首先设置默认根路径为login页面,然后接收login路径提交的参数,判断havaname是否存在,若存在,比对密码,否则返回错误信息
@Controller
@Slf4j
public class loginController {
@Autowired
private UserService userService;
@GetMapping("/")
public String index(){
return "login";
}
@PostMapping("/login")
public String login(@RequestParam("username")String username,
@RequestParam("password")String password,
Model model) {
Boolean havaname = userService.selectUserByUsername(username);
if (havaname) {
String pd = userService.selectpassword(username);
if (pd.equals(password)) {
model.addAttribute("status", "200");
return "index";
}
else{
model.addAttribute("message","密码错误");
return "login";
}
} else {
model.addAttribute("message", "账号不存在");
return "login";
}
}
}
前端页面代码:
<div class="loginpage">
<h1>用户登录页面</h1>
<form method="post" th:action="@{/login}">
<label for="username">账号:</label>
<input id="username" name="username" type="text"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<button type="submit" id="loginbutton" >登录</button>
</form>
<form method="get" th:action="@{/register}" id="zhuce">
<button type="submit" id="registerbutton">注册</button>
</form>
</div>
<script th:inline="javascript">
window.onload = function() {
var message = /*[[${message}]]*/ '';
if (message) {
alert(message);
}
};
</script>
具体实现效果图:
2.实现注册账号功能
如果用户没有账号,点击登录页面的注册按钮,会跳转到register注册页面,前端如下:
<div class="loginpage">
<form method="post" th:action="@{/toregister}">
<label for="username">账号:</label>
<input id="username" name="username" type="text" required><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required><br>
<label for="usertype">类型:</label>
<select id="usertype" name="usertype" required><br>
<option value="merchant">商家</option>
<option value="customer">顾客</option>
</select>
<button type="submit" id="registerbutton" >注册</button>
</form>
<script th:inline="javascript">
window.onload = function() {
var message = /*[[${message}]]*/ '';
if (message) {
alert(message);
}
};
</script>
</div>
与登录页面类似,但是多了一个type选择框,当点击提交后,后端会将信息存储到数据库中,这样就完成了一个闭环,先进行注册,然后返回到前端页面登录。注册controller代码:
@GetMapping("/register")
public String register(){
return "register";
}
@PostMapping("/toregister")
public String toregister(@RequestParam("username")String username,
@RequestParam("password")String password,
@RequestParam("usertype")String usertype,
Model model){
User user = new User();
user.setUsername(username);
user.setPassword(password);
user.setUsertype(usertype);
System.out.println(user);
userService.save(user);
model.addAttribute("message","注册账号成功,请继续登录");
return "login";
}
注册逻辑和登录逻辑都放在loginController即可,最后的功能展示:
注册成功图
登录成功图
登录失败图