前言

在現代 Web 開發中，前后端分離架構已經成為主流。前端負責頁面展示和交互，后端提供數據接口，二者通過 API 進行通信。本文將通過一個實戰小項目，詳細介紹如何使用 Vue.js 搭建前端界面，以及使用 SSM 框架（Spring、SpringMVC、MyBatis）構建基于 Tomcat 部署的后端服務，實現登錄和注冊功能。

項目概述

我們將構建一個簡單的用戶管理系統，包含用戶注冊和登錄功能。前端使用 Vue.js 框架，后端使用 SSM 框架進行開發，并通過 Tomcat 部署后端服務。通過這個項目，可以深入理解前后端分離的開發模式以及各個框架的使用方法。

前端部分（Vue）

1. 項目初始化

首先，使用 Vue CLI 創建一個新的 Vue 項目：

vue create user-management

選擇默認的配置或者根據自己的需求進行定制。創建完成后，進入項目目錄：

cd user-management

然后安裝所需的依賴：

npm install axios vue-router element-ui

• axios 用于發送 HTTP 請求。
• vue-router 用于實現頁面路由。
• element-ui 是一個基于 Vue 的 UI 組件庫，用于快速構建頁面。

2. 頁面布局

在 src/views 目錄下創建兩個視圖文件：Login.vue 和 Register.vue，分別用于登錄和注冊頁面。

Login.vue

<template><div class="login-container"><el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="80px"><el-form-item label="用戶名" prop="username"><el-input v-model="loginForm.username"></el-input></el-form-item><el-form-item label="密碼" prop="password"><el-input type="password" v-model="loginForm.password"></el-input></el-form-item><el-button type="primary" @click="submitLogin">登錄</el-button></el-form></div>
</template><script>
export default {data() {return {loginForm: {username: '',password: ''},rules: {username: [{ required: true, message: '請輸入用戶名', trigger: 'blur' }],password: [{ required: true, message: '請輸入密碼', trigger: 'blur' }]}};},methods: {submitLogin() {this.$refs.loginForm.validate((valid) => {if (valid) {// 調用后端接口axios.post('/api/login', this.loginForm).then(response => {if (response.data.success) {this.$message.success('登錄成功');// 保存 tokenlocalStorage.setItem('token', response.data.token);this.$router.push('/home');} else {this.$message.error(response.data.message);}});}});}}
};
</script>

Register.vue

<template><div class="register-container"><el-form :model="registerForm" :rules="rules" ref="registerForm" label-width="80px"><el-form-item label="用戶名" prop="username"><el-input v-model="registerForm.username"></el-input></el-form-item><el-form-item label="密碼" prop="password"><el-input type="password" v-model="registerForm.password"></el-input></el-form-item><el-form-item label="確認密碼" prop="confirmPassword"><el-input type="password" v-model="registerForm.confirmPassword"></el-input></el-form-item><el-button type="primary" @click="submitRegister">注冊</el-button></el-form></div>
</template><script>
export default {data() {return {registerForm: {username: '',password: '',confirmPassword: ''},rules: {username: [{ required: true, message: '請輸入用戶名', trigger: 'blur' }],password: [{ required: true, message: '請輸入密碼', trigger: 'blur' }],confirmPassword: [{ required: true, message: '請確認密碼', trigger: 'blur' }]}};},methods: {submitRegister() {this.$refs.registerForm.validate((valid) => {if (valid) {if (this.registerForm.password !== this.registerForm.confirmPassword) {this.$message.error('兩次密碼不一致');return;}// 調用后端接口axios.post('/api/register', this.registerForm).then(response => {if (response.data.success) {this.$message.success('注冊成功');this.$router.push('/login');} else {this.$message.error(response.data.message);}});}});}}
};
</script>

3. 路由配置

在 src/router/index.js 中配置路由：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from '../views/Login.vue';
import Register from '../views/Register.vue';
import Home from '../views/Home.vue';Vue.use(VueRouter);const routes = [{path: '/',redirect: '/login'},{path: '/login',component: Login},{path: '/register',component: Register},{path: '/home',component: Home}
];const router = new VueRouter({mode: 'history',routes
});export default router;

4. 主組件

在 src/App.vue 中設置主組件：

<template><div id="app"><router-view></router-view></div>
</template>

后端部分（SSM）

1. 項目結構

后端項目采用 Maven 構建，主要模塊包括：

• src/main/java/com/example/usermanagement/controller：控制器層，處理前端請求。
• src/main/java/com/example/usermanagement/service：服務層，處理業務邏輯。
• src/main/java/com/example/usermanagement/dao：數據訪問層，使用 MyBatis 操作數據庫。
• src/main/resources/mapper：MyBatis 的 XML 映射文件。
• src/main/resources/application.properties：配置文件。

2. 數據庫設計

創建一個名為 user_management 的數據庫，包含一個 user 表：

CREATE TABLE user (id INT AUTO_INCREMENT PRIMARY KEY,username VARCHAR(50) NOT NULL UNIQUE,password VARCHAR(100) NOT NULL
);

3. MyBatis 配置

在 src/main/resources/mapper/UserMapper.xml 中配置 MyBatis 的 SQL 映射：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.example.usermanagement.dao.UserDao"><insert id="registerUser" parameterType="com.example.usermanagement.model.User">INSERT INTO user (username, password) VALUES (#{username}, #{password})</insert><select id="getUserByUsername" parameterType="String" resultType="com.example.usermanagement.model.User">SELECT * FROM user WHERE username = #{username}</select></mapper>

4. DAO 層

創建 UserDao 接口：

package com.example.usermanagement.dao;import com.example.usermanagement.model.User;public interface UserDao {int registerUser(User user);User getUserByUsername(String username);
}

5. Service 層

創建 UserService 接口及其實現類 UserServiceImpl：

package com.example.usermanagement.service;import com.example.usermanagement.model.User;public interface UserService {boolean register(User user);boolean login(String username, String password);
}

package com.example.usermanagement.service.impl;import com.example.usermanagement.dao.UserDao;
import com.example.usermanagement.model.User;
import com.example.usermanagement.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;@Service
public class UserServiceImpl implements UserService {@Autowiredprivate UserDao userDao;@Overridepublic boolean register(User user) {return userDao.registerUser(user) > 0;}@Overridepublic boolean login(String username, String password) {User user = userDao.getUserByUsername(username);return user != null && user.getPassword().equals(password);}
}

6. Controller 層

創建 UserController：

package com.example.usermanagement.controller;import com.example.usermanagement.model.User;
import com.example.usermanagement.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;@RestController
@RequestMapping("/api")
public class UserController {@Autowiredprivate UserService userService;@PostMapping("/register")public Result register(@RequestBody User user) {if (userService.register(user)) {return new Result(true, "注冊成功");} else {return new Result(false, "注冊失敗");}}@PostMapping("/login")public Result login(@RequestBody User user) {if (userService.login(user.getUsername(), user.getPassword())) {return new Result(true, "登錄成功", "token");} else {return new Result(false, "用戶名或密碼錯誤");}}class Result {private boolean success;private String message;private Object data;public Result(boolean success, String message) {this.success = success;this.message = message;}public Result(boolean success, String message, Object data) {this.success = success;this.message = message;this.data = data;}// Getter 和 Setter 方法}
}

7. 配置文件

在 src/main/resources/application.properties 中配置數據庫連接和 MyBatis：

spring.datasource.url=jdbc:mysql://localhost:3306/user_management
spring.datasource.username=root
spring.datasource.password=your_password
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Drivermybatis.mapper-locations=classpath:mapper/*.xml

8. Spring 配置

創建 Spring 配置文件 spring-config.xml：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:context="http://www.springframework.org/schema/context"xmlns:mvc="http://www.springframework.org/schema/mvc"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsdhttp://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc.xsd"><context:component-scan base-package="com.example.usermanagement"/><mvc:annotation-driven/><!-- 數據源配置 --><bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource"><property name="url" value="${spring.datasource.url}"/><property name="username" value="${spring.datasource.username}"/><property name="password" value="${spring.datasource.password}"/><property name="driverClassName" value="${spring.datasource.driver-class-name}"/></bean><!-- MyBatis SqlSessionFactory --><bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"><property name="dataSource" ref="dataSource"/><property name="mapperLocations" value="classpath:mapper/*.xml"/></bean><!-- MyBatis Mapper 掃描 --><bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"><property name="basePackage" value="com.example.usermanagement.dao"/></bean>
</beans>

9. Servlet 配置

在 web.xml 中配置 Servlet 和 Spring 上下文：

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" version="3.1"><display-name>User Management</display-name><!-- Spring 上下文 --><context-param><param-name>contextConfigLocation</param-name><param-value>/WEB-INF/spring-config.xml</param-value></context-param><!-- Spring 監聽器 --><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener><!-- Spring MVC DispatcherServlet --><servlet><servlet-name>dispatcherServlet</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><param-name>contextConfigLocation</param-name><param-value>/WEB-INF/spring-config.xml</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>dispatcherServlet</servlet-name><url-pattern>/api/*</url-pattern></servlet-mapping><!-- 跨域支持 --><filter><filter-name>corsFilter</filter-name><filter-class>org.apache.catalina.filters.CorsFilter</filter-class><init-param><param-name>cors.allowed.origins</param-name><param-value>*</param-value></init-param><init-param><param-name>cors.allowed.methods</param-name><param-value>GET,POST,PUT,DELETE,OPTIONS</param-value></init-param><init-param><param-name>cors.allowed.headers</param-name><param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value></init-param></filter><filter-mapping><filter-name>corsFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping>
</web-app>

10. 部署到 Tomcat

1. 將后端項目打包成 WAR 文件。
2. 將 WAR 文件部署到 Tomcat 的 webapps 目錄。
3. 啟動 Tomcat，訪問項目。

總結

通過以上步驟，我們實現了一個基于 Vue 和 SSM 框架的前后端分離項目，完成了用戶登錄和注冊功能。前端使用 Vue.js 構建了友好的用戶界面，后端使用 SSM 框架提供了穩定的數據服務，并通過 Tomcat 進行部署。這種架構清晰、易于維護，適合現代 Web 開發的需求。

在實際開發中，還可以進一步優化，例如添加用戶角色管理、密碼加密、驗證碼等功能，以提高系統的安全性和用戶體驗。