<template>
    <div class="identifyCode">
        <input type="text" placeholder="验证码" v-model="inputValue" @input="updateMsg">
        <img v-bind:src="imgSrc" alt="点击刷新" @click="refresh">
    </div>
</template>
<script>
    import myAjax from '../fns/ajax.js'
    export default{
        data: ()=>{
            return {
                imgSrc: '', // 验证码图像url
                captcha_id: '', // 验证码id
                inputValue: '', // 用户输入
            };
        },
        created(){
            // 验证码初始化
            this.refresh();
        },
        methods:{
            // 更新校验提醒
            updateMsg(){
                // 更新父组件提示信息
                this.$emit('update', '');
            },
            // 验证码刷新
            refresh(){
                const url = "http://hn216.api.yesapi.cn/?s=App.Captcha.Create&app_key=65C1298539FD9D8D9E6C2908F1AC7231&return_format=data";
                let that = this;
                // 图片刷新
                myAjax(url).then(res=>{
                    let obj = JSON.parse(res);
                    that.captcha_id = obj.data.captcha_id;
                    let base64 = obj.data.captcha_img;
                    that.imgSrc=`data:image/png;base64,${base64}`;
                });
                // 更新校验提醒
                this.updateMsg();
            },
            // 提交按钮触发验证码校验。父组件通过refs调用
            verify(){
                let that = this;
                // 校验请求
                return new Promise((resolve,reject)=>{
                    let url = `http://hn216.api.yesapi.cn/?s=App.Captcha.Verify&app_key=65C1298539FD9D8D9E6C2908F1AC7231&captcha_id=${this.captcha_id}&captcha_code=${this.inputValue}`;
                    // 开始校验
                    myAjax(url).then(res=>{
                        let obj = JSON.parse(res);
                        let answer = obj.data.err_code;
                        let msg = ''; // 验证信息
                        // 0，校验成功，1验证码过期，2验证码错误
                        if(answer == 0){
                            msg = '正确';
                            // 校验成功
                            resolve();
                        }else if(answer == 1){
                            msg = '验证码过期';
                        }else if(answer == 2){
                            msg = '验证码错误';
                            that.refresh();
                        }
                        // 失败，返回校验信息
                        reject(msg);
                    });
                });
            }
        }
    }
</script>
<style scoped>
    .identifyCode{
        text-align: left;
    }
    input{
        box-sizing: border-box;
        width: 50%;
        height: 100%;
        vertical-align: top;
    }
    img{
        vertical-align: top;
        float: right;
        width: 40%;
        height: 100%;
    }
</style>

// 校验对象
function Test(){

}
// 长度校验
Test.prototype.isLength = function(str,minLen,maxLen){
    if(str.length < minLen)return [false, '长度不够'];
    if(str.length > maxLen)return [false, '长度超出限制'];
    return [true, ''];
}
// 字符校验。只是数字和字母
Test.prototype.isCharacter = function(str){
    if(str.length == 0)return [false, '请输入用户名'];
    const regExp = /^(\d|[a-zA-Z])+$/;
    let isTrue = regExp.test(str);
    if(isTrue)return [true, ''];
    return [false, '含有非法字符'];
}

export default new Test();

<template>
    <div class="register">
        <Cross @click.native="closeCur"></Cross>
        <div class="form">
            <div class="item">
                <input class="ipt" type="text" v-model="userName.inputValue" @input="userNameTest" placeholder="用户名：5-10位，仅限字母或数字组合">
                <div class="warn">{{userName.msg}}</div>
            </div>
            <div class="item">
                <input class="ipt" type="password" v-model="password.inputValue" @input="passwordTest" placeholder="密码：4-20位，仅限字母或数字组合">
                <div class="warn">{{password.msg}}</div>
            </div>
            <div class="item">
                <input class="ipt" type="password" v-model="identify.inputValue" @input="identifyTest"  placeholder="确认密码">
                <div class="warn">{{identify.msg}}</div>
            </div>
            <div class="item">
                <IdentifyCode ref="verifyCode" @update="msgUpdate"></IdentifyCode>
                <div class="warn">{{verify.msg}}</div>
            </div>
            <div class="register-btn" @click="submit">注册</div>
        </div>
    </div>
</template>
<script>
    import Cross from './Cross.vue'
    import IdentifyCode from './IdentifyCode.vue'
    import test from '../fns/Test.js'

    export default {
        data:()=>{
            return {
                // 用户名校验信息
                userName: {
                    inputValue: '',
                    isOk: false,
                    msg: '', // 错误提示
                },
                // 密码校验信息
                password: {
                    inputValue: '',
                    isOk: false,
                    msg: '',
                },
                // 确认密码校验信息
                identify: {
                    inputValue: '',
                    isOk: false,
                    msg:'',
                },
                // 图形验证码校验信息
                verify:{
                    // 校验提醒
                    msg: '',
                }
            };
        },
        components: {
            Cross, // 右上角打叉
            IdentifyCode  // 图像验证码
        },
        methods:{
            // 关闭页面
            closeCur(){
                this.$emit('closeCur');
            },
            // 验证用户名
            userNameTest(){
                // 字符限制
                let characterRes = test.isCharacter(this.userName.inputValue);
                this.userName.isOk = characterRes[0];
                this.userName.msg = characterRes[1]; 
                if(characterRes[0]){
                    // 长度限制
                    let lengthRes = test.isLength(this.userName.inputValue, 5, 10);
                    this.userName.isOk = lengthRes[0];
                    this.userName.msg = lengthRes[1]; 
                }
            },
            // 验证密码
            passwordTest(){
                // 字符限制
                let characterRes = test.isCharacter(this.password.inputValue);
                this.password.isOk = characterRes[0];
                this.password.msg = characterRes[1]; 
                if(characterRes[0]){
                    // 长度限制
                    let lengthRes = test.isLength(this.password.inputValue, 4, 20);
                    this.password.isOk = lengthRes[0];
                    this.password.msg = lengthRes[1]; 
                }
            },
            // 确认密码
            identifyTest(){
                if(this.password.inputValue == this.identify.inputValue){
                    this.identify.isOk = true;
                    this.identify.msg = ''; 
                }else{
                    this.identify.isOk = false;
                    this.identify.msg = '密码不一致'; 
                }
            },
            // 获得验证结果
            msgUpdate(res){
                this.verify.msg = res;
            },
            // 提交表单
            submit(){
                let that = this;
                // 格式信息是否都正确
                if(this.userName.isOk && this.password.isOk && this.identify.isOk){
                    // 等着验证码校验成功
                    this.$refs.verifyCode.verify().then(res=>{
                        /////////////////////////////////
                        // 这里做表单提交
                        ////////////////////////////////
                        window.console.log('注册');
                    },errmsg=>{
                        that.verify.msg = errmsg;
                    });
                }else{
                    window.alert('请输入完整');
                }
            }
        }
    }
</script>
<style scoped>
    .register{
        position: fixed;
        padding: 42px 20px 20px;
        left:50%;
        top:50%;
        transform: translateX(-50%) translateY(-50%);
        background-color: white;
    }
    .form{
        text-align: center;
        padding: 20px;
    }
    .form .ipt{
        box-sizing: border-box;
        height:40px;
        width:240px;
    }
    .form .identifyCode{
        height:40px;
        width:240px;
    }
    .form .register-btn{
        box-sizing: border-box;
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: white;
        background-color: rgb(0,100,250);
    }
    .form .register-btn:hover{
        cursor: pointer;
        background-color: rgb(0,120,250);
    }
    .form .register-btn:active{
        background-color: rgb(0,200,250);
    }
    .item{
        margin-bottom: 5px;
    }
    .item:last-child{
        margin-top: 10px;
        margin-bottom: 0; 
    }
    .item .warn{
        padding: 5px;
        font-size: 10px;
        height: 12px;
        line-height: 12px;
        color: red;
        text-align: left;
    }
</style>

<script type="text/javascript">
	var img1 = document.querySelector('#first');
	// 进入
	function enter(img){
		img.setAttribute('class','enter');
	}
	// 离开
	function leave(img){
		img.setAttribute('class','leave');
	}
	// 初始化
	function init(img){
		img.removeAttribute('class');
	}
	// 停留时间
	function lunbo(time){
		// 一个周期时间=进入时间inTime+停留时间stayTime+离开时间leaveTime
		let delay = time+1000;
		setInterval(function(){
			// 进入
			enter(img1);
			// 进入后开始停留，需要inTime+stayTime后开始离开
			setTimeout(function(){
				leave(img1);
			},time+500);
			// 进入开始到离开结束共1个周期时间
			setTimeout(function(){
				init(img1);
			},time + 1000);
		},2*time + 100);
	}
	lunbo(2000);
</script>

// import Vue from 'vue'
// const eventBus = new Vue();
function EventBus(){
	// 观察者集合
	this.watchers = {};
}
// 加入监听
EventBus.prototype.$on = function(eventName, fn){
	if(!this.watchers[eventName])this.watchers[eventName] = [];
	this.watchers[eventName].push(fn);
}
// 触发事件
EventBus.prototype.$emit = function(eventName){
	let args = Array.prototype.slice.call(arguments, 1);
	this.watchers[eventName].forEach(fn=>{
		fn.apply(null,args);
	});
}

export default new EventBus;

// 节流
function throttle(fn, wait){
	let timeId = null;
	return function(){
		let event = arguments[0];
		if(timeId) return;
		timeId = setTimeout(function(){
			fn(event);
			timeId = null;
		}, wait);
	};
}
// 模块模式，点击时单例模式，只观察点击的那一个
function DragControl(){
	// 点击目标
	let current = null;
	// 偏差修缮
	let diffX = 0;
	let diffY = 0;
	// 可拖动元素列表
	const elements = [];
	// 全局监听点击事件，若点击的元素可拖动
	const handlers = {
		// 按下
		mousedown(event){
			if(elements.indexOf(event.target) != -1){
				// 抓取元素
				current = event.target;
				// 相对浏览器初始位置，防止首次点击跳动
				let rectObj = current.getBoundingClientRect();
				// 鼠标距离元素左上角位置
				let left = rectObj.left;
				let top = rectObj.top;
				diffX = event.clientX - left;
				diffY = event.clientY - top;
			}
		},
		// 移动，节流
		mousemove : throttle(function(event){
			// 已点下了
			if(current !== null){
				// 元素跟随鼠标位置
				current.style.left = (event.clientX - diffX) + 'px';
				current.style.top = (event.clientY - diffY) + 'px';
			}
		}, 20),
		// 弹起
		mouseup(){
			// 拖动结束，释放元素
			current = null;
		}
	};
	// 设置在哪个元素里拖动
	function setMouseEvent(fatherEle){
		fatherEle.addEventListener('mousedown',handlers.mousedown);
		// 拖动。节流
		fatherEle.addEventListener('mousemove',handlers.mousemove);
		// 拖动结束
		fatherEle.addEventListener('mouseup',handlers.mouseup);
	}
	// 移除拖动监听
	function removeMouseEvent(fatherEle){
		fatherEle.removeEventListener('mousedown',handlers.mousedown);
		// 拖动。节流
		fatherEle.removeEventListener('mousemove',handlers.mousemove);
		// 拖动结束
		fatherEle.removeEventListener('mouseup',handlers.mouseup);
	}
	// 公共调用接口
	return {
		// 加入可拖动列表
		addElement: function(fatherEle, ele){
			if(elements.length == 0){
				// 设置拖放区域父元素
				setMouseEvent(fatherEle);
			}
			// 当前元素
			elements.push(ele);
		},
		// 移除可拖动元素
		removeElement: function(fatherEle, ele){
			let index = elements.indexOf(ele);
			if(index != -1){
				elements.splice(index, 1);
			}
			// 无要拖放的元素，清楚事件
			if(elements.length == 0){
				removeMouseEvent(fatherEle);
			}
		},
	};
}

export default DragControl();

function myAjax(url){
    return new Promise((resolve,reject)=>{
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    resolve(xhr.responseText);
                }
            }
        }
        xhr.open('get',url,true);
        xhr.send(null);
    });
}

<template>
    <div class="weather">
        <span class="city">{{city}}</span>：
        <span class="temperature">{{temperature}}&#8451;</span>
        <span class="state" v-bind:class="{fine:isFine,cloudy:isCloudy,rain:isRain}">{{state}}</span>
    </div>
</template>
<script>
    import myAjax from '../ajax/ajax.js'
    export default{
        data: ()=>{
            return {
                city: '广州',
                temperature: '21',
                state: '晴',
                isFine: false,
                isCloudy: false,
                isRain: false
            }
        },
        created(){
            myAjax('/weather').then((wea)=>{
                console.log(wea);
                // 返回数据是json字符串
                let weather = JSON.parse(wea);
                this.city = weather.city;
                this.temperature = weather.tem;
                this.state = weather.state;
            });
            // 样式初始化
            let state = this.state;
            if(state == '晴' || state == '多云'){
                this.isFine = true;
            }else if(state == '阴'){
                this.isCloudy = true;
            }else{
                this.isRain = true;
            }
        }
    };
</script>
<style scoped>
    .state.fine{
        color: black;
        background-color: orange;
    }
    .state.cloudy{
        color: white;
        background-color: gray;
    }
    .state.rain{
        color: white;
        background-color: blue;
    }
</style>

// 引入天气请求包装
const getWeather = require('./httpGet.js');
// 天气接口
app.get('/weather', function (req, res) {
    // 获取浏览器客户的ip地址
    let browserIP = req.ip;
    getWeather('183.63.97.94').then(str=>{
        // `{city:${ipCity},tem:${tem},state:${state}}`
        res.send(str);
    });
});

// 代理请求，结合promise

function httpGet(url){
    // http模块
    const http = require('http');
    return new Promise((resolve,reject)=>{
        let str = '';
        http.get(url, (msg)=>{
            if(msg.statusCode == 200){
                msg.setEncoding('utf8');
                msg.on("data",function(chunk){
                    str+=chunk;//监听数据响应，拼接数据片段
                })
                // 接收完成
                msg.on("end",function(){
                    // 返回消息字符串
                    resolve(str);
                });
            }else{
                reject(msg.statusCode);
            }
        });
    });
}
async function getWeather(ipAddress){
    // IP地址
    let ip = ipAddress;
    // 网站会员id
    const app_key = 'xxxxx';
    // 根据ip查询城市
    let url = `http://xxx...xx&app_key=${app_key}&ip=${ip}`;
    let ipCity = '';// 城市
    await httpGet(url).then(str=>{
        // 解析str
        let ipMsg = JSON.parse(str);
        if(ipMsg.ret == 200){
            ipCity = ipMsg.data.data.city;
        }else{
            throw new Error('请求失败'+ipMsg.ret);
        }
    },errStatus=>{
        throw new Error('请求失败'+errStatus);
    });
    ipCity = ipCity.slice(0,-1);
    // 根据城市查询天气
    url = `http://xxx&app_key=${app_key}&city=${ipCity}`;
    let tem = ''; // 温度
    let state = ''; // 天气状况
    await httpGet(url).then(str=>{
        // 解析
        let weatherMsg = JSON.parse(str);
        if(weatherMsg.ret == 200){
            tem = weatherMsg.data.weather.tem;
            state = weatherMsg.data.weather.weather;
        }else{
            throw new Error('请求失败'+ipMsg.ret );
        }
    },errStatus=>{
        throw new Error('请求失败'+errStatus);
    });
    let res = {
        city:ipCity,
        tem,
        state
    };
    return JSON.stringify(res);
}
module.exports = getWeather;