SpringBoot-Vue实现增删改查

pojo层·

package com.example.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;

@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class User {
    private int id;
    private String name;
    private String pwd;
}

mapper层 

package com.example.mapper;

import com.example.pojo.User;
import com.github.pagehelper.PageInfo;
import org.apache.ibatis.annotations.Param;

import java.util.List;

public interface UserMapper {
    /**
     * 查
     * @return
     */
    List<User>queryUser();

    /**
     * 增
     * @param user
     * @return
     */
    int addUser(User user);


    /**
     * 修改
     * @param user
     * @return
     */
    int updateUser(User user);

    /**
     * 删除
     * @param id
     * @return
     */
    int deleteUser(@Param("id") int id);


}

mapper.xml 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mapper.UserMapper">

    <select id="queryUser" resultType="com.example.pojo.User">
        select * from user
    </select>

    <insert id="addUser" parameterType="com.example.pojo.User">
        insert into user(id,name,pwd) values (null,#{name},#{pwd})
    </insert>

    <update id="updateUser" parameterType="com.example.pojo.User">
        update user set name=#{name},pwd=#{pwd} where id=#{id}
    </update>

    <delete id="deleteUser" parameterType="int">
        delete from user where id=#{id}
    </delete>


</mapper>

service层

package com.example.servict;

import com.example.pojo.User;
import org.apache.ibatis.annot
Spring BootVue.js可以很好地搭配使用,实现前后端分离的Web应用程序。以下是一个简单的例子,演示如何使用Spring BootVue.js实现增删改查功能。 1. 创建一个Spring Boot项目,包含Spring Web和Spring Data JPA依赖。创建一个实体类和一个Repository接口,用于操作数据库。 ```java @Entity public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; private String email; // 省略getter和setter } @Repository public interface UserRepository extends JpaRepository<User, Long> { } ``` 2. 创建一个RESTful API,使用Spring MVC和Spring Data REST实现,用于获取、创建、更新和删除用户。 ```java @RestController @RequestMapping("/api/users") public class UserController { @Autowired private UserRepository userRepository; @GetMapping public List<User> findAll() { return userRepository.findAll(); } @PostMapping public User create(@RequestBody User user) { return userRepository.save(user); } @PutMapping("/{id}") public User update(@PathVariable Long id, @RequestBody User user) { user.setId(id); return userRepository.save(user); } @DeleteMapping("/{id}") public void delete(@PathVariable Long id) { userRepository.deleteById(id); } } ``` 3. 创建一个Vue.js应用程序,使用axios库与后端进行通信。创建一个组件,用于显示用户列表,以及一个表单组件,用于创建或更新用户。 ```html <template> <div> <table> <tr> <th>ID</th> <th>Name</th> <th>Email</th> <th>Actions</th> </tr> <tr v-for="user in users" :key="user.id"> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.email }}</td> <td> <button @click="edit(user)">Edit</button> <button @click="remove(user)">Remove</button> </td> </tr> </table> <form v-if="editing" @submit.prevent="save"> <input type="text" v-model="user.name" placeholder="Name"> <input type="email" v-model="user.email" placeholder="Email"> <button type="submit">{{ editing.id ? 'Update' : 'Create' }}</button> </form> </div> </template> <script> import axios from 'axios'; export default { data() { return { users: [], user: {}, editing: false, }; }, methods: { async fetchUsers() { const { data } = await axios.get('/api/users'); this.users = data; }, async save() { if (this.editing.id) { await axios.put(`/api/users/${this.editing.id}`, this.user); } else { await axios.post('/api/users', this.user); } this.editing = false; this.user = {}; await this.fetchUsers(); }, async remove(user) { await axios.delete(`/api/users/${user.id}`); await this.fetchUsers(); }, edit(user) { this.editing = true; this.user = { ...user }; }, }, async mounted() { await this.fetchUsers(); }, }; </script> ``` 4. 在Spring Boot应用程序中配置静态资源路径,将Vue.js应用程序打包为静态资源,并在Spring Boot应用程序中提供静态资源服务。 ```properties spring.mvc.static-path-pattern=/static/** spring.resources.static-locations=classpath:/static/ ``` 5. 打包Vue.js应用程序,并将生成的dist目录复制到Spring Boot应用程序的静态资源目录中。 6. 运行Spring Boot应用程序,访问http://localhost:8080/static/index.html即可看到用户列表和表单。现在可以使用Vue.js应用程序与后端进行交互,实现增删改查功能了。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值