使用Java中MVC和VUE进行连接数据库在前后端分离的小项目

下面是一个示例项目，使用Java中的Spring MVC框架和Vue.js进行前后端分离，并连接MySQL数据库。

1. 创建数据库

首先创建一个名为“test”的数据库，并在其中创建一个名为“users”的表，表结构如下：

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;

2. 创建Java Web项目

使用Eclipse或者其他IDE创建一个Java Web项目，添加Spring MVC和MyBatis框架的依赖。

3. 创建Java Bean

创建一个名为User的Java Bean，用来映射数据库表中的数据。

public class User {
    private int id;
    private String name;
    private String email;
    // getter和setter方法省略
}

4. 创建MyBatis映射文件

在项目的src/main/resources目录下创建一个名为UserMapper.xml的MyBatis映射文件，用来实现Java Bean和数据库表之间的映射。

<?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.dao.UserMapper">
    <resultMap id="userMap" type="com.example.bean.User">
        <id property="id" column="id" />
        <result property="name" column="name" />
        <result property="email" column="email" />
    </resultMap>
    
    <select id="selectAllUsers" resultMap="userMap">
        SELECT * FROM users
    </select>
    
    <insert id="insertUser" parameterType="com.example.bean.User">
        INSERT INTO users(name, email) VALUES(#{name}, #{email})
    </insert>
</mapper>

5. 创建DAO接口

创建一个名为UserMapper的DAO接口，用来调用MyBatis映射文件中定义的SQL语句。

public interface UserMapper {
    List<User> selectAllUsers();
    int insertUser(User user);
}

6. 创建Service层

创建一个名为UserService的Service层，用来调用DAO接口。

@Service
public class UserService {
    @Autowired
    private UserMapper userMapper;
    
    public List<User> selectAllUsers() {
        return userMapper.selectAllUsers();
    }
    
    public int insertUser(User user) {
        return userMapper.insertUser(user);
    }
}

7. 创建Controller层

创建一个名为UserController的Controller层，用来处理HTTP请求。

@RestController
public class UserController {
    @Autowired
    private UserService userService;
    
    @GetMapping("/users")
    public List<User> selectAllUsers() {
        return userService.selectAllUsers();
    }
    
    @PostMapping("/users")
    public int insertUser(@RequestBody User user) {
        return userService.insertUser(user);
    }
}

8. 创建Vue.js项目

创建一个名为“vue-demo”的Vue.js项目，使用axios库来发送HTTP请求。

<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{user.name}} ({{user.email}})
      </li>
    </ul>
    <form @submit.prevent="submitForm">
      <div>
        <label>Name:</label>
        <input type="text" v-model="user.name" />
      </div>
      <div>
        <label>Email:</label>
        <input type="text" v-model="user.email" />
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      user: {
        name: '',
        email: '',
      },
    };
  },
  methods: {
    loadUsers() {
      axios.get('/users').then(response => {
        this.users = response.data;
      });
    },
    submitForm() {
      axios.post('/users', this.user).then(response => {
        this.user.name = '';
        this.user.email = '';
        this.loadUsers();
      });
    },
  },
  mounted() {
    this.loadUsers();
  },
};
</script>

9. 构建和部署项目

使用Maven构建Java Web项目，将生成的.war文件部署到Tomcat服务器上。将Vue.js项目打包成静态文件，将其部署到Nginx服务器上。

10. 访问项目

通过浏览器访问Nginx服务器上的Vue.js项目，即可实现使用Java中MVC和VUE进行连接数据库在前后端分离的小项目。