fastapi+vue前后端分离之前端逻辑实现03

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

大家好~我是小方，欢迎大家关注笋货测试笔记体完记得俾个like呀

回顾

上一期我们介绍了Vue如何使用element-ui组件，美化前端页面，这一期我们继续完善前端页面和前端逻辑的实现！！！

前端页面继续完善

上一期我们只是复制了官网的组件代码，并没有删除多余的代码，下面我们继续吧，因为导出接口只需要4个参数，所以只保留4个表单就可以了。 页面显示效果👇🏻

emmmm，有点丑，我们继续优化一下吧~将cookies下面的3个表单优化成组装成行内表单，引入样式，设置输入框的长度，输入框/选择器有清空按钮，按钮加上图标，表单验证···

优化后显示效果如下：

前端事件实现

这里引用了一篇文章中某段话，原文地址：segmentfault.com/a/119000001…

事件并不是JavaScript的核心部分，他们是在浏览器的Web Api中定义的。下面列举的几种情况，都属于发生了事件。

• 用户在某个元素上点击鼠标或悬停光标。
• 提交表单。
• 播放、暂停、关闭视频。
• ···

看完上面科普文，应该大概都懂得什么是事件，我们分别给导出按钮和重置按钮添加@click方法，点击时触发对应的方法

最终显示效果：

完整前端代码：

<template>
  <div class="hello">
    <h2>{{ msg }}</h2>
    <el-form :inline=true ref="form" :model="form"  label-width="150px" class="demo-form-inline">
      <el-form-item label="Cookies数据：">
        <el-input
          class="inputCookies"
          v-model="form.cookies"
          clearable
          placeholder="Cookies数据为空时，默认使用配置账号"
          @clear="() => { form.cookies=null }"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-form :inline=true :rules="rules" ref="form" :model="form" label-width="100px" class="demo-form-inline">
      <el-form-item label="导出类型：" prop="type">
        <el-select v-model="form.type" clearable placeholder="请选择导出类型" class="selectType">
          <el-option
            v-for="item in options"
            :key="item.type"
            :label="item.label"
            :value="item.type"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目id：" prop="projectId">
        <el-input v-model="form.projectId"
                  clearable
                  placeholder="如：407"
                  class="inputProject"></el-input>
      </el-form-item>
      <el-form-item label="模块名：">
        <el-input v-model="form.moduleName"
                  clearable
                  placeholder="如：订单模块"
                  class="inputName"
                  @clear="() => { form.moduleName=null }"></el-input>
      </el-form-item>
    </el-form>
    <el-form>
    <el-form-item>
        <el-button type="primary" :disabled="false" icon="el-icon-download" @click="submitForm('form')">立即导出</el-button>
        <el-button type="primary" icon="el-icon-delete" @click="resetForm('form')">重 置</el-button>
    </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      'msg':'欢迎使用接口文档导出工具👏🏻👏🏻👏🏻',
      rules: {
        type: [
          {required: true, message: '请选择导出类型', trigger: 'change'}
        ],
        projectId: [
          {required: true, message: '请输入项目id', trigger: 'blur'}
        ],
      },
      form: {
        cookies: '',
        moduleName: '',
        type: '',
        projectId: ''
      },
      options: [{
        type: 1,
        label: 'Excel'
      }, {
        type: 2,
        label: 'yaml'
      }, {
        type: 3,
        label: 'jmx'
      }]
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({ type: 'success', message: '导出成功' })
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.form.moduleName = '';
      this.form.cookies = '';
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.inputName {
  width: 200px;
}
.inputProject {
  width: 100px;
}
.inputCookies {
  width: 400px;
}
.selectType {
  width: 150px;
}
</style>

总结

今天实现了前端逻辑，终于终于终于页面好看了一点点···全程都是看着element-ui官网的示例代码+百度实现摸着石头过河，不说了我要去学学html、js、css前端大哥教诲的一段话，分享一下给大家

下期我们来进行前后端联调，打包前端文件部署服务，我哋下次再见👋🏻👋🏻👋🏻「俾个like再走啦」