vue-異步獲取數據

一、前端代碼

• 使用了部分的css和js，該部分只做前端代碼參考，主要是vue的
  遍歷數據v-for="u in userList"；
  並且使用了模態窗口

<!--數據列表-->
                        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                            <thead>
                            <tr>
                                <th class="" style="padding-right:0px;">
                                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                                </th>
                                <th class="sorting_asc">ID</th>
                                <th class="sorting_desc">用戶名</th>
                                <th class="sorting_asc sorting_asc_disabled">密碼</th>
                                <th class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody>

                            <tr v-for="u in userList">
                                <td><input name="ids" type="checkbox"></td>
                                <td>{{u.id}}</td>
                                <td>{{u.userName}}</td>
                                <td>{{u.pwd}}</td>
                                <td class="text-center">
                                    <button type="button" class="btn bg-olive btn-xs">詳情</button>
                                    <button type="button" class="btn bg-olive btn-xs" @click="findById(u.id)">編輯</button>
                                </td>
                            </tr>

                            </tbody>
                            <!--模態窗口-->
                            <div class="tab-pane" id="tab-model">
                                <div id="myModal" class="modal modal-primary" role="dialog">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span></button>
                                                <h4 class="modal-title">用戶信息</h4>
                                            </div>
                                            <div class="modal-body">

                                                <div class="box-body">
                                                    <div class="form-horizontal">


                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">用戶名:</label>
                                                            <div class="col-sm-5">
                                                                <input type="text" class="form-control" v-model="user.userName">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">密碼:</label>
                                                            <div class="col-sm-5">
                                                                <input type="text" class="form-control" v-model="user.pwd">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-outline" data-dismiss="modal" >關閉</button>
                                                <button type="button" class="btn btn-outline" data-dismiss="modal" @click="update">修改</button>
                                            </div>
                                        </div>
                                        <!-- /.modal-content -->
                                    </div>

                                    <!-- /.modal-dialog -->
                                </div>
                                <!-- /.modal -->
                            </div>
                            <!--模態窗口/-->
                        </table>

二、使用異步請求獲取後臺數據

• 後臺controller代碼及路徑

  @RestController
  public class InfoController {
  
      @Autowired
      private InfoService infoService;
  
      @RequestMapping("/find_all")
      public Object findAll(){
          return infoService.findAll();
      }
  
      @RequestMapping("/find_by_id")
      public Object findById(Integer id){
          return infoService.findById(id);
      }
  
      @PostMapping("/update")
      public void update(@RequestBody Info info){
          infoService.update(info);
      }
  }
  
  

• user.js代碼

  new Vue({
      el:"#app",
      data: {
          user: {
              id: "",
              userName: "",
              pwd: ""
          },
          userList: []
      },
      methods:{
          //查詢所有-- 進行列表數據展示
          findAll:function () {       //使用異步查詢
              //拿到vue對象
              var _this = this;
              axios.get('find_all')
                  .then(function (response) {
                      //this.userList = response.data;   //取出後臺數據賦值給 vue對象的 集合userList
                      _this.userList=response.data;
                      console.log(response);
                  })
                  .catch(function (error) {
                      console.log(error);
                  })
          },
          //更新的方法 （來源自 html頁面中的 @click後的update方法
          update:function (user) {
              var _this = this;
  
              axios.post('update',_this.user)
                  .then(function (response) {
                      //更新完畢，刷新頁面
                      _this.findAll();
                      console.log(response);
                  }).catch(function (error) {
                      console.log(error);
                  });
          },
          findById:function (userId) {    //根據id發送異步請求
              var _this = this;
              axios.get('find_by_id?id='+userId)
                  .then(function (response) {
                      _this.user = response.data;
                      //顯示模態窗口
                      $("#myModal").show();
                      console.log(response);
                  })
                  .catch(function (error) {
                      console.log(error);
                  })
          },
  
  
      },
      created:function () {   //當前頁面加載時就執行created
          this.findAll();     //執行vue對象的 findAll
      }
  });