此项目前端由html+css+vue(发送请求)组成,后端由springboot进行处理请求,相关数据库操作语句选用的是mybatis-plus
先看看我的项目总结吧:
先说完美的吧,因为前端登陆注册界面是之前的,这次就复制了一下,在前端部分仅书写了一些vue,使用v-model绑定username以及password,发送axios请求,后端那部分因为使用的是mybatis-plus,也没有编写一些sql语句,当然,这些sql语句也不是很复杂的,有时间的小伙伴可以直接试着编写,或在我这基础上进行修改,controller层的话,就是一些逻辑语句,例如:登陆时先判断数据库中是否存在该用户,若存在再进行密码比对,注册时则是先判断用户是否已经注册,存在数据库中,若不存在再让其进行注册。总而言之,此项目花费不到四十分钟,总体还是不错对于新手小白来说,我认为困难的部分则是在前后端交互那个地方,存在一些差异,二者的数据格式不统一。
不足的地方,就是界面过于简单,没有啥js效果,效果非常直接,以及vue发送请求需要多加练习。
先看项目运行后主界面效果:
登陆界面如下:
注册界面如下:
项目目录结构如下:
1.数据库中表的设计
1.1 创建一个表其中有两个字段一个用户名(varcahr类型,primary key)一个密码(varchar类型)
1.2 表结构如下所示
2.需要导入的jar包(pom.xml文件)以及相关配置设置(数据库信息以及端口)
2.1文件具体相关代码如下
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.5.4</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.wz</groupId>
<artifactId>LogAndRegister</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>LogAndRegister</name>
<description>LogAndRegister</description>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.2</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.20</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.76</version>
</dependency>
<dependency>
<groupId>commons-lang</groupId>
<artifactId>commons-lang</artifactId>
<version>2.6</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>1.1.23</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
2.2数据库信息以及端口
server:
port: 81
spring:
datasource:
druid:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/logandregister
username: root
password: 111111
3.后端相关代码的编写
3.1 后端返回给前端的信息封装在R类中
@Data
public class R<T> {
private Integer code; //编码:1成功,0和其它数字为失败
private String msg; //错误信息
private T data; //数据
private Map map = new HashMap(); //动态数据
public static <T> R<T> success(T object) {
R<T> r = new R<T>();
r.data = object;
r.code = 1;
return r;
}
public static <T> R<T> error(String msg) {
R r = new R();
r.msg = msg;
r.code = 0;
return r;
}
public R<T> add(String key, Object value) {
this.map.put(key, value);
return this;
}
}
3.2 User实体类(即用户的信息(账号密码))
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private String username;
private String password;
}
3.3 Controller(控制层相关代码,处理前端发送的请求)
@RestController
@RequestMapping("/user")
@Slf4j
public class UserController {
@Autowired
private UserService userService;
@PostMapping("/login")
public R<String> login(@RequestBody User user){
log.info("user:{}",user);
LambdaQueryWrapper<User> lqw = new LambdaQueryWrapper<>();
lqw.eq(User::getUsername,user.getUsername());
User one = userService.getOne(lqw);
System.out.println(one);
// 查询不到用户
if (one == null){
return R.error("用户账号不存在");
}
// 密码错误
if(!one.getPassword().equals(user.getPassword())){
return R.error("密码错误");
}
return R.success("登陆成功");
}
@PostMapping("/register")
public R<String> register(@RequestBody User user){
log.info("user:{}",user);
// 判断前端传来的数据是否正常
if (user==null){
return R.error("请输入注册信息");
}
// 判断账号是否存在
String username = user.getUsername();
LambdaQueryWrapper<User> lambdaQueryWrapper = new LambdaQueryWrapper<>();
lambdaQueryWrapper.eq(User::getUsername,username);
User one = userService.getOne(lambdaQueryWrapper);
if (one!=null){
return R.error("用户账号已注册");
}
// 二者都满足则以下
userService.save(user);
return R.success("注册成功");
}
}
3.4 Mapper层相关代码
@Mapper
public interface UserMapper extends BaseMapper<User> {
}
3.5 定义的Service接口代码
public interface UserService extends IService<User> {
}
3.6实现Service接口的实现类
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
}
4.前端相关代码
4.1 登陆界面login.html(包含vue发送请求)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<link href="css/login.css" rel="stylesheet">
</head>
<body>
<div id="loginDiv">
<form id="form" >
<h1 id="loginMsg">LOGIN IN</h1>
<p>Username:<input id="username" name="username" type="text" v-model="userName"></p>
<p>Password:<input id="password" name="password" type="password" v-model="passWord"></p>
<div id="subDiv">
<input type="submit" class="button" value="login up" @click="login">
<input type="reset" class="button" value="reset" >
<a href="register.html">没有账号?点击注册</a>
</div>
</form>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#loginDiv",
data: {
userName: "",
passWord: "",
},
methods: {
login:function (){
console.log(this.userName,this.passWord);
axios.post('http://localhost:81/user/login',
{
username: this.userName,
password: this.passWord,
}).then( resp=> {
console.log(resp)
if (resp.data.code == '1') {
window.location.href = 'loginSuccess.html';
}else {
alert("账号或密码错误");
this.userName='';
this.passWord='';
}
})
}
}
})
</script>
</body>
</html>
4.2 注册界面register.html(包含vue发送请求)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎注册</title>
<link href="css/register.css" rel="stylesheet">
</head>
<body>
<div class="form-div">
<div class="reg-content">
<h1>欢迎注册</h1>
<span>已有帐号?</span> <a href="login.html">登录</a>
</div>
<form id="reg-form">
<table>
<tr>
<td>用户名</td>
<td class="inputs">
<input name="username" type="text" id="username" v-model="userName">
<br>
<span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
</td>
</tr>
<tr>
<td>密码</td>
<td class="inputs">
<input name="password" type="password" id="password" v-model="passWord">
<br>
<span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
</td>
</tr>
</table>
<div class="buttons">
<input value="注 册" type="submit" id="reg_btn" @click="register">
</div>
<br class="clear">
</form>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#reg-form",
data: {
userName: "",
passWord: "",
},
methods: {
register: function () {
console.log(this.userName, this.passWord);
axios.post('http://localhost:81/user/register',
{
username: this.userName,
password: this.passWord,
}).then(resp => {
console.log(resp)
if (resp.data.code == '1') {
alert(resp.data.data);
window.location.href = 'login.html';
} else {
console.log(resp.data.data);
alert(resp.data.data);
this.userName = '';
this.passWord = '';
}
})
}
}
})
</script>
</body>
</html>
5.项目完毕总结
先说完美的吧,因为前端登陆注册界面是之前的,这次就复制了一下,在前端部分仅书写了一些vue,使用v-model绑定username以及password,发送axios请求,后端那部分因为使用的是mybatis-plus,也没有编写一些sql语句,当然,这些sql语句也不是很复杂的,有时间的小伙伴可以直接试着编写,或在我这基础上进行修改,controller层的话,就是一些逻辑语句,例如:登陆时先判断数据库中是否存在该用户,若存在再进行密码比对,注册时则是先判断用户是否已经注册,存在数据库中,若不存在再让其进行注册。总而言之,此项目花费不到四十分钟,总体还是不错对于新手小白来说,我认为困难的部分则是在前后端交互那个地方,存在一些差异,二者的数据格式不统一。
不足的地方,就是界面过于简单,没有啥js效果,效果非常直接,以及vue发送请求需要多加练习。
有需要的小伙伴可以后台私信我发源码哦,码文不易,小伙伴可以点个赞哦!!!文章来源:https://www.toymoban.com/news/detail-679191.html
文章来源地址https://www.toymoban.com/news/detail-679191.html
到了这里,关于SpringBoot实现登陆注册(附源码)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!