使用vue3 和mybatis-plus操作数据库

安装vue3和mybatis-plus

首先安装Node.js和Vue CLI，然后使用以下命令安装Vue3：

npm install -g @vue/cli

安装MyBatis-Plus，可以在项目中使用以下命令：

npm install mybatis-plus

配置后端

使用Spring Boot创建一个后端项目，并配置MyBatis-Plus。在项目中添加以下依赖项：

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.4.3.1</version>
</dependency>

然后在application.properties文件中添加以下配置：

# 数据库配置
spring.datasource.url=jdbc:mysql://localhost:3306/testdb?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

# MyBatis-Plus 配置
mybatis-plus.mapper-locations=classpath:mapper/*.xml
mybatis-plus.configuration.map-underscore-to-camel-case=true

创建API

在后端项目中创建一个Controller类，用于处理API请求。例如，以下代码演示如何获取所有用户列表：

@RestController
@RequestMapping("/users")
public class UserController {
    @Autowired
    private UserService userService;

    @GetMapping("/")
    public List<User> getAllUsers() {
        return userService.list();
    }
}

在UserService中定义list()方法，使用MyBatis-Plus的BaseMapper进行数据库操作。例如，以下代码演示如何查询所有用户：

@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
    @Override
    public List<User> list() {
        return baseMapper.selectList(null);
    }
}

创建前端界面

使用Vue CLI创建一个前端项目。然后在App.vue中添加以下代码，用于显示所有用户：

<template>
  <div class="container">
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    axios.get('/api/users/')
      .then(res => {
        this.users = res.data
      })
  }
}
</script>

在Vue项目中使用axios库进行API请求，获取后端返回的用户列表。然后在页面中显示用户名称。

运行项目

在后端项目中运行Spring Boot应用程序。在前端项目中运行以下命令启动Vue应用程序：

npm run serve

然后在浏览器中访问http://localhost:8080/，即可查看用户列表。