可以先建一个简单的数据库,包含id、姓名和密码
create database db01;
create table tb_user
(
id int unsigned primary key auto_increment comment 'ID',
username varchar(10) not null comment '姓名',
password varchar(20) not null comment '密码'
) comment '用户表';
insert into tb_user(id, username,password)
VALUES (null,'jack','666666');
insert into tb_user(id, username,password)
VALUES (null,'rose','666666');
insert into tb_user(id, username,password)
VALUES (null,'Tom','666666');
连接数据库配置
#驱动类名称
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#数据库连接的url
spring.datasource.url=jdbc:mysql://localhost:3306/db01
#连接数据库的用户名
spring.datasource.username=root
#连接数据库的密码
spring.datasource.password=123456
dao层接口
package org.example.dao;
import org.example.domain.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper
public interface UserDao {
@Select("select * from db01.tb_user")
List<User> login();
}
service层
package org.example.service.impl;
import org.example.dao.UserDao;
import org.example.domain.Result;
import org.example.domain.User;
import org.example.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserDao userDao;
public Result login(User user){
List<User> userData = userDao.login();
for (User user1 : userData) {
if (user1.getUsername().equals(user.getUsername())&& user1.getPassword().equals(user.getPassword())){
return Result.success("登录成功",null);
}
}
return Result.error("登录失败");
}
}
service层接口
package org.example.service;
import org.example.domain.Result;
import org.example.domain.User;
public interface UserService {
Result login(User user);
}
controller层
package org.example.web;
import org.example.domain.Result;
import org.example.domain.User;
import org.example.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("/login")
public Result login(@RequestBody User user){
Result result = this.userService.login(user);
return result;
}
}
实体类
package org.example.domain;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private Integer id;
private String username;
private String password;
}
响应结果类
package org.example.domain;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
//为了统一响应结果
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result {
//1 成功 0 失败
private Integer code;
//2 信息
private String msg;
//3 数据
private Object data;
// 失败方案
public static Result error(String msg){
Result result = new Result();
result.setCode(0);
result.setMsg(msg);
return result;
}
// 成功方案
public static Result success(String msg, Object obj){
Result result = new Result();
result.setCode(1);
result.setMsg(msg);
result.setData(obj);
return result;
}
}
启动类
package org.example;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class Start {
public static void main(String[] args) {
SpringApplication.run(Start.class,args);
}
}
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
<form>
用户名:<input type="text" name="username" v-model="user.username"/><br/>
密码:<input type="password" name="password" v-model="user.password"/><br/>
<input type="button" value="登录" @click="loginfn">
</form>
{{message}}
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
user:{},
message:""
},
methods:{
loginfn:function (){
//ajax
axios.post("http://localhost:8080/login",this.user)
.then(resp=>{
this.message=resp.data.msg;
})
}
}
})
</script>
</html>
maven依赖
<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>org.example</groupId>
<artifactId>mybaits_demo01_denglu</artifactId>
<version>1.0-SNAPSHOT</version>
<properties>
<maven.compiler.source>11</maven.compiler.source>
<maven.compiler.target>11</maven.compiler.target>
</properties>
<!--3. 集成springboot的项目-->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.7.12</version>
<relativePath/>
</parent>
<!-- 4导入的依赖 -->
<dependencies>
<!-- webmvc依赖(springmvc框架的内容) -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--mybatis的起步依赖-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.2</version>
</dependency>
<!-- mysql驱动包 , 刚刚发布的最新版本的驱动包-->
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</dependency>
<!-- lombok 依赖-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
</dependencies>
</project>