实现登录逻辑和首页header布局

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第25天，点击查看活动详情

创建api文件

在request目录下，创建api.ts,然后导入service，和类型IUserFrom,然后写个函数返回service执行的返回值

import { IUserForm } from "@/type/login";
import service from ".";



export function login(data:IUserForm) {
    return service({
        url: '/login',
        method: 'post',
        data
    })
}

然后在登录页，引入一下这个登录方法，在表单提交的方法里，先使用form组件提供的validate方法校验一下用户输入的用户名和密码是否合法，如果不合法就return false,如果合法就进行登录操作，登录操作也很简单，就是执行login方法，将用户名和密码传入进去，然后这个方法返回的是service({ url: '/login', method: 'post', data })，是一个promise,可以用.then方法接收一下，接口返回

然后判断code是不是200，如果是200表示登录成功，将token存在loaclStorage中，使用router.push跳转到首页，至此登录逻辑就完成了。

    const submitForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.validate((valid) => {
        if (valid) {
          console.log("submit!");
          login(data.userForm).then((res:any) => {
            console.log(res)
            if (res.code == 200) {
              localStorage.setItem("token", res.token);
            }
            router.push('/')
          });
        } else {
          console.log("error submit!");
          return false;
        }
      });
    };

header布局

将首页的代码都删掉，留下一个空的模版，然后找打element-plus复制一个容器，图片就是用的logo,然后中间是标题，直接给个title类名，

<template>
  <div class="common-layout">
    <el-container>
      <el-header hight="80px">
        <el-row :gutter="20">
          <el-col :span="4">
            <img src="./../assets/logo.png" class="logo" />
          </el-col>
          <el-col :span="16">
            <h2 class="title">后台管理系统他</h2>
          </el-col>
          <el-col :span="4"> <div class="quit-login">退出登录</div> </el-col>
        </el-row></el-header
      >
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

写点css美化一下样式，logo设置高60px,因为顶部一共80.给图片10px的margin-top,图片就剧中了，title和退出按钮设置行高80px,然后文本剧中

<style lang="scss" scoped>
.el-header {
  background-color: #ccc;
  height: 80px;
  .logo {
    height: 60px;
    margin-top:10px
  }
  .title,
  .quit-login {
    line-height: 80px;
    text-align: center;
  }
}
</style>

这个样子