IT评测·应用市场-qidao123.com

标题: Vue入门(Vue根本语法、axios、组件、变乱分发） [打印本页]

作者: 科技颠覆者 时间: 2025-1-24 04:39
标题: Vue入门(Vue根本语法、axios、组件、变乱分发）
Vue入门

Vue概述

Vue (读音/vju/，类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被计划为可以自底向上逐层应用。Vue的核心库只关凝视图层，不仅易于上手，还便于与第三方库(如: vue-router:跳转，vue-resource:通讯，vuex:管理）或既有项目整合。
什么是MVVM

MVVM（Model-View-ViewModel）是一种软件计划模式，由微软WPF（用于更换WinForm，从前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在欣赏器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的变乱驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的博客上发表。
MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更轻易管理和使用。其作用如下：
该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互
MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当卑鄙行的MVVM框架有Vue.js，Anfular JS
长处

MVVM模式和MVC模式一样，主要目标是分离视图（View）和模型（Model），有几大利益

低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时间Model可以稳定，当Model变化的时间View也可以稳定。
可复用：你可以把一些视图逻辑放在一个ViewModel里面，让许多View重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），计划人员可以专注于页面计划。
可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。

（1）View
View是视图层，也就是用户界面。前端主要由HTML和CSS来构建，为了更方便地显现vi ew Model大概Model层的数据，已经产生了各种各样的前后端模板语言，好比FreeMarker，Thymeleaf等等，各大MVVM框架如Vue.js.Angular JS， EJS等也都有本身用来构建用户界面的内置模板语言。
（2）Model
Model是指数据模型，泛指后端进行的各种业务逻辑处理惩罚和数据操控，主要围绕数据库体系睁开。这里的难点主要在于需要和前端约定统一的接口规则
（3）ViewModel
ViewModel是由前端开发人员构造生成和维护的视图数据层。在这一层，前端开发者对从后端获取的Model数据进行转换处理惩罚，做二次封装，以生成符合View层使用预期的视图数据模型。
需要注意的是View Model所封装出来的数据模型包括视图的状态和举动两部门，而Model层的数据模型是只包罗状态的。
好比页面的这一块展示什么，那一块展示什么这些都属于视图状态(展示)
页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图举动(交互)
视图状态和举动都封装在了View Model里。这样的封装使得View Model可以完整地去形貌View层。由于实现了双向绑定， View Model的内容会及时显现在View层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。
MVVM框架已经把最脏最累的一块做好了，我们开发者只需要处理惩罚和维护View Model，更新数据视图就会自动得到相应更新，真正实现变乱驱动编程。
View层显现的不是Model层的数据，而是ViewModel的数据，由ViewModel负责与Model层交互，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实行的重要一环。
第一个Vue程序；

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
var vm = new Vue({
el: "#app",
// model ：数据
data:{
message:"hello Vue"
}
});
</script>
</body>
</html>

复制代码

el: ‘#test’：绑定元素的ID，好玩的，地方在于我们可以在欣赏器中操作vm对象来动态的修改参数，这和jQuery有点类似。

MVVM架构中最重要的就是ModelView层它可以提供JSON和Ajax来实现与Model层的交互

大差不差就是这个样子。我们可以感受到他是不需要改变DOM元素的，这就让我们的开发大大解耦了
因为我们对页面内容可以动态的修改，这样避免了大量的刷新。
{{message}}其实就是假造DOM元素
Vue根本语法

七大属性

el
绑定id，用来指示vue编译器从什么地方开始剖析 vue的语法，可以说是一个占位符。
相当于一个容器，跟上面的div id = "app"做关联，今后以后上面div id = "app"里面的内容要通过vue来渲染,都要颠末vue处理惩罚才气看得到上面div里面的内容
data
用来构造从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中
跟微信小程序一样，全部的变量都要写在data里面
methods
放置页面中的业务逻辑，js方法一般都放置在methods中
computed后面会先容
computed和methods是有区别的：computed是在值发生改变的时间才会触发效果，而methods只要刷新执行了就会触发，全部平时写VUE的时间，能用computed的只管使用
computed
界说盘算属性的方法
根据已经存在的属性盘算出新的属性，对于同样的数据，会缓存。当其依赖属性的值发生变化是，这个属性的值会自动更新，与之相关的DOM部份也会同步自动更新。其实一般环境，我也会把一些关于逻辑的代码都写在computed中。
template
用来设置模板，会更换页面元素，包括占位符
Vue.component（）组件中会用到，其实许多地方都会用到
watch
watch:function(new,old){ … }监听data中数据的变化，两个参数，一个返回新值，一个返回旧值
当你有一些数据需要随着其它数据变更而变更时大概执行异步操作或开销较大操作时，发起使用watch
computed和watch是有区别的：
watch: 监视,能够监听到数据的变化,只要数据变化的时间,都会自定执行对应的方法,此中可以检测的数据泉源分为三部门 data , computed , props computed: 盘算属性,存在一个盘算缓存的特性,每一次盘算之后,只要里面的逻辑不发生变化,每一次重复调用,都会使用上一次执行的结果,能够节省盘算的时间
render
创建Virtual Dom

Vue的7种指令

v-text 在元素中插入值
v-html 在元素中插入html标签和文本
v-if 根据表达式的真假值来动态插入和移除元素
v-show 根据表达式的真假值通过控制css的display来隐藏和显示元素
v-for 根据变量的值来循环渲染元素
v-on 监听元素变乱，执行相应操作
v-bind 绑定元素属性，执行相应操作
v-model 绑定input值和变量，实现数据视图的双向绑定

下面作详细先容：
v-bind

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。假如绑定的值是 null 大概 undefined，那么该 attribute 将会从渲染的元素上移除。
因为 v-bind 非经常用，我们提供了特定的简写语法：

<div :id></div>
<div v-bind:id></div>

复制代码

<div :id="dynamicId"></div>

复制代码

开头为 : 的 attribute 大概和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且全部支持 Vue 的欣赏器都能正确剖析它。此外，他们不会出现在终极渲染的 DOM 中。简写语法是可选的，但信任在你了解了它更多的用处后，你应该会更喜欢它。

<div id="app">
<span v-bind:title="message">鼠标悬停几秒钟</span>
</div>

复制代码

鼠标悬停就会显示tittle里面的内容。
v-bind指令的一些注意事项
不能在属性值内直接写入以下语法

<h1 :style="font-size:50px;color:red;">this is test</h1>

复制代码

这是错误的，因为vue会把font-size当成一个data数据！
办理方式如下

<h1 :style="'font-size:50px;color:red;'">this is test</h1>

复制代码

可以看到只需要在总的样式前后各加上一个 ’ 单引号即可！这样他就会把他看成字符串了，不过假如我们这么加样式就没有必要写v-bind
判断循环

<body>
<div id="tst">
<h1 v-if="ok">true</h1>
<h1 v-else>NO</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el: "#tst",
data: {
ok: true
}
});
</script>
</body>

复制代码

<body>
<div id="tst">
<h1 v-if="type==='a'">A</h1>
<h1 v-else-if="type==='b'">B</h1>
<h1 v-else-if="type==='c'">C</h1>
<h1 v-else-if="type==='d'">D</h1>
<h1 v-else>No</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el: "#tst",
data: {
type: 'a'
}
});
</script>
</body>

复制代码

<body>
<div id="tst">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el: "#tst",
data: {
items: [
{message: '吃饭'},
{message: '睡觉'},
{message: '厕所'},
]
}
});
</script>
</body>

复制代码

<div id="tst">
<li v-for="(item,index) in items">
{{item.message}}--{{index}}
</li>
</div>

复制代码

我们也可以在此中界说一个数组让他输出

methods方法

方法必须界说在Vue的method中。

<script>
var vm=new Vue({
el:"#app",
data:{
message:"Hello Vue"
},
methods:{
sayHi:function (event){
alert(this.message);
}
}
})
</script>

复制代码

在methods中界说一个方法记得添加变乱监听event，然后

<div id="app">
<button v-on:click="sayHi">click</button>
</div>

复制代码

界说一个按钮用v-on:click绑定变乱，最重要的是不要忘了引入标签

<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

复制代码

<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app">
<button v-on:click="sayHi">click</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script>
var vm=new Vue({
el:"#app",
data:{
message:"Hello Vue"
},
methods:{
sayHi:function (event){
alert(this.message);
}
}
})
</script>
</body></html>

复制代码

这样我们就绑定了一个变乱。在不确定绑定变乱的时间我们可以查看这个网站jQuery API 中文文档 | jQuery中文网
数据双向绑定（v-model)

Vue.js是一个MVVM矿建，即数据双向绑定，当数据发生变化时，视图也会发生变化，当视图发生变化的时间，数据也会跟着同步变化，这也算是Vue.js的精髓之处。
我还是喜欢用代码语言，大家来体会。这里我们要用到v-model标签。

<body>
<div id="app">
输入文本:<input type="text" v-model="message">{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"123"
}
})
</script>
</body>

复制代码

在这里通过v-model把文本框和下面的message绑定到一起。又把message放到文本框后边，加入到视图层，实现数据的双向绑定。

我们可以操作他。

我们也可以用属性绑定来实现性别选择

<body>
<div id="app">
选择性别:
<input type="radio" v-model="sex" value="女" checked>女
<input type="radio" v-model="sex" value="男">男</br>
{{sex}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"123",
sex:''
}
})
</script>
</body>

复制代码

<body>
<div id="app">
请选择:
<select v-model="value">
<option disabled>--请选择--</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
{{value}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
value:''
}
})
</script>
</body>

复制代码

注意:v-model会忽略全部表单元素的value、selected、checked的初始值而总是将vue实例的数据作为数据泉源。你应该通过JavaScript在组件的数据库中选项中声明初始值!
对于ios用户无法选中第一个选项所以第一个选项要设置为无法选中。
Vue组件(component)

组件允许我们将 UI 分别为独立的、可重用的部门，并且可以对每个部门进行单独的思索。在现实应用中，组件经常被构造成一个层层嵌套的树状结构：

这是官网上的图。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<test v-for="item in items" v-bind:pojo="item"></test>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
Vue.component("test",{
props: ['pojo'],
template: '<li>{{pojo}}</li>'
});
var vm= new Vue({
el:"#app",
data:{
items: ["吃饭","睡觉","上厕所"]
}
});
</script>
</body>
</html>

复制代码

解释：
v-for=“item in items”：遍历Vue实例中界说的名为items的数组，并创建划一数量的组件
v-bind:panh=“item”：将遍历的item项绑定到组件中props界说名为item属性上；= 号左边的panh为props界说的属性名，右边的为item in items 中遍历的item项的值

网络通讯

我们在前面的spingMVC中学习了jQuery.ajax它可以完成异步通讯，现在学个新的
Axios 异步通讯

Axios是一个开源的可以用在欣赏器端和Node JS的异步通讯框架，她的主要作用就是实现AJAX异步通讯，其功能特点如下：

从欣赏器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API[JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF(跨站请求伪造)

GitHub：https://github.com/axios/axios
中文文档：http://www.axios-js.com/

mounted钩子

前后端分离，所以我们要先用一个勾子把前端给的数据钩下来，再把它放到我们的模板里面，我们通过访问模板来映射到视图层
起首写一个json文件

{
"name": "康王博客",
"url": "https://blog.csdn.net/K1763540?type=blog",
"page": 1,
"isNonProfit": true,
"address": {
"street": "天安门",
"city": "北京",
"country": "中国"
},
"links": [
{
"name": "CSDN",
"url": "https://www.baidu.com"
},
{
"name": "test",
"url": "https://www.baidu.com"
},
{
"name": "test1",
"url": "https://www.baidu.com"
}
]
}

复制代码

再用一个钩子把数据钩下来。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
mounted(){
axios.get('./exp_07.json').then(response=>(console.log(response.data)));
}
});
</script>

复制代码

在这里成功钩到了这个json文件。下一步就是把他套在模板里面

<script type="text/javascript">
var vm = new Vue({
el:"#app",
data(){
return{
info:{
name: null,
address: {
street: null,
city: null,
country: null,
},
link:[]
}
}
},
mounted(){
axios.get('./exp_07.json').then(response=>(console.log(response.data)));
}
});
</script>

复制代码

这里改变返回值把数据返回到模板中。

mounted(){
axios.get('./exp_07.json').then(response=>(this.info=response.data());
}

复制代码

<html lang="en">
<body>
<div id="app">
{{info.name}}
{{info.address}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data(){
return{
info:{
name: null,
address: {
street: null,
city: null,
country: null,
},
link:[]
}
}
},
mounted(){
axios.get('./exp_07.json').then(response=>(this.info=response.data));
}
});
</script>
</body>
</html>

复制代码

这样我们就把json的信息渲染到了页面上。但是刚开始没有渲染到的时间会有一个框架，就是上面的那个。这样很轻易让人以为走错了页面，我们对他做一些改进。

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
{{info.name}}
{{info.address}}
</div>

复制代码

我们对它的样式做一些修改使他在没有获取到json时先不显示。
在这里要注意超链接要使用v-bind绑定一下

<a v-bind:href="info.url">超链接</a>

复制代码

盘算属性

盘算属性的重点突出在属性两个字上(属性是名词)，起首它是个属性其次这个属性有盘算的能力(盘算是动词)，这里的盘算就是个函数;简单点说，它就是一个能够将盘算结果缓存起来的属性(将举动转化成了静态的属性)，仅此而已;可以想象为缓存。

<body>
<div id="app">
getTime1:{{getTime1()}}</br>
getTime2:{{getTime2}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello world"
},
methods:{
getTime1: function () {
return Date.now();
}
},
computed:{
getTime2: function () {
return Date.now();
}
}
})
</script>
</body>

复制代码

结果：

表面上是没有区别的，我们在刷新的时间他们也是同步刷新，但是

我们对time1也就是methods的方法操作时他后面带有括号，说明他是一个方法，而getTime2并不会刷新，代表他只是一个属性。
这样在运行时可以为我们提升许多效率，有助于高并发；
methods和computed方法名不能重名；methods的优先级高
内容并发

在Vue.js中我们使用元素作为承载分发内容的出口，官方称其为solt，这里我们称它为插槽，它可以应用在组合组件的场景中;
在某些场景中，我们大概想要为子组件传递一些模板片断，让子组件在它们的组件中渲染这些片断。
<slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在那边被渲染。

此图源自官方文档插槽 Slots | Vue.js

<div id="app">
<h2>日程</h2>
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打喷嚏</li>
</ul>
</div>

复制代码

写出来这样一个程序，我们有一些网站开发履历的都知道，我们许多时间书单里的内容都是需要从后端传递的；直接写死是不符合我们的意愿的，所以我们要加入插槽，动态的改变标签里面的数据。
第一把把这个大的div抽象成一个组件

Vue.component("app_div",{
template:
'<div>' +
'<slot></slot>'+
'<ul>' +
'<slot></slot>'+
'</ul>'+
'</div>'
});

复制代码

也可以用\来代更换行

Vue.component("app_div",{
template:
'<div>\
<slot></slot>\
<ul>\
<slot></slot>\
</ul>\
</div>'
});

复制代码

我们这样几把他的标题和内容都抽象成了两个插槽，这样我们就可以动态的插入我们的数据。
我们把里面的内容也抽象成组件

Vue.component("app_title",{
template:
'<h2>日程</h2>'
})
Vue.component("app_items",{
template:
'<li>吃饭</li>'
})
var vm=new Vue({
el: "#app",
});

复制代码

把它茶人

<body>
<div id="app">
<app_div>
<app_title></app_title>
<app_items></app_items>
</app_div>
</div>
</body>

复制代码

这种插入方式不对，但是是一个简单的插入操作，为的是让我们感受一下这个插入插槽的操作。

下面我们对他进行一些升级
起首把他们插到正确的位置，通过name属性来绑定插入的组件。
起首在组件中绑定

Vue.component("app_div",{
template:
'<div>\
<slot name="app_title"></slot>\
<ul>\
<slot name="app_items"></slot>\
</ul>\
</div>'
});

复制代码

然后在视图层绑定视图层要绑定模板也要绑定命据
模板方面

<app_div>
<app_title slot="app_title"></app_title>
<app_items slot="app_items"></app_items>
</app_div>

复制代码

数据方面
因为我们要在里面添加元素，所以先把组件里面的信息挖空，我们再通过v-bind来绑定data里面的数据

Vue.component("app_title",{
props:['title'],
template:
'<h2>{{title}}</h2>'
})
Vue.component("app_items",{
props: ['item'],
template:
'<li>{{item}}</li>'
})

复制代码

<div id="app">
<app_div>
<app_title slot="app_title" :title="title"></app_title>
<app_items slot="app_items"></app_items>
</app_div>
</div>

复制代码

在下面的data里面添加title，就成了。

我们的大标题就插进来了，下面把目录里面的东西遍历出来。

<app_div>
<app_title slot="app_title" :title="title"></app_title>
<app_items slot="app_items" v-for="item in Items" v-bind:item="item"></app_items>
</app_div>

复制代码

其实很简单就是用for循环来遍历data中Items的数据然后把遍历得到的item赋值给app_items组件的item属性；

末了我们就得到了这样一个看不懂的视图层，但是我们真正的关注到了热门，小题目。
自界说变乱

本日我们要办理的题目说起来其实不难就是删除标签。

简单来说就是这样，但是我们的数据是在Vue对象的data里面存储的，但是表单界说在了组件当中，所以要办理的题目就是在组件中调用一个方法来删除Vue对象中的信息；
对组件增长一个methods里面界说一个remove变乱。在每个信息后面添加一个按钮实验调用组件内部界说的变乱。

Vue.component("app_items",{
props: ['item'],
template: '<li>{{item}} <button @click="remove">删除</button></li>',/*@是v-on的简写，用来绑定事件*/
methods: {
remove: function () {
alert("尝试删除")
}
}
});

复制代码

固然不能在组件里直接删除Vue对象的数据，但是我们可以在Vue对象中删除Vue的data数据。那么我们在vue中界说一个删除方法。
这样要借助js中的splice函数

var vm=new Vue({
el: "#app",
data:{
title:'日程安排',
Items:['吃饭','睡觉','打喷嚏']
},
methods:{
removeItems:function (index) {
this.Items.splice(index,1,"已删除");
}
}
});

复制代码

实验一下。

这个变乱就界说成功了,但是我们不能在视图层中调用这个方法，因为视图层的方法是界说在组件上面的。
修改v-for获取index

<app_items slot="app_items" v-for="(item,index) in Items" v-bind:item="item" :index="index"></app_items>

复制代码

在组件中获取index

props: ['item','index'],
template: '<li>{{index}}--{{item}} <button @click="remove">删除</button></li>',

复制代码

成功获取到index；在视图层绑定Vue对象中的方法；

<app_items slot="app_items" v-for="(item,index) in Items"
v-bind:item="item" :index="index"
v-on:remove="removeItems(index)"
></app_items>

复制代码

此时就涉及到参数传递与变乱分发了，Vue为我们提供了自界说变乱的功能很好的帮助我们办理了这个题目;使用this. e m i t ( ‘自界说变乱名’ , 参数 ) 。 t h i s . emit(‘自界说变乱名’,参数)。this. emit(‘自界说变乱名’,参数)。this.emit(‘自界说变乱名’,参数)在当前组件触发一个自界说变乱。任何额外的参数都会传递给变乱监听器的回调函数。

Vue.component("app_items",{
props: ['item','index'],
template: '<li>{{index}}--{{item}} <button @click="remove">删除</button></li>',
methods: {
remove: function (index) {
this.$emit('remove',index);
}
}
});

复制代码

终于实现了这个删除功能。我们来分析一下这个变乱分发；

自此我们学习了Vue的根本语法如v-on和v-for等。还有网络通讯axios，末了学习了根本的组件和插槽还有自界说变乱分发，就可以做一个简单的单页面应用了，美中不敷的就是现在我们还没有学习请求转发和重定向之类的操作。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)