vue-axios demo_user 展示数据删除修改新增

最新推荐文章于 2022-11-15 19:17:36 发布

123&abc&

最新推荐文章于 2022-11-15 19:17:36 发布

阅读量1.2k

点赞数 3

分类专栏：实现功能

本文链接：https://blog.csdn.net/qq_40055619/article/details/118409829

版权

实现功能专栏收录该内容

5 篇文章 0 订阅

订阅专栏

项目
1.
https://gitee.com/zhao-qing-jing/ssmpro2104-jt/tree/master/d-mvc
https://gitee.com/zhao-qing-jing/ssmpro2104-jt/tree/master/e-vue
2.
https://gitee.com/zhao-qing-jing/ssmpro2104-jt/tree/master/f-test-company-user-ssm-vue-axios
理解

# vue-axios  demo_user  展示数据  删除  修改  新增
## vue页面数据传递
表格设计, tbody tr td
--[查]
    结果集:       axios请求获取到结果, 赋值给 userList数组
    获取一条:      v-for(users in userList)   迭代userList获取每条
    展示到td:      {{user.name}} / v-text="user.name"  展示到td中
--[删]
    获取要删的数据的id:    每一条数据,后面有删除, 因此可以获得每条数据各自的id, 
    执行:                 按钮@click="deleteBtn(user.id)" 
    方法:                 deleteBtn(user.id)
--[修]
    页面:        写要修改的数据的内容页面 input框   v-show="disU"用于显示隐藏
    数据:        在获取每条数据时, 跟一个修改  可以直接获取到每条数据  users
    更新按钮:     @click="updateB(users)"    功能 this.user = user;
    展示数据:    v-model="user.name" 双向绑定   因为  this.user = user;  
    提交,执行:   updateBtn()   页面中数据已经是 user
--[增]
    页面:        和update一样
    按钮:        @click="insertB()"
    数据:        开始展示数据为空,  添加数据 v-model="user.name" 双向绑定
    提交:        insertBtn(user)

> 按钮
    删除       deleteBtn(id)  user.id,v-for()得到
    更新       updateB(user)  user,v-for()得到  展示input
    更新提交   updateBtn()    this.user,input v-model 双向绑定得到
    新增       insertB()      展示input
    新增提交   insertBtn()    this.user,input v-model 双向绑定得到
    返回       returnBtn()    div的v-show
    清空       clearBtn()     清空input

## axios各种请求 
     get delete put post
--     [get]
        axios请求:    axios.get(`http://localhost:8614/user/find`).then(result=>{this.userList = result.data;});
        页面接收:     使用UserList数组 

--     [delete]
        axios请求:    axios.delete(`http://localhost:8614/user/delete/${id}`)

--     [put]
        axios请求:    axios.put('http://localhost:8614/user/update', this.user)

--     [post]
          axios请求:    axios.post("",参数)    axios.post('http://localhost:8614/user/insert',this.user)
          发生的请求:   两次请求 1.跨域(预检) 2.403(正常)
          数据:         使用的input表单 和put一样 input v-model="user.name"(双向绑定)
          传递的数据:    json串 

--     [url参数]
          params:{}
          data:{} 只能用在post/put
--     [成功]
          .then()  箭头函数可以使用 this.
          删除 / 新增 / 修改 之后的查询 getUserList()放在 .then() 中   --原因异步请求

页面

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>axios-2</title>
<!--vue axios-->
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--bootstrap-->
        <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--font-awesome图标-->
      <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
      <style>
          table thead tr th{
              text-align: center;
          }
          table tbody tr td{
              text-align: center;
          }
      </style>
  </head>
  <body>
    <div id="qwe" class="container">
      <div  v-show="disQwe" >
          <h3 align="center">demo_user</h3>
          <button class="btn btn-primary" style="position: absolute;right: 250px;top: 20px" @click="saveB()"><i class="fa fa-plus-square-o"></i> 添加</button>
        <table class="table table-hover">
            <thead>
                <tr>
                  <th>编号</th>
                  <th>姓名</th>
                  <th>年龄</th>
                  <th>性别</th>
                  <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="users in userList" :key="users.id">
                    <td>{{users.id}}</td>
                    <td>{{users.name}}</td>
                    <td>{{users.age}}</td>
                    <td>{{users.sex}}</td>
                    <td>
                        <button @click="deleteById(users.id)" class="btn btn-danger"><i class="fa fa-trash-o fa-lg"></i> 删除</button>
                        <button @click="updateById(users)" class="btn btn-success"><i class="fa fa-upload"></i> 修改</button>
                    </td>
                </tr>
            </tbody>
        </table>
      </div>

        <div v-show="disAsd">
            <h3 style="text-align: center;margin: 30px 0;">insert / update demo_user</h3>
            <form class="form-horizontal">
                <div class="form-group" v-show="disId">
                    <label for="id" class="col-sm-4 control-label">id</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="id" autocomplete="off" v-model="user.id" disabled>
                    </div>
                </div>
                <div class="form-group">
                    <label for="name" class="col-sm-4 control-label">name</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="name" placeholder="name" autocomplete="off" v-model="user.name">
                    </div>
                </div>
                <div class="form-group">
                    <label for="age" class="col-sm-4 control-label">age</label>
                    <div class="col-sm-4">
                        <input type="number" class="form-control" id="age" placeholder="age" autocomplete="off" v-model="user.age">
                    </div>
                </div>
                <div class="form-group">
                    <label for="sex" class="col-sm-4 control-label">sex</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="sex" placeholder="sex" autocomplete="off" v-model="user.sex">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-4 col-sm-5">
                        <button type="button" class="btn btn-info" style="margin-left: 30px" @click="updateBtn()">修改</button>
                        <button type="button" class="btn btn-info" style="margin-left: 20px" @click="saveBtn(user)">添加</button>
                        <button type="button" class="btn btn-default" style="background-color: darkgrey;color: white;margin-left: 20px" @click="clearAll()">清空</button>
                        <button type="button" class="btn btn-info" style="margin-left: 20px;background-color: blueviolet" @click="returnBtn()">返回</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
    	axios.defaults.baseURL="http://localhost:8614/user/";
      /*  http://localhost:8614/user/find  */
      new Vue({
        el: "#qwe",
        data: {
            userList: [],
            user: {
                id: '',
                name: '',
                age: '',
                sex: ''
            },
            disQwe: true,
            disAsd: false,
            disId: true
        },
        methods: {
          getUserList(){
              var that = this;
              axios.get(`http://localhost:8614/user/find`)
                .then(function (result){
                    that.userList = result.data;
                })
              // .then(result=>{this.userList = result.data;});
          },
            deleteById(id){
                axios.delete(`http://localhost:8614/user/delete/${id}`)
                    .then(result=>{
                        if (result.data==1){
                            alert("删除成功");
                            this.getUserList();
                        }else{
                            alert("删除失败");
                        }
                    })
            },
            updateById(user){
              this.user = user;
                this.disQwe = false;
                this.disAsd = true;
                this.disId = true;
            },
            updateBtn(){
              axios.put('http://localhost:8614/user/update', this.user)
                .then(result=>{
                    if (result.data==1){
                        alert("更新成功");
                        this.getUserList();
                        this.disQwe = true;
                        this.disAsd = false;
                    }else{
                        alert("更新失败");
                    }
                })
            },
            clearAll(){
                this.user.name='';
                this.user.age='';
                this.user.sex='';
            },
            returnBtn(){
                this.disQwe = true;
                this.disAsd = false;
                this.getUserList();
            },
            saveB(){
                this.disQwe = false;
                this.disAsd = true;
                this.disId = false;
                this.clearAll();
            },
            saveBtn(){
                axios.post('http://localhost:8614/user/insert',this.user)
                    .then(result=>{
                        if (result.data==1){
                            alert("添加成功");
                            this.getUserList();
                            this.disQwe = true;
                            this.disAsd = false;
                        }else{
                            alert("添加失败");
                        }
                    })
            }
        },
        /* 页面加载完成之前调用 函数  获取User的数据 */
        created(){
          this.getUserList();
        }
      })
    </script>
  </body>
</html>

controller

@CrossOrigin
@RestController
@RequestMapping("/user/")
public class UserController {
	@Autowired
    private UserService userService;
	
	@GetMapping("find")
    public List<User> findUsers(){
        List<User> users = userService.findUsers();
        System.out.println("find");
        return users;
    }

	@DeleteMapping("delete/{id}")
    public int deleteById(@PathVariable Integer id){
        int i = userService.deleteById(id);
        System.out.println(i+"delete");
        return i;
    }

	@PutMapping("update")
    public int updateById(@RequestBody User user){
        int i = userService.updateById(user);
        System.out.println(i+"update");
        return i;
    }

    @PostMapping("insert")
    public int insertUser(@RequestBody User user){
        int i = userService.insertUser(user);
        System.out.println(i+"insert");
        return i;
    }
}