20-Vue実戦プロジェクト:エレクトビジネス管理システム(Element-UI)-ユーザーリスト

󑧙⻠追加ユーザー-レンダリング追加ユーザーのダイアログ
1.必要に応じてダイアログコンポーネントを導入し、element.jsで

//     
import {
      Button, Form, FormItem, Input, Message, Container, Header, Aside, Main, Menu, Submenu, MenuItem, Breadcrumb, BreadcrumbItem, Card, Row, Col, Table, TableColumn, Switch, Tooltip, Pagination, Dialog } from 'element-ui'
//     
Vue.use(Dialog)

2.Dialogダイアログ構造

// title  ，visible           
<el-dialog title="  " :visible.sync="addDialogVisible" width="30%" :before-close="handleClose">
  //      
  <span>      </span>
  //       
  <span slot="footer" class="dialog-footer">
    //     click  ，            
    <el-button @click="addDialogVisible = false">   </el-button>
    <el-button type="primary" @click="addDialogVisible = false">   </el-button>
  </span>
</el-dialog>

ユーザーを追加→ユーザーを追加するフォームをレンダリングする
1.Formコンポーネントはフォーム検証の機能を提供しています.rules属性を通じて約束された検証ルールに入るだけで、Form-Intemのprop属性を検証が必要なフィールド名に設定すればいいです.

//   model       addForm
 <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
   <el-form-item label="   " prop="username">
     <el-input v-model="addForm.username"></el-input>
   </el-form-item>
   <el-form-item label="  " prop="password">
     <el-input v-model="addForm.password"></el-input>
   </el-form-item>
   <el-form-item label="  " prop="email">
     <el-input v-model="addForm.email"></el-input>
   </el-form-item>
   <el-form-item label="   " prop="mobile">
     <el-input v-model="addForm.mobile"></el-input>
   </el-form-item>
</el-form>

      //          
      addForm: {
     
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      //            
      addFormRules: {
     
        username: [
          {
      required: true, message: '      ', trigger: 'blur' },
          {
      min: 3, max: 10, message: '    3   10    ', trigger: 'blur' }
        ],
        password: [
          {
      required: true, message: '     ', trigger: 'blur' },
          {
      min: 6, max: 15, message: '    6   15    ', trigger: 'blur' }
        ],
        email: [
          {
      required: true, message: '     ', trigger: 'blur' }
        ],
        mobile: [
          {
      required: true, message: '      ', trigger: 'blur' }
        ]
      }

ユーザーを追加します.メールボックスと携帯電話番号のチェック規則
1.checkEmailなどの変数を設定して、メールボックスの入力の合法性を確認します.ruleは検証規則です.valueは検証された値です.cbはコールバック関数です.正規表現でregEmail.testを検証すると、コールバック関数を返します.そうでないとエラーメッセージを返します.

    //        
    var checkEmail = (rule, value, cb) => {
     
      //           
      const regEmail = /^\w+@\w+(\.\w+)+$/
      if (regEmail.test(value)) {
     
        return cb()
      }
      //         
      cb(new Error('        '))
    }
    //         
    var checkMobile = (rule, value, cb) => {
     
      const regMobile = /^1[34578]\d{9}$/
      if (regMobile.test(value)) {
     
        return cb()
      }
      //         
      cb(new Error('          '))
    }

2.validator属性によって検証ルールを使用する.

        email: [
          {
      required: true, message: '     ', trigger: 'blur' },
          {
      validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          {
      required: true, message: '      ', trigger: 'blur' },
          {
      validator: checkMobile, trigger: 'blur' }
        ]

ユーザーを追加します.フォームを追加するリセット操作を実現します.
1.まずダイアログにcloseイベントを追加します.

<el-dialog title="    " :visible.sync="addDialogVisible" width="30%" 
:before-close="handleClose" @close="addDialogClosed">

2.盗聴停止イベントを追加し、refでreetを呼び出します.

//             
    addDialogClosed () {
     
      this.$refs.addFormRef.resetFields()
    }

ユーザーを追加します.ユーザを追加する前のフォームのプリチェックを実行します.
1.「確定」ボタンにclickイベントを追加する

<el-button type="primary" @click="addUser">   </el-button>

2.矢印関数により、validの値が正しいかどうかを確認し、正しくない場合は直接返します.さもなければ、ネットワーク要求を開始する.

 addUser () {
     
      this.$refs.addFormRef.validate(valid => {
     
        if (!valid) return
        //            
      })
    }

ユーザーを追加します.APIインターフェースを呼び出して、ユーザーを追加する操作を完了しました.
1.「確定」ボタンをクリックして、あらかじめチェックした後、HTTP要求thisを開始します.http.postが要求した後、promiseオブジェクトがあります.await、asyncを通じて最適化できます.そして{data:res}を通じて(通って)価値を分配します.

    addUser () {
     
      this.$refs.addFormRef.validate(async valid => {
     
        if (!valid) return false
        //            
        const {
      data: res } = await this.$http.post('users', this.addForm)

        if (res.meta.status !== 201) {
     
          this.$message.error('      ')
        }
        this.$message.success('      ')
        //           
        this.addDialogVisible = false
        //         
        this.getUserList()
      })
    }

ユーザーの変更→変更ダイアログの表示
1.「変更ボタン」にクリックイベントを追加します.

<!--      -->
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog()">
</el-button>

2.ユーザーダイアログを変更します.visible.syncの値制御により表示と非表示を行います.

          <!--          -->
          <el-dialog title="    " :visible.sync="editDialogVisible" width="50%">
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
              <el-form-item label="   " prop="username">
                <el-input v-model="addForm.username"></el-input>
              </el-form-item>
              <el-form-item label="  " prop="password">
                <el-input v-model="addForm.password"></el-input>
              </el-form-item>
              <el-form-item label="  " prop="email">
                <el-input v-model="addForm.email"></el-input>
              </el-form-item>
              <el-form-item label="   " prop="mobile">
                <el-input v-model="addForm.mobile"></el-input>
              </el-form-item>
            </el-form>
            <!--       -->
            <span slot="footer" class="dialog-footer">
              <el-button @click="editDialogVisible = false">   </el-button>
              <el-button type="primary" @click="editDialogVisible = false">   </el-button>
            </span>
          </el-dialog>

3.dataに登録し、デフォルトはfalseです.

      //              
      editDialogVisible: false

4.クリックイベントが発生したら、エディットDialogVisibleをtrueに変更します.

   //           
    showEditDialog () {
     
      this.editDialogVisible = true
    }

ここに小さなミスがありました.show EditDialogをmethodsに書いていません.Type Error:「_vm.showEditDialog is not a function」と間違えました.
ユーザーを変更します.Idをクリックして対応するユーザ情報を検索します.
1.変更ユーザダイアログを開き、ユーザIDによって、ユーザの古いデータを照会し、古いデータをダイアログに塗りつぶします.モダリティ(scope.row.id)の形でユーザーIDを取得する.

//     
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>

2.IDを取得したら、HTTP要求を開始する.

    //           
    async showEditDialog (id) {
     
      // console.log(id)
      const {
      data: res } = await this.$http.put('users/' + id)

      if (res.meta.status !== 200) {
     
        return this.$message.error('      ')
      }
      this.editForm = res.data
      this.editDialogVisible = true
    }

3.dataで空のオブジェクトを定義し、対応するユーザ情報を保存する

      //           
      editForm: {
     }

ユーザーを変更します.変更したユーザーのフォームをレンダリングします.
1.ユーザーダイアログの変更

<!--          -->
          <el-dialog title="    " :visible.sync="editDialogVisible" width="50%">
            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" 
            label-width="70px">
              <el-form-item label="   ">
                <el-input v-model="editForm.username" disabled></el-input>
              </el-form-item>
              <el-form-item label="  " prop="email">
                <el-input v-model="editForm.email"></el-input>
              </el-form-item>
              <el-form-item label="   " prop="mobile">
                <el-input v-model="editForm.mobile"></el-input>
              </el-form-item>
            </el-form>
            <!--       -->
            <span slot="footer" class="dialog-footer">
              <el-button @click="editDialogVisible = false">   </el-button>
              <el-button type="primary" @click="editDialogVisible = false">   </el-button>
            </span>
          </el-dialog>

2.検証ルールを追加

     editFormRules: {
     
        email: [
          {
      required: true, message: '     ', trigger: 'blur' },
          {
      validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          {
      required: true, message: '      ', trigger: 'blur' },
          {
      validator: checkMobile, trigger: 'blur' }
        ]
      }

ユーザーの変更→ユーザーフォームの変更を行うリセット操作
1.まずユーザーダイアログの結合を変更するcloseイベント

<el-dialog title="    " :visible.sync="editDialogVisible" 
width="50%" @close="editDialogClosed">

2.methodsで方法を定義し、フォームの参照edtFormRefを呼び出して、reetFields関数を呼び出してリセットします.

    //               
    editDialogClosed () {
     
      this.$refs.editFormRef.resetFields()
    }

ユーザーを変更します.変更する前のフォームの事前認証を完了しました.
1.ユーザーが「決定」ボタンをクリックした後、まずフォームデータを事前検証し、検証することによって本当のデータ要求を開始する.「確定」ボタンにclickイベントをバインドする

<el-button type="primary" @click="editUserInfo">   </el-button>

2.フォームの参照を参照して、validate関数を呼び出して検証し、検証結果はvalidで取得する.

  editUserInfo () {
     
      this.$refs.editFormRef.validate(valid => {
     
        if (!valid) return 
        //            
      })
    }

ユーザーを変更します.フォームを提出して、ユーザー情報の変更を完了します.
1.フォームによる事前認証後、真のネットワーク要求APIドキュメントが開始される.

### 1.3.5.       

-     ：users/:id
-     ：put
-     

|     |      |                           |
| ------ | -------- | --------------------------- |
| id     |    id  |      `   url  :id` |
| email  |        |                         |
| mobile |       |                         |

-     

|      |      |    |
| ------- | -------- | ---- |
| id      |    ID  |      |
| role_id |    ID  |      |
| mobile  |       |      |
| email   |        |      |

-     

```json
/* 200    ，500     */
{
     
    "data": {
     
        "id": 503,
        "username": "admin3",
        "role_id": 0,
        "mobile": "111",
        "email": "[email protected]"
    },
    "meta": {
     
        "msg": "    ",
        "status": 200
    }
}

2.put依頼の開始

  editUserInfo () {
     
      this.$refs.editFormRef.validate(async valid => {
     
        if (!valid) return false
        //            
        //           ，       promise，     promise   ，   await ；
        //   valid       aysnc;  await           ，     data  ，    res
        const {
      data: res } = await this.$http.put('users/' + this.editForm.id, {
     
          email: this.editForm.email,
          mobile: this.editForm.mobile
        })
        
        //     
        if (res.meta.status !== 200) {
     
          return this.$message.error('      ')
        }

        //      
        this.editDialogVisible = false
        //       
        this.getUserList()
        //       
        this.$message.success('        ！')
      })
    }

ユーザーを削除します.データの削除を確認しますか?
1.コンポーネントMessageBoxを用いてメッセージ提示を行い、まず導入し、その後、ローカル登録後のコンポーネントはすべて$confirmでメッセージ提示ボックスをイジェクトすることができる.

//       Vue.use
Vue.prototype.$confirm = MessageBox.confirm

2.「削除」ボタンにclickイベントをバインドし、Idによって対応するユーザを削除し、scope.row.idで対応するユーザIdを取得する.

<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>

3.まずユーザ選択を取得する(削除/キャンセル)

    //     ID ，    
    async removeUserById (id) {
     
      //             ，   confirmResult           
      const confirmResult = await this.$confirm('           ,     ?', '  ', {
     
        confirmButtonText: '  ',
        cancelButtonText: '  ',
        type: 'warning'
      }).catch(err => {
     
        return err
      })
      //         ，         confirm
      //          ，         cancel
      //   http  ，   delete   
      const {
      data: res } = await this.$http.delete('users/' + id)
      if (res.meta.status !== 200) {
     
        return this.$message.error('      ！')
      }
      //            
      this.$message.success('      ！')
      this.getUserList()
    }