您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
在现代Web开发中，前后端分离的架构模式越来越受到开发者的青睐。前后端分离不仅能够提高开发效率，还能使前后端开发人员更加专注于各自的领域。本文将详细介绍如何使用Spring Boot和Vue.js搭建一个前后端分离的项目，并涵盖从环境准备到项目部署的完整流程。
Spring Boot是一个基于Spring框架的快速开发框架，它简化了Spring应用的初始搭建和开发过程。Spring Boot提供了大量的自动配置，使得开发者可以快速构建独立的、生产级别的Spring应用程序。
Vue.js是一个渐进式JavaScript框架，用于构建用户界面。Vue.js的核心库只关注视图层，易于与其他库或现有项目集成。Vue.js具有轻量级、高性能和易于上手的特点，非常适合构建单页面应用（SPA）。
在开始搭建Spring Boot项目之前，首先需要确保本地已经安装了Java开发环境。推荐使用JDK 8或更高版本。
bin目录添加到系统的PATH环境变量中。java -version，查看是否成功安装。Vue.js项目需要Node.js环境来运行和构建。Node.js是一个基于Chrome V8引擎的JavaScript运行时。
node -v和npm -v，查看是否成功安装。推荐使用以下IDE进行开发：
使用Spring Initializr创建项目：
Maven Project，语言为Java，Spring Boot版本选择最新的稳定版。Spring Web、Spring Data JPA、MySQL Driver等。Generate按钮下载项目压缩包。导入项目到IDE：
File -> Open，然后选择解压后的项目目录。安装MySQL：如果本地没有安装MySQL，可以从MySQL官网下载并安装。
创建数据库：在MySQL中创建一个新的数据库，例如spring_vue_db。
配置application.properties：
src/main/resources目录下找到application.properties文件。 spring.datasource.url=jdbc:mysql://localhost:3306/spring_vue_db?useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=yourpassword
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
src/main/java/com/example/demo目录下创建entity包，并在其中创建实体类User。 package com.example.demo.entity;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
@Entity
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String name;
private String email;
// Getters and Setters
}
src/main/java/com/example/demo目录下创建repository包，并在其中创建UserRepository接口。 package com.example.demo.repository;
import com.example.demo.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;
public interface UserRepository extends JpaRepository<User, Long> {
}
src/main/java/com/example/demo目录下创建service包，并在其中创建UserService接口。 package com.example.demo.service;
import com.example.demo.entity.User;
import java.util.List;
public interface UserService {
List<User> getAllUsers();
User getUserById(Long id);
User createUser(User user);
User updateUser(Long id, User user);
void deleteUser(Long id);
}
service包下创建impl包，并在其中创建UserServiceImpl类。 package com.example.demo.service.impl;
import com.example.demo.entity.User;
import com.example.demo.repository.UserRepository;
import com.example.demo.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 UserRepository userRepository;
@Override
public List<User> getAllUsers() {
return userRepository.findAll();
}
@Override
public User getUserById(Long id) {
return userRepository.findById(id).orElse(null);
}
@Override
public User createUser(User user) {
return userRepository.save(user);
}
@Override
public User updateUser(Long id, User user) {
User existingUser = userRepository.findById(id).orElse(null);
if (existingUser != null) {
existingUser.setName(user.getName());
existingUser.setEmail(user.getEmail());
return userRepository.save(existingUser);
}
return null;
}
@Override
public void deleteUser(Long id) {
userRepository.deleteById(id);
}
}
src/main/java/com/example/demo目录下创建controller包，并在其中创建UserController类。 package com.example.demo.controller;
import com.example.demo.entity.User;
import com.example.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/api/users")
public class UserController {
@Autowired
private UserService userService;
@GetMapping
public List<User> getAllUsers() {
return userService.getAllUsers();
}
@GetMapping("/{id}")
public User getUserById(@PathVariable Long id) {
return userService.getUserById(id);
}
@PostMapping
public User createUser(@RequestBody User user) {
return userService.createUser(user);
}
@PutMapping("/{id}")
public User updateUser(@PathVariable Long id, @RequestBody User user) {
return userService.updateUser(id, user);
}
@DeleteMapping("/{id}")
public void deleteUser(@PathVariable Long id) {
userService.deleteUser(id);
}
}
UserController类中添加@CrossOrigin注解，允许前端访问后端API。 @CrossOrigin(origins = "http://localhost:8080")
@RestController
@RequestMapping("/api/users")
public class UserController {
// ...
}
使用Vue CLI创建项目：
vue create spring-vue-frontend
Manually select features，然后选择Babel、Router、Vuex、Linter/Formatter等特性。2.x版本的Vue。ESLint + Prettier作为代码格式化工具。In dedicated config files作为配置文件存放方式。Save this as a preset for future projects以保存配置。进入项目目录：
cd spring-vue-frontend
npm run serve
Router，因此Vue Router已经自动安装并配置。 npm install axios
src目录下创建services目录，并在其中创建api.js文件。 import axios from 'axios';
const apiClient = axios.create({
baseURL: 'http://localhost:8080/api',
withCredentials: false,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
}
});
export default {
getUsers() {
return apiClient.get('/users');
},
getUser(id) {
return apiClient.get('/users/' + id);
},
createUser(user) {
return apiClient.post('/users', user);
},
updateUser(id, user) {
return apiClient.put('/users/' + id, user);
},
deleteUser(id) {
return apiClient.delete('/users/' + id);
}
};
UserList组件：在src/components目录下创建UserList.vue文件。 <template>
<div>
<h1>User List</h1>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }} - {{ user.email }}
</li>
</ul>
</div>
</template>
<script>
import api from '@/services/api';
export default {
data() {
return {
users: []
};
},
created() {
this.fetchUsers();
},
methods: {
async fetchUsers() {
try {
const response = await api.getUsers();
this.users = response.data;
} catch (error) {
console.error(error);
}
}
}
};
</script>
UserForm组件：在src/components目录下创建UserForm.vue文件。 <template>
<div>
<h1>{{ isEdit ? 'Edit User' : 'Create User' }}</h1>
<form @submit.prevent="submitForm">
<div>
<label for="name">Name:</label>
<input type="text" id="name" v-model="user.name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" v-model="user.email" required>
</div>
<button type="submit">{{ isEdit ? 'Update' : 'Create' }}</button>
</form>
</div>
</template>
<script>
import api from '@/services/api';
export default {
props: {
userId: {
type: String,
default: null
}
},
data() {
return {
user: {
name: '',
email: ''
},
isEdit: false
};
},
created() {
if (this.userId) {
this.isEdit = true;
this.fetchUser();
}
},
methods: {
async fetchUser() {
try {
const response = await api.getUser(this.userId);
this.user = response.data;
} catch (error) {
console.error(error);
}
},
async submitForm() {
try {
if (this.isEdit) {
await api.updateUser(this.userId, this.user);
} else {
await api.createUser(this.user);
}
this.$router.push('/users');
} catch (error) {
console.error(error);
}
}
}
};
</script>
src/router/index.js文件中配置路由。 import Vue from 'vue';
import VueRouter from 'vue-router';
import UserList from '@/components/UserList.vue';
import UserForm from '@/components/UserForm.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/users',
name: 'UserList',
component: UserList
},
{
path: '/users/create',
name: 'UserCreate',
component: UserForm
},
{
path: '/users/edit/:id',
name: 'UserEdit',
component: UserForm,
props: true
}
];
const router = new VueRouter({
mode: 'history',
routes
});
export default router;
UserList和UserForm组件中已经通过api.js调用了后端API。DemoApplication类，选择Run 'DemoApplication'。 npm run serve
http://localhost:8081（Vue开发服务器默认端口为8081）。 mvn clean package
target/demo-0.0.1-SNAPSHOT.jar文件上传到服务器，并使用以下命令启动应用： java -jar demo-0.0.1-SNAPSHOT.jar
npm run build
dist目录上传到服务器，并配置Nginx指向该目录。 sudo apt-get install nginx
/etc/nginx/sites-available/default文件，添加以下配置： server {
listen 80;
server_name yourdomain.com;
location / {
root /path/to/your/dist;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
sudo systemctl restart nginx
application.properties中的数据库配置是否正确，确保数据库服务已启动。history模式，并在Nginx中配置了try_files。通过本文的详细介绍，您已经学会了如何使用Spring Boot和Vue.js搭建一个前后端分离的项目。从环境准备到项目部署，本文涵盖了完整的开发流程。希望本文能够帮助您在实际项目中快速上手前后端分离的开发模式。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。