一、项目概述
在本篇文章中,我们将通过一个简单的待办事项管理应用,展示如何使用Spring Boot和Vue.js进行前后端分离开发。这个应用将包括以下功能:
- 后端:使用Spring Boot实现待办事项的增删改查API。
- 前端:使用Vue.js构建动态界面,与后端API进行交互。
二、后端实现(Spring Boot)
1. 创建Spring Boot项目
使用Spring Initializr(https://start.spring.io/)创建一个新的Spring Boot项目,添加以下依赖:
- Spring Web
- Spring Data JPA
- H2 Database(用于示例,实际项目中可以替换为MySQL等)
2. 定义数据模型
创建一个Todo实体类,用于表示待办事项:
java复制
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
@Entity
public class Todo {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String title;
private boolean completed;
// Getters and Setters
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public boolean isCompleted() {
return completed;
}
public void setCompleted(boolean completed) {
this.completed = completed;
}
}
3. 创建Repository
使用Spring Data JPA创建一个TodoRepository接口,用于数据访问:
java复制
import org.springframework.data.jpa.repository.JpaRepository;
public interface TodoRepository extends JpaRepository {
}
4. 创建Service
创建一个TodoService类,实现业务逻辑:
java复制
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class TodoService {
@Autowired
private TodoRepository todoRepository;
public List getAllTodos() {
return todoRepository.findAll();
}
public Todo createTodo(Todo todo) {
return todoRepository.save(todo);
}
public Todo updateTodo(Todo todo) {
return todoRepository.save(todo);
}
public void deleteTodo(Long id) {
todoRepository.deleteById(id);
}
}
5. 创建Controller
创建一个TodoController类,定义RESTful API接口:
java复制
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/api/todos")
public class TodoController {
@Autowired
private TodoService todoService;
@GetMapping
public List getAllTodos() {
return todoService.getAllTodos();
}
@PostMapping
public Todo createTodo(@RequestBody Todo todo) {
return todoService.createTodo(todo);
}
@PutMapping("/{id}")
public Todo updateTodo(@PathVariable Long id, @RequestBody Todo todo) {
todo.setId(id);
return todoService.updateTodo(todo);
}
@DeleteMapping("/{id}")
public void deleteTodo(@PathVariable Long id) {
todoService.deleteTodo(id);
}
}
三、前端实现(Vue.js)
1. 创建Vue项目
使用Vue CLI创建一个新的Vue项目:
sh复制
vue create todo-app
2. 安装依赖
安装Axios库,用于发送HTTP请求:
sh复制
npm install axios
3. 配置路由
在src/router/index.js中配置路由:
JavaScript复制
import Vue from 'vue';
import VueRouter from 'vue-router';
import TodoList from '../views/TodoList.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'TodoList',
component: TodoList
}
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});
export default router;
4. 编写TodoList组件
在src/views/TodoList.vue中编写组件:
HTML复制
待办事项列表
-
{{ todo.title }} - {{ todo.completed ? '已完成' : '未完成' }}
<script>
import axios from 'axios';
export default {
data() {
return {
todos: [],
newTodo: { title: '', completed: false }
};
},
created() {
this.fetchTodos();
},
methods: {
fetchTodos() {
axios.get('/api/todos')
.then(response => {
this.todos = response.data;
})
.catch(error => {
console.error(error);
});
},
addTodo() {
axios.post('/api/todos', this.newTodo)
.then(response => {
this.todos.push(response.data);
this.newTodo.title = '';
})
.catch(error => {
console.error(error);
});
},
deleteTodo(id) {
axios.delete(`/api/todos/${id}`)
.then(() => {
this.todos = this.todos.filter(todo => todo.id !== id);
})
.catch(error => {
console.error(error);
});
}
}
};
</script>
5. 运行Vue应用
启动Vue应用:
sh复制
npm run serve
前端应用启动成功,访问http://localhost:8080即可看到待办事项管理界面。
四、前后端联调
- 启动Spring Boot项目:
- sh复制
- mvn spring-boot:run
- 启动Vue项目:
- sh复制
- npm run serve
- 访问http://localhost:8080,测试待办事项的增删改查功能。
五、部署
1. 打包后端项目
sh复制
mvn clean package
2. 部署后端项目
将生成的JAR文件部署到服务器上,使用命令启动应用:
sh复制
java -jar target/todo-app.jar
3. 打包前端项目
sh复制
npm run build
4. 部署前端项目
将dist目录下的文件上传到静态文件服务器,如Nginx。
六、总结
通过本文的实践,我们成功构建了一个基于Spring Boot和Vue.js的前后端分离项目。这种开发模式不仅提高了开发效率,还使得前后端团队可以更加灵活地协作。未来,随着微服务架构和云原生技术的不断发展,前后端分离模式将迎来更加广阔的应用前景。