二十分鐘秒懂：實現前後端分離開發（vue+element+spring boot+mybatis+MySQL）

在現代軟體開發中，前後端分離是一種常見的架構模式，它將前端頁面渲染與後端資料處理相分離，使得兩者可以獨立開發、部署和管理。這種架構不僅能夠提高開發效率，還能更好地應對日漸複雜的前端交互需求以及日益增長的數據量。以下是一個簡化的指南，如何在20分鐘內快速瞭解如何實現Vue.js + Element UI + Spring Boot + MyBatis + MySQL的前後端分離應用程式。

1. 前置準備工作

首先，您需要確保您的開發環境已經配置好必要的編輯器或IDE，如IntelliJ IDEA或Visual Studio Code，並且有足夠的網路連接來下載所需的庫和插件。此外，您可能還需要安裝Node.js和相關的包管理器（例如npm或yarn）以處理前端部分。

2. Vue.js 和 Element UI 的設置

我們先從前端開始。使用Vue CLI創建一個新的單頁網應用程式（SPA）：

npx create-vue@latest my-app
cd my-app
npm run serve

這將啟動一個本地伺服器，讓您可以瀏覽到基於Vue.js的新應用程式。為了添加Element UI作為UI框架，請執行以下命令進行安裝：

npm install element-ui @vue/router axios --save

然後更新`main.js`檔案以導入Element UI並初始化路由和Axios客戶端：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
// Import Element UI components
import { Button, Table } from 'element-ui';
// Register globally
Vue.component(Button.name, Button);
Vue.component(Table.name, Table);

Vue.config.productionTip = false;

new Vue({
el: '#app',
router,
store,
render: h => h(App)
});

3. Spring Boot 的設定

現在轉移到後端。使用Spring Initializr創建一個新的Spring Boot專案：

https://start.spring.io

選擇“Maven”作為BUILD系統，“Spring Web”作為依賴項，並生成項目代碼。解壓縮下載的ZIP檔案並打開您的IDE或編輯器。

4. MyBatis 的整合

為了將MyBatis集成到Spring Boot專案中，請在pom.xml檔案中添加以下依賴項：

<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.3</version>
</dependency>

接下來，創建一個簡單的DAO類（例如UserMapper.java）和使用XML映射文件（例如user.xml）來表示資料庫結構。最後，在ApplicationConfiguration.java中註冊MyBatis會話工廠和映射器接口：

@Configuration
public class ApplicationConfiguration {
@Bean
public DataSource dataSource() {
DriverManagerDataSource dataSource = new DriverManagerDataSource();
dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
dataSource.setUrl("jdbc:mysql://localhost:3306/your_database?useUnicode=true&characterEncoding=UTF-8");
dataSource.setUsername("root"); // Replace with your database username
dataSource.setPassword("password"); // Replace with your database password
return dataSource;
}

@Bean
public SqlSessionFactory sessionFactory(DataSource dataSource) throws Exception {
SqlSessionFactoryBean bean = new SqlSessionFactoryBean();
bean.setDataSource(dataSource);
ResourcePatternResolver resolver = new PathMatchingResourcePatternResolver();
Properties properties = new Properties();
properties.setProperty("mapUnderscoreToCamelCase", "true");
properties.load(resolver.getResource("classpath*:/mappings/*.xml").getInputStream());
bean.setTypeAliasesPackage("your_package_here"); // Replace with your package name
bean.setConfigLocation(new ClassPathResource("mybatis-config.xml"));
return (SqlSessionFactory) bean.getObject();
}
}

5. Axios 和 API 介面的實作

在前端的Vue.js應用程式中，使用Axios發送HTTP請求來獲取資料。為此，您需要在`src/api`目錄中創建一個API檔案（例如`index.js`）：

import axios from 'axios';
const baseURL = process.env.NODE_ENV === 'development' ? '' : '/'; // Set base URL for production env
export default {
getUsers(): Promise<any> {
return axios.get(`${baseURL}/users`);
}
};

同時，在後端的Spring Boot應用程式中，創建一個控制器（例如`UserController.java`）來提供用戶資料的API：

@RestController
@RequestMapping("/users")
public class UserController {
private final List<User> users = Arrays.asList(new User(1, "John Doe"), new User(2, "Jane Smith"));

@GetMapping
public Iterable<User> getAllUsers() {
return this.users;
}
}

6. 資料庫的設定

最後，您需要配置MySQL資料庫，創建所需的表結構，並插入一些測試資料。這裡有一個基本的CREATE TABLE語句示例：

CREATE TABLE `user` (
`id` INT AUTO_INCREMENT PRIMARY KEY NOT NULL,
`username` VARCHAR(255) UNIQUE NOT NULL,
`email` VARCHAR(255) UNIQUE NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE utf8mb4_unicode_ci;

7. 結論

在短短20分鐘內，我們已經概述瞭如何建立一個基本的前後端分離應用程序。當然，這些步驟只是冰山一角，實際的生產環境應用程式可能涉及更多的最佳實踐和安全措施。然而，這個簡短的指南應該給您一個良好的起點，以便更深入地研究每一個技術領域。隨著經驗的積累，您將能夠更加熟練地運用這些工具和框架來創建高效且靈活的Web應用程式。