用springboot+mybatis+vue写一个简单的案例
时间: 2023-08-12 13:05:08 浏览: 209
springboot+mybatis 最简单的小例子
好的,我可以为您提供一个简单的案例,用于演示如何使用Spring Boot和MyBatis来构建后端REST API,并使用Vue.js来构建前端界面。
首先,我们需要创建一个Spring Boot项目。您可以使用Spring Initializr来快速创建一个新项目。选择Maven项目,然后添加所需的依赖项:Spring Web、MyBatis、MySQL驱动程序和Lombok。
接下来,我们需要创建一个数据模型。假设我们正在构建一个简单的博客系统,我们需要一个名为“Post”的实体类:
```java
@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查询:
```java
@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:
```java
@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请求:
```java
@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:
```html
<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应用程序。您可以根据需要进行更改和扩展。
阅读全文