vue2+elementui+vue-router+vuex+vue-amap+高德地图原生api+七牛云上传图片+elmentui组件二次封装
├─视频
│ ├─第1节 了解项目、分析项目
│ │ 第1学时 租车项目业务扩展思维.mp4
│ │ 第2学时 分析整合，梳理有可能开发的功能.mp4
│ │ 第3学时 项目需求文档、原型工具Axure.mp4
│ │ 第4学时 项目流程图.mp4
│ │ 第5学时 项目框架图.mp4
│ │ 第6学时 首页原型绘制、多方面的交互思考.mp4
│ │ 第7学时 会员中心原型绘制.mp4
│ │ 第8学时 原型绘制 我的帐户 充值、优惠券、订单列表.mp4
│ │ 第9学时 了解项目开发的流程、项目需求文档的基础说明.mp4
│ │ 第10学时 测试用例编写，了解测试用例的作用.mp4
│ │ 第11学时 登录、注册程序逻辑图分析.mp4
│ │
│ ├─第2节 前端UI制作
│ │ 第12学时 初始化项目、申请高德地图key、初始化地图.mp4
│ │ 第13学时 引入高德地图原生SDK，项目模块拆分、地图模块、车辆UI模块、会员模块.mp4
│ │ 第14-1学时 首页车辆列表制作.mp4
│ │ 第14学时 监听路由变量、首页布局.mp4
│ │ 第15学时 vue-swiper滑动块插件、车辆列表滑动布局.mp4
│ │ 第16学时 车辆详情布局.mp4
│ │ 第17学时 会员首页UI布局，点击空白处关闭会员.mp4
│ │ 第18学时 头部返回全局组件，ElementUI form组件样式重写.mp4
│ │
│ ├─第3节 车辆管理分析
│ │ 第19学时 后台系统仓库项目建立、停车场列表、新增停车场页面制作.mp4
│ │ 第20学时 车辆品牌菜单、el-dialog组件，单向数据流通讯、修饰符.sync.mp4
│ │ 第21学时 车辆管理原型分析.mp4
│ │ 第22学时 车辆新增UI制作、交互、富文本插件.mp4
│ │ 第23学时 ElementUI 级联选择器处理动态省市区加载，封装为组件.mp4
│ │ 第24学时 省市区代码优化、高德地图方法封装、父子组件通讯调用父组件方法.mp4
│ │ 第25学时 省市区与地图交互、组件通讯$emit回调技巧、高德地图AMap.Geocoder插件.mp4
│ │
│ ├─第4节 停车场模块开发
│ │ 第26学时 新增停车场接口联调，表单验证，组件通讯（父组件调用子组件方法），高德地图覆盖物（点）.mp4
│ │ 第27学时 停车场列表接口联调，页码处理，配置数据统一管理.mp4
│ │ 第28学时 筛选项字段处理，只提交已填写的数据，弹窗加载地图并居于覆盖物定位.mp4
│ │ 第29学时 地图加载与接口异步解决方案、获取详细接口联调、了解程序上的基本语法.mp4
│ │ 第30学时 停车场管理 编辑API、删除API、filters语法、table加载优化.mp4
│ │
│ ├─第5节 el-table 组件二次封装
│ │ 第31学时 VUE核心之一，el-table组件二次封装，配置参数渲染table组件，回调渲染，动态URL请求.mp4
│ │ 第32学时 VUE核心之一，el-table组件二次封装，slot具名插槽，请求参数及Url配置.mp4
│ │ 第33学时 接口请求交互优化，防止连续点击，新增品牌接口联调，弹窗数据优化.mp4
│ │ 第34学时 车辆品牌列表、删除、编辑、禁启用接口联调，弹窗数据传输方式，引用对象分离.mp4
│ │
│ ├─第6节 el-form组件二次封装
│ │ 第35-1学时 ElementUI el-form表单二次组件封装 – 校验规则 .mp4
│ │ 第35-2学时 ElementUI el-form表单二次组件封装 – 数据初始化 .mp4
│ │ 第35学时 ElementUI el-form表单二次组件封装.mp4
│ │
│ ├─第7节 车辆管理模块开发
│ │ 第36-1学时 车辆新增模块接口联调 – 组件交互逻辑.mp4
│ │ 第36学时 车辆新增模块接口联调.mp4
│ │ 第37学时 车辆添加表单验证、车辆列表接口联调.mp4
│ │ 第38学时 车辆列表接口联调，状态、删除、修改、详情.mp4
│ │ 第39学时 el-table编辑按钮、删除按钮封装.mp4
│ │
│ ├─第8节 搜索组件二次封装
│ │ 第40-1学时 筛选组件 el-form 外部传入数据.mp4
│ │ 第40-2学时 筛选组件 el-form 传参优化，封装 upload 组件.mp4
│ │ 第40学时 筛选组件 el-form 封装与el-table搜索交互.mp4
│ │
│ ├─第9节 前端 vue-amap结合高德地图使用
│ │ 第41学时 web端 – 准备工作，多个接口跨域配置.mp4
│ │ 第42学时 web端 – GIT分支的管理.mp4
│ │ 第43学时 web端 – vue-amap结合高德地图共同应用、获取自身的定位、圆的绘制、停车场接口请求.mp4
│ │ 第44学时 web端 – vuex模块化，组件通讯，地图重置定位.mp4
│ │
│ ├─第10节 前端 停车场开发
│ │ 第45学时 web端 – 停车场定位渲染、el-amap-marker应用.mp4
│ │ 第46-1学时 web端 – 停车场信息优化.mp4
│ │ 第46学时 web端 – 停车场信息渲染、步行规划路线，点对点的路线的渲染.mp4
│ │ 第47学时 web端 – 车辆接口联调，列表渲染.mp4
│ │
│ ├─第11节 后台 自定义车辆属性
│ │ 第48-1学时 后台 – 自定义车辆属性开发 – async、awAIt异步.mp4
│ │ 第48-2学时 后台 – 自定义车辆属性开发 – 动态生成属性.mp4
│ │ 第48-3学时 后台 – 自定义车辆属性开发 – 动态绑定 key ，$set 方法.mp4
│ │ 第48-4学时 后台 – 车辆总公里数计算，computed.mp4
│ │ 第48学时 后台 – 自定义车辆属性开发.mp4
│ │
│ ├─第12节 前端 车辆信息开发
│ │ 第48-5学时 web端 – 公里数、能源类型、座位，filters过滤方法封装.mp4
│ │ 第49学时 web端 – 车辆列表的显示、隐藏交互，车辆信息展开、收起动作.mp4
│ │
│ ├─第13节 后端 租车类型模块开发
│ │ 第50 -1学时 后端 – 租赁弹窗修改，常遇见的3个BUG，Object.assign解决方案.mp4
│ │ 第50-2学时 后端 – 租赁类型接口联调.mp4
│ │ 第50学时 后端 – 租赁车辆需求开发，table组件封装switch.mp4
│ │
│ ├─第14节 前端 帐户体系 – 登录、注册、忘记密码
│ │ 第51-1学时 web端 – 帐户体系开发、用户名、倒计时封装、理解为何要封装组件.mp4
│ │ 第51-2学时 web端 – 帐户体系开发、form组件封装及规则校验.mp4
│ │ 第51-3学时 web端 – 帐户体系开发、注册接口、登录接口联调、跳转逻辑.mp4
│ │ 第51-4学时 web端 – 帐户体系开发、vuex封装接口.mp4
│ │ 第51学时 web端 – 帐户体系开发.mp4
│ │
│ ├─第15节 后端会员管理模块
│ │ 第52-1学时 后台 – 会员编辑接口.mp4
│ │ 第52学时 后台 – 会员管理模块.mp4
│ │
│ └─第16节 前端 预约用车逻辑
│ 第53学时 前端 – 预约用车逻辑.mp4
│ 第54-1学时 前端 – 支付流程讲解，开发逻辑.mp4
│ 第54-2学时 前端 – 支付流程讲解，开发逻辑.mp4
│ 第54学时 前端 – 支付流程讲解，开发逻辑.mp4
│ 第55学时 前端 – 租车下单逻辑.mp4
│ 第56学时 后台 – 订单模块.mp4
│ 第57学时 前端 – 取车、还车流程开发.mp4
│ 第58学时 前端 – 取车、还车流程开发.mp4
│ 第59学时 完结.mp4
│
├─ui稿件
│ ├─JPG
│ │ 会员中心 – 安全设置 – 修改登录密码.jpg
│ │ 会员中心 – 安全设置 – 绑定手机号.jpg
│ │ 会员中心 – 安全设置 – 绑定银行卡 – 已绑定.jpg
│ │ 会员中心 – 安全设置 – 绑定银行卡 – 未绑定.jpg
│ │ 会员中心 – 安全设置 – 绑定银行卡 – 添加银行卡.jpg
│ │ 会员中心 – 安全设置 – 设置资金密码.jpg
│ │ 会员中心 – 安全设置.jpg
│ │ 会员中心 – 实名认证 – sfz上传.jpg
│ │ 会员中心.jpg
│ │ 注册.jpg
│ │ 登录.jpg
│ │ 首页 – 选择车辆.jpg
│ │ 首页.jpg
│ │
│ └─PSD
│ 会员中心 – 安全设置 – 修改登录密码.psd
│ 会员中心 – 安全设置 – 绑定手机号.psd
│ 会员中心 – 安全设置 – 绑定银行卡 – 已绑定.psd
│ 会员中心 – 安全设置 – 绑定银行卡 – 未绑定.psd
│ 会员中心 – 安全设置 – 绑定银行卡 – 添加银行卡.psd
│ 会员中心 – 安全设置 – 设置资金密码.psd
│ 会员中心 – 安全设置.psd
│ 会员中心 – 实名认证 – sfz上传.psd
│ 会员中心 – 实名认证 – 驾驶证上传.psd
│ 会员中心 – 帐户信息 – 会员等级 – 积分详情 .psd
│ 会员中心 – 帐户信息 – 会员等级 .psd
│ 会员中心 – 帐户信息 – 去充值 .psd
│ 会员中心 – 帐户信息.psd
│ 会员中心.psd
│ 帐户 – 忘记密码.psd
│ 帐户 – 注册.psd
│ 帐户 – 登录.psd
│ 登录.psd
│ 首页 – 选择车辆.psd
│
├─源码
│ vue-cars-admin-master.zip
│ vue-cars-web-master.zip
│
├─课件
│ │ 第1学时 租车项目业务扩展思维.png
│ │ 第2学时 分析整合，梳理有可能开发的功能.png
│ │ 第10学时 测试用例编写，了解测试用例的作用 – 在线租车项目 – 测试用例.xlsx
│ │ 第12学时 初始化项目、申请高德地图key、初始化地图.pptx
│ │ 第17学时 会员首页UI布局，点击空白处关闭会员.pptx
│ │ 第20学时 vue快速生成代码.pptx
│ │ 第22学时 车辆新增UI制作、交互、富文本插件.pptx
│ │ 第25学时 省市区与地图交互、组件通讯$emit回调技巧、高德地图AMap.Geocoder插件.pptx
│ │ 第29学时 地图加载与接口异步解决方案、获取详细接口联调、了解程序上的基本语法.mp4
│ │ 第41学时 登录文件等.zip
│ │ 第42学时 web端 – GIT分支的管理.pptx
│ │
│ └─第3学时
│ 项目管理-需求说明文档 — 仅学习使用.doc
│
└─资料
normalize.scss
vue.config.js
有需要联系v；加客服窗口的联系方式
摘要：本文详细介绍了“vue2 租车项目实战-后台管理系统和前台共23G 2020年8月”的全过程，从项目背景、技术选型、功能实现到项目部署，为读者提供了一个全面的学习和实践案例。
1、项目背景
随着互联网的快速发展，租车行业逐渐成为人们出行的重要选择。为了满足市场需求，许多租车公司开始搭建自己的租车平台。本文以vue2技术栈为基础，打造了一个功能完善、易于扩展的租车平台，旨在为用户提供便捷的租车服务。
项目背景主要包括以下几个方面：
1）市场需求：随着人们生活水平的提高，租车需求逐年增加，为租车平台提供了广阔的市场空间。
2）技术选型：vue2技术栈因其易用性、高性能和丰富的生态圈，成为开发租车平台的首选。
3）团队优势：项目团队成员具备丰富的开发经验，能够确保项目顺利进行。
2、技术选型
本项目采用vue2技术栈，包括vue、vue-router、vuex、axios等核心库，以及Element UI、ECharts等常用组件库。以下是具体的技术选型：
1）前端框架：vue2，因其简洁的语法、高效的性能和良好的生态圈，成为开发租车平台的首选。
2）路由管理：vue-router，用于实现单页面应用的路由管理，提高用户体验。
3）状态管理：vuex，用于管理应用的状态，实现组件间的数据共享。
4）网络请求：axios，用于发送HTTP请求，实现前后端数据交互。
5）UI组件库：Element UI，提供丰富的UI组件，方便快速搭建界面。
3、功能实现
本项目实现了租车平台的核心功能，包括用户注册、登录、车辆租赁、订单管理、支付等。以下是具体的功能实现：
1）用户注册与登录：实现用户注册、登录、找回密码等功能，确保用户信息安全。
2）车辆租赁：展示车辆信息，实现车辆租赁、订单提交、订单查询等功能。
3）订单管理：展示订单列表，实现订单查询、订单修改、订单取消等功能。
4）支付功能：集成第三方支付平台，实现在线支付功能。
4、项目部署
本项目采用前后端分离的架构，前端使用vue2技术栈，后端使用Node.js和Express框架。以下是项目部署的具体步骤：
1）前端部署：将前端代码打包成静态文件，部署到静态服务器上。
2）后端部署：将后端代码部署到Node.js服务器上，配置数据库连接、路由等。
3）域名解析：将域名解析到服务器IP地址。
4）测试与上线：进行功能测试和性能测试，确保项目稳定运行。
总结：
本文详细介绍了“vue2 租车项目实战-后台管理系统和前台共23G 2020年8月”的全过程，从项目背景、技术选型、功能实现到项目部署，为读者提供了一个全面的学习和实践案例。
本文通过对租车平台的功能模块进行详细阐述，展示了vue2技术栈在实际项目中的应用。希望本文能为读者在开发类似项目时提供参考和借鉴。
本文由nayona.cn整理
联系我们
关注公众号
微信扫一扫
支付宝扫一扫
