后端代码（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.Driver
mybatis.mapper-locations=classpath:mapper/*.xml
如果是application.yml格式：
spring:
datasource:
url: jdbc:mysql://localhost:3306/your_database_name?useSSL=false&serverTimezone=UTC&characterEncoding=utf8
username: your_username
password: your_password
driver-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;
}
@Override
public List<User> getAllUsers() {
return userMapper.selectAllUsers();
}
@Override
public 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;
}
// 获取所有用户列表
@GetMapping
public List<User> getUsers() {
return userService.getAllUsers();
}
// 添加用户
@PostMapping
public 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');