Hproxy项目前端

 hproxy项目前端使用vue-element-admin框架，页面为hook列表，和一个添加hook页面。

 

添加路由

编辑src/router/index.js文件，在constantRoutes列表追加如下路由内容

  {
    path: '/hproxy',
    component: Layout,
    redirect: '/hproxy/index',
    hidden: false,
    children: [
      {
        path: 'index',
        component: () =＞ import('@/views/hproxy/index'),
        name: 'hproxy',
        meta: { title: 'HProxy 设置', icon: 'list', noCache: true }
      }
    ]
  }

如上说明页面路径为/hproxy/index，

页面为views/hproxy文件夹下的index.vue

页面的title为Hproxy设置，菜单icon为list，

页面内容

创建一个路径为src/views/hproxy的目录，同时在该目录下创建一个名为index.vue的文件

 
<script>
import { submit, pullData } from '@/api/hproxy'
export default {
  name: 'HProxy',
  data() {
    return {
      title: '',
      drawer: false,
      tableData: [],
      form: {
        'name': '',
        'type': '',
        'source': '',
        'target': '',
        'content': ''
      },
      query: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    createHook() {
      this.title = '添加HOOK'
      this.drawer = true
      this.form = {}
    },
    editHook(row) {
      this.title = '编辑HOOK'
      this.drawer = true
      this.form = row
    },
    onSubmit() {
      submit(this.form).then((response) => {
        if (response.code === 0) {
          this.query.pageNum = 1
          this.fetchData()
          this.$message({
            showClose: true,
            message: '保存成功！',
            type: 'success'
          })
          this.drawer = false
        }
      })
    },
    fetchData() {
      pullData({
      ...this.query
      }).then((response) => {
        if (response.code === 0) {
          this.tableData = response.data.list
          this.page = response.data.page
        }
      })
    }
  }
}
script>

分析：

• 修改VUE项目下文件时，正在运行的项目会自动重新编译。
• 添加HOOK按钮绑定了createHook函数，把title设置为添加HOOK，drawer设置为true，即显示右侧面板,form设置为空
• 编辑按钮绑定了 @click="editHook(scope.row) title设置为编辑HOOK，drawer设置为true，form设置为row
• 保存按钮@click="onSubmit" drawer设置为false，拉取数据，将messge设置为保存成功。
• 取消按钮 @click="drawer = false"
• el-drawer是一个抽屉 drawer为true时显示,drawer为false时隐藏
• el-pagination是一个翻页组件 @current-change="handleCurrentChange"
• fetchData函数拉取响应的数据

访问API文件

在index.vue里引用了api下的hproxy.js文件中的两个函数

import request from '@/utils/request'
 
export function submit(data) {
  return request({
    url: '/api/hproxy/_plugs_settings_',
    method: 'post',
    headers: {
      'Content-Type': 'application/json'
    },
    data
  })
}
 
export function pullData(params) {
  return request({
    url: '/api/hproxy/_plugs_settings_',
    method: 'get',
    params
  })
}

• api目录下的http.js为api访问函数，submit函数以post方式访问后端接口/api/hproxy/_plugs_settings_
• pullData以get方式后端访问接口/api/hproxy/_plugs_settings_

总结

1、在src/router/index.js添加路由
2、路由中引用的component就是一个vue文件，在src下新建vue文件，添加页面元素。页面元素是基于element-ui的，用v-model和数据做绑定。
处理函数(script部分) import { submit, pullData }引用的是api下的js文件。
3、在api下新建hproxy.js文件，用来请求后端接口。