使用elementui构建form表单

• 导入element的布局容器组件

用于布局的容器组件，方便快速搭建页面的基本结构：

el-container：外层容器。当子元素中包含 el-header或 el-footer 时，全部子元素会垂直上下排列，否则会水平左右排列。

el-header：顶栏容器。

el-aside：侧边栏容器。

el-main：主要区域容器。

el-footer：底栏容器。

rouer是否开启路由 通过index跳转

<el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <div class="btn">
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button type="primary" @click="gotoregister('ruleForm')"
            >注册</el-button
          >
        </el-form-item>
      </div>
    </el-form>
   

复制代码

• 使用axios调用接口渲染数据

methods: {
    gotoregister() {
      this.$router.push("/Register");
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post("http", {
              username: this.ruleForm.username,
              password: this.ruleForm.password,
            })
            .then((res) => {
              // console.log(res.data);
              let { data,meta } = res.data;
              if (meta.status == 200) {
                this.$message.success(meta.msg);
                localStorage.username = data.username;
                localStorage.token = data.token;
                setTimeout(()=>{
                  this.$router.push({path:'/index'})
                },1000)
              } else {
                this.$message.warning(meta.msg);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message.error('您输入的有误');
        }
      });
    },