iView实现简单的登录注册+浏览器上传文件
登录注册
因为软工大作业的需要，实现了简单的登录注册功能。
下面是登录前端代码：
<Input type="text" placeholder="请输入用户名" v-model="username" style="width: 300px" />
<Input password type="password" placeholder="请输入密码" v-model="password"
style="width: 300px" @on-enter="login"/>
<Button type="success" v-on:click="login">登录</Button>
login函数如下：
login() {
if (this.username == "" || this.password == "") {
this.$Message.warning("请输入用户名或密码");
} else {
this.$Spin.show();
var _this = this;
api.user_login(this.username, this.password, function(response) {
_this.$Spin.hide();
if (response.code == 0) {
_this.$Message.success("登录成功");
_this.$router.push("/home");
} else if (response.code == -101) {
_this.$Message.error("用户名或密码不正确");
} else {
_this.$Message.error("未知错误");
}
});
}
}
其中user_login是一个用来前后端通信的api，使用http通信，传递用户名、加密的密码及后端服务器的返回信息。
在beta阶段，注册添加了邮箱验证的功能：
<Input type="text" placeholder="请输入用户名" v-model="newUsername" style="width: 300px"
@on-blur="check_username" />
<br />
<br />
<Input type="text" placeholder="请输入邮箱" v-model="email" style="width:300px"
@on-blur="check_email"/>
<br />
<br />
<Tooltip content="至少6位，只能为字母数字.@#$-" placement="left" theme='light'>
<Input
type="password"
placeholder="请输入密码"
v-model="newPassword1"
style="width: 300px"
password
@on-blur="check_password"
/>
</Tooltip>
<br />
<br />
<Input
type="password"
placeholder="确认密码"
v-model="newPassword2"
style="width: 300px"
password
@on-blur="check_password"
/>
<br>
<br>
<Input type="text" placeholder="请输入收到的验证码" v-model="captcha" style="width:190px"
@on-enter="register"/>
<Button v-if="butt1" type="info" style="width:110px" ghost @click="send_captcha" >发送验证码</Button>
<Button v-if="butt2" type="info" style="width:110px" ghost disabled>{{time_count}}秒后可重发</Button>
<br>
<br>
<Button type="primary" v-on:click="register" >注册</Button>
效果如下：
浏览器上传本地文件
这里我使用了iView封装好的Upload组件，其底层是使用input实现的：
<Upload :before-upload="handleFiles" action="http" multiple ref="uploadFiles">
<Button
type="primary"
style="border-radius: 0.4vh; margin: 0 auto; width:200px"
:key="isWriteable"
:disabled="!isWriteable"
>上传文件到根目录...</Button>
</Upload>
其中，添加multiple属性可以支持一次性多文件上传，另外该组件可支持文件拖拽上传。
钩子函数handleFiles在点击上传后浏览器读取本地文件内容、获得上传文件名，并在后端创建同名文件，当冲突时报错。
效果如下：
为支持文件夹上传，我在网上查了很多资料，最后使用的vue-simple-uploader的uploader组件：
<uploader @file-success="handleFolder" duplicate="true" ref="uploadFolder">
<uploader-drop>
<uploader-btn :directory="true" >
上传文件夹到根目录...
</uploader-btn>
</uploader-drop>
</uploader>
测试发现，该组件不可重复上传文件，必须刷新才可以，在组内lpx同学的帮助下，找到如下解决方法：
this.$refs.uploadFolder.uploader.cancel()
使用该语句来清除本页面的上传记录。
覆盖浏览器默认快捷键
开发过程中遇到这样一个问题，因为浏览器的tab快捷键行为，在input元素里输入tab会导致它失去焦点，且并没有在input里面输入tab，为了让input元素支持tab键输入不失去焦点，查阅很多资料，终于解决了这个需求：
<textarea ref="input" v-model="input"/>
<script>
this.$refs.input.onkeydown=(e)=>{
if(e.keyCode == 9){
this.insertText(this.$refs.input,"\t")
if(e.preventDefault) {
e.preventDefault();
}
}
}
insertText(obj,str) {
if (document.selection) {
var sel = document.selection.createRange();
sel.text = str;
} else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
var startPos = obj.selectionStart,
endPos = obj.selectionEnd,
cursorPos = startPos,
tmpStr = obj.value;
obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
cursorPos += str.length;
obj.selectionStart = obj.selectionEnd = cursorPos;
} else {
obj.value += str;
}
}
</script>
this.$refs.input获取输入框元素，e表示键盘事件。
e.keyCode == 9当按下tab键时执行if语句，e.preventDefault()阻止tab键的默认行为，然后执行insertText函数获取光标位置并在光标后插入tab。
测试敲入tab，发现成功解决！
