前端vue 后端springboot实现登录

一、前端代码 (一下代码在vue项目的src包下)

1、LoginUser.vue   

<template>

  <div class="login">

    <label>Username:<input v-model="username" type="text" /></label>

    <label>Password:<input v-model="password" type="password" /></label>

    <button @click="submit">Login</button>

  </div>

</template>

<script>

export default {

  data() {

    return {

      username: '',

      password: ''

    }

  },

  methods: {

    submit() {

      console.log(this.username, this.password);

      this.$axios

        .get('http://localhost:8080/login', {

          params: {

            username: this.username,

            password: this.password

          }

        })

        .then(res => alert(res.data))

        .catch(err => alert("Error: " + err));

    }

  }

}

</script>

2、App.vue

<template>

   <div class="LoginUser">

    <LoginUser>Welcome!</LoginUser>

  </div>

</template>

<script>

import LoginUser from './components/LoginUser.vue'

 

export default {

  name: 'App',

  components: {

    LoginUser

  }

}

</script>

<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

3、main.js

import { createApp } from 'vue'

import axios from 'axios'

import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$axios = axios

app.mount('#app')

二、后端代码 (采用get请求)

1、配置信息

1.1、pom.xml

<?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.7.6</version>
        <relativePath/>
    </parent>
    <groupId>com.transportWater</groupId>
    <artifactId>water</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>water</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.lombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

1.2、application.properties

# 配置数据库的连接信息 四要素
#驱动名称
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

#数据库url
spring.datasource.url=jdbc:mysql://localhost:3306/wj20230915?serverTimezone=UTC&useSSL=true

#数据库名
spring.datasource.username=root

#数据库密码
spring.datasource.password=123456

#配置mybatis的日志信息
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl 

#驼峰命名法
mybatis.configuration.map-underscore-to-camel-case=true

2、LoginController

package water.controller;

import water.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import water.service.loginService;

@CrossOrigin(origins = "http://127.0.0.1:8081") // 前端请求的的地址
@RestController
public class LoginController {

    @Autowired
    loginService loginServices;

    @PostMapping("/login")
    public String login(@RequestBody User user) {

        user.setId(1L);
        boolean checkUser  = loginServices.checkUser(user);

        if (checkUser) {
            return "success~";
        } else {
            return "登陆失败，请注册~";
        }
    }
}

3、User

package water.entity;

import javax.persistence.*;

@Entity
public class User {

    @Id
    @GeneratedValue(strategy= GenerationType.AUTO)
    private Long id;

    @Column
    private String username;

    @Column
    private String password;

    public User(Long id, String username, String password) {
        this.id = id;
        this.username = username;
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }

    public User() {
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

4、service

package water.service.Impl;

import water.dao.LoginDao;
import water.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import water.service.loginService;

@Service
public class loginServiceImpl implements loginService {


    @Autowired
    private LoginDao loginDao;

    @Override
    public boolean checkUser(User user) {

        User byUsername = loginDao.findByUsername(user.getUsername());

        if (byUsername == null) {
            return false;
        }
        return true;
    }
}

5、dao

package water.dao;

import water.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;

public interface LoginDao extends JpaRepository<User, String> {

    User findByUsername(String username);

}

三、数据库部分

CREATE TABLE IF NOT EXISTS user(
        id INT PRIMARY KEY  COMMENT'ID',
        username VARCHAR(50) COMMENT '姓名',
        password VARCHAR(50) COMMENT '密码'
) COMMENT '用户表';

-- 插入数据
INSERT INTO user VALUES
(1,'admin', '123456')

四、重点分析

1、get请求

在使用axios的.get请求时，应该使用params属性来传递这些参数

this.$axios
  .get('http://localhost:8080/login', { params:  {username: this.username, password: this.password}})
  .then(res => alert(res.data))
  .catch(err => alert("Error: " + err));

Spring Boot后端中，你需要建立一个模型类来接收这些参数，之后你可以使用 @ModelAttribute 注解来获取并使用这些参数

public String login(@ModelAttribute User user) {
        System.out.println("Username: " + user.getUsername());
        System.out.println("Password: " + user.getPassword());
        
        return "Login success";
    }

2、post请求  会把数据封装成json格式

前端使用POST请求发送数据，核心代码如下

this.$axios
  .post('http://localhost:8080/login', {
    username: this.username,
    password: this.password
  })
  .then(res => alert(res.data))
  .catch(err => alert("Error: " + err));

Spring Boot后端中，你需要建立一个控制器来处理这个POST请求。你可以使用@RequestBody注解来从请求体中获取数据

package water.controller;

import entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@CrossOrigin(origins = "*") // 前端应用的地址
@RestController
public class LoginController {

    @PostMapping("/login")
    public String login(@RequestBody User user) {

        System.out.println(user.getUsername());
        System.out.println(user.getPassword());

        return "OK!";
    }
}

截图效果 只有输入admin 123 时才显示登录成功！