Vue后台管理系统项目——实现登录功能

Minnor

已于 2022-06-01 16:20:49 修改

阅读量7.5k

点赞数 10

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-06-01 16:09:43 首次发布

本文链接：https://blog.csdn.net/holive_9/article/details/125085085

版权

文章目录

- - 登录功能

登录功能

1. 登录业务流程

在登录页输入用户名和密码
点击登录按钮，调用后台接口进行验证
通过验证后，根据后台的响应状态跳转到项目主页

2. 登录业务相关技术点

http 是无状态的

登录成功后需要记录用户的登录状态，有以下两种方案：

通过 cookie 在客户端记录状态
通过 session 在服务端记录状态
通过 token 方式维持状态

那么这两种方案该如何选择呢？

前端与后台接口不存在跨域问题时，推荐使用 cookie 和 session 来记录登录状态；

存在跨域问题时，推荐使用 token 方式来维持状态

跨域：协议、域名、端口号只要有一个不一样就是跨域

3. 登录—— token 原理分析

在这里插入图片描述

4. 登录功能的实现（都记牢点）

登录页面的布局

通过 Element-UI 组件来实现布局

el-form：整个登录框是一个form
el-form-item：用户名，密码，登录和重置按钮都属于表单item项，有3个
el-input
el-button
字体图标

打开项目之后，先打开终端输入 git status 查看一下当前工作区是否干净，然后创建新分支，注意哦，在实际开发中，当我们要开发一个新功能时，尽量把新功能放到新分支去进行开发

查看工作区是否干净

PS D:\前端学习路程\Vue\vue_shop> git status
On branch master
Your branch is up to date with 'origin/master'.

nothing to commit, working tree clean

创建新分支login

PS D:\前端学习路程\Vue\vue_shop> git checkout -b login
Switched to a new branch 'login'

查看项目主分支和所有分支

PS D:\前端学习路程\Vue\vue_shop> git branch
* login
  master

在绘制登录页面之前，我们需要先对项目的结构进行梳理，将不必要的代码以及组件清除掉，在梳理前，要查看一下项目的运行效果，可以直接在终端输入

npm run serve

或者是打开vue可视化面板，在菜单中选择任务，运行serve命令，等待编译完成然后点击启动app

清空 App 组件的内容，重新运行前，如果下载了ESlint的话，记得关闭语法检查，在vue.config.js文件夹中添加lintOnSave:false然后再重新运行，否则报错

创建登录组件

定义Login组件

<template>
  <div>登录组件</div>
</template>

<script>
export default {
     
  name: "Login",
};
</script>

<style lang="less" scoped>
</style>

在route/index.js文件中通过路由的形式把它渲染到App根组件中，先导入Login组件，然后在路由规则数组中导入一个新的路由规则

在App根组件中放置一个路由占位符<router-view>

<template>
  <div class="app">
    <router-view></router-view>        <!-- 3.添加占位符 -->
  </div>
</template>

<script>
export default {
     
  name: "app",
};
</script>

<style>
</style>

添加重定向路由规则，使得访问根组件时会自动重定向到login组件中

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'   //1.先导入Login组件

Vue.use(VueRouter)

const router = new VueRouter({
     
  routes: [
    {
     
      path: '/',
      redirect: '/login'                       //4.添加重定向路由规则
    },
    {
     
      path: '/login',                          //2.然后导入一个新的路由规则
      component: Login
    }
  ]
})

export default router

登录组件页面布局

如果使用的是less语法，运行后会报错，需要提前下载好less和less-loader，注意版本

在终端输入命令

npm install less less-loader --save-dev

npm install less --save-dev

在这里插入图片描述

设置背景颜色

这里我有一个疑惑点：为什么需要设置一个全局样式表，将html，body，#app撑满整个浏览器？
将登录盒子login_box设置为居中，有很多方法，要熟练掌握哦！

https://vue3js.cn/interview/css/center.html#%E4%B8%80%E3%80%81%E8%83%8C%E6%99%AF

登录组件头部布局

绘制顶部默认头像区域

在这里插入图片描述

登录组件表单布局

绘制登录表单区域，需要用到Element-UI组件，找到plugins/element.js文件导入所需的element ui组件

import Vue from 'vue'
import {
    Button } from 'element-ui'
import {
    Form, FormItem } from "element-ui";
import {
    Input } from "element-ui";

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

一些疑惑点

为什么表单添加了绝对定位之后，会缩小成那么一点大？
注意CSS3 box-sizing：border-box 的使用

登录组件表单小图标布局

在element ui组件库中找到input输入框，找到带icon的输入框，可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
注意：如果图标不存在的话，就需要从外部引入，fonts文件夹放入assets文件夹中