后端代码（Spring Boot + SSM部分）
1. 创建Spring Boot项目
使用Spring Initializr（可以通过IDEA等IDE自带的创建Spring Boot项目功能，或者访问Spring官网的Initializr页面）创建一个基础的Spring Boot项目，添加相关依赖，比如Web（用于构建Web应用）、MyBatis、MyBatis Spring Boot Starter、MySQL Driver（如果使用MySQL数据库）等。
2. 数据库相关配置（application.properties 或 application.yml）
如果使用application.properties，配置如下示例（以MySQL为例，根据实际情况修改数据库连接信息）：
spring.datasource.url=jdbc:mysql://localhost:3306/your_database_name?useSSL=false&serverTimezone=UTC&characterEncoding=utf8
spring.datasource.username=your_username
spring.datasource.password=your_password
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Drivermybatis.mapper-locations=classpath:mapper/*.xml
如果是application.yml格式：
spring:datasource:url: jdbc:mysql://localhost:3306/your_database_name?useSSL=false&serverTimezone=UTC&characterEncoding=utf8username: your_usernamepassword: your_passworddriver-class-name: com.mysql.cj.jdbc.Driver
mybatis:mapper-locations: classpath:mapper/*.xml
3. 创建实体类（User.java为例）
public class User {private Long id;private String username;private String password;// 生成相应的Getter、Setter、构造函数等// 可以使用Lombok简化代码（添加Lombok依赖后使用相关注解）
}
4. 创建Mapper接口（UserMapper.java）
import org.apache.ibatis.annotations.Mapper;
import com.example.demo.model.User;@Mapper
public interface UserMapper {List<User> selectAllUsers();int insertUser(User user);// 可以定义更多操作数据库的方法，比如根据ID查询、更新、删除等
}
5. 创建Mapper对应的XML文件（UserMapper.xml，放在resources/mapper目录下）
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.demo.mapper.UserMapper"><select id="selectAllUsers" resultMap="UserResultMap">select * from user</select><insert id="insertUser" keyProperty="id" useGeneratedKeys="true">insert into user(username, password) values(#{username}, #{password})</insert><!-- 定义resultMap --><resultMap id="UserResultMap" type="com.example.demo.model.User"><id property="id" column="id" /><result property="username" column="username" /><result property="password" column="password" /></resultMap>
</mapper>
6. 创建Service层接口（UserService.java）
import java.util.List;
import com.example.demo.model.User;public interface UserService {List<User> getAllUsers();boolean addUser(User user);
}
7. 创建Service层接口实现类（UserServiceImpl.java）
import java.util.List;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import com.example.demo.mapper.UserMapper;
import com.example.demo.model.User;
import com.example.demo.service.UserService;@Service
@Transactional
public class UserServiceImpl implements UserService {private final UserMapper userMapper;public UserServiceImpl(UserMapper userMapper) {this.userMapper = userMapper;}@Overridepublic List<User> getAllUsers() {return userMapper.selectAllUsers();}@Overridepublic boolean addUser(User user) {return userMapper.insertUser(user) > 0;}
}
8. 创建Controller层（UserController.java）
import java.util.List;
import org.springframework.web.bind.annotation.*;
import com.example.demo.model.User;
import com.example.demo.service.UserService;@RestController
@RequestMapping("/users")
public class UserController {private final UserService userService;public UserController(UserService userService) {this.userService = userService;}// 获取所有用户列表@GetMappingpublic List<User> getUsers() {return userService.getAllUsers();}// 添加用户@PostMappingpublic boolean addUser(@RequestBody User user) {return userService.addUser(user);}
}
前端代码（Vue部分）
1. 创建Vue项目
使用vue-cli创建项目（确保已安装vue-cli，通过命令vue create your-project-name创建项目），选择相应的配置，比如是否使用Router、Vuex等（这里简单示例可不选）。
2. 安装axios用于和后端交互（在项目目录下执行命令）
npm install axios
3. 创建组件（比如UserList.vue用于展示用户列表，AddUser.vue用于添加用户，这里以UserList.vue为例）
<template><div><h2>用户列表</h2><ul><li v-for="user in users" :key="user.id">{{ user.username }}</li></ul></div>
</template><script>
import axios from 'axios';
export default {data() {return {users: []};},mounted() {this.fetchUsers();},methods: {fetchUsers() {axios.get('http://localhost:8080/users') // 根据后端实际部署的地址和端口修改.then(response => {this.users = response.data;}).catch(error => {console.log(error);});}}
};
</script>
4. 在main.js中注册组件并挂载到根实例（简单示例）
import Vue from 'vue';
import App from './App.vue';
import UserList from './components/UserList.vue';Vue.component('user-list', UserList);new Vue({render: h => h(App)
}).$mount('#app');
