二.2vueadmin-template反向代理/路由配置,idc增查刪

一.反向代理：

(1)F:\devops\data\web\vueAdmin-template\config\index.js   ---讓別人也能訪問我的vue前端
host: '0.0.0.0',
(2)F:\devops\data\web\vueAdmin-template\config\index.js  ---前端配置跨域(上述的跨域是后端配置的)--反向代理配置proxyTable
那dev.env.js文件中的BASE_API: '"...."',默認可不用更改
    proxyTable: {
      '/api': {   //api是我自定的接口
        target: 'http://127.0.0.1:8000',
        pathRewrite: {
          '^/api': ''
        }
      }
    },

二.自定添加idc模塊

　　寫一個模塊需要做:寫api配置和后端連接，還要寫路由，寫組件...

1.寫路由src/router/index.js

  {
    path: '/idcs',    　　url路徑
    component: Layout,   模版組件
    children: [
      {
        path: '',     　　為空是只要能匹配上url路徑就能找到下面component中定義的組件
        name: 'Idcs',
        component: () => import('@/views/idcs/index'),  定義idcs組件
        meta: { title: 'Idcs', icon: 'tree' }
      }
    ]
  },

2.展示組件:新建views/idcs/index.vue

<template>
  <div class="idcs">
    IDCS
  </div>

</template>

<script>
  export default {
    name: 'idcs',
    data() {
      return {}
    },
    methods: {
    }
  }
</script>

<style lang='scss' scoped>
.idcs{
  position: relative;
  display: block;
}
</style>

重啟后如下效果有了：

 三.向后端請求數據並展示---idc增查刪

1.獲取后端數據:

(1)新建api/idcs.js  --定義接口

import axios from 'axios'

export function getIdcsList() {
  return axios.get('/api/idcs/')
}

export function createIdc(value) {
  return axios.post('/api/idcs/', value)
}

export function updateIdc(value) {
  return axios.put(`/api/idcs/${value.id}/`, value.params)
}

export function deleteIdc(id) {
  return axios.delete(`/api/idcs/${id}/`)
}

(2)views/idcs/index.vue  --使用接口

  .類名,樣式名,name,它們的名字建議保持一致.

<template>
  <div class="idc">
    {{ idcs }}
  </div>
</template>

<script>
  import { getIdcsList } from '@/api/idcs'

  export default {
    name: 'idc',
    data() {
      return {
        idcs: []
      }
    },
    methods: {
      fetchData() {
        getIdcsList().then(
          res => {
            this.idcs = res.data.results
          }
        )
      }
    },
    created() {
      this.fetchData()
    }
  }
</script>

<style lang='scss' scoped> .idc {
    padding: 10px;
  }
</style>

報錯如下：

createError.js:16 Uncaught (in promise) Error: Request failed with status code 404
    at createError (createError.js:16)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

 經排查，發現原因是我的接口url寫錯了:src/api/idcs.js文件中:

import axios from 'axios'

export function getIdcsList() {
  return axios.get('/api/idcs')     --->應該改為return axios.get('/api/idcs/')即末尾沒加反斜杠
}

 最后效果如下:已獲取到數據

 2.展示數據--idc查詢

(1)寫展示組件views/idc/list.vue:

通過https://element.eleme.cn/#/zh-CN/component/installation--找自定義表格代碼模版:

<template>
  <div class="idc-list">
    <el-table
      :data="value"
      style="width: 100%">
      <el-table-column
        label="ID"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="名稱"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="電話"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="郵箱"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.email }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="地址"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="簡稱"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.letter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)">編輯</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'idc-list',
    props: ['value'],
    methods: {
      handleEdit() {},
      handleDelete() {}
    }
  }
</script>

<style lang='scss'>
  .idc-list {}
</style>

(2)接口中引入展示組件,views/idcs/index.vue:

<template>
  <div class="idc">
    <idc-list :value="idcs"></idc-list>    　　　　　　　　<<<<<<引入
  </div>
</template>

<script>
  import { getIdcsList } from '@/api/idcs'
  import IdcList from './list' <<<<<<<<引入

  export default {
    name: 'idc',
 components: {　　　　　　　　　　　　　　　　　　　　　　　　<<<<<<引入組件 IdcList },
    data() {
      return {
        idcs: []
      }
    },
    methods: {
      fetchData() {
        getIdcsList().then(
          res => {
            this.idcs = res.data.results
          }
        )
      }
    },
    created() {
      this.fetchData()
    }
  }
</script>

<style lang='scss' scoped>
  .idc {
    padding: 10px;
  }
</style>

最終效果如下圖:

 3.添加新增接口

　　點新增按鈕時彈出窗口，這個彈窗需要一個狀態來控制它展示和消失，

參考https://element.eleme.cn/#/zh-CN/component/dialog中對話框模版，此彈窗中我還要有內容，這個內容就是我要填寫的一些表單。

1.1views/idcs/index.vue:

<template>
  <div class="idc">
    <el-button type="primary" @click="add" size="small">新增IDC</el-button>
    <idc-list :value="idcs"></idc-list>
    <el-dialog 　　　　　　　　　　<<<<<1.引入對話框模版 title="提示" :visible.sync="dialogVisible" width="50%">
      <span>這是一段信息</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">確 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getIdcsList } from '@/api/idcs'
  import IdcList from './list'

  export default {
    name: 'idc',
    components: {
      IdcList
    },
    data() {
      return {
        dialogVisible: false, <<<<<2.默認
        idcs: []
      }
    },
    methods: {
      fetchData() {
        getIdcsList().then(
          res => {
            this.idcs = res.data.results
          }
        )
      },
      add() {
        this.dialogVisible = true <<<3.新增時生效
      }
    },
    created() {
      this.fetchData()
    }
  }
</script>

<style lang='scss' scoped>
  .idc {
    padding: 10px;
  }
</style>

效果如下:

 

 那現在就需要對此彈窗進行填充我的from表單---建議單獨寫一form表單組件

2.1views/idcs/form.vue，這個表單它的定位就是我每次用它時，我給它一初始化數據，它有input輸入框，我去填完提交，我關閉時它把數據清空恢復。所以它需要一初始化數據的對象，用來做它的初始化數據。

參考https://element.eleme.cn/#/zh-CN/component/form自定義規則模版

<template>
  <div class="idc-form">
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
      <el-form-item label="名稱" prop="name">
        <el-input v-model="form.name" placeholder="請輸入名稱"></el-input>
      </el-form-item>
      <el-form-item label="電話" prop="phone">
        <el-input v-model="form.phone" placeholder="請輸入電話"></el-input>
      </el-form-item>
      <el-form-item label="郵箱" prop="email">
        <el-input v-model="form.email" placeholder="請輸入郵箱"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address" placeholder="請輸入地址"></el-input>
      </el-form-item>
      <el-form-item label="簡稱" prop="letter">
        <el-input v-model="form.letter" placeholder="請輸入簡稱"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="btn-wrapper">
          <el-button size="small" @click="cancel">取消</el-button>
          <el-button size="small" type="primary" @click="submitForm" :loading="isLoading">保存</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script> const initizeForm = { <<<<<<2.放它的初始化數據 name: '', phone: '', email: '', address: '', letter: '' }

  export default {
    name: 'idc-form',
    data() {
      return {
        form: { ...initizeForm } <<<<<1.初始化數據的對象,並引入上述的初始化數據
      }
    },
    methods: {
      submitForm() {},
      resetForm() {}
    }
  }
</script>

<style lang='scss' scoped>
  .idc-form {
    position: relative;
    display: block;
    .btn-wrapper{
      text-align: right;
    }
  }
</style>

 2.2index.vue中引入form

 效果如下圖:

 3.1form中要定義rules屬性,否則無法創建，要把字段的prop傳給它才能校驗此字段。並且你輸完數據后點保存前還要獲取它校驗的結果(是否符合)form.vue:

<template>
  <div class="idc-form">
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
      <el-form-item label="名稱" prop="name">
        <el-input v-model="form.name" placeholder="請輸入名稱"></el-input>
      </el-form-item>
      <el-form-item label="電話" prop="phone">
        <el-input v-model="form.phone" placeholder="請輸入電話"></el-input>
      </el-form-item>
      <el-form-item label="郵箱" prop="email">
        <el-input v-model="form.email" placeholder="請輸入郵箱"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address" placeholder="請輸入地址"></el-input>
      </el-form-item>
      <el-form-item label="簡稱" prop="letter">
        <el-input v-model="form.letter" placeholder="請輸入簡稱"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="btn-wrapper">
          <el-button size="small" @click="cancel">取消</el-button>
          <el-button size="small" type="primary" @click="submitForm" :loading="isLoading">保存</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  const initizeForm = {
    name: '',
    phone: '',
    email: '',
    address: '',
    letter: ''
  }

  export default {
    name: 'idc-form',
    props: ['isLoading'],
    data() {
      return {
        form: { ...initizeForm },
        rules: {
          name: [
            [
              { required: true, message: '請輸入名稱', trigger: 'blur' }
            ]
          ],
          phone: [
            [
              { required: true, message: '請輸入電話', trigger: 'blur' }
            ]
          ],
          email: [
            [
              { required: true, message: '請輸入郵箱', trigger: 'blur' }
            ]
          ],
          address: [
            [
              { required: true, message: '請輸入地址', trigger: 'blur' }
            ]
          ],
          letter: [
            [
              { required: true, message: '請輸入簡稱', trigger: 'blur' }
            ]
          ]

        }
      }
    },
    methods: {
      submitForm() {
        this.$refs.form.validate(valid => {
          if (!valid) {
            return
          }
          this.$emit('submit', this.form)
        })
      },
      cancel() {
        this.$emit('cancel')
      }
    }
  }
</script>

<style lang='scss' scoped>
  .idc-form {
    position: relative;
    display: block;
    .btn-wrapper{
      text-align: right;
    }
  }
</style>

3.2index.vue引入form

<template>
  <div class="idc">
    <el-button type="primary" @click="add" size="small">新增IDC</el-button>
    <idc-list :value="idcs"></idc-list>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%">
      <idc-form
        ref="idcForm"
        :is-loading="isLoadingCreateIdc"
        @submit="handleSubmit"
        @cancel="handleCancel">
      </idc-form>
    </el-dialog>
  </div>
</template>

<script>
  import { getIdcsList, createIdc } from '@/api/idcs'
  import IdcList from './list'
  import IdcForm from './form'

  export default {
    name: 'idc',
    components: {
      IdcList,
      IdcForm
    },
    data() {
      return {
        dialogVisible: false,
        idcs: [],
        isLoadingCreateIdc: false
      }
    },
    methods: {
      fetchData() {
        getIdcsList().then(
          res => {
            this.idcs = res.data.results
          }
        )
      },
      add() {
        this.dialogVisible = true
      },
      handleSubmit(value) {
        this.isLoadingCreateIdc = true
        createIdc(value).then(
          () => {
            this.fetchData()
            this.handleCancel()
            this.isLoadingCreateIdc = false
          },
          () => { this.isLoadingCreateIdc = false }
        )
      },
      handleCancel() {
        this.dialogVisible = false
        this.$refs.idcForm.$refs.form.resetFields()
      }
    },
    created() {
      this.fetchData()
    }
  }
</script>

<style lang='scss' scoped>
  .idc {
    padding: 10px;
  }
</style>

效果如下圖點擊保存提交數據后:頁面會多出此條記錄了

 

 4.添加idc刪除i接口

 參考https://element.eleme.cn/#/zh-CN/component/message-box代碼模版並給加加一彈窗組件，為的是讓用戶確認是否刪除。

(1)list.vue

<template>
  <div class="idc-list">
    <el-table
      :data="value"
      style="width: 100%">
      <el-table-column
        label="ID"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="名稱"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="電話"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="郵箱"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.email }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="地址"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="簡稱"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.letter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)">編輯</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'idc-list',
    props: ['value'],
    methods: {
      handleEdit() {
      },
      handleDelete(idc) {
        const id = idc.id
        const name = idc.name
        this.$confirm(`此操作將永久刪除該條IDC:${name} 是否繼續?`, '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$emit('delete', id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          })
        })
      }
    }
  }
</script>

<style lang='scss'>
  .idc-list {}
</style>

(2)form.vue:

<template>
  <div class="idc-form">
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
      <el-form-item label="名稱" prop="name">
        <el-input v-model="form.name" placeholder="請輸入名稱"></el-input>
      </el-form-item>
      <el-form-item label="電話" prop="phone">
        <el-input v-model="form.phone" placeholder="請輸入電話"></el-input>
      </el-form-item>
      <el-form-item label="郵箱" prop="email">
        <el-input v-model="form.email" placeholder="請輸入郵箱"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address" placeholder="請輸入地址"></el-input>
      </el-form-item>
      <el-form-item label="簡稱" prop="letter">
        <el-input v-model="form.letter" placeholder="請輸入簡稱"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="btn-wrapper">
          <el-button size="small" @click="cancel">取消</el-button>
          <el-button size="small" type="primary" @click="submitForm" :loading="isLoading">保存</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  const initizeForm = {
    name: '',
    phone: '',
    email: '',
    address: '',
    letter: ''
  }

  export default {
    name: 'idc-form',
    props: ['isLoading'],
    data() {
      return {
        form: { ...initizeForm },
        rules: {
          name: [
            [
              { required: true, message: '請輸入名稱', trigger: 'blur' }
            ]
          ],
          phone: [
            [
              { required: true, message: '請輸入電話', trigger: 'blur' }
            ]
          ],
          email: [
            [
              { required: true, message: '請輸入郵箱', trigger: 'blur' }
            ]
          ],
          address: [
            [
              { required: true, message: '請輸入地址', trigger: 'blur' }
            ]
          ],
          letter: [
            [
              { required: true, message: '請輸入簡稱', trigger: 'blur' }
            ]
          ]

        }
      }
    },
    methods: {
      submitForm() {
        this.$refs.form.validate(valid => {
          if (!valid) {
            return
          }
          this.$emit('submit', this.form)
        })
      },
      cancel() {
        this.$emit('cancel')
      }
    }
  }
</script>

<style lang='scss' scoped>
  .idc-form {
    position: relative;
    display: block;
    .btn-wrapper{
      text-align: right;
    }
  }
</style>

這樣點擊刪除就實現刪除idc某條記錄的效果了。

 5.添加idc編輯接口--新增和編輯組件合並

　　編輯和新增操作很像，區別就是title提示不一樣而已，只是說編輯要給這彈窗中的幾個框一個初始值(每一行的值)，所以這里我可以把新增和編輯組件合並。

首先它需要一個title告訴我 彈窗展示的是新增還是編輯

(1)index.vue:

<template>
  <div class="idc">
    <el-button type="primary" @click="add" size="small">新增IDC</el-button>
    <idc-list :value="idcs" @edit="handleEdit" @delete="handleDelete"></idc-list>
    <el-dialog
      title="新增"
      :visible.sync="dialogVisibleForAdd"
      width="50%">
      <idc-form
        ref="idcForm"
        :is-loading="isLoadingCreateIdc"
        @submit="handleSubmitAdd"
        @cancel="handleCancelAdd">
      </idc-form>
    </el-dialog>
    <el-dialog
      title="編輯"
      :visible.sync="dialogVisibleForEdit"
      width="50%">
      <idc-form
        ref="idcForm"
        :is-loading="isLoadingEditIdc"
        :form="currentValue"
        @submit="handleSubmitEdit"
        @cancel="handleCancelEdit">
      </idc-form>
    </el-dialog>
  </div>
</template>

<script>
  import { getIdcsList, createIdc, deleteIdc, updateIdc } from '@/api/idcs'
  import IdcList from './list'
  import IdcForm from './form'

  export default {
    name: 'idc',
    components: {
      IdcList,
      IdcForm
    },
    data() {
      return {
        dialogVisibleForAdd: false,
        dialogVisibleForEdit: false,
        idcs: [],
        isLoadingCreateIdc: false,
        isLoadingEditIdc: false,
        currentValue: {}
      }
    },
    methods: {
      fetchData() {
        getIdcsList().then(
          res => {
            this.idcs = res.data.results
          }
        )
      },
      add() {
        this.dialogVisibleForAdd = true
      },
      handleSubmitAdd(value) {
        this.isLoadingCreateIdc = true
        createIdc(value).then(
          () => {
            this.fetchData()
            this.handleCancelAdd()
            this.isLoadingCreateIdc = false
          },
          () => { this.isLoadingCreateIdc = false }
        )
      },
      handleSubmitEdit(value) {
        this.isLoadingEditIdc = true
        const { id, ...params } = value
        updateIdc({ id, params }).then(
          () => {
            this.fetchData()
            this.handleCancelEdit()
            this.isLoadingEditIdc = false
          },
          () => { this.isLoadingEditIdc = false }
        )
      },
      handleCancelAdd() {
        this.dialogVisibleForAdd = false
        this.$refs.idcForm.$refs.form.resetFields()
      },
      handleCancelEdit() {
        this.dialogVisibleForEdit = false
        this.$refs.idcForm.$refs.form.resetFields()
      },
      handleDelete(id) {
        deleteIdc(id).then(
          () => {
            this.fetchData()
          },
          err => {
            console.log(err.message)
          }
        )
      },
      handleEdit(value) {
        this.currentValue = { ...value }
        this.dialogVisibleForEdit = true
      }
    },
    created() {
      this.fetchData()
    }
  }
</script>

<style lang='scss' scoped>
  .idc {
    padding: 10px;
  }
</style>

(2)from.vue:

<template>
  <div class="idc-form">
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
      <el-form-item label="名稱" prop="name">
        <el-input v-model="form.name" placeholder="請輸入名稱"></el-input>
      </el-form-item>
      <el-form-item label="電話" prop="phone">
        <el-input v-model="form.phone" placeholder="請輸入電話"></el-input>
      </el-form-item>
      <el-form-item label="郵箱" prop="email">
        <el-input v-model="form.email" placeholder="請輸入郵箱"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address" placeholder="請輸入地址"></el-input>
      </el-form-item>
      <el-form-item label="簡稱" prop="letter">
        <el-input v-model="form.letter" placeholder="請輸入簡稱"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="btn-wrapper">
          <el-button size="small" @click="cancel">取消</el-button>
          <el-button size="small" type="primary" @click="submitForm" :loading="isLoading">保存</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'idc-form',
    props: {
      isLoading: {
        required: true,
        type: Boolean
      },
      form: {
        type: Object,
        default() {
          return {
            name: '',
            phone: '',
            email: '',
            address: '',
            letter: ''
          }
        }
      }
    },
    data() {
      return {
        rules: {
          name: [
            [
              { required: true, message: '請輸入名稱', trigger: 'blur' }
            ]
          ],
          phone: [
            [
              { required: true, message: '請輸入電話', trigger: 'blur' }
            ]
          ],
          email: [
            [
              { required: true, message: '請輸入郵箱', trigger: 'blur' }
            ]
          ],
          address: [
            [
              { required: true, message: '請輸入地址', trigger: 'blur' }
            ]
          ],
          letter: [
            [
              { required: true, message: '請輸入簡稱', trigger: 'blur' }
            ]
          ]

        }
      }
    },
    methods: {
      submitForm() {
        this.$refs.form.validate(valid => {
          if (!valid) {
            return
          }
          this.$emit('submit', this.form)
        })
      },
      cancel() {
        this.$emit('cancel')
      }
    }
  }
</script>

<style lang='scss' scoped>
  .idc-form {
    position: relative;
    display: block;
    .btn-wrapper{
      text-align: right;
    }
  }
</style>

這樣就實現idc的增刪改查了！