开发中遇到的vue知识收集（一）

常见的vue知识

一、 “=” 、 “= =” 、 “ = = = ” “！==”的区别

在JavaScript中， “=”代表赋值操作； “= =”先转换类型再比较， “= = =”先判断类型，如果不是同一类型直接为false。其中“= =”和“= = =”都可以用在布尔表达式中，但两者有很大的区别，下面对三者进行具体介绍：

• “=”代表赋值，即将右边的值赋值到左边。

例子：表达式① x=“55”，表示将字符串类型的55赋值给变量x,即变量x也为字符串类型。

表达式② x=55，表示将数值类型的55赋值给变量x,即：变量x也为数值类型

• “==”表示先转换类型（自动）再比较。如果两个值相等，肯定相等，如果两个值不等，也可能是相等的，按一下情况进行判断：

  • 如果一个是null、一个是undefined，那么相等。

  • 如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。

  • 如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。

  • 如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。

注意：对象转换成基础类型，利用它的toString或者valueOf方法。js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。非js核心的对象。

例子：表达式"1" == true；返回结果为true。

解析：true转成1，再把“1”转成1，进行比较。（“==”会在两个值数据类型不同时，自动转化为同类型进行值比较）

• “= = =”先判断数据类型，（类型不同时，不会自动转换类型）如果不是同一类型直接为false。如果类型相同，再判断其值，如果值也相同则返回true，否则返回false。 = = =表示的是绝对的相等。

  • 如果被比较的两个值数据类型不相等则不等。
  • 如果被比较的两个值都是数值，并且是同一个值，判定相等。
  • 如果被比较的两个值都是字符串，每个位置的字符都一样，那么相等；否则不相等。
  • 如果被比较的两个值都是布尔类型的true，或者都是false，那么相等。
  • 如果被比较的两个值都引用同一个对象或函数，那么相等；否则不相等。
  • 如果两个值都是null，或者都是undefined，那么相等。

例子：假设给定 x=5；

表达式① x===5 返回结果为 true；

表达式② x===“5” 返回结果为 false。

解析：针对给定表达式x=5知，将数值5赋值给变量x,即：变量x为数值类型变量。因此，对于表达式①，等号两端数据类型均为数值类型，类型相同，再比较数值，均为5，因此值与类型均相同，所以返回结果为true。而对于表达式②来说，等号坐标变量x数据类型为数值型，等号右端变量数据类型为字符串类型，二者数据类型不相同，由于“===”表达式不能实现自动转换数据类型，因此返回数据结果为false。

• ！=是“==”的逆反，在不等式两端数据类型不同时，自动转化成相同的数据类型，在进行值比较，如果值相同则返回结果为false，否则为true。

例子：表达式"1" != true；返回结果为false。

解析：对于表达式“！=”，两百年数据类型不相同，会自动将布尔型true转成数值型1，再把字符型“1”转成数值型1，在进行比较，值相同，因此表达式不成立，即返回结果为false。

• ！= = 是“ = = =”的逆反，当不等式两端的数据类型不相同时，不会自动将两端的数据类型转换成同一数据类型，而是返回结果直接为true，如果数据类型相同，继续比较其值，如果值也相同，则返回false，否则返回true。

例子：假设给定 x=5；

表达式① x!= =5 返回结果为false；

表达式② x!= =“5” 返回结果为 true;

解析：针对给定表达式x=5知，将数值5赋值给变量x,即：变量x为数值类型变量。因此，对于表达式①，等号两端数据类型均为数值类型，类型相同，再比较数值，均为5，因此值与类型均相同，所以返回结果为false。而对于表达式②来说，等号坐标变量x数据类型为数值型，等号右端变量数据类型为字符串类型，二者数据类型不相同，由于“!==”表达式不能实现自动转换数据类型，因此返回数据结果为true。

二、vue层级问题

后端接口访问不到,前端发送的数据

改正：

三、将添加表单与删除表单的功能单独抽取出来做一个组件

需求分析:在做用户的添加与删除,考虑到代码的冗余性,想将其表单抽取出来放入一个组件进行复用

具体代码:

• 创建表单AddUserFrom组件:

<template>
  <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      @close="resetForm"
  >
    <el-form ref="form" :model="formData" :rules="formRules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="nickname">
        <el-input v-model="formData.nickname"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="formData.gender">
          <el-radio label="1">男</el-radio>
          <el-radio label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="formData.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select v-model="formData.state" clearable @change="handleStateChange" >
          <el-option label="有效" value="valid"></el-option>
          <el-option label="无效" value="invalid"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import user from "../../api/user";
export default {
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '',
      formData: { // 只定义一次 formData 对象
        id:'',
        username: '',
        nickname: '',
        gender: '',
        phone: '',
        email: '',
        state: ''
      },
      formRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        nickname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] }
        ],
        state: [{ required: true, message: '请选择状态', trigger: 'change' }]
      }
    };
  },
  methods: {
    handleStateChange() {
      if (value !== this.formData.state) {
        this.formData.state = '';
      }
    },
    openDialog(title, data) {

      console.log("数据"+data.state);
      this.dialogVisible = true;
      this.dialogTitle = title;
      this.formData = { ...data ,state: data.state =='1' ? 'valid': 'invalid'};

    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          var genderValue = this.formData.gender ==='1' ? '1' : '0';
          var statusValues=  this.formData.state === "valid" ? '1' : '0';
          // 提交表单逻辑
          this.formData.gender=genderValue;
          this.formData.state=statusValues;
          console.log(this.formData);
          if (this.formData.id===''){
            user.addUser(this.formData).then(resp=>{
              var respData = resp.data;
              if (respData.flag){
                this.$message.success(respData.message);
              }else{
                this.$message.error(respData.message);
              }
            })
          }else {
            user.update(this.formData.id,this.formData).then(resp=>{
              var respData = resp.data;
              if (respData.flag){
                this.$message.success(respData.message);
                this.fetchData()
              }else {
                this.$message.error(respData.message);
              }           })
          }

          this.dialogVisible = false;
          this.resetForm();
          this.$router.push("/managementUser");
        }
      });
    }
  }
};
</script>

• 用户页面调用"AddUserFrom"表单组件:

<!-- 新增按钮-->
          <el-button type="primary" icon="el-icon-edit" @click="openAddDialog">新增</el-button>

 <template slot-scope="scope">
            <!-- scope.row 获取的是后台返回的每一行的json数据 -->
            <el-button  size="mini" @click="update(scope.row.id)">修改</el-button>
            <el-button size="mini" type="danger" @click="showDeleteConfirmation(scope.row.id)">删除</el-button>
<!--            <el-button size="mini" type="danger"  > {{ getStatusText(scope.row.state) }}</el-button>-->
            <el-button size="mini" type="danger"  @click="showRoleDialog(scope.row.id)">设置角色</el-button>
            <el-dialog :visible.sync="roleDialogVisible"  title="设置角色">
              <el-radio-group v-model="selectedRole">
                <el-radio v-for="role in roles" :key="role.id" :label="role.flag">{{ role.name }}</el-radio>
              </el-radio-group>
              <span slot="footer" class="dialog-footer">
                <el-button @click="closeRoleDialog">取消</el-button>
                <el-button type="primary" @click="saveRole( )">保存</el-button>
              </span>
            </el-dialog>
          </template>


<script>
import user from "@/api/user";
    //引入"AddUserFrom"表单组件
import addUserFrom from "@/views/AddUserFrom/index";
import role from "@/api/role";
import users from "../../api/user"
export default {
  components:{
    'add-user-from': addUserFrom,
  },
  name:'HomeView',
    methods:{
        //修改
         update(row){
     user.getUser(row).then(resp=>{

      console.log("名字"+resp.data.data.username)
       this.openEditDialog(resp.data.data);
       this.fetchData();
     })
        //添加
           openAddDialog() {
      const userData = {
        id:'',
        username: '', // 添加用户时的默认值
        nickname: '',
        gender: '',
        phone: '',
        email: '',
        state: '',
      };
      this.$refs.adduserfrom.openDialog('添加', userData);
    },
//修改
    openEditDialog(data) {
      const userData = {
        id:data.id|| '',
        username: data.username || '', // 编辑用户时的默认值
        nickname: data.nickname || '',
        gender: data.gender || '',
        phone: data.phone || '',
        email: data.email || '',
        state: data.state || ''
      };
      console.log("数据"+userData.username);
      this.$refs.adduserfrom.openDialog('编辑', userData);
    },
    }
</script>

四、Vue Router的全局前置守卫-------验证token路由守卫

访问其他页面如果没有token则跳回登录页面

router.js

let clearTimer;
router.beforeEach((to, from, next) => {
  const user = JSON.parse(localStorage.getItem("user")); // 从 localStorage 中获取 user 对象
  const token = user ? user.token : null; // 从 user 对象中获取 token

  if (to.name !== "Login" && !token) {
    next({ name: "Login" });
  } else {
    clearTimeout(clearTimer);
    if (token){
      clearTimer=setTimeout(()=>{
        localStorage.removeItem("user");
        next({name:"Login"});
      },60*60*1000);
    }

    next();
  }

• 首先，通过localStorage.getItem("user")从本地存储中获取名为"user"的值，并将其解析为一个JavaScript对象，赋值给变量user。注意，本地存储（localStorage）是浏览器提供的一种存储数据的方式。

接下来，从user对象中获取token属性的值，如果存在则赋值给变量token，否则为null。

• 然后，通过条件判断，检查当前要导航的页面（to.name）是否为"Login"（登录页），以及token是否存在。

  • 如果当前要导航的页面不是登录页且token不存在，表示用户未登录或登录信息过期，此时会使用next方法重定向到登录页。

  • 否则，如果token存在，会先清除之前设置的定时器clearTimer，然后设置一个新的定时器，该定时器在一小时后执行。一小时后，会从本地存储中移除"user"，并再次使用next方法重定向到登录页。

据的方式。

接下来，从user对象中获取token属性的值，如果存在则赋值给变量token，否则为null。

• 然后，通过条件判断，检查当前要导航的页面（to.name）是否为"Login"（登录页），以及token是否存在。

  • 如果当前要导航的页面不是登录页且token不存在，表示用户未登录或登录信息过期，此时会使用next方法重定向到登录页。

  • 否则，如果token存在，会先清除之前设置的定时器clearTimer，然后设置一个新的定时器，该定时器在一小时后执行。一小时后，会从本地存储中移除"user"，并再次使用next方法重定向到登录页。

• 最后，如果上述条件都不满足，则调用next方法继续导航到下一个路由。