java 知识点 19（Vue、 element UI、axios、npm）

红太狼 2023-10-08 12:28 11阅读 0赞

#### 文章目录 ####

*   *  1、Vue基础语法
     *   *  1.1、学习Vue之前
         *  1.2、第一个vue项目
         *  1.3、模板语法
         *  1.4、v- 指令
         *   *  1.4.1、v-html
             *  1.4.2、v-show
             *  1.4.3、v- 里的if、else、for
             *  1.4.4、v-里的绑定 bind（：）、v-on（@ ）
             *  1.4.5、v-model
         *  1.5、Vue.component（自定义组件、标签）、props
         *  1.6、Axios网络通信
         *  1.7、网页加载完成前，出现模板语言的问题
         *  1.8、computed计算属性
         *  1.9、slot标签（插槽、挖坑）
         *  1.10、$emit 自定义事件
         *   *  1.10.1、$emit() 自定义事件属性
             *  1.10.2、利用this.$emit() 实现不同组件间传递方法
     *  2、Vue项目
     *   *  2.1、第一个vue-cli项目
         *  2.2、目录结构
         *  2.3、系统没安装Node.js，怎么运行npm指令
         *  2.4、vue-router路由
         *   *  2.4.1、不使用router，展示组件
             *  2.4.2、使用router，展示组件
             *  2.4.3、路由嵌套
             *  2.4.4、去除路径里的\#
             *  2.4.5、添加404页面
             *  2.4.6、进入路由前、后执行
             *  2.4.7、重定向
         *  2.5、Vue + element UI
         *  2.6、传参
         *  2.7、vue + axios
     *  3、npm
     *   *  3.1、安装
         *  3.2、下载慢？使用淘宝镜像
         *  3.3、常用指令
         *  3.4、Vue-npm指令

### 1、Vue基础语法 ###

> vue官方文档： https://cn.vuejs.org/v2/guide/

vue是一个前端框架，  
Vue.js 的核心是：采用简洁的语法将数据渲染进 DOM 。

vue只关心视图层（也就是页面范围）

#### 1.1、学习Vue之前 ####

css预处理器

> css预处理器是用于样式设计的编程语言，最后会通过编译器转为css  
> 常用css预处理器：SASS、LESS

原生js

> 版本ES5，全浏览器支持  
> 版本ES6，当前主流版本，需要webpack打包成ES5支持

Axios

> 前端通信框架，可以代替Ajax

在idea里面安装vue插件  
（安装完成之后重启idea就可以新建vue项目了）  
![在这里插入图片描述][20200831202949748.png]  
我们更常用的是hbuilder，编辑前端代码

> 下载地址：https://www.dcloud.io/hbuilderx.html

#### 1.2、第一个vue项目 ####

和jq一样，可以下载vue源码使用，也可以使用<script ></script>标签

> 这里有各个版本的vue：https://cdn.baomitu.com/vue  
> 另外几个:  
> <script src=“https://cdn.staticfile.org/vue/2.4.2/vue.min.js”>  
> <script src=“https://unpkg.com/vue/dist/vue.js”>

第一个vue实例

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="app">
      <p>{
       { message }}</p>
    </div>
    
    <script>
    new Vue({
         
      el: '#app',
      data: {
         
        message: '我的第一个vue实例'
      }
    })
    </script>
    </body>
    </html>

vue是一个mvvm框架（Model-View-ViewModel）

![在这里插入图片描述][20200831205329186.png]

#### 1.3、模板语法 ####

![在这里插入图片描述][20200831223820820.png]  
el ：挂载的元素节点，值可以是 CSS 选择符，或实际 HTML 元素  
data 用于定义属性，实例中属性为：message，可以有多个属性。  
message：相当于变量名  
\{ \{ \}\} 用于输出对象属性和函数返回值。，这里面可以直接写js代码

{
        {
        5+5}}
        {
        {
         ok ? 'YES' : 'NO' }}
        {
        {
         message.split('').reverse().join('') }}

#### 1.4、v- 指令 ####

##### 1.4.1、v-html #####

v-html：输出html标签

<body>
    <div id="app">
        <div v-html="message"></div>
    </div>
    	
    <script>
    new Vue({
         
      el: '#app',
      data: {
         
        message: '<h1>输出html</h1>'
      }
    })
    </script>
    </body>

![在这里插入图片描述][20200831224646629.png]

##### 1.4.2、v-show #####

v-show根据指令条件确定是否展示

<div id="app">
        <h1 v-show="ok">Hello!</h1>
    </div>
    	
    <script>
    new Vue({
         
      el: '#app',
      data: {
         
        ok: true
      }
    })
    </script>

##### 1.4.3、v- 里的if、else、for #####

**v-if ：** 根据表达式 的值(true 或 false )来决定是否插入 元素  
![在这里插入图片描述][20200831230417806.png]  
**v-else** 的使用

<div id="app">
        <div v-if="Math.random() > 0.5">
          Sorry
        </div>
        <div v-else>
          Not sorry
        </div>
    </div>

**v-else-if**

**v-for** 循环列表

<div id="app">
      <ol>
        <li v-for="site in sites">
          {
       { site.name }}
        </li>
      </ol>
    </div>
     
    <script>
    new Vue({
         
      el: '#app',
      data: {
         
        sites: [
          {
          name: 'Runoob' },
          {
          name: 'Google' },
          {
          name: 'Taobao' }
        ]
      }
    })
    </script>

**v-for** 迭代对象

<div id="app">
      <ul>
        <li v-for="value in object">
        {
       { value }}
        </li>
      </ul>
    </div>
    
    <script>
    new Vue({
         
      el: '#app',
      data: {
         
        object: {
         
          name: '百度',
          url: 'http://www.baidu.com',
          slogan: '百度一下你就知道了'
        }
      }
    })
    </script>

for循环键值对(value, key)

<div id="app">
      <ul>
        <li v-for="(value, key) in object">
        {
       { key }} : {
       { value }}
        </li>
      </ul>
    </div>
    
    <script>
    new Vue({
         
      el: '#app',
      data: {
         
        object: {
         
          name: '百度',
          url: 'http://www.baidu.com',
          slogan: '百度一下你就知道了'
        }
      }
    })
    </script>

for循环键值对+索引

##### 1.4.4、v-里的绑定 bind（：）、v-on（@ ） #####

v-bind：绑定属性  
![在这里插入图片描述][2020083123000582.png]

<a v-bind:href="url"></a>
    
    <a :href="url"></a>

v-on ：绑定事件、监听 DOM 事件

<a v-on:click="doSomething"></a>
    
    <a @click="doSomething"></a>

绑定事件实例

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="https://unpkg.com/vue/dist/vue.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<button @click="aa">点击</button>
    		</div>
    		<script>
    			new Vue({
         
    				el: '#app',
    				data: {
         
    					message: '我的v-on实例'
    				},
    				methods:{
         
    					aa:function(){
         
    						alert(this.message);
    					}
    				}
    			})
    		</script>
    	</body>
    </html>

![在这里插入图片描述][2020090117061466.png]

##### 1.4.5、v-model #####

v-model ：数据双向绑定，（v-model变化message也变化）  
![在这里插入图片描述][20200831231439982.png]

#### 1.5、Vue.component（自定义组件、标签）、props ####

定义组件（自定义标签）：实现一个标签显示一个数组

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="https://unpkg.com/vue/dist/vue.js"></script>
    	</head>
    	<body>
    		<div id="haha">
    			<aa v-for="item in items" v-bind:bb="item"></aa>
    		</div>
    		<script>
    			// props:['bb'] 接收bb，传给template里的bb
    			Vue.component("aa", {
         
    				props: ['bb'],
    				template: "<li>{
         { bb }}</li>"
    			});
    			var vm = new Vue({
         
    				el: '#haha',
    				data: {
         
    					items: ["java", "python", "php"]
    				}
    			});
    		</script>
    	</body>
    </html>

![在这里插入图片描述][20200901180149620.png]

#### 1.6、Axios网络通信 ####

Axios（可以代替之前我们用的jQuery.ajax）

> axios官网：http://www.axios-js.com/docs/index.html

导入（也可以直接下载下来用）

新建文件1.json

{
        
        "name":"网站",
        "url":"www.baidu.com",
        "num":3
    }

新建网页（和1.json同目录）

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>axios测试</title>
    		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			{
       { info }}
    		</div>
    		<script type="text/javascript">
    			new Vue({
         
    				el: '#app',
    				data() {
         
    					return {
         
    						info: null
    					}
    				},
    				mounted() {
         
    					axios
    						.get('1.json')
    						.then(response => (this.info = response))
    						.catch(function(error) {
          // 请求失败处理
    							console.log(error);
    						});
    				}
    			})
    		</script>
    	</body>
    </html>

![在这里插入图片描述][20200901192045829.png]  
获取url的方法  
![在这里插入图片描述][20200901200047377.png]

#### 1.7、网页加载完成前，出现模板语言的问题 ####

出现这种情况的原因，vue是先加载网页，再进行模板字符处理。  
![在这里插入图片描述][20200901192727869.png]

#### 1.8、computed计算属性 ####

计算属性：简单理解为 计算出来的结果保存到属性上（内存中运行、虚拟dom）  
作用：相当于缓存，不经常改变的东西可以放在计算属性里

实例：computed和methodsduibi

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>axios测试</title>
    		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<p>methods里面的：{
        {
         aa1() }}</p>
    			<p>computed里面的：{
        {
         aa2 }}</p>
    		</div>
    		<script type="text/javascript">
    			var vm = new Vue({
         
    				el: '#app',
    				data: {
        
    					msg:"时间"
    				},
    				methods: {
        
    					aa1: function(){
        
    						return Date.now();
    					}
    				},
    				computed: {
        
    					aa2: function(){
        
    						this.msg;
    						return Date.now();
    					}
    				}
    			})
    		</script>
    	</body>
    </html>

![在这里插入图片描述][20200901203125973.png]  
![在这里插入图片描述][20200901203432660.png]

#### 1.9、slot标签（插槽、挖坑） ####

> 2.6.0 中， v-slot 指令取代了 slot 和 slot-scope

<slot></slot>，可以想象成jsp里面的挖坑填坑模型，slot标签就是用来占坑的（相当于占位符）。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>axios测试</title>
    		<script src="https://cdn.staticfile.org/vue/2.6.0/vue.min.js"></script>
    		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<m>
    				<n1></n1>
    				<n2></n2>
    			</m>
    		</div>
    		<script type="text/javascript">
    			Vue.component("m",{
        
    				template: 
    					'<div>'+
    					'<slot></solt>'+
    					'</div>'
    			});
    			Vue.component("n1",{
        
    				template: "<h1>我的坑位</h1>"
    			});
    			Vue.component("n2",{
        
    				template: "<h2>不，也是我的坑位</h2>"
    			});
    			
    			var vm = new Vue({
         
    				el: '#app'
    			})
    		</script>
    	</body>
    </html>

![在这里插入图片描述][20200901213354780.png]

#### 1.10、$emit 自定义事件 ####

##### 1.10.1、$emit() 自定义事件属性 #####

先回忆一下，html标签里的onclick事件  
![在这里插入图片描述][20200902114716194.png]  
$emit(“自定义的事件属性名”)

> $emit相当于就是一个起名的

![在这里插入图片描述][20200902120033566.png]

新建自定义事件步骤  
1、先新建一个自定义标签，在标签里面自定义一个事件触发方式的名字  
2、使用vue对象新建一个方法  
2、使用自定义标签，并在里面使用自定义事件（v-on:事件触发方式名 = “方法名”）

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="https://cdn.staticfile.org/vue/2.6.0/vue.min.js"></script>
    	</head>
    	<body>
    		
    		<div id="app">
    			<my-button v-on:abc="sayHi"></my-button>
    		</div>
    		
    		<script type="text/javascript">
    			Vue.component('my-button', {
         
    				template: `<button v-on:click="$emit('abc')">点我</button>`
    			});
    
    			new Vue({
         
    				el: '#app',
    				methods: {
         
    					sayHi: function() {
         
    						alert('Hi!')
    					}
    				}
    			});
    		</script>
    	</body>
    </html>

##### 1.10.2、利用this.$emit() 实现不同组件间传递方法 #####

在不同组件里使用自定义事件

> 组件：就是自定义标签

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="https://cdn.staticfile.org/vue/2.6.0/vue.min.js"></script>
    	</head>
    	<body>
    
    		<div id="app">
    			<my-button v-on:haha="sayHi"></my-button>
    		</div>
    
    		<script type="text/javascript">
    			Vue.component('my-button', {
        
    				template: '<button v-on:click="abc">点我</button>',
    				methods: {
        
    					abc: function() {
        
    						this.$emit('haha');
    					}
    				}
    			});
    
    			new Vue({
        
    				el: '#app',
    				methods: {
        
    					sayHi: function() {
        
    						alert('Hi!')
    					}
    				}
    			});
    		</script>
    	</body>
    </html>

![在这里插入图片描述][20200902145330481.png]

### 2、Vue项目 ###

之前我们写在html里面仅仅是vue基本使用，现在我们来构建vue项目。

#### 2.1、第一个vue-cli项目 ####

vue-cli是一个vue官方开发的vue项目模板。

开始创建项目：

系统环境：Windows
    开发工具：HBuilderX

打开HBuilderX-文件-新建-项目  
![在这里插入图片描述][2020090314325219.png]  
点击创建后，右下角会有个正在创建，需要稍等一会才能创建完成。  
![在这里插入图片描述][20200903143538150.png]

> 如果不使用HBuilderX，在系统环境下创建，需要安装Node.js

创建完项目后，点击构建项目  
![在这里插入图片描述][20200903144009827.png]  
第一次构建会提示，使用内部命令还是外部，点使用内部就行。  
构建完成就可以运行了  
![在这里插入图片描述][20200903144326684.png]  
在浏览器访问: http://localhost:8080/  
![在这里插入图片描述][2020090314444664.png]

#### 2.2、目录结构 ####

> 这里是vue-cli 2.6.10的目录结构，不同的版本，目录结构可能不同。

![在这里插入图片描述][20200903154241167.png]

更完整一点的如下![在这里插入图片描述][20200903153726646.png]

#### 2.3、系统没安装Node.js，怎么运行npm指令 ####

假设这里要安装vue-router  
下面是安装指令，可以在cmd里运行，也可以在HBuilder控制台运行

npm install --save vue-router

如果你的系统（windows）里没有单独安装Node.js，直接在cmd里运行如上指令是会报错的。  
不想安装Node.js，可使用HBuilder里面自带的npm插件。

首先你要找到HBuilder里面自带的npm插件在哪儿，  
可以从之前构建项目时系统自动运行的指令里找，如下图  
![在这里插入图片描述][20200903221709376.png]  
![在这里插入图片描述][20200903221834209.png]

#### 2.4、vue-router路由 ####

安装vue-router

npm install --save vue-router

在main.js里面导入VueRouter  
![在这里插入图片描述][20200903223937703.png]  
修改App.vue  
![在这里插入图片描述][20200903224041674.png]  
运行  
![在这里插入图片描述][20200903224237686.png]  
运行成功过后在浏览器访问：http://localhost:8080/

![在这里插入图片描述][20200903224333652.png]  
运行后可以不用关闭，往vue里面修改代码会自动载入

##### 2.4.1、不使用router，展示组件 #####

在src-components下新建vue文件haha.vue  
![在这里插入图片描述][20200903231216276.png]

如果不使用vue-router，如下图，这样写就可以连接到haha.vue

![在这里插入图片描述][20200903231130248.png]

##### 2.4.2、使用router，展示组件 #####

如图是目录结构（haha.vue、hoho.vue、myRouter.js都是新建的，原项目HelloWorld.vue删除）  
![在这里插入图片描述][20200904160338174.png]  
在main.js里注册路由

import Vue from 'vue'
    import App from './App.vue'
    import router from './router/myRouter.js'
    
    Vue.config.productionTip = false;
    
    new Vue({
        
    	render: h => h(App),
    	router
    }).$mount('#app')

haha.vue

<template>
    	<h2>这儿写点页面标签</h2>
    </template>
    
    <script>
    	export default {
         
    		name: 'h1',
    	}
    </script>
    
    <style>
    </style>

hoho.vue

<template>
    	<h2>这是我写的第二个页面组件</h2>
    </template>
    
    <script>
    	export default {
         
    		name: 'h2',
    	}
    </script>
    
    <style>
    </style>

myRouter.js

import Vue from 'vue'
    import myRouter from 'vue-router'
    import h1 from '../components/haha.vue'
    import h2 from '../components/hoho.vue'
    
    //安装路由
    Vue.use(myRouter);
    
    //配置导出路由
    export default new myRouter({
        
    	routes:[
    		{
        	
    			// 访问路径
    			path:'/h1',
    			// 跳转组件
    			component:h1
    		},
    		{
        
    			path:'/h2',
    			component:h2
    		}
    	]
    });

App.vue

<template>
    	<div id="app">
    		<h1>haha</h1>
    		<router-link to="/h1">页面1 </router-link>
    		<router-link to="/h2">页面2 </router-link>
    		<router-view></router-view>
    	</div>
    </template>
    
    <script>
    	export default {
         
    		name: 'app'
    	}
    </script>
    
    <style>
    	#app {
         
    		font-family: 'Avenir', Helvetica, Arial, sans-serif;
    		-webkit-font-smoothing: antialiased;
    		-moz-osx-font-smoothing: grayscale;
    		text-align: center;
    		color: #2c3e50;
    		margin-top: 60px;
    	}
    </style>

运行、访问

![在这里插入图片描述][20200904161701635.png]

##### 2.4.3、路由嵌套 #####

![在这里插入图片描述][20200904221252439.png]

##### 2.4.4、去除路径里的\# #####

![在这里插入图片描述][20200904224028137.png]

##### 2.4.5、添加404页面 #####

新建NotFound.vue  
![在这里插入图片描述][20200904224256927.png]  
导入js路由  
![在这里插入图片描述][2020090423120374.png]

##### 2.4.6、进入路由前、后执行 #####

![be][]  
vue里面  
![在这里插入图片描述][20200904231700737.png]

![在这里插入图片描述][2020090423181153.png]

##### 2.4.7、重定向 #####

![在这里插入图片描述][2020090422335075.png]

#### 2.5、Vue + element UI ####

element和bootstrap一样，里面有很多的ui 样式，比bootstrap看起来清爽一些

> element官网：https://element.eleme.cn/2.0/\#/zh-CN/component/installation

使用element需要安装 element-ui依赖

npm i element-ui -S

> 如果想直接在html中使用element-ui，可以使用如下标签引入  
>   
> <link rel=“stylesheet” href=“https://unpkg.com/element-ui/lib/theme-chalk/index.css”>  
>   
> <script src=“https://unpkg.com/element-ui/lib/index.js”>

在vue项目中使用element-ui需要在main.js 中写入以下内容

import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    Vue.use(ElementUI)

![在这里插入图片描述][20200904163735558.png]  
接下来，在 element-ui中随便找一个我们想用的组件源码  
![在这里插入图片描述][20200904164725497.png]  
然后新建一个vue组件把源码复制进去  
![在这里插入图片描述][20200904164921443.png]  
在路由中加入  
![在这里插入图片描述][20200904165123943.png]  
在主页里就可以使用了

> 具体的使用方法可以查看官方文档

> vue的template里面注意，vue元素不能直接在template标签下  
> 不然会报错，一般我们在里面写个div，再写元素

#### 2.6、传参 ####

vue里：传递键值对  
![在这里插入图片描述][20200904222908881.png]

js：url带参  
![在这里插入图片描述][20200904222721930.png]

获取参数  
![在这里插入图片描述][20200904222615558.png]  
另外还可以通过props传参  
js  
![在这里插入图片描述][20200904223031672.png]  
vue  
![在这里插入图片描述][20200904223146622.png]

#### 2.7、vue + axios ####

axios安装

npm install axios -s

在main.js里添加  
![在这里插入图片描述][20200904232332796.png]  
写一个json  
![在这里插入图片描述][20200904232507103.png]  
vue里获取数据  
![在这里插入图片描述][20200904233931367.png]  
运行、访问  
![在这里插入图片描述][20200904234050786.png]

### 3、npm ###

> npm中文文档：https://www.npmjs.cn/getting-started/what-is-npm/

npm：是js世界的下载、安装、管理工具，功能像linux里的yum一样。

#### 3.1、安装 ####

安装npm：

下载地址：https://nodejs.org/en/download/

![在这里插入图片描述][2020090423494656.png]

如果使用Hbuilder，里面自带npm
    大致路径是：HBuilderX\plugins\npm\npm.cmd

如果安装了node.js，里面也自带npm

#### 3.2、下载慢？使用淘宝镜像 ####

像maven一样，npm也有一个淘宝镜像  
安装镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成以后所有npm的指令就可以用cnpm代替

#### 3.3、常用指令 ####

安装、卸载、更新软件包

安装XXX包
    npm install -s XXX
    
    卸载XXX
    npm uninstall XXX -S
    
    更新XXX到最新版本
    npm install vue-loader@latest --save-dev-g
    
    更新XXX到指定版本
    npm install XXX@3.9.1

更新npm

更新全局包：
    npm update -g
    
    更新生产环境依赖包：
    npm update --save
    
    更新开发环境依赖包：
    npm update --save-dev

查看全局依赖包

npm ls -g

\-s或- -save：表示更新到本项目  
\-g或- -global：表示更新到全局

#### 3.4、Vue-npm指令 ####

安装vue脚手架

npm install vue-cli –g

进入目录

vue init 目录名

运行vue测试 server

npm run dev

构建vue项目

npm run build

运行vue

npm run server

[20200831202949748.png]: https://img-blog.csdnimg.cn/20200831202949748.png
[20200831205329186.png]: https://img-blog.csdnimg.cn/20200831205329186.png
[20200831223820820.png]: https://img-blog.csdnimg.cn/20200831223820820.png
[20200831224646629.png]: https://img-blog.csdnimg.cn/20200831224646629.png
[20200831230417806.png]: https://img-blog.csdnimg.cn/20200831230417806.png
[2020083123000582.png]: https://img-blog.csdnimg.cn/2020083123000582.png
[2020090117061466.png]: https://img-blog.csdnimg.cn/2020090117061466.png
[20200831231439982.png]: https://img-blog.csdnimg.cn/20200831231439982.png
[20200901180149620.png]: https://img-blog.csdnimg.cn/20200901180149620.png
[20200901192045829.png]: https://img-blog.csdnimg.cn/20200901192045829.png
[20200901200047377.png]: https://img-blog.csdnimg.cn/20200901200047377.png
[20200901192727869.png]: https://img-blog.csdnimg.cn/20200901192727869.png
[20200901203125973.png]: https://img-blog.csdnimg.cn/20200901203125973.png
[20200901203432660.png]: https://img-blog.csdnimg.cn/20200901203432660.png
[20200901213354780.png]: https://img-blog.csdnimg.cn/20200901213354780.png
[20200902114716194.png]: https://img-blog.csdnimg.cn/20200902114716194.png
[20200902120033566.png]: https://img-blog.csdnimg.cn/20200902120033566.png
[20200902145330481.png]: https://img-blog.csdnimg.cn/20200902145330481.png
[2020090314325219.png]: https://img-blog.csdnimg.cn/2020090314325219.png
[20200903143538150.png]: https://img-blog.csdnimg.cn/20200903143538150.png
[20200903144009827.png]: https://img-blog.csdnimg.cn/20200903144009827.png
[20200903144326684.png]: https://img-blog.csdnimg.cn/20200903144326684.png
[2020090314444664.png]: https://img-blog.csdnimg.cn/2020090314444664.png
[20200903154241167.png]: https://img-blog.csdnimg.cn/20200903154241167.png
[20200903153726646.png]: https://img-blog.csdnimg.cn/20200903153726646.png
[20200903221709376.png]: https://img-blog.csdnimg.cn/20200903221709376.png
[20200903221834209.png]: https://img-blog.csdnimg.cn/20200903221834209.png
[20200903223937703.png]: https://img-blog.csdnimg.cn/20200903223937703.png
[20200903224041674.png]: https://img-blog.csdnimg.cn/20200903224041674.png
[20200903224237686.png]: https://img-blog.csdnimg.cn/20200903224237686.png
[20200903224333652.png]: https://img-blog.csdnimg.cn/20200903224333652.png
[20200903231216276.png]: https://img-blog.csdnimg.cn/20200903231216276.png
[20200903231130248.png]: https://img-blog.csdnimg.cn/20200903231130248.png
[20200904160338174.png]: https://img-blog.csdnimg.cn/20200904160338174.png
[20200904161701635.png]: https://img-blog.csdnimg.cn/20200904161701635.png
[20200904221252439.png]: https://img-blog.csdnimg.cn/20200904221252439.png
[20200904224028137.png]: https://img-blog.csdnimg.cn/20200904224028137.png
[20200904224256927.png]: https://img-blog.csdnimg.cn/20200904224256927.png
[2020090423120374.png]: https://img-blog.csdnimg.cn/2020090423120374.png
[be]: https://img-blog.csdnimg.cn/20200904231526969.png
[20200904231700737.png]: https://img-blog.csdnimg.cn/20200904231700737.png
[2020090423181153.png]: https://img-blog.csdnimg.cn/2020090423181153.png
[2020090422335075.png]: https://img-blog.csdnimg.cn/2020090422335075.png
[20200904163735558.png]: https://img-blog.csdnimg.cn/20200904163735558.png
[20200904164725497.png]: https://img-blog.csdnimg.cn/20200904164725497.png
[20200904164921443.png]: https://img-blog.csdnimg.cn/20200904164921443.png
[20200904165123943.png]: https://img-blog.csdnimg.cn/20200904165123943.png
[20200904222908881.png]: https://img-blog.csdnimg.cn/20200904222908881.png
[20200904222721930.png]: https://img-blog.csdnimg.cn/20200904222721930.png
[20200904222615558.png]: https://img-blog.csdnimg.cn/20200904222615558.png
[20200904223031672.png]: https://img-blog.csdnimg.cn/20200904223031672.png
[20200904223146622.png]: https://img-blog.csdnimg.cn/20200904223146622.png
[20200904232332796.png]: https://img-blog.csdnimg.cn/20200904232332796.png
[20200904232507103.png]: https://img-blog.csdnimg.cn/20200904232507103.png
[20200904233931367.png]: https://img-blog.csdnimg.cn/20200904233931367.png
[20200904234050786.png]: https://img-blog.csdnimg.cn/20200904234050786.png
[2020090423494656.png]: https://img-blog.csdnimg.cn/2020090423494656.png