返回
一文带你玩转前后端项目搭建，轻松搞定vue3、springboot、mysql
前端
2023-08-24 06:07:31
全栈开发入门：使用 Vue.js、Spring Boot 和 MySQL 构建前后端项目
在瞬息万变的数字时代，全栈工程师已成为企业竞相追逐的炙手可热的人才。精通前端和后端技术，他们能够独立承担项目开发重任。对于新手而言，前后端项目搭建可能是一项艰巨的任务，但本教程将逐步指导你，从零开始搭建一个功能齐全的前后端项目。
技术栈介绍
本教程将使用以下技术栈：
- Vue.js： 轻量级且流行的前端框架，以其易用性和性能而闻名。
- Spring Boot： 开箱即用的 Java 后端框架，集成了各种流行的 Java 技术，大大提高了开发效率。
- MySQL： 广泛使用的开源数据库管理系统，以其高性能、可靠性和可扩展性著称。
前端项目搭建
1. 安装 Vue.js
首先，使用以下命令安装 Vue.js：
npm install -g @vue/cli
创建项目：
vue create <project-name>
2. 安装 Element Plus
Element Plus 是一个基于 Vue.js 的 UI 库，可提供丰富的组件和样式。安装它：
npm install element-plus -S
3. 安装 Axios
Axios 是一个基于 Promise 的 HTTP 库，可简化 HTTP 请求发送。安装它：
npm install axios -S
后端项目搭建
1. 安装 Spring Boot
使用以下命令安装 Spring Boot：
brew install springboot
创建项目：
mvn spring-boot:spring-boot-dependencies
2. 添加 MySQL 依赖
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.27</version>
</dependency>
3. 创建数据库连接
spring.datasource.url = jdbc:mysql://localhost:3306/test
spring.datasource.username = root
spring.datasource.password = root
4. 创建实体类
@Entity
@Table(name = "user")
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
private String name;
private Integer age;
}
5. 创建 Repository
public interface UserRepository extends CrudRepository<User, Integer> {
}
6. 创建 Controller
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserRepository userRepository;
@GetMapping
public List<User> getAllUsers() {
return userRepository.findAll();
}
@PostMapping
public User createUser(@RequestBody User user) {
return userRepository.save(user);
}
}
前后端联调
1. 前端引入后端接口
import axios from 'axios';
const API_URL = 'http://localhost:8080/user';
export const getAllUsers = () => {
return axios.get(API_URL);
};
export const createUser = (user) => {
return axios.post(API_URL, user);
};
2. 前端调用后端接口
<template>
<div>
<button @click="getAllUsers">获取所有用户</button>
<button @click="createUser">创建用户</button>
</div>
</template>
<script>
import { getAllUsers, createUser } from './api';
export default {
methods: {
getAllUsers() {
getAllUsers().then((response) => {
console.log(response.data);
});
},
createUser() {
createUser({ name: '张三', age: 20 }).then((response) => {
console.log(response.data);
});
},
},
};
</script>
常见问题解答
1. 如何将前端项目连接到后端 API？
通过在前端项目中引入后端 API，并使用 Axios 等库发送 HTTP 请求，即可实现前后端联调。
2. Spring Boot 中的 @Entity 注解用于什么？
@Entity 注解表示一个类是与数据库表映射的实体。
3. Vue.js 中的 和