Vue实战开发（一）验证码与登录页面

文章目录

• 前言
• 环境准备
• 页面跳转
• 登录页面
• • 验证码组件
  • 使用组件
  • • 引入组件
    • 页面使用
  • 完整代码

前言

许久不见，最近在怼pytorch头有点小大，不过还好。最近也是要到期末了，所以的话刚刚好准备把这个Springboot和vue 用起来了，把前面的那个white hole 重新用Springboot 重构。当然Django版本的white hole说句大实话我是没变更新了，但是不会放弃，原因看下面的图你就明白了。

那么现在大体重新用vue + element ui 做出来的页面张这个样子。

这个页面也是有参考别人做出来的。
但是这个都不是重点，等我把前端做的差不多的时候会直接开源，也就这个礼拜的事情。问题不大，大的都是后端。
当然本篇博文的目的是登录模块怎么做，这个是一个前后端分离的项目，所以验证码什么的都是前端生成的。

环境准备

我这里由于本机上的还是vue 2 所以这边还是vue2开发的，而且主要是好嫖组件，毕竟不是专业的前端。
这里的话由于某些原因，我这里使用的包管理是 cnpm
不为别的就为了安装的时候不会被雷到。
这里先装一个 vuex 用来管理状态，怎么装一条命令的事情。

页面跳转

之所以要登录是因为主要有这个玩意

代码是这样的（只是针对那个模块的代码）。

登录页面

这里的话先来看看当前的项目结构吧

space就是个人空间了。也是从那里跳转到的。

验证码组件

这个组建的话其实也是从网上搞过来的，很多而且都叫一个名字。

SIdentify

你把这个复制下来就好了，然后放到制定的文件内。

使用组件

现在的话我们需要在登录界面使用这个组件。

引入组件

import SIdentify from "../components/SIdentify"

在需要的位置放入组件即可

页面使用

直接看代码即可，是直接使用element ui 来做的。

完整代码

这里的话就不像其他教程那样了，老卖关子，样式都不给。
这里主要是页面刷新的方法，验证码的验证之类的，还有就是相关的变量的绑定，还是比较重要的。

这里你直接复制都可以，但是注意的是改一下你自己的路由。
效果如下：

还可以看起来。
后面的登录模块也是类似的，到时候验证的时候用 axious 发一个请求验证一下账号密码对不对，然后的话给个token。