Crud+ form verification for spa project development

One 、 Form validation
Articles.vue:

1、 Editing interface ：

<!--  Editing interface  -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label=" Article title " prop="title">
          <el-input size="small" v-model="editForm.title" auto-complete="off" placeholder=" Please enter the title of the article "></el-input>
        </el-form-item>
        <el-form-item label=" Article content " prop="body">
          <el-input size="small" v-model="editForm.body" auto-complete="off" placeholder=" Please enter the content of the article "></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog"> Cancel </el-button>
        <el-button size="small" type="primary" class="title" @click="submitForm('editForm')"> preservation </el-button>
      </div>
    </el-dialog>

2、 Defining variables

title: '',
editFormVisible: false,

3、 Method
data:

editForm: {
 
        },
        //  Pass in the agreed validation rules 
        rules: {
          title: [{
              required: true,
              message: ' Please enter the title of the article ',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: ' The length is in  3  To  5  Characters ',
              trigger: 'blur'
            }
          ],
          body: [{
            required: true,
            message: ' Please enter the content of the article ',
            trigger: 'blue'
          }]
        }

methods:

 //  Cancel pop-up 
      closeDialog() {
 
      },
      handleEdit(){
        //  pop-up 
        this.editFormVisible=true;
      },
 //  Verification method 
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

When form validation is required , Remember to mount the verification rules in the form ：

4、 Exhibition
①、 Code display ：

<template>
  <div>
    <!--  This is the article list component  -->
    <!--  Search filter  -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label=" Search for ：">
        <el-input size="small" v-model="formInline.title" placeholder=" Article title "></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search"> Search for </el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()"> add to </el-button>
      </el-form-item>
    </el-form>
    <!--  list  -->
    <el-table size="small" :data="listData" highlight-current-row border element-loading-text=" Desperately loading "
      style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="id" label=" article ID" width="300">
      </el-table-column>
      <el-table-column sortable prop="title" label=" Article title " width="300">
      </el-table-column>
      <el-table-column sortable prop="body" label=" Article content " width="300">
      </el-table-column>
      <!-- <el-table-column align="center" label=" operation " min-width="300">
           <template slot-scope="scope">
             <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"> edit </el-button>
             <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)"> Delete </el-button>
           </template>
         </el-table-column> -->
    </el-table>
 
    <!--  Pagination bar  -->
    <el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="100"
      layout="total, sizes, prev, pager, next, jumper" :total="formInline.total">
    </el-pagination>
 
    <!--  Editing interface  -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label=" Article title " prop="title">
          <el-input size="small" v-model="editForm.title" auto-complete="off" placeholder=" Please enter the title of the article "></el-input>
        </el-form-item>
        <el-form-item label=" Article content " prop="body">
          <el-input size="small" v-model="editForm.body" auto-complete="off" placeholder=" Please enter the content of the article "></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog"> Cancel </el-button>
        <el-button size="small" type="primary" class="title" @click="submitForm('editForm')"> preservation </el-button>
      </div>
    </el-dialog>
  </div>
</template>
 
 
<script>
  export default {
    name: 'Articles',
    data() {
      return {
        listData: [],
 
        title: '',
        editFormVisible: false,
 
        formInline: {
          page: 1,
          rows: 10,
          total: 0,
          title: ''
        },
        editForm: {
 
        },
        //  Pass in the agreed validation rules 
        rules: {
          title: [{
              required: true,
              message: ' Please enter the title of the article ',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: ' The length is in  3  To  5  Characters ',
              trigger: 'blur'
            }
          ],
          body: [{
            required: true,
            message: ' Please enter the content of the article ',
            trigger: 'blue'
          }]
        }
      }
    },
    methods: {
      handleSizeChange(rows) {
        console.log(" The amount of data queried on the current page ：" + rows)
        this.formInline.page = 1;
        this.formInline.rows = rows;
        this.search();
      },
      handleCurrentChange(page) {
        console.log(" The current page is ：" + page)
        this.formInline.page = page;
        this.search();
      },
      //  Cancel pop-up 
      closeDialog() {
 
      },
      handleEdit() {
        //  pop-up 
        this.editFormVisible = true;
      },
      //  Verification method 
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //  Inquire about 
      doSearch(param) {
        //  Get the data 
        let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
        //  The arrow function solves this Pointer pollution problem 
        this.axios.post(url, param).then((resp) => {
          console.log(resp);
          this.listData = resp.data.result;
          this.formInline.total = resp.data.pageBean.total;
        }).catch(function(error) {
          console.log(error);
        });
        this.$root.Bus.$on("collapsed-aside", (v) => {
          this.collapsed = v;
        });
      },
      search() {
        this.doSearch(this.formInline);
      }
    },
    //  Set the value :
    created() {
      this.doSearch({});
    }
  }
</script>
 
 
<style>
</style>

②、 Effect display ：

 

 

 

  Two 、 Methods of addition, deletion and modification
Add, delete and modify buttons ：

 <el-table-column align="center" label=" operation " min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"> edit </el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)"> Delete </el-button>
        </template>
</el-table-column>

1、 edit

<script>
  export default {
    name: 'Articles',
    data() {
      return {
          editForm: {
          title:'',
          body:'',
          id:0
        }
        }
    },
 methods: {
        //  Clear the data in the add box , Make the data not echoed when adding 
      clearData(){
         this.editFormVisible = false;
        this.title='';
        this.editForm.id=0;
        this.editForm.title='';
        this.editForm.body='';
      },
      //  Cancel pop-up 
      closeDialog() {
        this.clearData();
      },
      handleEdit(index,row) {
        this.clearData();
        //  pop-up 
        this.editFormVisible = true;
        //  Echo when modifying 
        if(row){
          this.title=' Edit window ';
          this.editForm.id=row.id;
          this.editForm.title=row.title;
          this.editForm.body=row.body;
        }else{
          this.title=' New window ';
        }
        
      }
}

Front and back interaction ：

submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let url;
            if(this.editForm.id==0){
              url=this.axios.urls.SYSTEM_ARTICLE_ADD;
            }else{
              url=this.axios.urls.SYSTEM_ARTICLE_EDIT;
            }
            this.axios.post(url, this.editForm).then((resp)=> {
                                console.log(resp);
                      // Inquire about 
                      this.clearData();
                      this.search();
                            }).catch(function(error) {
                                console.log(error);
                            });
 
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }

Editing interface ：

 

  Add interface ：

 

 

 

2、 Delete
   // Delete
   

   deleteUser(index, row) {
        this.editForm.id=row.id;
        let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
        this.axios.post(url, this.editForm).then((resp) => {
          console.log(resp);
          // Inquire about 
          this.clearData();
          this.search();
        }).catch(function(error) {
          console.log(error);
        });
      }

 

 

 3、 Content display
 

<template>
  <div>
    <!--  This is the article list component  -->
    <!--  Search filter  -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label=" Search for ：">
        <el-input size="small" v-model="formInline.title" placeholder=" Article title "></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search"> Search for </el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()"> add to </el-button>
      </el-form-item>
    </el-form>
    <!--  list  -->
    <el-table size="small" :data="listData" highlight-current-row border element-loading-text=" Desperately loading "
      style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="id" label=" article ID" width="300">
      </el-table-column>
      <el-table-column sortable prop="title" label=" Article title " width="300">
      </el-table-column>
      <el-table-column sortable prop="body" label=" Article content " width="300">
      </el-table-column>
      <el-table-column align="center" label=" operation " min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"> edit </el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)"> Delete </el-button>
        </template>
      </el-table-column>
    </el-table>
 
    <!--  Pagination bar  -->
    <el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="100"
      layout="total, sizes, prev, pager, next, jumper" :total="formInline.total">
    </el-pagination>
 
    <!--  Editing interface  -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label=" Article title " prop="title">
          <el-input size="small" v-model="editForm.title" auto-complete="off" placeholder=" Please enter the title of the article "></el-input>
        </el-form-item>
        <el-form-item label=" Article content " prop="body">
          <el-input size="small" v-model="editForm.body" auto-complete="off" placeholder=" Please enter the content of the article "></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog"> Cancel </el-button>
        <el-button size="small" type="primary" class="title" @click="submitForm('editForm')"> preservation </el-button>
      </div>
    </el-dialog>
  </div>
</template>
 
 
<script>
  export default {
    name: 'Articles',
    data() {
      return {
        listData: [],
 
        title: '',
        editFormVisible: false,
 
        formInline: {
          page: 1,
          rows: 10,
          total: 0,
          title: ''
        },
        editForm: {
          title: '',
          body: '',
          id: 0
        },
        //  Pass in the agreed validation rules 
        rules: {
          title: [{
              required: true,
              message: ' Please enter the title of the article ',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: ' The length is in  3  To  5  Characters ',
              trigger: 'blur'
            }
          ],
          body: [{
            required: true,
            message: ' Please enter the content of the article ',
            trigger: 'blue'
          }]
        }
      }
    },
    methods: {
      handleSizeChange(rows) {
        console.log(" The amount of data queried on the current page ：" + rows)
        this.formInline.page = 1;
        this.formInline.rows = rows;
        this.search();
      },
      handleCurrentChange(page) {
        console.log(" The current page is ：" + page)
        this.formInline.page = page;
        this.search();
      },
      //  Clear the data in the add box , Make the data not echoed when adding 
      clearData() {
        this.editFormVisible = false;
        this.title = '';
        this.editForm.id = 0;
        this.editForm.title = '';
        this.editForm.body = '';
      },
      //  Cancel pop-up 
      closeDialog() {
        this.clearData();
      },
      handleEdit(index, row) {
        this.clearData();
        //  pop-up 
        this.editFormVisible = true;
        //  Echo when modifying 
        if (row) {
          this.title = ' Edit window ';
          this.editForm.id = row.id;
          this.editForm.title = row.title;
          this.editForm.body = row.body;
        } else {
          this.title = ' New window ';
        }
 
      },
      //  Delete 
      deleteUser(index, row) {
        this.editForm.id=row.id;
        let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
        this.axios.post(url, this.editForm).then((resp) => {
          console.log(resp);
          // Inquire about 
          this.clearData();
          this.search();
        }).catch(function(error) {
          console.log(error);
        });
      },
      //  Verification method 
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let url;
            if (this.editForm.id == 0) {
              url = this.axios.urls.SYSTEM_ARTICLE_ADD;
            } else {
              url = this.axios.urls.SYSTEM_ARTICLE_EDIT;
            }
            this.axios.post(url, this.editForm).then((resp) => {
              console.log(resp);
              // Inquire about 
              this.clearData();
              this.search();
            }).catch(function(error) {
              console.log(error);
            });
 
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //  Inquire about 
      doSearch(param) {
        //  Get the data 
        let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
        //  The arrow function solves this Pointer pollution problem 
        this.axios.post(url, param).then((resp) => {
          console.log(resp);
          this.listData = resp.data.result;
          this.formInline.total = resp.data.pageBean.total;
        }).catch(function(error) {
          console.log(error);
        });
        this.$root.Bus.$on("collapsed-aside", (v) => {
          this.collapsed = v;
        });
      },
      search() {
        this.doSearch(this.formInline);
      }
    },
    //  Set the value :
    created() {
      this.doSearch({});
    }
  }
</script>
 
 
<style>
</style>