【记账本实战】06 记账本实战之登录注册页面(1)

2024-07-17 21:56| 来源: 网络整理| 查看: 265

记账本实战之登录注册页面(1)

目录记账本实战之登录注册页面(1)前言登录注册的必要性登录注册页面制作页面制作页面代码理解添加样式样式代码理解添加公共样式

前言

伙伴们久等了，博主这几天正值期末考试，没时间更新文章，现在考完期末考试了，所以就马不停蹄的来更新文章了，编写文章不易，如果你觉得这篇文章对你有帮助，请给博主点赞收藏评论加关注，你们的关注，将是博主继续编写文章的动力。另外，我也将我的文章教程制作成了 pdf 版，如果大家想的话，可以关注私信博主免费获取 pdf 版的教程，也可以私信博主获取该项目需要用到的素材，再后面的教程中，我也会给出项目的源代码（敬请期待），下面的图片是 pdf 版教程的截图：

在这里插入图片描述

当然，博主也是一个正在学习前端的一员，能力有限，编写的文章也难免会存在错误之处，如果你发现错误，敬请指正！好了，下面进入正文部分。

登录注册的必要性

记账本作为一个工具型项目，用户登录和注册功能确实非常重要，记账本涉及的主要是用户的私有数据，我们需要确保这些数据的安全，通过注册和登录，可以控制对私有数据的访问，只允许经过身份验证和授权的用户访问（数据安全和隐私保护），另外对于记账本这样的工具应用，可能需要根据用户的使用习惯、偏好等提供定制化的服务或推荐。这就需要识别用户身份，并根据其需求和习惯提供相应的内容或服务（提供个性化的服务）。

在本文中，我将带大家完成注册和登录页面的基本制作。

登录注册页面制作

首先我们来看一下我们要完成的效果图，

在这里插入图片描述

页面制作

接着我们在 /src/asstes 文件夹中新建 /img 目录，用来存放项目用到的静态图片，这我们先把 logo 图片复制 img 目录下，然后就可以将 logo 添加到登录页面上了，代码如下：

import Header from "../components/Header.vue"; export default { name: "LoginViews", components: { Header, }, };

然后我们根据提供的效果图，打开 Vant 官网找到表单组件的 Form 组件，复制其模板代码到 Login.vue 文件中，然后再对其进行修改，修改之后的代码如下：

登录没有账号，前往注册注册 import { reactive, toRefs } from "vue"; import Header from "../components/Header.vue"; import axios from "../api/api"; import { Toast } from "vant"; export default { name: "LoginViews", components: { Header, }, setup() { const state = reactive({ username: "", password: "", type: "login", // 登录注册模式切换参数 loading: false, // 点击注册时，让按钮处于加载状态 }); // 提交登录 or 注册表单 const onSubmit = async (values) => { try { if (state.type === "login") { const { data } = await axios.post("/user/login", { username: state.username, password: state.password, }); localStorage.setItem("token", data.token); window.location.href = "/"; } else { state.imgCode = verifyRef.value.imgCode || ""; if ( verifyRef.value.imgCode.toLowerCase() != state.verifyRef.toLowerCase() ) { console.log("verifyRef.value.imgCode", verifyRef.value.imgCode); Toast.fail("验证码错误"); return; } state.loading = true; const { data } = await axios.post("/user/register", { username: state.username, password: state.password, }); Toast.sucess("注册成功"); state.type = "login"; state.loading = false; } } catch (error) { state.loading = false; } }; // 切换登录和注册两种模式 const changeType = (type) => { state.type = type; }; return { ...toRefs(state), onSubmit, changeType, }; }, }; 页面代码理解

首先我们看引入 Header，通过 type 属性来给 title 赋值“登录”或“注册”。然后我们引入 Vant 的表单组件，通过 v-if 结合 type 变量来显示或隐藏。changeType() 函数则为切换方法，在登录页面，点击传 register，通过 js 中的 changeType 进行赋值，赋值完成之后模板能拿到响应式结果，隐藏登录表单，显示注册表单。onSubmit() 为表单提交方法，分别调用登录和注册 API 地址。在 js 的 onSubmit 中，try...catch 写法可以捕获到 /user/register 接口调用异常的情况，如果没成功，我们可以在 catch 中捕获错误，这边的逻辑是将按钮 loading 变量变成 false。

添加样式

接下来我们来给页面添加样式，在引入 Axios 网络框架这篇文章中，我们添加了 Less 预处理器，并且新建了 custom.less 文件，但是我们并没有在 main.js 中引入，我们需要把该文件引入，代码如下：

import "./style/custom.less";

然后我们就可以开始编写我们的登录页面的样式了，请在 Login.vue 底部添加如下代码：

@import url("../style/custom.less"); .auth { height: calc(~"(100% - 46px)"); padding: 30px 20px 0 20px; background-color: @primary-bg; .logo { width: 150px; display: block; margin: 0 auto; margin-bottom: 30px; } .form-wrap { .change-btn { text-align: center; margin: 10px 0; color: @link-color; font-size: 14px; } } } 样式代码理解

@import url('../config/custom.less'); 引入 Less 变量文件，在 custom.less 下补充 link-color 变量的定义：

@link-color: #597fe7;

这样我们在写样式的时候，就以 color: @primary; 的形式引用它了。

我们需要给 .auth 一个高度，但是给 100% 的话，页面会撑开出现滚动条，但是这个页面又不至于会出现滚动条，这就会显得很奇怪。于是通过计算，公用头部组件的高度为 46，所以，我们通过 calc() 方法，动态的计算出页面的高度是 100% - 46px，所以如上述代码所示。

添加公共样式

我们在 /src/style 文件夹中新建 index.css 文件，用于存放项目公共样式，代码如下：

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

接着在 main.js 文件中引入公共样式文件，此时 main.js 的全部代码如下：

import { createApp } from "vue"; import "lib-flexible/flexible"; // 引入 lib-flexible import App from "./App.vue"; import router from "./router"; // 1. 导入路由实例 import "./style/index.css"; // 引入公共样式 import "./style/custom.less"; const app = createApp(App); // 2. 创建 Vue 实例 app.use(router); // 3. 将导入的路由实例 router 注入到 Vue 实例 app 中 app.mount("#app"); // 4. 挂载 Vue 实例

完成到这一步，我以为 .auth 就可以占满页面了，但是当我运行 npm run dev 启动项目，打开浏览器查看效果之后，并没有占满全屏，而是如下图所示：

在这里插入图片描述

这不应该啊，我们明明给 auth 类添加了高度 height: calc(~"(100% - 46px)");，他应该是会占满除去公用头部高度 46px 的啊。好了，这里就不卖关子了，打开开发者调试工具之后，我就找到了原因，我相信聪明的小伙伴也发现了：这里 auth 类的父级并不是 #app，而是一个 div（上图最小的红框），那这个 div 标签是哪里来呢？这个 div 是在 App.vue 中添加的，所以这里我们需要把这个 div 标签删除，删除之后的代码如下：

// 省略其他代码...

此时 auth 的父级就是 #app 了，这样 auth 就可以撑开页面了，我们再来看看浏览器的效果：

在这里插入图片描述好了，进行到这一步，我们就完成了登录注册页面的基本制作，在下一篇文章教程中，我们将会来完善登录和注册页面，并通过 canvas 手写一个验证码组件，然后再规整数据请求入口的容错处理。

【本文地址】

公司简介

联系我们