# Vue2.0项目-在线租车_管理系统
> 本项目为后台管理系统部分,客户端部分详见 👉 [vue-cars](https://github.com/MrEnvision/vue-cars)
教程官网:http://www.web-jshtml.cn/#/ 视频地址:https://www.bilibili.com/video/BV1Gz411z75G
**学习内容**:头脑风暴分析项目,项目功能延伸思维,程序逻辑分析;高德地图基础级API学习;Vue+Vuex+Router+ElementUi+Webpack全家桶,ElementUI组件,VUE各项指令,component、props、propsData、computed,watch,组件化开发,生命周期,路由权限,Sass,Axios拦截器,缓存,项目部署,Nginx,域名,服务器,GIT,原型,接口联调,性能,缓存,检测toKen等;
**学习成效**:掌握对项目的扩展延伸思维,项目在业务上的关联性。完全自主搭建后台管理系统,高德地图API应用;
## 第1-11课时
主要为项目开发流程介绍,包含需求文档、功能分析、原型绘制、测试用例等内容。
## 第12课时
### 12.1 高德地图组件
>[vue-amap](https://elemefe.github.io/vue-amap)是基于 Vue 2.x 与[高德地图](https://lbs.amap.com/api/javascript-api/example)的组件。
```shell
npm install vue-amap --save
```
引入vue-amap
```js
// main.js
import Vue from 'vue';
import VueAMap from 'vue-amap';
import App from './App.vue';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: 'your amap key', // 官网申请
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'], // 插件(按需引入)
v: '1.4.4' // 高德 sdk 版本
});
new Vue({
el: '#app',
render: h => h(App)
})
```
使用vue-amap
```vue
// APP.vue
<template>
<div id="app">
<h3 class="title">{{ msg }}</h3>
<div class="amap-wrapper">
<el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'vue-amap向你问好!'
}
}
}
</script>
<style>
.amap-wrapper {
width: 500px;
height: 500px;
}
</style>
```
## 第13课时
### 13.1 兼容高德地图SDK
在定制化程度较高的项目中,开发者可能只想通过 vue-amap 引入高德地图,而部分实例化的操作直接基于高德地图的 sdk 完成。这个时候就需要 `lazyAMapApiLoaderInstance`。
```vue
<template>
<div class="amap-wrapper">
<el-amap :vid="'amapVue'" :center="center" :zoom="zoom"></el-amap>
</div>
</template>
<script>
import { lazyAMapApiLoaderInstance } from "vue-amap";
export default {
name: "Index",
data() {
return {
map: null,
zoom: 13,
center: [116.404765, 39.918052]
};
},
mounted() {
lazyAMapApiLoaderInstance.load().then(() => {
// eslint-disable-next-line no-undef
this.map = new AMap.Map("amapVue", {
center: this.center,
zoom: this.zoom
});
});
}
};
</script>
<style lang="scss" scoped>
.amap-wrapper {
width: 100vw;
height: 100vh;
}
</style>
```
## 第14课时
### 14.1 SCSS清除浮动
```scss
@mixin clearfix {
&:after {
clear: both;
content: '.';
display: block;
height: 0;
line-height: 0;
overflow: hidden;
}
*height: 1%; // 貌似兼容IE7的意思?
}
```
```scss
.wrap {
@include clearfix; // 使用方法
}
```
### 14.2 SCSS生成通用CSS
<img src="./noteImg/14.2.png" style="zoom:50%;" />
如上图所示的需求,会显示一格电至十格电,这个时候就可以设置一些的通用的css样式,例如active-1代表前1个格子为蓝色,active-4代表前4个格子为蓝色,这时候我们就需要利用SCSS利用代码的思维来生成10个active-i,而不是我们自己手动重复写10个css样式。
**css选择器小知识**:
> 尤其要注意:nth-child(-n+length)代表前length个元素!!!
```
:nth-child() 代表选择某个的一个或多个特定的子元素
1、:nth-child(number);/*参数是具体数字*/
2、:nth-child(n);/*参数是n,n从0开始计算*/
3、:nth-child(n*length)/*n的倍数选择,n从0开始算*/
4、:nth-child(n+length);/*选择大于length后面的元素*/
5、:nth-child(-n+length)/*选择小于length前面的元素*/
6、:nth-child(n*length+1);/*表示隔几选一*/
```
需求实现代码:
```scss
@for $i from 1 through 10 {
.active-li-#{$i} {
li:nth-child(-n + #{$i}) {
// ...
}
}
}
```
## 第15课时
### 15.1 swiper滑动功能
[Swiper](https://swiperjs.com/vue/)是纯javascript打造的滑动特效插件,swiper6.0目前仅支持vue3.0,Vue2.0可以结合[vue-awesome-swiper](https://github.com/surmon-china/vue-awesome-swiper)。
```
npm install swiper vue-awesome-swiper --save
```
具体使用详见官方文档API
## 第16课时
略。
## 第17课时
### 17.1 弹窗鼠标点击事件
需求描述:点击user icon则右侧滑动出现,点击其他区域则右侧滑动消失。
<img src="./noteImg/会员中心.jpg" style="zoom:80%;" />
实现方案:在页面挂载一个mouseup监听函数,当右侧栏显示的时候,点击鼠标时判断鼠标点击的位置是否是右侧栏的区域(通过document.getElementById等方法获取),如果不是则更新使右侧滑动消失,反之,则不处理。
```js
mounted() {
document.addEventListener("mouseup", e => {
const sider = document.getElementById("sider-wrap");
if (sider && sider.contains(e.target)) {
this.$router.push({ name: "Home" });
}
});
}
```
## 第18课时
### 18.1 全局组件
> 全局注册后即可直接使用,`<MyComponent></MyComponent>`
```js
import MyComponent from '@/components/MyComponent.vue'
Vue.component("MyComponent", MyComponent); // 全局自定义组件
```
## 第19课时
> 完成后台管理系统登录/注册功能,注意跨域访问、请求拦截器、路由守卫、验证码流程等相关内容可详见[vue3.0后台管理系统项目实战](https://github.com/MrEnvision/vue-admin),本项目仅简单实现。
略。
## 第20课时
### 20.1 修饰符sync
父组件向子组件传数据的时候,这是一个单向数据流,当我们在子组件中想要修改通过props绑定的父组件里的数据时,Vue不支持我们直接在子组件中进行修改,子组件没有修改父组件数据的权力,其中一种方法就是通过修饰符`.sync`
```vue
// 父组件
<template>
<!-- 完整写法 <Child :number="total" @update:number="total = $event"/> -->
<Child :number.sync="total"></Child>
</template>
<script>
import Child from 'components/Child.vue'
export default {
name: 'Parent',
components: {
Child
}
data() {
return {
total: 1000
}
}
}
</script>
```
```vue
// 子组件
<template>
{{number}}
<button @click="change" >change</button>
</template>
<script>
export default {
name: 'Child',
props: {
number: {
type: Number,
default: 0
}
},
methods:{
change() {
this.$emit('update:number',this.number + 1)
}
}
}
</script>
```
## 第21课时
略。
## 第22课时
### 22.1 富文本编辑器
```
npm i wangeditor --save
```
本文中使用[wangEditor](http://www.wangeditor.com)富文本编辑器插件,具体使用详见[说明文档](http://www.wangeditor.com/doc/)。
```vue
<template>
<div class="home">
<h3>wangEditor with vue</h3>
<div id="demo1"></div>
<button type="button" class="btn" @click="getEditorData">获取当前内容</button>
<h3>内容预览</h3>
<textarea name="" id="" cols="170" rows="20" readonly v-model="editorData"></textarea>
</div>
</template>
<script>
// 引入 wangEditor
import wangEditor from 'wangeditor'
export default {
data() {
return {
editor: null,
editorData: ''
}
},
mounted() {
const editor = new wangEditor(`#demo1`)
// 配置 onchange 回调函数,将数据同步到 vue 中
edit
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
【资源说明】 1、该资源内项目代码都是经过测试运行成功,功能正常的情况下才上传的,请放心下载使用。 2、适用人群:主要针对计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、数学、电子信息等)的同学或企业员工下载使用,具有较高的学习借鉴价值。 3、不仅适合小白学习实战练习,也可作为大作业、课程设计、毕设项目、初期项目立项演示等,欢迎下载,互相学习,共同进步!
资源推荐
资源详情
资源评论
收起资源包目录
基于Vue的在线租车(管理系统源码+项目说明).zip (76个子文件)
code_30312
.browserslistrc 30B
babel.config.js 66B
.eslintrc.js 355B
src
App.vue 192B
store
modules
login.js 1KB
config.js 2KB
index.js 229B
assets
images
logo.png 7KB
face.png 5KB
styles
common.scss 517B
normalize.scss 7KB
scssConfig.scss 378B
main.scss 1KB
main.js 416B
api
brand.js 925B
login.js 596B
requestUrl.js 338B
parking.js 988B
common.js 947B
cars.js 2KB
order.js 856B
member.js 983B
rent.js 634B
utils
amap.js 475B
interceptor.js 1KB
validate.js 746B
cookies.js 580B
format.js 1KB
components
dialog
DialogMap.vue 1KB
DialogAttr.vue 3KB
DialogPhoto.vue 2KB
DialogLease.vue 3KB
FormComp
index.vue 5KB
TableComp
index.vue 9KB
common
KeyWord.vue 2KB
Editor.vue 986B
CityArea.vue 3KB
CarAttrList.vue 1KB
ImgUpload.vue 2KB
CarAttr.vue 3KB
SearchForm
index.vue 4KB
Map
map.js 1KB
index.vue 2KB
router
index.js 4KB
guard.js 875B
views
Order
index.vue 5KB
Member
detail.vue 570B
edit.vue 4KB
index.vue 5KB
Layout
components
LayoutMain.vue 307B
LayoutAside.vue 2KB
LayoutHeader.vue 1KB
index.vue 1KB
Rent
index.vue 3KB
Login
index.vue 9KB
Brand
add.vue 4KB
index.vue 5KB
Console
index.vue 366B
Parking
add.vue 6KB
index.vue 6KB
Cars
add.vue 10KB
attr.vue 2KB
index.vue 4KB
.env.development 77B
package.json 1001B
public
favicon.ico 4KB
index.html 613B
package-lock.json 504KB
noteImg
支付逻辑.jpg 584KB
14.2.png 289KB
会员中心.jpg 1.13MB
租车下单.png 105KB
版本控制.png 374KB
vue.config.js 972B
.gitignore 231B
README.md 20KB
共 76 条
- 1
资源评论
龙年行大运
- 粉丝: 997
- 资源: 3856
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 论文(最终)_20240430235101.pdf
- 基于python编写的Keras深度学习框架开发,利用卷积神经网络CNN,快速识别图片并进行分类
- 最全空间计量实证方法(空间杜宾模型和检验以及结果解释文档).txt
- 5uonly.apk
- 蓝桥杯Python组的历年真题
- 2023-04-06-项目笔记 - 第一百十九阶段 - 4.4.2.117全局变量的作用域-117 -2024.04.30
- 2023-04-06-项目笔记 - 第一百十九阶段 - 4.4.2.117全局变量的作用域-117 -2024.04.30
- 前端开发技术实验报告:内含4四实验&实验报告
- Highlight Plus v20.0.1
- 林周瑜-论文.docx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功