【vue3+ts后台管理】登录页面完成

最新推荐文章于 2024-03-26 18:00:09 发布
最新推荐文章于 2024-03-26 18:00:09 发布
阅读量7.3k 收藏 50
点赞数 3
分类专栏： Vue学习笔记 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010356768/article/details/125661832
版权

创建登录页面及其路由

创建 LoginView.vue，先随便写点什么

修改 index.ts 增加登录页的路由

const routes: Array<RouteRecordRaw> = [
  {...},
  {...},
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/LoginView.vue')
  }
]

然后在浏览器输入http://localhost:8080/login即可跳转登录页

登录页样式完成

修改 App.vue 完成基本样式

<template>
  <router-view/>
</template>

<style lang="scss">
*{
  padding: 0px;
  margin: 0px;
}

html,body,#app{
  width: 100%;
  height: 100%;
}
</style>

在Element plus 组件Form表单-自定义校验规则一节中，我们复制这里的代码，且进行修改即可。同时，把表单中需要的数据创建出来。其中关于表单验证可以参考：表单校验

LoginView.vue

<template>
  <div class="login-box">
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="80px"
        class="demo-ruleForm"
    >
      <h2>后台管理系统</h2>
      <el-form-item label="账号：" prop="username">
        <el-input v-model="ruleForm.username" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="login-btn" @click="submitForm(ruleFormRef)"
        >登录
        </el-button
        >
        <el-button class="login-btn" @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs} from "vue";

export default defineComponent({
  setup() {
    const data = reactive({
      ruleForm: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 3, max: 10, message: '账号的长度在3-10之间', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 10, message: '密码的长度在3-10之间', trigger: 'blur'},
        ],
      }
    })

    return {
      ...toRefs(data)
    }
  },
});
</script>

<style lang="scss" scoped>
.login-box {
  width: 100%;
  height: 100%;
  background: url("../assets/login-bg.jpeg");
  text-align: center;
  padding: 1px;
  .demo-ruleForm{
    width: 500px;
    margin: 200px auto;
    background: #ffffff;
    padding: 40px;
    border-radius: 5px;
  }
  .login-btn{
    width: 48%;
  }
  h2{
    margin-bottom: 20px;
  }
}
</style>

运行程序，页面如下：
在这里插入图片描述

使用ts对数据类型进行规范

src 下新建 type 文件夹，其中新建 login.ts

export interface LoginForm {
    username: string
    password: string
}

export class LoginData {
    ruleForm: LoginForm = {
        username: "",
        password: ""
    }
}

修改 LoginView.vue

<script lang="ts">
import {defineComponent, reactive, toRefs} from "vue";
import {LoginData} from "@/type/login";

export default defineComponent({
  setup() {
    const data = reactive(new LoginData())

    const rules = {
      username: [
        {required: true, message: '请输入账号', trigger: 'blur'},
        {min: 3, max: 10, message: '账号的长度在3-10之间', trigger: 'blur'},
      ],
          password: [
        {required: true, message: '请输入密码', trigger: 'blur'},
        {min: 3, max: 10, message: '密码的长度在3-10之间', trigger: 'blur'},
      ],
    }

    return {
      ...toRefs(data),
      rules
    }
  },
});
</script>

重置

<el-button class="login-btn" @click="resetForm">重置</el-button>

<script lang="ts">
......

export default defineComponent({
  setup() {
  	......
    const resetForm = () => {
      data.ruleForm.username = "";
      data.ruleForm.password = "";
    }

    return {
      ...
      resetForm
    }
  },
});
</script>

封装axios

baseUrl:
https://www.fastmock.site/mock/bf1fcb3c2e2945669c2c8d0ecb8009b8/api

登录接口
地址:/login
方式: post
参数: username && password

商品列表接口
地址: /getGoodsList
方式: get

用户列表接口
地址: /getUserList
方式: get

角色列表接口
地址: /getRoleList
方式: get

权限列表接口
地址: /getAuthorityList
方式: get

首先我们需要安装 axios，执行npm install axios

在 src 下新建 request 文件夹，其中新建 index.ts

import axios from 'axios'

//创建axios实例
const service = axios.create({
    baseURL: 'https://www.fastmock.site/mock/bf1fcb3c2e2945669c2c8d0ecb8009b8/api',
    timeout: 5000,
    headers: {'Content-Type': 'application/json;charset=utf-8'}
});
//请求拦截
service.interceptors.request.use((config)=>{
    config.headers = config.headers || {}
    if(localStorage.getItem('token')){
        config.headers.token = localStorage.getItem('token') || ''
    }
    return config
})
//响应拦截
service.interceptors.response.use((res)=>{
    const code:number = res.data.code
    if(code != 200){
        return Promise.reject(res.data)
    }
    return res.data
},(error)=>{
    console.log(error)
})
export default service

登录逻辑的实现

request 下新建 api.ts

import service from "@/request/index";
interface loginData{
    username:string,
    password:string
}
export function login(data:loginData){
    return service({
        url:'/login',
        method:'post',
        data
    })
}

根据表单-自定义校验规则中的源码提交相关逻辑可以直接复制过来

LoginView完整代码如下：

<template>
  <div class="login-box">
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="80px"
        class="demo-ruleForm"
    >
      <h2>后台管理系统</h2>
      <el-form-item label="账号：" prop="username">
        <el-input v-model="ruleForm.username" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="login-btn" @click="submitForm(ruleFormRef)"
        >登录
        </el-button
        >
        <el-button class="login-btn" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

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

export default defineComponent({
  setup() {
    const data = reactive(new LoginData())
    const rules = {
      username: [
        {required: true, message: '请输入账号', trigger: 'blur'},
        {min: 3, max: 10, message: '账号的长度在3-10之间', trigger: 'blur'},
      ],
          password: [
        {required: true, message: '请输入密码', trigger: 'blur'},
        {min: 3, max: 10, message: '密码的长度在3-10之间', trigger: 'blur'},
      ],
    }
    const ruleFormRef = ref<FormInstance>()
    const router = useRouter()
    const submitForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return
      formEl.validate((valid) => {
        if (valid) {
          login(data.ruleForm).then((res)=>{
            //console.log(res)
            //保存token
            localStorage.setItem("token",res.data.token)
            //跳转
            router.push('/')
          })
        } else {
          console.log('error submit!')
          return false
        }
      })
    }
    //重置
    const resetForm = () => {
      data.ruleForm.username = "";
      data.ruleForm.password = "";
    }

    return {
      ...toRefs(data),
      rules,
      resetForm,
      ruleFormRef,
      submitForm
    }
  },
});
</script>

<style lang="scss" scoped>
.login-box {
  width: 100%;
  height: 100%;
  background: url("../assets/login-bg.jpeg");
  text-align: center;
  padding: 1px;
  .demo-ruleForm{
    width: 500px;
    margin: 200px auto;
    background: #ffffff;
    padding: 40px;
    border-radius: 5px;
  }
  .login-btn{
    width: 48%;
  }
  h2{
    margin-bottom: 20px;
  }
}
</style>

由于我们的接口是模拟登录，所以正确的账号密码分别是：
账号：admin
密码：123456

当我们点击登录时，可以输出 res 来看下返回结果：
在这里插入图片描述
运行程序结果如下：
在这里插入图片描述

Errol_King
关注
  • 3
    点赞
  • 踩
  • 50
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue3+ts+ElementUI后台管理
08-04
Vue3+TypeScript实战项目，用 ElementUI 搭建页面，完成登录、商品列表、用户列表、角色列表、退出登录。通过页面展示、搜索、分页、编辑等功能的实现练习怎么在vue3中使用TypeScript。 原博客地址：https://blog.csdn.net/u010356768/article/details/125594649
vue3完整的登录页面,element-plus
2302_79777012的博客
01-19 1226
【代码】vue3完整的登录页面,element-plus。
vue3+ts+elementplus写一个登录页面教程
最新发布
肥晨开发的学习之路
03-26 1230
前期准备步骤：创建一个使用 Vue 3 和 TypeScript 的登录页面涉及到多个步骤。
TS项目实战四：ts+vue3+elementplus实现登录注册功能
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
03-08 1269
使用vue3+elementplus+vite+pinia实现用户登录、注册相关界面及对应业务流程的开发，对接express后端服务，调用对应接口，实现完整的用户登录注册功能。TS实战项目三十：Vue3项目创建TS实战项目三十：Vue3项目创建。
Vue案例详解(七):制作登录页面
柳老师的博客
07-08 4711
本篇文章写于2023年7月8日,使用的包和工具基本上都是最新的(Vue3, VS code),如果你查看的时间比较晚,请注意版本的区别.前面几篇文章介绍了Vue的使用,项目的搭建和一些基本信息.Vue3案例详解(一)_flame.liu的博客-CSDN博客Vue3案例详解(二)_flame.liu的博客-CSDN博客Vue3案例详解(三)_flame.liu的博客-CSDN博客Vue3案例详解(四)_flame.liu的博客-CSDN博客Vue3案例详解(五)_flame.liu的博客-CSDN博客。
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口
04-10
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口 预览:http://dongnan185.com:8083/videos/vue3.mp4 一共两个包： 一个接口包 连的本地postgresql 表及信息有截图 库自己装 一个vue包 vite+vue3+ts+eleplus 配置了router vuex axios postcss-px-to-viewport界面自适应 env prod环境等 启动:均是 npm i npm start 仅供学习哈 也在慢慢完善中
Vue3入门笔记----登录功能
panzhixiang
11-15 1万+
通过axios、jwt和vuex实现登录功能
vue 3 项目实战一（绘制登录界面）
qq_41045128的博客
07-07 2万+
本文记录了项目实现的详细步骤以及原理，十分适合初学vue的萌新练手。
Vue3 第二十八篇：常用页面：登录页
Good Luck
06-25 3493
JSX组件 CSS样式：
搭建Vue3 后台管理框架 —— 登录页面
音乐木鱼
08-29 5435
源码地址可以下载，可以切片。
Vue3常规登录页面模板
sybkl的博客
07-23 6552
vue3（JavaScript）登录页面模板，包含element-plus，scss，axios
利用vue3+ts实现管理后台（增删改查）
01-18
简单的管理后台基本上就是数据的增删改查。主要就是 列表 + form 表单。每个页面的逻辑基本上都相同。不同的地方就是每个页面需要调用的具体 API 及参数。 以前 vue2 的时候最简单的做法是写出来一个页面的逻辑，然后直接 copy 到各个页面中，修改 API 及参数即可。高级一点的是利用 mixin 函数，将可复用逻辑抽离，每个页面引入 mixin。 vue3 之后新增了composition API。本文就是利用composition API，将可复用的逻辑抽离到composition API中，并引入ts，实现一个简单的管理后台功能。 利用@vue/cli创建项目 首先需要将 @v
运营后台管理系统（vue3+ts)
08-04
从0到1的项目搭建，合理设计本项目的权限管理，权限分配，页面级权限和按钮级权限的控制，除了正常的增删改查功能以外，还有数据大屏的展示，以及暗黑模式和主题颜色的切换。
vue3 + ts 基于elementplus 后台管理系统模板.zip
05-13
vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管
Vue3+elementplus搭建通用管理系统实例二：登录界面的规划及实现
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
08-13 6240
使用vue3+elementplus实现通用管理系统框架实例，实现两种风格的登录界面搭建及短信验证登录、用户名密码登录、二维码扫码登录等方式的登录逻辑实现。
vue3_ts setup语法糖做一个登录注册
热门推荐
编程知识分享，主打前端
03-26 3万+
vue3 ts 语法糖搭建一个简单的登录系统平台
使用vue3做的一个比较满意的登陆页面
06-07 5460
页面展示：分为三部分，账号登陆页，token登陆页，账号注册页。
Vue3实现好看的登录页面
张晓健的博客
06-14 7599
【代码】非常好看的登录页面（Vue3）
Vue3+Element-Plus 登录组件页面布局完善 八
码侬人生
11-10 9452
3.3 登录页面的布局 1.通过Element-UI 组件实现布局 el-form el-form-item el-input el-button 字体图标 ①如图，之前也介绍过。最外面是一个el-form 表单，里面的每一行，都是一个form-item项。其中每一个输入框都是一个input组件，下面的两个按钮都属于el-button,包括输入框左则都会用到一些字体图标。 ② 首先打开Element-UI 官网 组件 | Element，找到Form表单。复制表单，按需复制进行修改...
vue3+TS后台管理员中心页面代码
07-17
当然，下面是一个示例的Vue 3和TypeScript结合的后台管理员中心页面代码： ```html <h1>Welcome to Admin Center <!-- Sidebar content here --> <!-- Main content here --> <script lang="ts">...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值