用户登录注册（一）

2018-08-10

最近一直想尝试一下前后台都由自己来写的项目，但是由于刚接触到Mongdb，所以先尝试做一个小项目，思来想去，就拿前端最基本的注册登录来试一下手吧。环境的搭建和Mongdb数据库的可视化软件配置，我这里就不做多的描述了。

服务端语言的选择

因为前期对node.js学习了一段时间，在选择后台框架时，就选择了Koa，因为使用起来比较方便，文档很全面。

首先来介绍一下Koa,Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造，致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件，而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。

话不多说，先看前台页面的搭建

前台页面的搭建

采用基本的Vue-cli进行基本结构的搭建，因为只是一个登陆注册的页面，所以页面结构很简单，一个首页，注册页、登陆页，以及一个下单页面。
先来看一下首页的效果图

首页这里点击立即下单，判断用户如果有没有登陆，如果vuex中存在用户的token,那么页面直接跳转到下单页面，如果vuex中没有存在用户的token，或者存储用户的token已经过期，那么提示用户你还没有登陆，请先登录再进行下单。

提示用户登录

order(){
      //获取store里面的token
        let token = store.state.user.token;
        if(token){
          //如果存在token，说明已经登录，跳往下单页面
           this.$router.push('/Order');
        }else{
          this.modalShowOneBtn=true;
          this.modalOneBody='您还没有登录，请先登录，再进行下单操作！'
        }
    }

用户登录
验证码由后台直接生成base64的地址，然后前台进行获取，点击图片进行验证码的切换

async get_check_code() {
                let res = await this.$http.api_get_checkcode();
                let {
                    code,
                    msg,
                    data = {}
                } = res.data;
                if (code == 200) {
                    this.img_base64 = data.img;
                    this.user.code_token = data.token;
                }
            }

用户如果已经有账号，那么在输入账号的时候，可以异步获取用户的头像，提升用户的使用体验。
用户头像获取

async get_user_avatar(id) {
               let res = await this.$http.api_getAvatar(id);
               // console.log(res.data);
               let {
                   code,
                   msg,
                   data
               } = res.data;
               if (code == 200) {
                   if(data.userAva.length!==0){
                       this.userAvatar = data.userAva[0].avatar;
                   }else{
                       this.userAvatar = require('../assets/logo.png');
                   }                  
               }
           },

如果没有账号可以随时进行注册，这里用户可以上传头像，我采用了vue-cropper插件进行用户头像的裁剪。
用户注册

upload_img(e) {
                let obj = e.target;
                let file = obj.files[0];
                let temArr = file.name.split(".");
                let file_suffix = temArr[temArr.length - 1];
                if (file_suffix != 'jpg' && file_suffix != 'png' && file_suffix != 'jpeg') {
                    this.$toast.center('上传图片失败，目前只支持jpg,png,jpeg的图片!');
                    return;
                }
                let reader = new FileReader();
                let _self = this;
                reader.onload = function(ev) {
                    _self.cropperData.img = ev.target.result;
                    _self.cropper_box_mark = true;
                }
                reader.readAsDataURL(file);
            }