VUE-TypeScript 登入功能

目录

功能介绍

功能演示

代码演示

---

功能介绍

实现登入功能 请求接口 数据校验 Element使用

 

功能演示

代码演示

LoginView.vue

<template>
  <div class="login-box">
    <el-form
      ref="ruleFormRef"
      :model="data.ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <h2>后台登入</h2>
      <el-form-item label="电话号码" prop="userTelephone">
        <el-input
          v-model.number="data.ruleForm.userTelephone"
          type="userTelephone"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="密码" prop="userPassword">
        <el-input
          v-model="data.ruleForm.userPassword"
          type="userPassword"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          class="loginBtn"
          type="primary"
          @click="submitForm(ruleFormRef)"
          >登入</el-button
        >
        <el-button class="loginBtn" @click="resetForm(ruleFormRef)"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { LoginData } from "../type/login";
import { login } from "@/request/api";
import { useRouter } from "vue-router";

const ruleFormRef = ref<FormInstance>();
//用户输入数据
const data = reactive(new LoginData());
//数据输入规则
const rules = reactive<FormRules>({
  userTelephone: [
    { required: true, message: "请输入电话号码", trigger: "blur" },
    { type: "number", message: "必须为数字",trigger: "blur" },
    {
      pattern: /^(?:0|86|\+86)?1[3-9]\d{9}/,
      message: "请输入正确的手机号码",
      trigger: "blur"
    },
  ],
  userPassword: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
    { min: 6, max: 18, message: "密码长度应在6-18位之间", trigger: "blur" },
  ],
});
const router = useRouter(); //=>this.$router
//后台登入
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  //对表单内容进行验证
  //valid 布尔类型 为true 验证成功
  formEl.validate((valid) => {
    if (valid) {
      //调用登入接口
      login(data.ruleForm).then((res) => {
        console.log(res)
        localStorage.setItem("token", res.data.token);
        router.push("/");
      });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
//重置操作
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style lang="scss" scoped>
//总体样式
.login-box {
  width: 100%;
  height: 100%;
  background: url(../assets/login/login-bt.png) no-repeat center center fixed;
  /*兼容浏览器版本*/
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 1px;
  text-align: center;
  // 输入框样式
  .demo-ruleForm {
    width: 500px;
    margin: 200px auto;
    background-color: bisque;
    padding: 40px;
    border-radius: 20px;
  }
  //提交按钮样式
  .loginBtn {
    width: 48%;
  }
  h2 {
    margin-bottom: 10px;
  }
}
</style>

router index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const LoginView =() => import(/* webpackChunkName: "login" */ '../views/LoginView.vue');

const routes: Array<RouteRecordRaw> = [
  // 首页
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  // 登入
  {
    path: '/login',
    name: 'login',
    component: LoginView
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

type login.ts

export interface LoginForm {
    userTelephone: string
    userPassword: string
}
export class LoginData{
    ruleForm:LoginForm={
        userTelephone: "",
        userPassword:""

    }
}

axios数据封装 

接口请求的配置=>Axios配置 封装 简单使用