• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

学生信息管理系统 (第三天 )技术汇总及问题解决

互联网 diligentman 2周前 (11-22) 8次浏览

1. 关于 Vue.use() 理解

当我们要使用插件进行开发时, 我们常常在main.js 里面看到 Vue.use(插件名), 如下图: Vue.use(Element)

学生信息管理系统 (第三天 )技术汇总及问题解决

但是为什么 axios 的引入不需要 Vue.use(axios),而是直接引用即可
学生信息管理系统 (第三天 )技术汇总及问题解决

解释: 简单来说就是Element 插件是依赖于 Vue,所以全局定义是需要 Vue.use(), 而 axios 是一个一个基于 Promise 的 HTTP 库,它并不依赖于 Vue, 所以引入时不需要 Vue.use

学生信息管理系统 (第三天 )技术汇总及问题解决


2. 关于 Vue 如何引入天气组件方法

  • 中国天气网https://cj.weather.com.cn/plugin/standard

  • Vue 中的使用

    1. 首先我们进入中国天气网选择自己喜欢的天气样式,点击生成一段代码,根据需要设置天气样式
      学生信息管理系统 (第三天 )技术汇总及问题解决

    2. Vue 项目中代码编写:(新建一个 weather 组件)
      学生信息管理系统 (第三天 )技术汇总及问题解决

    3. 在需要使用天气预报功能的地方,引入 Weather 组件即可, 效果如下:
      学生信息管理系统 (第三天 )技术汇总及问题解决


3. 前端布局神器 display: flex 详细讲解

这里直接跳转至一位博主写的文章,个人认为总结的很好: 前端布局神器 display: flex, 读完此篇文章,能更深入的理解 display: flex 弹性布局的优点。


4. Jquery Ajax 解决跨域问题的缺点

  • jquery Ajax 解决跨域问题基础代码如下:
$.ajax({
    type:"get",    //请求方式
    async:true,    //是否异步
    url:"http://www.baidu.com/",
    dataType:"jsonp",//跨域json请求一定是jsonp
    data:{},    //请求参数
    beforeSend: function() {
        //请求前的处理
    },
    success: function(data) {
        //请求成功处理,和本地回调完全一样
    },
    complete: function() {
        //请求完成的处理
    },
    error: function() {
        //请求出错处理
    }
});

由上述代码可知:Jq 解决跨域问题的原理是使用 JSONP 格式数据进行请求,实现跨域请求

Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

基本原理

  1. 浏览器端:
    动态生成<script>来请求后台提供数据的接口 然后定义好用于接收响应数据的函数(fn), 并将函数名通过请求参数提交给后台(如 callback=fn)
  2. 服务器端:
    接收到请求处理产生结果数据后, 返回一个函数调用的js代码, 并将结果数据作为实参传入到回调函数中,调用回调函数
  3. 浏览器端:
    收到响应自动执行函数调用的js代码, 即执行了提前定义好的回调函数, 便得到了所需要的结果数据

缺点:

  1. 只能解决GET类型的ajax跨域请求,其他类型的跨域请求并不能处理,即jsonp请求指示一般的get请求
  2. jsonp跨域请求远程接口时会出现SyntaxError: expected expression, got ‘<’ 错误, jsonp 对响应数据格式有要求 。(本人在vue项目中引入Jq,实现跨域请求学校教务系统数据时出现此报错,虽然跨域成功,但是导致请求以后的代码无法再继续运行,弄了几个小时,也还是不行,弃坑
  3. 由于jsonp存在安全性问题, 恶意跨站请求,XSS攻击

实在不建议使用 jsonp 解决跨域问题, 真的差劲


5. axios与proxy反向代理配置 ,解决前端跨域问题

  • . Vue Cli 脚手架在之前2.x版本的时候 可以通过修改config文件夹下的config.js ,但是3.x版本的没有这个文件夹。就需要自己来新建了,在根目录新建 vue.config.js 文件

学生信息管理系统 (第三天 )技术汇总及问题解决


  • vue.config.js 反向代理配置如下
    学生信息管理系统 (第三天 )技术汇总及问题解决
    注意事项 ①:不能再在main.js 中全局配置请求根路径 axios.defaults.baseURL ,应在封装 axios 请求的文件中配置 axios.defaults.baseURL学生信息管理系统 (第三天 )技术汇总及问题解决
    学生信息管理系统 (第三天 )技术汇总及问题解决
    注意事项②:配置完记得要(npm run serve)重启项目,否则无效

  • 效果展示:
    学生信息管理系统 (第三天 )技术汇总及问题解决

6. Vue 如何深度监听一个对象

大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果。那么如何实现对象属性的深度监听呢?

  • 利用 computed 配合 watch 实现单个属性的深度监听
<template>
  <div>
    <ul>
      <li v-for="(item,key) in person">{{key}}---{{item}}</li>
    </ul>
    <Button @click='hadnleupdata'>修改名字</Button>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        person:{
          name:'xxw',
          age:19
        }
      }
    },
    methods:{
      hadnleupdata(){
        this.person.name='ly';
      }
    },
    computed:{
      name(){
        return this.person.name;
      }
    },
    watch:{
      name(newV,oldV){
        console.log('新name为:',newV)
      }
    }
  }
</script>

点击进入 测试地点


7. vue中使用refs定位Dom节点出现undefined解决办法

先看官方一张图片:

学生信息管理系统 (第三天 )技术汇总及问题解决

由图可知ref 只有等页面加载完成好之后你才能调用 this.$refs ,如果你使用v-if 、v-for、v-show动态渲染页面的话,那么在刚开始页面没渲染之前你是拿不到 this. $refs 的,所以要等到页面渲染之后拿才可以。 如果不是动态渲染页面,则mounted 阶段是可以拿到 this. $refs的,如下图:
学生信息管理系统 (第三天 )技术汇总及问题解决
那如果是v-if 、v-for、v-show动态渲染页面,该如何获取 this. $refs 呢 ?

如果说mounted阶段是加载阶段,那么updated阶段则是完成了数据更新到DOM的阶段( 对加载回来的数据进行处理 ),此时,ref、数据等等全部都挂载到DOM结构上去,在update阶段使用this.$ refs.xxx ,就100%能找到该DOM节点。updated与mounted不同的是,在每一次的DOM结构更新,vue都会调用一次updated(){}钩子函数!,而mounted仅仅只执行一次而已。 简单来说,只要在调试的时候,能看到元素的存在,在updated阶段都可以使用this.$refs.xxx找到对应的DOM节点

学生信息管理系统 (第三天 )技术汇总及问题解决

注意: 由上图官方文档可知 updated可能并不会执行,最好的还是使用计算属性或者用watch监听数据变化,利用上面 第六点 计算属性与 watch 配合监听方式代替 updated 钩子


  • 其他特殊情况导致 this.$refs undefined 解决办法

    比如我遇到的问题及分析如下:学生信息管理系统 (第三天 )技术汇总及问题解决
    解决办法:

学生信息管理系统 (第三天 )技术汇总及问题解决
效果展示:
学生信息管理系统 (第三天 )技术汇总及问题解决

问题解决



喜欢 (0)