이 프로젝트의 프론트엔드는 html+css+vue(요청 보내기)로 구성되고 백엔드는 springboot에 의해 처리되며 관련 데이터베이스 운영문은 mybatis-plus
내 프로젝트 요약을 살펴보십시오.
프론트 엔드 로그인 등록 인터페이스가 이전 것이기 때문에 먼저 완벽에 대해 이야기합시다. 그래서 이번에는 그것을 복사하고 v-model을 사용하여 사용자 이름과 비밀번호를 바인딩하고 전송 axios 요청, 백엔드 부분은 mybatis-plus를 사용하고 일부 sql 문을 작성하지 않았기 때문입니다. 물론 이러한 sql 문은 그다지 복잡하지 않습니다. 시간이 있는 친구는 직접 작성하거나 컨트롤러 계층의 경우 몇 가지 논리 문입니다. 예를 들어 로그인할 때 먼저 사용자가 데이터베이스에 있는지 확인한 다음 암호가 있으면 비교합니다. 대체로 이 프로젝트는 40분도 채 걸리지 않았고 일반적으로 좋습니다.초보 Xiaobai에게 어려운 부분은 프런트 엔드와 백엔드 상호 작용에 약간의 차이가 있고 데이터 형식이 다음과 같다는 것입니다. 그 둘은 획일적이지 않다.
단점은 인터페이스가 너무 단순하고 js 효과가 없고 효과가 매우 직접적이며 vue가 요청을 보내는 데 더 많은 연습이 필요하다는 것입니다.
먼저 프로젝트 실행 후 기본 인터페이스의 효과를 살펴보십시오.
로그인 인터페이스는 다음과 같습니다.
등록 인터페이스는 다음과 같습니다.
프로젝트 디렉토리 구조는 다음과 같습니다.
1. 데이터베이스의 테이블 디자인
1.1 사용자 이름(varcahr 유형, 기본 키) 및 비밀번호(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 사용자 엔터티 클래스(즉, 사용자 정보(계정 암호))
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private String username;
private String password;
}
3.3 컨트롤러(컨트롤 레이어 관련 코드, 프런트 엔드에서 보낸 요청 처리)
@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
public interface UserMapper extends BaseMapper<User> {
}
3.5 정의된 서비스 인터페이스 코드
public interface UserService extends IService<User> {
}
3.6 서비스 인터페이스의 구현 클래스 구현
@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. 프로젝트 완료 개요
프론트 엔드 로그인 등록 인터페이스가 이전 것이기 때문에 먼저 완벽에 대해 이야기합시다. 그래서 이번에는 그것을 복사하고 v-model을 사용하여 사용자 이름과 비밀번호를 바인딩하고 전송 axios 요청, 백엔드 부분은 mybatis-plus를 사용하고 일부 sql 문을 작성하지 않았기 때문입니다. 물론 이러한 sql 문은 그다지 복잡하지 않습니다. 시간이 있는 친구는 직접 작성하거나 컨트롤러 계층의 경우 몇 가지 논리 문입니다. 예를 들어 로그인할 때 먼저 사용자가 데이터베이스에 있는지 확인한 다음 암호가 있으면 비교합니다. 대체로 이 프로젝트는 40분도 채 걸리지 않았고 일반적으로 좋습니다.초보 Xiaobai에게 어려운 부분은 프런트 엔드와 백엔드 상호 작용에 약간의 차이가 있고 데이터 형식이 다음과 같다는 것입니다. 그 둘은 획일적이지 않다.
단점은 인터페이스가 너무 단순하고 js 효과가 없고 효과가 매우 직접적이며 vue가 요청을 보내는 데 더 많은 연습이 필요하다는 것입니다.
도움이 필요한 친구는 백그라운드에서 저에게 비공개 메시지를 보내 소스 코드를 보낼 수 있습니다. 코드 텍스트는 쉽지 않습니다. 친구가 좋아할 수 있습니다! ! !