程序员经验分享-hwhale

基于Vue实现的用户可注册登录的Todo-List清单

2023-11-06

用到技术

  1. Vue
  2. 脚手架
  3. 路由
  4. element-UI

文件目录

  1. src
    1. components
      1. Enter.vue
      2. MyBanner.vue
      3. MyFooter.vue
      4. MyHeader.vue
      5. MyItem.vue
      6. MyList.vue
    2. pages
      1. Login.vue
      2. Regist.vue
      3. Time.vue
      4. Todolist.vue
    3. router
      1. index.js
    4. App.vue
    5. main.js

实现步骤

整个页面分为两个模块,顶部的Banner,显示欢迎词和用户下面需要的登录 注册 倒计时页面 重新登录操作

下面对应四个按钮的组件,用路由来实现切换

在这里插入图片描述

主要内容(todo清单)

四个组件:

  1. 头部MyHeader
  2. 中间内容:MyList
    1. MyItem
  3. 底部:MyFooter

在这里插入图片描述

倒计时页面

主要需要计算这五个属性,然后将数据放入页面中即可,具体代码后面代码链接有

在这里插入图片描述

登录、注册组件

两个input输入表单内容

在这里插入图片描述

路由

通过编程式路由进行 组件间跳转，巧妙运用push入栈和replace覆盖原站保护用户信息安全

源码

需要通过VsCode脚手架环境运行该文件项目，找到src目录下的文件运行即可

链接：https://pan.baidu.com/s/1poYKKa4EgcLEgz7P7CLwdQ?pwd=ae69
提取码：ae69

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

前端

vuejs

基于Vue实现的用户可注册登录的Todo-List清单 的相关文章

随机推荐

  • Pytorch CAM特征可视化

    背景 类别激活映射 Class Activation Mapping CAM 用于对深度学习特征可视化 通过特征响应定位图像的关键部位 为深度学习可解释性提供了一种方法 ACM以热力图的方式展示了图像局部响应的强弱信息 对应于更强的位置具有

  • 无线打印机服务器安全吗,注意安全 彻底拒绝打印机被非法共享

    为了提高打印机的利用率 不少单位往往会通过局域网对打印机进行共享使用 不过这样一来 局域网内的非法用户也有可能趁机使用共享打印机 从而造成打印成本的 节节攀升 为了阻止非法用户对打印机随意进行共享 本文特意总结了以下几则 拒绝 妙招 相信这

  • 2021 Android面经及求职总结

    投递情况 主要投递了国内和国外的互联网公司 同时也投递了一些币圈企业 最终斩获battmd offer和一币圈的百万年薪offer 关于如何准备面试 可以关注我的面试准备系列文章如何准备一场技术面试 offer斩获情况 大大小小共12家公司

  • K8S学习之Statefulset

    Statefulset概念 应用场景包括 1 稳定的持久化存储 即Pod重新调度后还是能访问到相同的持久化数据 基于PVC来实现 2 稳定的网络标志 即Pod重新调度后其PodName和HostName不变 基于Headless Servi

  • MySQL 异步复制源自动故障转移

    1 异步复制源架构 1 1基于主从复制的异步复制源 从MySQL 8 0 22开始支持异步连接故障转移机制 我们可以在一套主从复制架构的基础上 创建一个异步复制连接的Replica副本 当主从复制Source发生意外宕机 业务提升Repli

  • Nethereum：.NET应用和以太坊智能合约的桥梁

    Nethereum基本上是目前唯一可用的 NET平台下的web3 js移植包 在这个教程中 我们将首先编写并部署一个简单的智能合约 然后创建一个简单的 NET应用 并使用Nethereum来访问以太坊上的智能合约 Nethereum是通过以

  • vim编辑文件出错: Another program may be editing the same file.An edit session for this file crashed.

    以下是错误详细代码 E325 ATTENTION Found a swap file by the name schema xml swp owned by root dated Thu May 28 21 19 42 2020 file

  • mvcc匹配规则

    1 当前快照读读出的事务id

  • Oracle＜--＞MySQL

    to char 123 456 FM9 990 09 format 123 456 2 default en US 9 999 999 to char 123 cast 123 as unsigned int unsigned signed

  • 软件测试工具比较

    软件测试工具比较 作者 乔元 来源 无忧软件测试网 http www csai cn 2005年11月18日 随着软件测试的地位逐步提高 测试的重要性逐步显现 测试工具的应用已经成为了普遍的趋势 目前用于测试的工具已经比较多了 这些测试工具

  • 在Ubuntu16.04上安装QQ

    在Ubuntu16 04上安装QQ 霾大 1 个月前 最近装了双系统win10 ubuntu16 04 想在ubuntu上装个QQ 然后发现 在网上找了不少教程 都是装的wine qq 装了才发现显示版本过低 登不上去啊 后来发现用cros

  • MySQL数据库（二）SQL语言和数据类型

    成功不易 加倍努力 1 SQL语言 1 1 关系型数据库的常见组件 1 2 SQL语言的兴起与语法标准 2 管理数据库 2 1 创建数据库 2 2 修改数据库 2 3 删除数据库 2 4 查看数据库列表 3 数据类型 3 1 整数型 3 2

  • linux定时调用存储过程,linux下crontab定时执行shell脚本调用oracle 存储过程

    问题 脚本内调用存储过程 脚本直接执行没问题 使用crontab 执行脚本存储过程未执行 原因 缺少oracle环境变量 解决 在shell脚本里添加oracle的环境变量 bin sh PATH PATH HOME bin 环境变量 ex

  • 获取层级（结构树）

    public ResponseDTO

  • 使用typescript去简单的写一个时间显示的canvas小球

    在学习完了ts后 一直想找一个项目练手 可网上开源的项目 写的ts项目 还是有点复杂 不太适合刚刚学完ts想练手的同学 于是就打算自己写一个 ts小项目 大概需求就是 1 可以根据当前时间 用canvas绘制一个时间 2 可以每隔一秒 收集

  • ld 链接程序出错定位

    工具链相关问题 一般可 verbose 下 看看具体什么地方出问题 设置 LDFLAGS Wl verbose 例如 链接一堆 o文件 只有以下错误信息 ld final link failed Bad value 就可以加入 Wl ver

  • python3 中的import 和from import 使用区别（包和模块）

    python3 中的import 和from import 使用区别 包和模块 1 知识点 1 什么是包 什么是模块 2 import from import 如何使用 3 import 和 from import 使用区别 2 实现 以如

  • 【Flink】第一节 源码编译

    我认识以及改造flink的第一步从下载编译源码开始 0 环境 idea java 1 8 scala 2 12 flink 1 16 maven setting 核心 nodejs 这个去官网下载安装一下就好 npm v 显示成功就好 文末

  • 百度编程大赛试题----类似九格宫(C++算法实现)

    转载请标明是引用于 http blog csdn net chenyujing1234 欢迎大家提出意见 一起讨论 在网上有讲到 lt lt 度编程大赛试题 类似九格宫的C 试题 gt gt 的文章 http hi baidu com tw

  • 基于Vue实现的用户可注册登录的Todo-List清单

    用到技术 Vue 脚手架 路由 element UI 文件目录 src components Enter vue MyBanner vue MyFooter vue MyHeader vue MyItem vue MyList vue pa

热门标签