iView实现简单的登录注册+浏览器上传文件

登录注册

因为软工大作业的需要，实现了简单的登录注册功能。

下面是登录前端代码：

<Input type="text" placeholder="请输入用户名" v-model="username" style=" 300px" />
<Input  password  type="password" placeholder="请输入密码"  v-model="password"
        style=" 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=" 300px"
      @on-blur="check_username" />

      <br />
      <br />
      <Input type="text" placeholder="请输入邮箱" v-model="email" style="300px"
       @on-blur="check_email"/>
      <br />
      <br />
      <Tooltip content="至少6位，只能为字母数字.@#$-" placement="left" theme='light'>
        <Input
          type="password"
          placeholder="请输入密码"
          v-model="newPassword1"
          style=" 300px"
          password
          @on-blur="check_password"
        />
      </Tooltip>
      <br />
      <br />
      <Input
          type="password"
          placeholder="确认密码"
          v-model="newPassword2"
          style=" 300px"
          password
          @on-blur="check_password"

      />
      <br>
      <br>
      <Input type="text" placeholder="请输入收到的验证码" v-model="captcha" style="190px"
      @on-enter="register"/>
      <Button  v-if="butt1" type="info" style="110px" ghost @click="send_captcha" >发送验证码</Button>
      <Button  v-if="butt2" type="info" style="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; 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,"	")
         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，发现成功解决！