用springboot+mybatis+vue写一个简单的案例

好的，我可以为您提供一个简单的案例，用于演示如何使用Spring Boot和MyBatis来构建后端REST API，并使用Vue.js来构建前端界面。

首先，我们需要创建一个Spring Boot项目。您可以使用Spring Initializr来快速创建一个新项目。选择Maven项目，然后添加所需的依赖项：Spring Web、MyBatis、MySQL驱动程序和Lombok。

接下来，我们需要创建一个数据模型。假设我们正在构建一个简单的博客系统，我们需要一个名为“Post”的实体类：

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Post {
    private Long id;
    private String title;
    private String content;
    private Date createTime;
    private Date updateTime;
}

接下来，我们需要创建一个MyBatis Mapper接口来执行CRUD操作。我们将在此接口中定义SQL查询：

@Mapper
public interface PostMapper {
    @Select("SELECT * FROM post")
    List<Post> findAll();
    
    @Select("SELECT * FROM post WHERE id=#{id}")
    Post findById(Long id);
    
    @Insert("INSERT INTO post(title,content,create_time,update_time) VALUES(#{title},#{content},#{createTime},#{updateTime})")
    @Options(useGeneratedKeys=true, keyProperty="id", keyColumn="id")
    void insert(Post post);
    
    @Update("UPDATE post SET title=#{title},content=#{content},update_time=#{updateTime} WHERE id=#{id}")
    void update(Post post);
    
    @Delete("DELETE FROM post WHERE id=#{id}")
    void delete(Long id);
}

然后，我们需要创建一个PostService类来将Mapper方法暴露为REST API：

@Service
public class PostService {
    @Autowired
    private PostMapper postMapper;
    
    public List<Post> findAll() {
        return postMapper.findAll();
    }
    
    public Post findById(Long id) {
        return postMapper.findById(id);
    }
    
    public void insert(Post post) {
        Date now = new Date();
        post.setCreateTime(now);
        post.setUpdateTime(now);
        postMapper.insert(post);
    }
    
    public void update(Post post) {
        post.setUpdateTime(new Date());
        postMapper.update(post);
    }
    
    public void delete(Long id) {
        postMapper.delete(id);
    }
}

最后，我们需要创建一个REST控制器来处理HTTP请求：

@RestController
@RequestMapping("/api/posts")
public class PostController {
    @Autowired
    private PostService postService;
    
    @GetMapping("/")
    public List<Post> findAll() {
        return postService.findAll();
    }
    
    @GetMapping("/{id}")
    public Post findById(@PathVariable Long id) {
        return postService.findById(id);
    }
    
    @PostMapping("/")
    public void insert(@RequestBody Post post) {
        postService.insert(post);
    }
    
    @PutMapping("/{id}")
    public void update(@RequestBody Post post, @PathVariable Long id) {
        post.setId(id);
        postService.update(post);
    }
    
    @DeleteMapping("/{id}")
    public void delete(@PathVariable Long id) {
        postService.delete(id);
    }
}

现在，我们可以启动应用程序并使用Postman或类似的工具来测试我们的REST API。

最后，我们需要创建一个Vue.js前端界面。您可以使用Vue CLI来快速创建一个新项目，并使用axios库来调用我们的REST API：

<template>
  <div>
    <h1>My Blog Posts</h1>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Title</th>
          <th>Content</th>
          <th>CreateTime</th>
          <th>UpdateTime</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="post in posts" :key="post.id">
          <td>{{post.id}}</td>
          <td>{{post.title}}</td>
          <td>{{post.content}}</td>
          <td>{{post.createTime}}</td>
          <td>{{post.updateTime}}</td>
          <td><button @click="editPost(post)">Edit</button> <button @click="deletePost(post)">Delete</button></td>
        </tr>
      </tbody>
    </table>
    <br>
    <h2 v-if="!editing">Add Post</h2>
    <h2 v-if="editing">Edit Post</h2>
    <form @submit.prevent="submitPost">
      <label>Title:</label><br>
      <input type="text" v-model="post.title"><br>
      <label>Content:</label><br>
      <textarea v-model="post.content"></textarea><br>
      <button v-if="!editing">Add</button>
      <button v-if="editing">Save</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'App',
  data() {
    return {
      posts: [],
      post: {
        title: '',
        content: ''
      },
      editing: false
    }
  },
  mounted() {
    axios.get('/api/posts').then(response => {
      this.posts = response.data;
    });
  },
  methods: {
    submitPost() {
      if (this.editing) {
        axios.put('/api/posts/' + this.post.id, this.post).then(response => {
          this.editing = false;
          this.post = {
            title: '',
            content: ''
          };
          axios.get('/api/posts').then(response => {
            this.posts = response.data;
          });
        });
      } else {
        axios.post('/api/posts', this.post).then(response => {
          this.post = {
            title: '',
            content: ''
          };
          axios.get('/api/posts').then(response => {
            this.posts = response.data;
          });
        });
      }
    },
    editPost(post) {
      this.editing = true;
      this.post = {
        id: post.id,
        title: post.title,
        content: post.content
      };
    },
    deletePost(post) {
      axios.delete('/api/posts/' + post.id).then(response => {
        axios.get('/api/posts').then(response => {
          this.posts = response.data;
        });
      });
    }
  }
}
</script>

这就是一个简单的案例，使用Spring Boot、MyBatis和Vue.js构建了一个完整的Web应用程序。您可以根据需要进行更改和扩展。