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

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 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

基本原理：

浏览器端：
动态生成<script>来请求后台提供数据的接口然后定义好用于接收响应数据的函数（fn），并将函数名通过请求参数提交给后台（如 callback=fn）

服务器端：
接收到请求处理产生结果数据后，返回一个函数调用的js代码，并将结果数据作为实参传入到回调函数中，调用回调函数

浏览器端：
收到响应自动执行函数调用的js代码，即执行了提前定义好的回调函数，便得到了所需要的结果数据

缺点：

只能解决GET类型的ajax跨域请求，其他类型的跨域请求并不能处理，即jsonp请求指示一般的get请求
jsonp跨域请求远程接口时会出现SyntaxError: expected expression, got ‘<’ 错误， jsonp 对响应数据格式有要求。（本人在vue项目中引入Jq，实现跨域请求学校教务系统数据时出现此报错，虽然跨域成功，但是导致请求以后的代码无法再继续运行，弄了几个小时，也还是不行，弃坑）
由于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节点

在这里插入图片描述