1. Front-end code (the following code is under the src package of the vue project)
1.LoginUser.vue
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));
}
}
}
2.App.vue
Welcome! import LoginUser from './components/LoginUser.vue'
export default {
name: 'App',
components: {
LoginUser
}
}
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’)
2. Backend code (using get request)
1. Configuration information
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
# Configure database connection information four elements #Driver name spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver #databaseurl spring.datasource.url=jdbc:mysql://localhost:3306/wj20230915?serverTimezone=UTC &useSSL=true #Database name spring.datasource.username=root #Database password spring.datasource.password=123456 #Configure the log information of mybatis mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl #CamelCase nomenclature 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") //The address requested by the front end @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 "Login failed, please register~"; } } }
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); }
3. Database part
CREATE TABLE IF NOT EXISTS user(
id INT PRIMARY KEY COMMENT’ID’,
username VARCHAR(50) COMMENT ‘name’,
password VARCHAR(50) COMMENT ‘Password’
) COMMENT ‘user table’;–Insert data
INSERT INTO user VALUES
(1,’admin’, ‘123456’)
4. Key analysis
1. get request
When using axios’s .get
request, you should use the params
attribute to pass these parameters
this.$axios .get('http://localhost:8080/login', { params: {username: this.username, password: this.password}}) .then(res => alert(res.data)) .catch(err => alert("Error: " + err));
In the Spring Boot backend, you need to create a model class to receive these parameters. Then you can use the @ModelAttribute
annotation to obtain and use these parameters.
public String login(@ModelAttribute User user) { System.out.println("Username: " + user.getUsername()); System.out.println("Password: " + user.getPassword()); return "Login success"; }
2. The post request will encapsulate the data into json format
The front end uses POST request to send data, the core code is as follows
this.$axios .post('http://localhost:8080/login', { username: this.username, password: this.password }) .then(res => alert(res.data)) .catch(err => alert("Error: " + err));
In the Spring Boot backend, you need to create a controller to handle this POST request. You can use the @RequestBody
annotation to get data from the request body
package water.controller; import entity.User; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; @CrossOrigin(origins = "*") //The address of the front-end application @RestController public class LoginController { @PostMapping("/login") public String login(@RequestBody User user) { System.out.println(user.getUsername()); System.out.println(user.getPassword()); return "OK!"; } }
Screenshot effect: Only when admin 123 is entered will the login success be displayed!
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Cloud native entry-level skills treeHomepageOverview 16,755 people are learning the system