备案控制台
开发者社区 开发与运维 文章 正文

Vue 登录组件工程模板

2024-01-04 44
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 当前工程使用 Vite 构建工具

登录组件工程模板

当前工程使用 Vite 构建工具

路由搭建：

在工程目录下创建一个views目录，该目录下存放完整的页面展示组件，创建 Login.vue 展示页面。

配置工程路由：

pnpm i vue-router --save

创建 router 目录，在 router 目录下创建 index.js 文件：

import {createRouter,createWebHistory} from "vue-router";
// 引入的组件：
import Login from "../views/Login.vue";
const routes=[
    {
        path:"/login",
        name:"Home",
        component:Login
    },
];
const router=createRouter({
    history:createWebHistory(),
    routes
})
export default router;

在 main.js 中挂载路由：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入 router 路由配置：
import router from './router';
// 挂载路由
createApp(App).use(router).mount('#app')

在 App.vue 中引入路由：

<script setup>
</script>
<template>
  <router-view></router-view>
</template>
<style scoped>
</style>

样式编写：

在 Login.vue 组件中配置渐变背景样式：

<template>
  <div id="background">
  </div>
</template>
<script>
  export default {
    name: "Login"
  }
</script>
<!--scoped css 样式生效作用域，指定为当前组件-->
<style scoped>
  #background {
    /*
    position:fixed 固定定位，元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
    */
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    /*
    设置渐变背景：linear-gradient 设置颜色渐变
    */
    background-image: linear-gradient(90deg, cyan, purple);
    background-size: 400%;
    /*
    设置动画效果
    infinite：动画循环
    */
    animation: myAnimation 10s infinite;
  }
  /*
  设置动画的关键帧
  */
  @keyframes myAnimation {
    0% {
      background-position: 0 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
</style>

引入Element UI：

安装 Element UI：

pnpm install element-plus

在 main.js 中引入 ElementUI 并挂载组件库：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入 router 路由配置：
import router from './router';
// 引入 ElementUI：
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 挂载路由
// 挂载UI组件库
createApp(App).use(router).use(ElementPlus).mount('#app')

编写Login.vue：

<template>
  <div id="background">
    <!--logo-->
    <div id="logo">MySystem</div>
    <!--登录框-->
    <div id="login">
      <el-card class="box-card">
        <div id="login_header" class="card-header">
          WellCome
        </div>
        <div id="form">
          <!-- 数据双向绑定 -->
          <el-input size="large" v-model="username" placeholder="请输入账号"/>
          <el-input size="large" v-model="password" type="password" placeholder="请输入密码" show-password/>
          <el-button size="large" type="primary">登录</el-button>
          <el-button size="large" type="primary">注册</el-button>
        </div>
      </el-card>
    </div>
    <!--时间-->
    <div id="clock">
      <!-- 使用{{}}进行插值 -->
      <div id="date">{{ date }}</div>
      <div id="time">{{ time }}</div>
    </div>
    <!-- 版权声明 -->
    <div id="copyright">
      Copyright © 2022 Krian. All RIGHT RESERVED.
    </div>
  </div>
</template>
<script>
export default {
  name: "Login",
  // 使用函数式 data，进行数据双向绑定：
  data() {
    return {
      username: "",
      password: "",
      time: "",
      date: "",
    }
  },
  // 使用 Vue 钩子函数，每秒触发 update_clock 函数：
  mounted() {
    this.$nextTick(() => {
      setInterval(this.update_clock, 1000)
    })
  },
  methods: {
    update_clock: function (e) {
      let d = new Date();
      let year = d.getFullYear();
      let month = d.getMonth();
      month++;  // 月默认是从0开始所以要+1
      if (month < 10) month = "0" + month;
      let day = d.getDay();
      if (day < 10) day = "0" + day;
      let hour = d.getHours();
      if (hour < 10) hour = "0" + hour;
      let minute = d.getMinutes();
      if (minute < 10) minute = "0" + minute;
      let second = d.getSeconds();
      if (second < 10) second = "0" + second
      this.time = hour + ":" + minute + ":" + second;
      this.date = year + "/" + month + "/" + day;
    }
  }
}
</script>
<!--scoped css 样式生效作用域，指定为当前组件-->
<style scoped>
#background {
  /*
  position:fixed 固定定位，元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
  */
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  /*
  设置渐变背景：linear-gradient 设置颜色渐变
  */
  background-image: linear-gradient(90deg, cyan, purple);
  background-size: 400%;
  /*
  设置动画效果
  infinite：动画循环
  */
  animation: myAnimation 10s infinite;
}
/*
设置动画的关键帧
*/
@keyframes myAnimation {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
#logo {
  color: aliceblue;
  font-size: 25px;
  font-weight: 800;
  /*设置文本字母大写*/
  text-transform: uppercase;
  position: absolute;
  top: 15%;
  left: 15%;
}
#login {
  position: absolute;
  top: 30%;
  left: 34%;
}
/*修改 ElementUI 默认的样式*/
.el-card {
  width: 500px;
  height: 280px;
  background-color: rgba(255, 255, 255, 0.4);
  /* 设置圆角边框 */
  border-radius: 15px;
}
#form {
  /*设置行高*/
  line-height: 60px;
  padding-left: 15px;
  padding-right: 15px;
}
#login_header {
  color: aliceblue;
  font-size: 30px;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 20px;
}
#clock {
  color: aliceblue;
  position: absolute;
  top: 70%;
  left: 15%;
  text-align: left;
}
#date {
  font-size: 50px;
  font-weight: 600;
}
#time {
  margin-top: 30px;
  font-size: 25px;
  font-weight: 500;
}
#copyright {
  color: aliceblue;
  position: absolute;
  top: 93%;
  left: 40%;
}
</style>

Axios 搭建：

下载 Axios 到项目工程中：

pnpm install axios --save
pnpm install qs --save

创建 axios.js 文件：

import axios from "axios";
import qs from "qs";
// axios.defaults.baseURL = ''  //正式
// axios.defaults.baseURL = 'http://test' //测试
//post请求头
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";
//设置超时
axios.defaults.timeout = 10000;
axios.interceptors.request.use(
    config => {
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);
axios.interceptors.response.use(
    response => {
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    error => {
        alert(`异常请求：${JSON.stringify(error.message)}`)
    }
);
// 对 Axios 的二次封装：
export default {
    post(url, data) {
        return new Promise((resolve, reject) => {
            axios({
                method: 'post',
                url,
                data: qs.stringify(data),
            })
                .then(res => {
                    resolve(res.data)
                })
                .catch(err => {
                    reject(err)
                });
        })
    },
    get(url, data) {
        return new Promise((resolve, reject) => {
            axios({
                method: 'get',
                url,
                params: data,
            })
                .then(res => {
                    resolve(res.data)
                })
                .catch(err => {
                    reject(err)
                })
        })
    }
};

在main.js 中全局引用 Axios：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入 router 路由配置：
import router from './router';
// 引入 ElementUI：
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入 Axios：
import axios from './static/js/axios';
const app = createApp(App);
//全局配置
app.config.globalProperties.$http=axios;
// 挂载路由
app.use(router)
// 挂载UI组件库
app.use(ElementPlus)
app.mount('#app')

在Login.vue中实现login函数：

<template>
  <div id="background">
    <!--logo-->
    <div id="logo">MySystem</div>
    <!--登录框-->
    <div id="login">
      <el-card class="box-card">
        <div id="login_header" class="card-header">
          WellCome
        </div>
        <div id="form">
          <!-- 数据双向绑定 -->
          <el-input size="large" v-model="username" placeholder="请输入账号"/>
          <el-input size="large" v-model="password" type="password" placeholder="请输入密码" show-password/>
          <el-button size="large" type="primary" v-on:click="userLogin">登录</el-button>
          <el-button size="large" type="primary">注册</el-button>
        </div>
      </el-card>
    </div>
    <!--时间-->
    <div id="clock">
      <!-- 使用{{}}进行插值 -->
      <div id="date">{{ date }}</div>
      <div id="time">{{ time }}</div>
    </div>
    <!-- 版权声明 -->
    <div id="copyright">
      Copyright © 2022 Krian. All RIGHT RESERVED.
    </div>
  </div>
</template>
<script>
  export default {
    name: "Login",
    // 使用函数式 data，进行数据双向绑定：
    data() {
      return {
        username: "",
        password: "",
        time: "",
        date: "",
      }
    },
    // 使用 Vue 钩子函数，每秒触发 update_clock 函数：
    mounted() {
      this.$nextTick(() => {
        setInterval(this.update_clock, 1000)
      })
    },
    methods: {
      // 日期时间计算函数：
      update_clock: function (e) {
        let d = new Date();
        let year = d.getFullYear();
        let month = d.getMonth();
        month++;  // 月默认是从0开始所以要+1
        if (month < 10) month = "0" + month;
        let day = d.getDay();
        if (day < 10) day = "0" + day;
        let hour = d.getHours();
        if (hour < 10) hour = "0" + hour;
        let minute = d.getMinutes();
        if (minute < 10) minute = "0" + minute;
        let second = d.getSeconds();
        if (second < 10) second = "0" + second
        this.time = hour + ":" + minute + ":" + second;
        this.date = year + "/" + month + "/" + day;
      },
      // 登录函数：
      userLogin: function (e) {
        let data = {
          "name": this.username,
          "password": this.password
        }
        this.$http.post("http://127.0.0.1:8080/login", data).then((res) => {
          // 实现路由跳转：
          this.$router.push("/index")
        }).catch((err) => {
          alert(err)
        });
      }
    }
  }
</script>
<!--scoped css 样式生效作用域，指定为当前组件-->
<style scoped>
  #background {
    /*
    position:fixed 固定定位，元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
    */
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    /*
    设置渐变背景：linear-gradient 设置颜色渐变
    */
    background-image: linear-gradient(90deg, cyan, purple);
    background-size: 400%;
    /*
    设置动画效果
    infinite：动画循环
    */
    animation: myAnimation 10s infinite;
  }
  /*
  设置动画的关键帧
  */
  @keyframes myAnimation {
    0% {
      background-position: 0 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
  #logo {
    color: aliceblue;
    font-size: 25px;
    font-weight: 800;
    /*设置文本字母大写*/
    text-transform: uppercase;
    position: absolute;
    top: 15%;
    left: 15%;
  }
  #login {
    position: absolute;
    top: 30%;
    left: 34%;
    }
    /*修改 ElementUI 默认的样式*/
    .el-card {
    width: 500px;
    height: 280px;
    background-color: rgba(255, 255, 255, 0.4);
    /* 设置圆角边框 */
    border-radius: 15px;
    }
    #form {
    /*设置行高*/
    line-height: 60px;
    padding-left: 15px;
    padding-right: 15px;
    }
    #login_header {
    color: aliceblue;
    font-size: 30px;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 20px;
    }
    #clock {
    color: aliceblue;
    position: absolute;
    top: 70%;
    left: 15%;
    text-align: left;
    }
    #date {
    font-size: 50px;
    font-weight: 600;
    }
    #time {
    margin-top: 30px;
    font-size: 25px;
    font-weight: 500;
    }
    #copyright {
    color: aliceblue;
    position: absolute;
    top: 93%;
    left: 40%;
    }
    </style>
文章标签：
JavaScript
关键词：
vue VUE.js
VUE.js组件
vue模板VUE.js
模板VUE.js
VUE.js模板
爱吃糖的范同学
目录
相关文章
东方睿赢
|
4天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略：1) 精简代码和组件拆分以减少冗余；2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由；3) 数据懒加载和防抖节流处理高频事件；4) 图片压缩和选择合适格式，使用CDN加速资源加载；5) 利用浏览器缓存和组件缓存提高效率；6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法，可提升用户在复杂应用中的体验。
东方睿赢
14 0
老板这功能得加钱
|
4天前
|
JavaScript 前端开发
vue(1)，小白看完都会了
vue(1)，小白看完都会了
老板这功能得加钱
12 0
yqcoder
|
3天前
|
JavaScript 开发工具 git
Vue 入门系列：.env 环境变量
Vue 入门系列：.env 环境变量
yqcoder
10 1
咕噜咕噜wy
|
4天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
咕噜咕噜wy
21 0
Vue使用地图以及实现轨迹回放 附完整代码
老板这功能得加钱
|
4天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
老板这功能得加钱
10 0
向画
|
4天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
向画
8 0
阿珊和她的猫
|
4天前
|
JavaScript 前端开发 UED
Vue class和style绑定：动态美化你的组件
Vue class和style绑定：动态美化你的组件
阿珊和她的猫
8 0
阿珊和她的猫
|
4天前
|
JavaScript 前端开发 API
Vue 监听器：让你的应用实时响应变化
Vue 监听器：让你的应用实时响应变化
阿珊和她的猫
8 1
向画
|
4天前
|
JavaScript
vue封装svg
vue封装svg
向画
10 0
向画
|
4天前
|
JavaScript
vue封装面包屑组件
vue封装面包屑组件
向画
8 0

热门文章

最新文章

  • 1
    vue项目开发笔记记录（一）
  • 2
    vue项目实战：实战技巧总结（中）
  • 3
    vue项目开发笔记记录（二）
  • 4
    vue项目使用可选链操作符编译报错问题
  • 5
    vue项目开发笔记记录（四）
  • 6
    乾坤子应用配置(vue3+vite)
  • 7
    vue3+vite项目配置ESlint
  • 8
    vue3+threejs+koa可视化项目——实现登录注册（第三步）
  • 9
    Vue的路由管理：VueRouter的配置和使用
  • 10
    vue3+threejs可视化项目——搭建vue3+ts+antd路由布局（第一步）
  • 1
    在vue中，怎样理解 Vue 的单向数据流？
    24
  • 2
    在vue中，Class 与 Style 如何动态绑定？
    18
  • 3
    在vue中，v-show 与 v-if 有什么区别？
    26
  • 4
    在vue中，如何实现SPA单页面应用的路由管理？
    24
  • 5
    在vue中，说说你对 SPA 单页面的理解，它的优缺点分别是什么？
    44
  • 6
    解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题
    81
  • 7
    Vue中el与data的两种写法
    19
  • 8
    Vue之数据绑定
    15
  • 9
    使用Vue.js、Vuetify和Netlify构建现代化的响应式网站
    47
  • 10
    初识Vue 输出Hello World 及注意事项
    24

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门教程开发文档

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • ROS模板参数动态展示
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考