vue實作curd功能

一、實作效果

二、實作

（一）實作增加使用者功能

Vuserlist元件中

vue實作curd功能

<template>

  <div class="panel panel-default">
    <div class="panel-body">

        <!--<button type="button" class="btn btn-info" @click="addOneUser">添加</button>-->
        <Vbutton typeBtn="success" :btnUserMethod="addOneUser" >添加使用者</Vbutton>

        <table class="table table-hover">
          <thead>
          <tr class="info">
            <td>使用者名</td>
            <td>密碼</td>
            <td>操作</td>
          </tr>
          </thead>
          <tbody>
          <VuserItem v-for="(item,index) in getAllUserList" v-bind:userinfo="item" v-bind:userid="item.id"></VuserItem>
          </tbody>
        </table>

      <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <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" id="myModalLabel">建立使用者</h4>
            </div>
            <div class="modal-body">
              <form id="fm" class="form-horizontal">
                <div class="form-group">
                  <label for="username" class="col-sm-2 control-label">姓名</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" name="username" placeholder="姓名" v-model="getUsername">
                  </div>
                </div>
                <div class="form-group">
                  <label for="password" class="col-sm-2 control-label">密碼</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" name="password" placeholder="密碼" v-model="getPassword">
                  </div>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <span id="errorMsg" style="color: red;"></span>
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary" @click="isSave">儲存</button>
              <div class="hidden">
              <el-button :plain="true" @click="open2"></el-button>  <!--儲存成功提示-->
              <el-button :plain="true" @click="open4"></el-button> <!--儲存失敗提示-->
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>


</template>

<script>
  import VuserItem from '@/components/VuserItem'
  import Vbutton from '@/components/Vbutton'


  export default {
    name: "VuserList",
    data: function () {
      return {

      }
    },
    components: {
      Vbutton,
      VuserItem,
    },
    methods: {
      addOneUser() {
        //修複修改資料後input有預設值的bug
        this.$store.state.UserObject.username="";
        this.$store.state.UserObject.password="";

        $('#addModal').modal('show')
      },

      //儲存成功提示函數
      open2(){
        this.$message({
          message: '恭喜你，建立使用者成功！',
          type: 'success'
        });
      },

      //儲存失敗提示函數
      open4() {
        this.$message.error('對不起，建立使用者失敗！');
      },


      //發送資料
      isSave(){

        var data={
          //通過計算屬性擷取資料，實際也是從store執行個體的狀态中拿到資料
          username:this.getUsername,
          password:this.getPassword,
          // csrfmiddlewaretoken: '{{ csrf_token }}'
        };

        //在這個地方觸發對應mutation方法，也就是gaddUser，通過ajax送出所有的資料
        // this.$store.commit(
        //   {
        //     type: 'addUser',
        //     data:data,
        //     getUsername:this.getUsername,
        //     getPassword:this.getPassword,
        //     successfunc: this.open2,
        //     failturefunc:this.open4,
        //   }
        // );

        this.$store.dispatch(
          {
            type: 'addUser',
            data:data,
            getUsername:this.getUsername,
            getPassword:this.getPassword,
            successfunc: this.open2,
            failturefunc:this.open4,
          }
        );

        $('#addModal').modal('hide');//發送成功後模态對話框消失
        this.getUsername=''; //添加成功後将input框置空
        this.getPassword=''
      }


    },
    computed: {

      getAllUserList() {
        return this.$store.state.UserList
      },

      getUsername: {
        set(newValue) {
          this.$store.state.UserObject.username = newValue
        },
        get() {
          return this.$store.state.UserObject.username
        }
      },

      getPassword:{
        set(newValue) {
          this.$store.state.UserObject.password = newValue
        },
        get() {
          return this.$store.state.UserObject.password
        }
      }


    }
  }
</script>

<style scoped>
  table tr td{
    text-align:center;//水準居中
  line-height: 25px;//行高
  vertical-align:middle；//垂直居中
  }
</style>

Vuserlist

這裡引入一個按鈕的元件，也就是根據傳入的參數，變成對應的不同cued按鈕：

<Vbutton typeBtn="success" :btnUserMethod="addOneUser" >添加使用者</Vbutton>

Vuserlist元件會向按鈕元件傳入它自己的函數名，然後在按鈕元件中執行Vuserlist的方法：

<template>

  <button class="btn" :class="currentBtn" @click="handleClickParent">

    <slot>按鈕</slot>

  </button>

</template>

<script>
    export default {
        name: "Vbutton",
      data:function () {
        return {}
      },
      props:{
        typeBtn:String,
        btnUserMethod:Function
      },
      computed:{
        currentBtn(){
          return {

            'btn-success':this.typeBtn === 'success',
            'btn-warning':this.typeBtn === 'warning',
            'btn-danger':this.typeBtn === 'danger',

          }
        },
        currentMethod(){
          return this.btnUserMethod
        }
      },
      methods:{
        handleClickParent(){
          this.currentMethod();//執行父類方法
        }
      },
    }
</script>

<style scoped>

</style>

上面也就是子元件中執行父元件中的方法，詳情可參考：https://www.cnblogs.com/shenjianping/p/11260397.html

執行addOneUser方法後彈出模态對話框，添加使用者資訊：

methods: {
      addOneUser() {
        //修複修改資料後input有預設值的bug
        this.$store.state.UserObject.username="";
        this.$store.state.UserObject.password="";

        $('#addModal').modal('show')
      },
    }

當添加資料後執行儲存資料，向背景接口發送資料的請求函數：

//發送資料
      isSave(){

        var data={
          //通過計算屬性擷取資料，實際也是從store執行個體的狀态中拿到資料
          username:this.getUsername,
          password:this.getPassword,
          // csrfmiddlewaretoken: '{{ csrf_token }}'這裡目前後端注釋了csrf中間件
        };

        //在這個地方觸發對應mutation方法，也就是gaddUser，通過ajax送出所有的資料

        this.$store.dispatch(
          {
            type: 'addUser',
            data:data,
            getUsername:this.getUsername,
            getPassword:this.getPassword,
            successfunc: this.open2,
            failturefunc:this.open4,
          }
        );

        $('#addModal').modal('hide');//發送成功後模态對話框消失
        this.getUsername=''; //添加成功後将input框置空
        this.getPassword=''
      }

可以看得到這裡通過分發的方式，在main.js中執行action的異步操作：

//用于執行異步函數操作，并且送出的是mutation
  actions:{

    addUser(context,payload){
      $.ajax({
        url:'http://127.0.0.1:8000/api/addUser/',
        method:'post',
        dataType:'JSON',
        contentType: 'application/json', //發送的資料類型為json，是以自己發送的資料必須保證為json
        data:JSON.stringify(payload.data), //發送json資料
        success:function (data) {
          if(data.state){
            payload.successfunc();   //執行儲存成功提示函數
          }else {
            payload.failturefunc(); //執行儲存失敗提示函數
          }
          //儲存傳回的資料狀态，mutation修改state狀态，是以傳給mutation處理
          context.commit('ADDUSER',data);
        }

      });
    },
}

這裡最後送出的是mutation函數，因為隻有mutation可以修改state，修改資料狀态

mutations: {

    ////action中送出該mutation
    ADDUSER(state,data){
      state.UserList.push(data.user); //将添加成功的資料添加到狀态，用于頁面更新

    },
}

可以看到在store執行個體中定義的state狀态：

state: {

    //這裡面的狀态跟每一個資料屬性有關
    UserList: [],

  },

（二）實作修改使用者功能

在Vuseritem元件中

vue實作curd功能

<template>

  <tr>
    <td>{{userinfo.username}}</td>
    <td>{{userinfo.password}}</td>
    <td>
      <Vbutton typeBtn="danger" @click="delUse" :btnUserMethod="delUse">删除</Vbutton>
      |
      <Vbutton typeBtn="warning" @click="editUser" :btnUserMethod="editUser">修改</Vbutton>

      <Vmodal :VmodalUserMethod="isdelUser"></Vmodal>


      <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <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" id="myModalLabel">修改使用者</h4>
            </div>
            <div class="modal-body">
              <form id="fm" class="form-horizontal">
                <div class="form-group">
                  <label for="username" class="col-sm-2 control-label">姓名</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" name="username" placeholder="姓名" v-model="getUsername">
                  </div>
                </div>
                <div class="form-group">
                  <label for="password" class="col-sm-2 control-label">密碼</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" name="password" placeholder="密碼" v-model="getPassword">
                  </div>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <span id="errorMsg" style="color: red;"></span>
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary" @click="isEditSave">儲存</button>
              <div class="hidden">
                <el-button :plain="true" @click="open2"></el-button>  <!--儲存成功提示-->
                <el-button :plain="true" @click="open4"></el-button> <!--儲存失敗提示-->
              </div>
            </div>
          </div>
        </div>
      </div>

    </td>
  </tr>

</template>

<script>
  import Vbutton from '@/components/Vbutton'
  import Vmodal from '@/components/Vmodal'



  export default {
    name: "VuserItem",
    components: {
      Vmodal,
      Vbutton
    },
    data: function () {
      return {

      }
    },

    props: {
      userinfo: {
        type: Object,
        require: true
      },
      userid: {
        type: Number,
        require: true
      },
    },

    computed: {

      getUserId(){

        return this.$store.state.UserId
      },
      getUsername: {
        set(newValue) {
          this.$store.state.UserObject.username = newValue
        },
        get() {
          return this.$store.state.UserObject.username
        }
      },

      getPassword: {
        set(newValue) {
          this.$store.state.UserObject.password = newValue
        },
        get() {
          return this.$store.state.UserObject.password
        }
      }

    },
    methods: {
      delUse() {
        $('#delModal').modal('show');
      },

      editUser() {
        this.$store.state.UserId = this.userinfo.id;
        this.$store.state.UserObject.username = this.userinfo.username;
        this.$store.state.UserObject.password = this.userinfo.password;
        //模态對話框隐藏
        $('#editModal').modal('show');
      },


      isdelUser(open2, open4) {
        console.log(this.userid);

        this.$store.dispatch({
          type: 'delUser',
          data: {id: this.userid},
          successfunc: open2,
          failturefunc: open4,

        });

        $('#delModal').modal('hide');

      },

      //修改成功提示函數
      open2(){
        this.$message({
          message: '恭喜你，修改使用者成功！',
          type: 'success'
        });
      },

      //修改失敗提示函數
      open4() {
        this.$message.error('對不起，修改使用者失敗！');
      },


      isEditSave() {
        console.log(this.getUserId);
        this.$store.dispatch(
          {
            type: 'editUser',
            data: {
              id: this.getUserId,
              username: this.getUsername,
              password: this.getPassword
            },
            successfunc: this.open2,
            failturefunc: this.open4,
          }
        );

        $('#editModal').modal('hide');//發送成功後模态對話框消失

      }

    }

  }
</script>

<style scoped>
  tr td {
    text-align: center;
  / / 水準居中 line-height: 25 px;
  / / 行高 vertical-align: middle； / / 垂直居中
  }
</style>

Vuseritem

按鈕元件：

<Vbutton typeBtn="warning" @click="editUser" :btnUserMethod="editUser">修改</Vbutton>

點選修改按鈕執行editUser函數，并且将函數名傳遞給了按鈕，這與增加一樣的效果：

//在methods方法中 
editUser() {
        this.$store.state.UserId = this.userinfo.id;
        this.$store.state.UserObject.username = this.userinfo.username;
        this.$store.state.UserObject.password = this.userinfo.password;
        //模态對話框顯示
        $('#editModal').modal('show');
      },

可以看到在模态對話框顯示前，做了兩件事，第一件事是将使用者id存在store執行個體中，第二件事是将使用者的預設值填儲存起來，實際上下面使用計算屬性擷取input框中的值，其中的getter方法就會擷取預設值，使用者id等值是從父元件Vuserlist傳遞過來的：

props: {
      userinfo: {
        type: Object,
        require: true
      },
      userid: {
        type: Number,
        require: true
      },
    },

利用計算屬性擷取預設值以及使用者填寫的值：

computed: {

      getUserId(){

        return this.$store.state.UserId
      },
      getUsername: {
        set(newValue) {
          this.$store.state.UserObject.username = newValue
        },
        get() {
          return this.$store.state.UserObject.username
        }
      },

      getPassword: {
        set(newValue) {
          this.$store.state.UserObject.password = newValue
        },
        get() {
          return this.$store.state.UserObject.password
        }
      }

    },

最後就是發送修改過後的值：

isEditSave() {
        console.log(this.getUserId);
        this.$store.dispatch(
          {
            type: 'editUser',
            data: {
              id: this.getUserId,
              username: this.getUsername,
              password: this.getPassword
            },
            successfunc: this.open2,
            failturefunc: this.open4,
          }
        );

        $('#editModal').modal('hide');//發送成功後模态對話框消失

      }

剩下的操作就與增加的類似了，這裡不再過多贅述，删除操作也較為簡單。詳情參考github：

三、curd總結

1、綁定屬性與非綁定屬性傳值

綁定的是資料屬性，也就是類似for循環出來的屬性或者data存在的屬性都需要進行綁定

<VuserItem v-for="(item,index) in getAllUserList" v-bind:userinfo="item" v-bind:userid="item.id"></VuserItem> //userinfo或者userid屬性

而對于非資料屬性不要綁定，直接傳值：

<Vbutton typeBtn="success" :btnUserMethod="addOneUser" >添加使用者</Vbutton> //類似typeBtn屬性

這兩種綁定與非綁定屬性都可以進行父子傳值

2、擷取input框預設值以及使用者id

　　這裡碰到的問題就是在VuserList中将每一個使用者id傳給Vitem了，但是在接收後使用過程中，每一個使用者id都是資料表的第一個id，自己也不清楚問什麼，但是這裡将使用者id接收過後存儲在state狀态中就會正确了，是以将傳遞過來的使用者資訊可以完全儲存在state中，然後再使用。

const store = new Vuex.Store({
  state: {
    //這裡面的狀态跟每一個資料屬性有關
    UserList: [],

    UserObject: {
      username: '',
      password: ''
    },
    UserId:""

  }
}

3、子元件調用父元件方法

在父元件中将方法名傳給子元件，然後子元件進行調用

//在父元件中
<Vbutton typeBtn="success" :btnUserMethod="addOneUser" >添加使用者</Vbutton>

然後子元件Vbutton 調用

<template>

  <button class="btn" :class="currentBtn" @click="handleClickParent">

    <slot>按鈕</slot>

  </button>

      props:{

        btnUserMethod:Function

      },

 computed:{

        currentMethod(){
          return this.btnUserMethod
        }

      },
      methods:{
        handleClickParent(){
          this.currentMethod();  //調用父元件中的方法
        }
      },

4、全局引用jquery

找到webpack.base.conf.js檔案

添加配置

　　（1）添加參數的第一個位置

//添加全局配置jquery第一個位置
const webpack = require("webpack")

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

　　（2）添加參數的第二個位置

//添加全局配置jquery第二個位置
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    })
  ],

項目詳情參考：https://github.com/ShenJianPing0307/vue-curdUser

背景API項目參考：https://github.com/ShenJianPing0307/VueTestAPI

作者：iveBoy

出處：http://www.cnblogs.com/shenjianping/

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須在文章頁面給出原文連接配接，否則保留追究法律責任的權利。

vue實作curd功能

一、實作效果

二、實作

（一）實作增加使用者功能

（二）實作修改使用者功能

三、curd總結

1、綁定屬性與非綁定屬性傳值

2、擷取input框預設值以及使用者id

3、子元件調用父元件方法

4、全局引用jquery

繼續閱讀

vue中父元件調用子元件的方法

Vue監視資料原理

vue項目：npm打包-S和-D差別：

vue滑動插件：vue-drag-verify

vue插件的使用

使用Vue自定義元件出現的錯誤

Vue+原生JS實作點選粘貼到剪貼闆

vue時間段選擇器實作的功能

VueX 做狀态管理( state , mutations , getters , actions 概念)

vue 中英文切換

【GIT】git指令行代碼送出流程及注意事項

Django項目實戰——3—(圖形驗證碼後端邏輯、短信驗證碼、短信驗證碼後端邏輯)1、圖形驗證碼後端邏輯2、短信驗證碼3、短信驗證碼後端邏輯

vue3 transitionvue3 transition元件和vue2 transition元件

vue學習筆記day12 vue的生命周期

父子元件間傳值的實作父子元件間傳值的實作

手把手教你配置：Jenkins+Github+Webhook +Nginx自動化打包部署Vue項目