用vue+element-ui+springboot快速写一个登陆页面(2)

先构建 springboot 项目

  • pom.xml
  <!--使用jpa作持久层处理-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <!--web项目-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--lombok需要下载插件-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <!--mysql驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.48</version>
        </dependency>

创建之后的项目结构
用vue+element-ui+springboot快速写一个登陆页面(2)_第1张图片
修改application.yml (我觉得yml用的舒服)配置如下

spring:
  #数据库自行配置
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/code
    username: root
    password: root
#    配置端口  与请求接口的端口一致
server:
  port: 8090

  • 写后台逻辑
  1. 创建domain
@Entity
@Data
@Table(name = "user")
public class User {
    @Id
    private Integer id;

    private String name;

    private String pwd;
}

  1. 创建dao
public interface UserDao extends JpaRepository<User, String> {
    User findByNameAndPwd(String name, String pwd);
}

  1. 创建service
@Service
public class UserService {

    private final UserDao userDao;

    @Autowired
    public UserService(UserDao userDao) {
        this.userDao = userDao;
    }

    public User login(User user) {
        return userDao.findByNameAndPwd(user.getName(), user.getPwd());
    }
}

  1. 创建controller
@CrossOrigin   //跨域
@RestController
@RequestMapping("/login")
public class UserController {

    private final UserService userService;

    @Autowired
    public UserController(UserService userService) {
        this.userService = userService;
    }

    @PostMapping
    public ResponseEntity login(@RequestBody User user) {
        User login = userService.login(user);
        if (login != null) {
            return ResponseEntity.ok("ok");
        }
        return ResponseEntity.ok("no");
    }
}

  • 后台逻辑结束 启动项目
    用vue+element-ui+springboot快速写一个登陆页面(2)_第2张图片
    访问页面 : http://localhost:8080/
    用vue+element-ui+springboot快速写一个登陆页面(2)_第3张图片
    成功访问

  • 登录失败
    用vue+element-ui+springboot快速写一个登陆页面(2)_第4张图片

  • 登录成功
    用vue+element-ui+springboot快速写一个登陆页面(2)_第5张图片
    以上传到码云
    项目

有问题记得留言嘿嘿

记得每天微笑鸭 在这里插入图片描述在这里插入图片描述在这里插入图片描述

你可能感兴趣的:(vue,springboot,Element,UI,登录)