2020-11-01

---

前言

**vue3.0项目搭建 以及登录注册和Token的理解**

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、APP项目搭建

1.下载vue3.0

csharpnpm install -g @vue/cli

2.创建项目

vue create 项目名

3.插件配置

{
  "name": "one",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "babel-plugin-import": "^1.13.1",
    "axios": "^0.21.0",
    "element-ui": "^2.4.5",
    "node-sass": "^4.14.1",
    "sass": "^1.27.0",
    "sass-loader": "^7.3.1",
    "vant": "^2.0.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-plugin-component": "^1.1.1",
    "sass-loader": "^7.3.1",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-cli-plugin-vant": "^1.0.1",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

4.目录结构

新增了 css,plugins,utils和directives目录
css里面存放一些公共样式
plugins里面封装了一些方法
utils封装了一些api接口和拦截器
directives里面封装了一些自定义指令

二、登录注册

1.账号密码登录

为了方便维护我这里是封装了一个正则验证的方法放在piugins目录里

import vue from 'vue'


// 账号验证
export function phoneTest(val){
    var reg = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
   if(val==""){
       return "账号不能为空"
   }else if(!reg.test(val)){
      return "账号格式不正确"
   }
       return true
   
}

// 密码验证

export function passwordTest(val){
    console.log(String(val))
    if(val==""){
          return "密码不能为空"
    }else if(String(val).length<6&&String(val)>16){
          return "密码长度必须为6到16位"
    }
    return true
}

首先是验证账号和密码的格式然后再进行接口验证，登陆成功后把后台返回来的token保存到本地并跳转到我的页面

   Signin() {
      console.log(passwordTest(this.loginPass));
      // 账号验证
      if (phoneTest(this.loginTel) != true) {
        this.$toast({
          message: phoneTest(this.loginTel),
          position: "top",
        });

        return false;
      } else if (passwordTest(this.loginPass) != true) {
        // 密码验证
        this.$toast({
          message: passwordTest(this.loginPass),
          position: "top",
        });

        return false;
      } else {
        axios
          .post("http://120.53.31.103:84/api/app/login", {
            mobile: this.loginTel,
            password: this.loginPass,
            type: 1,
          })
          .then((res) => {
            console.log(res);
           if(res.data.code==200){

                localStorage.Token=res.data.data.remember_token
                localStorage.deviceid=res.data.data.device_id
               
               this.$router.push("/my")
           }
            // 把token保存到本地
           


          });
      }
    },

2.手机号验证码登录或注册

1.手机号验证码登录也是首先验证手机号格式，
2.格式正确后在向后台请求验证码，
3.请求验证码期间开启倒计时，
4.获取到验证码之后点击登录按钮向后台发起请求
5.获取到后台返回的数据判断该手机号有没有注册过
6.如果未注册则注册并跳转到设置密码页面。如果注册过则跳转到我的页面
7.这里不管是未注册还是已注册都需要把Token保存到本地
代码如下
代码如下（示例）：

 async logondenglu() {
    let res = await axios
        .post(" http://120.53.31.103:84/api/app/login", {
          mobile: this.tel,
          sms_code: this.msgCode,
          client: 1,
          type: 2,
        })
          if(res.data.code==200){
             
                localStorage.Token=res.data.data.remember_token
                localStorage.deviceid=res.data.data.device_id
           if(res.data.data.is_new==1){
             
                        this.$router.push("/setPass");
          }else{
               this.$router.push("/my");
          }
          }else{
            this.$toast({
          message:"验证码错误",
          position: "top",
        });
          }

          console.log(res); // 是否注册过
          
         
      
    },
    // 倒计时结束时触发样式改变
    timeend() {
      this.timeOut = false;
      this.getCode = true;
      this.$refs.countDown.reset();
    },
```csharp



# 三.Token理解
 在这里我简单说下个人对Token的理解
 
 **首先token是一个加密过的字符，它一般是在注册登录功能里面使用，我们可以通过它来判断用户的登录状态并且把它放在请求头上可以获取到对应用户的数据**
  


# 总结
不知道该总结些什么，这个博客内容说实话非常粗糙没有什么好总结的，说些自己的人生感触，在这个信息大爆炸的时代，我们在通过网络获取有用的信息的同时也很容易被一些不正确言论改变我们的思想
借用鲁迅先生的一句话
 *愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃流的话*