前端:vue3+ts,后端:koa2+jwt,实现登陆功能(前端部分)

简介: 前端:vue3+ts,后端:koa2+jwt,实现登陆功能(前端部分)

准备工作



搭建项目和一些基础的封装准备

# vue3+ts项目搭建和封装(上篇)

# vue3+ts项目搭建和封装(下篇)


搭建页面



我是用了vue3+element-plus来搭建的项目,所以登陆也是用了element-plus的el-form组件


页面骨架部分


<template>
  <div class="login-wrapper">
      <div class="modal">
          <el-form :model="user" status-icon :rules="rules" ref="userForm">
              <div class="title">火星</div>
              <el-form-item prop="username">
                  <el-input type='text' prefix-icon="el-icon-user" v-model="user.username" />
              </el-form-item>
              <el-form-item prop="password">
                  <el-input type='password' prefix-icon="el-icon-view" v-model="user.password" />
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" class="btn-login" @click="login">登录</el-button>
              </el-form-item>
          </el-form>
      </div>
  </div>
</template>
复制代码


model是绑定的用户输入参数, rules是输入的规则, ref是绑定的dom对象


页面css部分


<style lang="scss">
.login-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9fcff;
  width: 100vw;
  height: 100vh;
  .modal{
    width: 500px;
    padding: 50px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 10px 5px #ddd;
    .title{
      font-size: 50px;
      line-height: 1.5;
      text-align: center;
      margin-bottom: 30px;
    }
    .btn-login{
      width: 100%;
    }
  }
}
</style>
复制代码


css是用的sass写法。


js部分


<script>
export default {
  name: 'login',
  data() {
    return {
        user: {
          username: 'admin',
          password: 'admin'
        },
        rules: {
            /**
             * required: 是否输入
             * message: 提示信息
             * trigger:当失去锚点的时候,触发
             **/
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        }
    }
  },
  methods: {
      login() {
          this.$refs.userForm.validate(( valid ) => {
              // 当输入完成的时候,确定都输入有值
              if(valid) {
                this.$api.login(this.user).then(r => {
                    console.log(r)
                }).catch(e => {
                    console.log(e)
                })
              } else {
                return false
              }
          })
      }
  },
}
</script>
复制代码


el-form文档说明


网络异常,图片无法展示
|


至此,前端login页面基本完成,然后就是把页面挂载到router上面


挂载路由



import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '@/components/Home.vue'
const routes = [
    { name: 'login', path: '/login', meta: { title: '登录' }, component: () => import('@/views/Login.vue') }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router
复制代码


页面组成部分


网络异常,图片无法展示
|

相关文章
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
131 2
|
7天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
20天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
20天前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
25天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
26天前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
1月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
89 4
|
10天前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
|
1月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
19 1
|
1月前
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
80 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化

热门文章

最新文章