程序员经验分享-hwhale

Vue.js仿一个购买火车票的app

2023-05-16

项目地址

  • 预览的时候如果是用电脑预览的话请切换手机端

  • 预览地址

  • 源码地址（欢迎点赞 <(￣︶￣)>）

项目描述

主要技术

  • 使用vue.js实现单页应用

  • 使用vue Router处理路由

  • 使用vuex实现数据存储

  • 搜索历史使用localstorage存储

  • flexible实现手机端兼容

一波小提示

  • 因为数据是我自己模拟的，存在easy mock里面，我只写了萍乡到南昌和上海到苏州的数据，体验的时候可以按照这个查询哦

页面功能

  • 城市搜索，可以点击选择以及自己输入，并且把搜索历史保存在localstorage里面

  • 日历组件，选择日期

  • 对搜索的内容进行以出发时间，旅行耗时，所需票价进行不同情况的排序，

  • 不同车次的筛选

  • 购买车票，可以购买多张车票

  • 显示购买的车票信息

来一波动态图展示
图片描述
图片描述
图片描述
图片描述
图片描述

总结
虽然只是一个小的例子练习，但是一路踩坑过来，从中还是学到了很多东西，对vue vuex更加了解，逻辑思维也得到了了锻炼，只有在不断的练习中才能加固对知识的掌握，

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

vue

app

仿一个购买火车票

Vue.js仿一个购买火车票的app 的相关文章

  • 一个很有意思的玩意:FlightGear,开源飞机模拟器

    你一定很想知道开F22战机是什么感觉 xff0c 甚至梦想有一天自己也能驾驭着飞机在空中飞翔 现实生活中 xff0c 做飞行员可不是一件简单的事 xff0c 既然如此 xff0c 我们就别想那么多 xff0c 但有了FlightGear这个

  • 第二学期无人机操作师结业复习测试

    无人机操作师结业复习测试 姓名 xff1a 学号 xff1a 得分 xff1a xff08 本套试卷考试时间为90分钟 xff0c 共分选择题 判断题 填空题 问答题四大部分 xff0c 总分100分 xff09 一 选择题 xff08 共

随机推荐

  • 误删linux文件恢复

    Linux下文件误删除 xff0c 使用extundelete恢复测试过程 extundelete下载官网地址 xff1a https pkgs org download extundelete 给虚拟主机添加一块磁盘 xff0c 磁盘为

  • POJ训练计划1459_Power Network(网络流最大流/Dinic)

    解题报告 这题建模实在是好建 xff0c xff0c 好贱 xff0c 给前向星给跪了 xff0c 纯dinic的前向星居然TLE xff0c sad xff0c xff0c 回头看看优化 xff0c 矩阵跑过了 2A xff0c sad

  • WIN10下微信崩溃（已经是最新版）的解决方法

    问题症状 xff1a WIN10下运行最新版微信 xff08 CrashVersion 61 1644560715 xff09 微信运行错误 你的微信崩溃次数较多 xff0c 建议使用最新版本 xff0c 点击 34 确定 34 到官网 h

  • golang ----map按key排序

    实现map遍历有序 1 key有序 思路 xff1a 对key排序 xff0c 再遍历key输出value 代码如下 xff1a 既可以从小到大排序 xff0c 也可以从大到小排序 package main import 34 fmt 34

  • egg(102)--egg之用户登录 以及登录时候涉及的一些安全问题

    router router get 39 login 39 initMiddleware controller default pass login router post 39 pass doLogin 39 initMiddleware

  • 火狐浏览器添加MetaMask钱包和本地开启私有链开发

    火狐浏览器添加MetaMask钱包 因为对其配置了代理工具 xff0c 所以直接使用谷歌引擎搜索MetaMask钱包即可 第一次使用 xff0c 立即开始设置 点击我同意 xff0c 进行密码的创建 牢记助记词 xff0c 助记词及其关键

  • Cordova 打包签名 Android release app 过程详解及cordova创建app

    很久之前就想写这篇博客 xff0c 但是一直没有时间 xff0c 今天抽空来整理一下 xff0c 总结一下cordova的创建 打包 签名apk 对于cordova所需的打包环境 xff0c 如node cordova的安装 xff0c 这

  • MySQL【Update误操作】回滚

    1 2 3 4 5 6 7 8 9 10 11 12

  • dart常用正则表达式

    电话号码 xff1a 1开头 xff0c 后面10位数字 static bool isPhone String input RegExp mobile 61 new RegExp r span class hljs string 34 1

  • Less编写函数(mixin/@functions)的小技巧分享

    技术背景 开发移动端Web项目的时候 xff0c 有一种弹性布局的方案是基于rem开发项目 简单来说 xff0c 应用淘宝 lib flexible xff08 虽说有新方案vw xff0c 暂时先不讨论 xff09 后 xff0c 会根据

  • 中科院总共有多少计算机研究所？

    我说的都是招计算机的所哈 北京的 xff1a 中科院计算所 中科院软件所 中科院网络中心 中科院信息工程学院 xff08 其实就是中科院研究生本部 xff09 中科院计算与通信工程学院 中科院自动化所 中科院高能所 还有光电 生物的两个所招

  • iOS objc_setAssociatedObject 关联对象的学习

    今天看了FDTemplateLayoutCell的源码 xff0c 类别里面相当频繁使用了关联对象 xff0c 做笔记 xff01 xff01 xff01 学套路 主要函数 xff1a void objc setAssociatedObje

  • 迭代器、生成器

    迭代器 通过迭代器取值优缺点 xff1a 优点 xff1a 不依赖索引 xff0c 完成取值 缺点 xff1a 不能计算长度 xff0c 不能指定位取值 只能从前往后逐一取值 可迭代对象 可迭代对象 有 iter 方法的对象 xff0c 调

  • 使用androidstudio 分析内存泄漏

    分析内存泄漏 http www jianshu com p c49f778e7acf 转载于 https www cnblogs com sunfb p 5086317 html

  • 详解BASIC认证

    Basic 认证是HTTP 中非常简单的认证方式 xff0c 因为简单 xff0c 所以不是很安全 xff0c 不过仍然非常常用 本文详细讲解BASIC认证的过程及原理 BASIC认证流程 xff1a 在HTTP协议进行通信的过程中 xff

  • 孙子兵法全文及翻译

    第1章 始计 兵者 xff0c 国之大事 xff0c 死生之地 xff0c 存亡之道 xff0c 不可不察也 故经之以五事 xff0c 校之以计 xff0c 而索其情 xff1a 一曰道 xff0c 二曰天 xff0c 三曰地 xff0c

  • Ubuntu安装Google浏览器

    下载谷歌浏览器 直接使用Ubuntu自带的火狐浏览器进行下载 默认下载到 tmp临时文件夹里面 xff0c 考虑到权限问题 xff0c 需要将其移动到 Downloads文件夹下面使用命令 sudo mv goo xff08 Tab xff

  • ArcGIS中的多个栅格波段合成一幅影像

    此处用到了ArcGIS栅格处理中的Composite Bands工具 xff08 Data Management Tools gt Raster gt Raster Processing xff09 具体操作如下图所示

  • Sourcetree 更新git账号密码

    删除Sourcetree 缓存文件 只需要删密码文件 xff0c 文件位置 xff1a Mac xff1a Library Application Support SourceTree Windows xff1a C Users USERN

  • Vue.js仿一个购买火车票的app

    项目地址 预览的时候如果是用电脑预览的话请切换手机端预览地址源码地址 xff08 欢迎点赞 lt xffe3 xffe3 gt xff09 项目描述 主要技术 使用vue js实现单页应用使用vue Router处理路由使用vuex实现数据

热门标签