Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（登录注册页面，验证码）

谁借莪１个温暖的怀抱￠ 2023-09-27 09:16 7阅读 0赞

## 基于 Vue3.x + Vant UI 的多功能记账本（四） ##

--------------------

#### 文章目录 ####

*  基于 Vue3.x + Vant UI 的多功能记账本（四）
 *   *   *  项目演示
         *  1、登录注册页面
         *  2、图片验证码
         *  3、修改 axios
         *  4、写到最后（附源码）

<table> 
 <thead> 
  <tr> 
   <th>系列内容</th> 
   <th>参考链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>基于 Vue3.x + Vant UI 的多功能记账本（一）</td> 
   <td><a href="http://t.csdn.cn/YX8my" rel="nofollow">项目演示，涉及知识点</a></td> 
  </tr> 
  <tr> 
   <td>基于 Vue3.x + Vant UI 的多功能记账本（二）</td> 
   <td><a href="http://t.csdn.cn/kea5q" rel="nofollow">搭建开发环境</a></td> 
  </tr> 
  <tr> 
   <td>基于 Vue3.x + Vant UI 的多功能记账本（三）</td> 
   <td><a href="http://t.csdn.cn/LFr3l" rel="nofollow">开发导航栏及公共部分</a></td> 
  </tr> 
 </tbody> 
</table>

--------------------

#### 项目演示 ####

Vue3 + Vant UI\_多功能记账本

![在这里插入图片描述][5bb1b3f206e74c4b935f282f27fae47d.png]

#### 1、登录注册页面 ####

页面设计，页面跳转

<template>
      
      <Header :title="type == 'login' ? '登录' : '注册'" />
      <div class="auth">
        <img class="logo" src="//s.yezgea02.com/1606836859539/onpeice.png" alt="" />
        
        <van-form class="form-wrap" @submit="onSubmit" v-if="type == 'login'">
          <div class="form">
            
            <van-field
              clearable
              v-model="username"
              name="username"
              label="账号"
              placeholder="请输入账号"
              :rules="[{ required: true, message: '请填写账户' }]"
            />
            
            <van-field
              clearable
              v-model="password"
              type="password"
              name="password"
              label="密码"
              placeholder="请输入密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
          </div>
          <div style="margin: 16px 0">
            <van-button round block type="primary" native-type="submit">
              登录
            </van-button>
            <p @click="chanegType('register')" class="change-btn">
              没有账号，前往注册
            </p>
          </div>
        </van-form>
        
        <van-form class="form-wrap" @submit="onSubmit" v-if="type == 'register'">
          <div class="form">
            <van-field
              clearable
              v-model="username"
              name="username"
              label="账号"
              placeholder="请输入账号"
              :rules="[{ required: true, message: '请填写账号' }]"
            />
            <van-field
              clearable
              v-model="password"
              type="password"
              name="password"
              label="密码"
              placeholder="请输入密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            
            <van-field
              center
              clearable
              label="验证码"
              placeholder="输入验证码"
              v-model="verify"
            >
              
              <template #button>
                
                <VueImgVerify ref="verifyRef" />
              </template>
            </van-field>
          </div>
          <div style="margin: 16px 0">
            <van-button round block type="primary" native-type="submit">
              注册
            </van-button>
            <p @click="chanegType('login')" class="change-btn">登录已有账号</p>
          </div>
        </van-form>
      </div>
    </template>
    
    <script>
    import {
         reactive, toRefs, ref, onMounted } from "vue";
    // 生成验证码的组件
    import VueImgVerify from "../components/VueImageVerify.vue";
    import Header from "../components/Header.vue";
    import axios from "../utils/axios";
    // 轻提示（成功/失败...）
    import {
         Toast } from "vant";
    import router from "../router";
    export default {
        
      name: "Login",
      components: {
        
        VueImgVerify, // 验证码组件
        Header, //公共头组件
      },
      setup() {
        
        // 便于拿到 verifyRef 组件内的实例属性
        const verifyRef = ref(null);
        // 注册登录的相关内容
        const state = reactive({
        
          username: "",
          password: "",
          type: "login", // 登录注册模式切换参数
          verify: "", // 验证码输入框输入的内容
          imgCode: "", // 生成的验证图片内的文字
        });
    
        console.log("verifyRef", verifyRef);
        // 提交登录 or 注册表单
        const onSubmit = async (values) => {
        
          // 登录功能
          if (state.type == "login") {
        
            const {
         data } = await axios.post("/user/login", {
        
              username: state.username,
              password: state.password,
            });
            // 添加 token 到本地存储
            localStorage.setItem("token", data.token);
            window.location.href = "/";
          } else {
        
            // 生成的图片验证码的文字等于验证码组件生成的验证码
            state.imgCode = verifyRef.value.imgCode || "";
            // 如果验证码组件生成的验证码的小写 != 用户输入的验证码的小写，则提示错误
            if (
              verifyRef.value.imgCode.toLowerCase() != state.verify.toLowerCase()
            ) {
        
              console.log("verifyRef.value.imgCode", verifyRef.value.imgCode);
              Toast.fail("验证码错误");
              return;
            }
            // 验证码匹配成功，注册=>注册成功
            await axios.post("/user/register", {
        
              username: state.username,
              password: state.password,
            });
            Toast.success("注册成功");
          }
        };
    
        // 切换登录和注册两种模式
        const chanegType = (type) => {
        
          state.type = type;
        };
    
        return {
        
          ...toRefs(state),
          onSubmit,
          chanegType,
          verifyRef,
        };
      },
    };
    </script>
    
    <style lang='less' scoped>
    @import url("../config/custom.less");
    .auth {
        
      height: calc(~"(100% - 46px)");
      padding: 30px 20px 0 20px;
      background: @primary-bg;
      .logo {
        
        width: 150px;
        display: block;
        margin: 0 auto;
        margin-bottom: 30px;
      }
      .form-wrap {
        
        .form {
        
          border-radius: 10px;
          overflow: hidden;
          .van-cell:first-child {
        
            padding-top: 20px;
          }
          .van-cell:last-child {
        
            padding-bottom: 20px;
          }
        }
      }
      .change-btn {
        
        text-align: center;
        margin: 10px 0;
        color: @link-color;
        font-size: 14px;
      }
    }
    </style>

在 custom.less 下补充 link-color 变量的定义，在写样式的时候，以 color: `@link-color;` 这样的形式引用它

custom.less

@primary: #39be77; // 主题色
    @danger: #fc3c0c; 
    @primary-bg: #f5f5f5;
    @link-color: #597fe7;

当前页面的外层是 \#app、body，作为父级，它们需要先把高度撑开

index.css

body,
    html,
    p {
        
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    * {
        
      box-sizing: border-box;
    }
    
    #app {
        
      height: 100%;
    }

**此时，yarn dev，打开浏览器可以看到…**

![在这里插入图片描述][453db66e2afc41968faac8355b239e2a.png]

#### 2、图片验证码 ####

注：验证码基本上都是由服务端接口提供，然后上报之后由服务端验证是否正确，所以此部分内容可以自行选择是否去做。

<template>
      <div class="img-verify">
        
        <canvas
          ref="verify"
          :width="width"
          :height="height"
          @click="handleDraw"
        ></canvas>
      </div>
    </template>
    <script type="text/ecmascript-6">
    import {
         reactive, onMounted, ref, toRefs } from "vue";
    export default {
        
      setup() {
        
        const verify = ref(null);
        const state = reactive({
        
          pool: "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890", // 字符串
          width: 120,
          height: 40,
          imgCode: "", // 初始化验证码为空
        });
        onMounted(() => {
        
          // 初始化绘制图片验证码
          state.imgCode = draw();
        });
    
        // 点击图片重新绘制
        const handleDraw = () => {
        
          state.imgCode = draw();
        };
    
        // 随机数
        const randomNum = (min, max) => {
        
          return parseInt(Math.random() * (max - min) + min);
        };
        // 随机颜色
        const randomColor = (min, max) => {
        
          const r = randomNum(min, max);
          const g = randomNum(min, max);
          const b = randomNum(min, max);
          return `rgb(${
          r},${
          g},${
          b})`;
        };
    
        // 绘制图片
        const draw = () => {
        
          // 3.填充背景颜色，背景颜色要浅一点
          const ctx = verify.value.getContext("2d");
          // 填充颜色
          ctx.fillStyle = randomColor(180, 230);
          // 填充的位置
          ctx.fillRect(0, 0, state.width, state.height);
          // 定义paramText
          let imgCode = "";
          // 4.随机产生字符串，并且随机旋转
          for (let i = 0; i < 4; i++) {
        
            // 随机的四个字
            const text = state.pool[randomNum(0, state.pool.length)];
            imgCode += text;
            // 随机的字体大小
            const fontSize = randomNum(18, 40);
            // 字体随机的旋转角度
            const deg = randomNum(-30, 30);
            /*
             * 绘制文字并让四个文字在不同的位置显示的思路 :
             * 1、定义字体
             * 2、定义对齐方式
             * 3、填充不同的颜色
             * 4、保存当前的状态（以防止以上的状态受影响）
             * 5、平移 translate()
             * 6、旋转 rotate()
             * 7、填充文字
             * 8、restore 出栈
             * */
            ctx.font = fontSize + "px Simhei";
            ctx.textBaseline = "top";
            ctx.fillStyle = randomColor(80, 150);
            /*
             * save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。
             * 这就允许您临时地改变图像状态，
             * 然后，通过调用 restore() 来恢复以前的值。
             * save是入栈，restore 是出栈。
             * 用来保存Canvas的状态。save 之后，可以调用 Canvas 的平移、放缩、旋转、错切、裁剪等操作。 restore：用来恢复 Canvas 之前保存的状态。防止 save 后对 Canvas 执行的操作对后续的绘制有影响。
             *
             * */
            ctx.save();
            ctx.translate(30 * i + 15, 15);
            ctx.rotate((deg * Math.PI) / 180);
            // fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
            // 请使用 font 属性来定义字体和字号，并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。
            // context.fillText(text,x,y,maxWidth);
            ctx.fillText(text, -15 + 5, -15);
            ctx.restore();
          }
          // 5.随机产生5条干扰线,干扰线的颜色要浅一点
          for (let i = 0; i < 5; i++) {
        
            ctx.beginPath();
            ctx.moveTo(randomNum(0, state.width), randomNum(0, state.height));
            ctx.lineTo(randomNum(0, state.width), randomNum(0, state.height));
            ctx.strokeStyle = randomColor(180, 230);
            ctx.closePath();
            ctx.stroke();
          }
          // 6.随机产生40个干扰的小点
          for (let i = 0; i < 40; i++) {
        
            ctx.beginPath();
            ctx.arc(
              randomNum(0, state.width),
              randomNum(0, state.height),
              1,
              0,
              2 * Math.PI
            );
            ctx.closePath();
            ctx.fillStyle = randomColor(150, 200);
            ctx.fill();
          }
          return imgCode;
        };
    
        return {
        
          ...toRefs(state),
          verify,
          handleDraw,
        };
      },
    };
    </script>
    <style type="text/css">
    .img-verify canvas {
        
      cursor: pointer;
    }
    </style>

**此时，yarn dev，打开浏览器可以看到…**

![在这里插入图片描述][e7d00b7b1d6c4ba29a8c634dacd8ee61.png]

#### 3、修改 axios ####

为避免在页面内请求接口的时候，每次都通过 code 码去判断接口请求是否成功，我们可以这样修改 axios.js 文件

axios.js

import axios from 'axios'
    // 轻提示插件（Vant UI）
    import {
         Toast } from 'vant'
    import router from '../router'
    
    // 根据环境变量切换本地和线上的请求地址
    axios.defaults.baseURL = process.env.NODE_ENV == 'development' ? '/api' : '//47.99.134.126:7008/api'
    // 允许跨域
    axios.defaults.withCredentials = true
    axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
    // token的用户鉴权方式，在请求头的 headers 内添加 token，每次请求都会验证用户信息
    axios.defaults.headers['Authorization'] = `${
          localStorage.getItem('token') || null}`
    axios.defaults.headers.post['Content-Type'] = 'application/json'
    
    axios.interceptors.response.use(res => {
        
      // 返回数据的类型不是对象，则报异常
      if (typeof res.data !== 'object') {
        
        Toast.fail('服务端异常！')
        return Promise.reject(res)
      }
      // code 状态码不是200，则报异常
      if (res.data.code != 200) {
        
        if (res.data.msg) Toast.fail(res.data.msg)
        // code 状态码为 401 代表接口需要登录，继而跳转到登录页面
        if (res.data.code == 401) {
        
          router.push({
         path: '/login' })
        }
        // 返回失败的实例
        return Promise.reject(res.data)
      }
      // code 为 200 时，请求成功，返回数据
      return res.data
    })
    
    export default axios

#### 4、写到最后（附源码） ####

看到这么好的项目，是不是有种想自己做出来的冲动？

如果有，那么说明你非常的想提升自己，想检验自己这段时间的学习成果，这个项目绝对是你的 **不二选择**

**心动不如行动**

那么接下来，一起从0搭建，开始我们基于 **Vue3.x + Vant UI** 的项目之旅吧~

源码在下方 ↓【回复：记账本】即可

[5bb1b3f206e74c4b935f282f27fae47d.png]: https://img-blog.csdnimg.cn/5bb1b3f206e74c4b935f282f27fae47d.png
[453db66e2afc41968faac8355b239e2a.png]: https://img-blog.csdnimg.cn/453db66e2afc41968faac8355b239e2a.png
[e7d00b7b1d6c4ba29a8c634dacd8ee61.png]: https://img-blog.csdnimg.cn/e7d00b7b1d6c4ba29a8c634dacd8ee61.png