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

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 解决办法：

  比如我遇到的问题及分析如下：
  解决办法：

效果展示：

问题解决

---