Element创建xml如何防止中文乱码

转载

mob6454cc77db30 2024-09-11 07:08:57

1：首先通过cnpm安装element
cnpm i element-ui -S
2:在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

3：表单的数据绑定，通过v-model

<!-- 登录表单区域  -->
      <el-form label-width="0px" class="login_from" :model="login_from"  >
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input prefix-icon="el-icon-s-custom" v-model="login_from.username"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-unlock" v-model="login_from.password" type="password"></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary">登录</el-button>
          <el-button type="info" @click="resetloginFrom">重置</el-button>
        </el-form-item>
      </el-form>

export default {
    data() {
      return {
        login_from: {
          username: '张三',
          password: '123456'
        }
      
        }

      }
    }

4:表单验证
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

<!-- 登录表单区域  -->
      <el-form label-width="0px" class="login_from" :model="login_from" :rules="loginfromRules" >
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input prefix-icon="el-icon-s-custom" v-model="login_from.username"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-unlock" v-model="login_from.password" type="password"></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary">登录</el-button>
          <el-button type="info" @click="resetloginFrom">重置</el-button>
        </el-form-item>
      </el-form>

export default {
    data() {
      return {
        login_from: {
          username: '张三',
          password: '123456'
        },
        //表单验证规则
        loginfromRules: {
          username: [{
              required: true,
              message: '请输入用户名',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 10,
              message: '长度在 3 到 10 个字符',
              trigger: 'blur'
            }
          ],
          password: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 6,
              message: '长度在 3 到 6 个字符',
              trigger: 'blur'
            }
          ]
        }

      }
    }
    }

5：表单重置
resetFields()是对整个表单进行重置，将所有字段值重置为初始值并移除校验结果

Element创建xml如何防止中文乱码_用户名

<!-- 登录表单区域  -->
      <el-form label-width="0px" class="login_from" :model="login_from" :rules="loginfromRules" ref="loginFromRef" >
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input prefix-icon="el-icon-s-custom" v-model="login_from.username"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-unlock" v-model="login_from.password" type="password"></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary">登录</el-button>
          <el-button type="info" @click="resetloginFrom">重置</el-button>
        </el-form-item>
      </el-form>

<script>
  export default {
    data() {
      return {
        login_from: {
          username: '张三',
          password: '123456'
        },
        //表单验证规则
        loginfromRules: {
          username: [{
              required: true,
              message: '请输入用户名',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 10,
              message: '长度在 3 到 10 个字符',
              trigger: 'blur'
            }
          ],
          password: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 6,
              message: '长度在 3 到 6 个字符',
              trigger: 'blur'
            }
          ]
        }

      }
    },
    methods:{

      resetloginFrom()
      {
        // console.log(this)
        //获取表单的引用对象
        this.$refs.loginFromRef.resetFields();
      }
    }

  }
</script>

6：在表单提交之后对整个表单进行验证

Element创建xml如何防止中文乱码_用户名_02

首先：在from表单中写一个ref属性；

然后通过this…$refs.ref的属性值.vailidate函数进行验证

<!-- 登录表单区域  -->
      <el-form label-width="0px" class="login_from" :model="login_from" :rules="loginfromRules" ref="loginFromRef" >
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input prefix-icon="el-icon-s-custom" v-model="login_from.username"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-unlock" v-model="login_from.password" type="password"></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetloginFrom">重置</el-button>
        </el-form-item>
      </el-form>

<script>
  export default {
    data() {
      return {
        login_from: {
          username: '张三',
          password: '123456'
        },
        //表单验证规则
        loginfromRules: {
          username: [{
              required: true,
              message: '请输入用户名',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 10,
              message: '长度在 3 到 10 个字符',
              trigger: 'blur'
            }
          ],
          password: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 6,
              message: '长度在 3 到 6 个字符',
              trigger: 'blur'
            }
          ]
        }

      }
    },
    methods:{

      resetloginFrom()
      {
        console.log(this)
        //获取表单的引用对象
        this.$refs.loginFromRef.resetFields();
      },
      login()
      {
        this.$refs.loginFromRef.validate(valid=>{
        //验证成功输入true，否则fales
          console.log(valid);
          });
      }
    }

  }
</script>

7：发送异步请求
在 main.js 中写入以下内容：

//引入axios
import axios from 'axios'
Vue.prototype.$http=axios
// 配置请求的根路径
// axios.defaults.baseURL=''

在vue组件中写入：

this.$refs.loginFromRef.validate(valid=>{
          if(!valid)
          return;
          // 给后台发送请求
          // const result=this.$http.post('login',this.login_from);
          });

如果result返回的结果是 promise类型
我们可以通过这样写

this.$refs.loginFromRef.validate(async valid=>{
          if(!valid)
          return;
          // 给后台发送请求
          // const result=await this.$http.post('login',this.login_from);
          consle.log(result)
          });

此时打印出来的是一个响应对象

Element创建xml如何防止中文乱码_ico_03

如果只需要data中的数据

this.$refs.loginFromRef.validate(async valid=>{
          if(!valid)
          return;
          // 给后台发送请求
          // const {data:res}=await this.$http.post('login',this.login_from);
          consle.log(res)
          // if(res.meta.status!==200)
          // {
          //   return console.log("登录失败");
          // }
          });

Element创建xml如何防止中文乱码_表单_04

8:弹框提示

当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置type字段可以定义不同的状态，默认为info。此时正文内容以message的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入type字段的情况下像open4那样直接调用。

<template>
  <el-button :plain="true" @click="open2">成功</el-button>
  <el-button :plain="true" @click="open3">警告</el-button>
  <el-button :plain="true" @click="open1">消息</el-button>
  <el-button :plain="true" @click="open4">错误</el-button>
</template>

<script>
  export default {
    methods: {
      open1() {
        this.$message('这是一条消息提示');
      },
      open2() {
        this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success'
        });
      },

      open3() {
        this.$message({
          message: '警告哦，这是一条警告消息',
          type: 'warning'
        });
      },

      open4() {
        this.$message.error('错了哦，这是一条错误消息');
      }
    }
  }
</script>

9：将后端传过来的token放sessionStorage中

// 1:将登录成功之后的token,保存到客户端的sessionStorage中
   window.sessionStorage.setItem("token",res.data.token);
 // 2:项目中除了登录之外的其他的api接口,必须在登录之后才能访问


页面的跳转
 this.$router.push("/home");

10：路由导航守卫控制权限

解释：如果用户没有登录，访问到其他页面，需要导航到登录界面

Element创建xml如何防止中文乱码_用户名_05