前后端分离开发的一个常见实践是使用Vue.js作为前端框架，结合Element UI进行快速开发；后端使用Spring Boot框架，搭配MyBatis进行数据库操作。以下是一个简单的例子，展示如何实现前后端分离开发。
前端（Vue.js + Element UI）:
- 安装Vue CLI并创建新项目。
- 使用Element UI插件。
- 创建Vue组件并使用Element UI组件。
- 使用axios进行HTTP请求发送。
// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import axios from 'axios'
Vue.use(ElementUI)
Vue.prototype.$http = axios
new Vue({
el: '#app',
render: h => h(App)
})后端（Spring Boot + MyBatis）:
- 创建Spring Boot项目并添加Web依赖。
- 添加MyBatis依赖和MySQL驱动。
- 配置数据库连接。
- 创建Mapper接口和对应的XML映射文件。
- 创建Service和Controller层。
// UserController.java
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("/api/users")
public class UserController {
@Autowired
private UserService userService;
@GetMapping
public List<User> getAllUsers() {
return userService.findAll();
}
@GetMapping("/{id}")
public User getUserById(@PathVariable("id") Long id) {
return userService.findById(id);
}
// 其他CRUD操作
}数据库设计（MySQL）:
- 创建数据库和表。
- 设计相应的实体类。
-- users.sql
CREATE TABLE `users` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;以上代码提供了前后端分离开发的一个简单示例。在实际开发中，还需要考虑权限控制、异常处理、分页、搜索等功能，以及保证前后端接口的一致性。