目录 车辆租赁管理系统 1 Car Rental Management System 1 绪论 4 1 车辆租赁管理系统需求分析 4 1.1 系统需求分析 4 1.2 功能需求分析 5 1.3 性能分析 5 1.3.1 可操作性 5 1.3.2 可靠性 5 1.3.3 安全性 5 1.3.4 可移植性 5 2 开发环境介绍 5 2.1前端 5 2.2后端 6 2.3 项目模式示意图 7 3 系统设计 7 3.1 功能模块设计 7 3.2 详细设计 8 3.3 数据库设计 10 3.3.1 逻辑结构设计 10 3.3.2 ER图 11 3.3.3 物理结构设计 11 4 功能实现 13 4.1 车辆信息查询 13 4.2客户信息查询 18 4.2.1查询已预约的客户 19 4.2.2查询租赁车辆的客户 20 4.2.3查询租赁时间到期但并未还车的客户,进行催车还交 21 4.3司机信息查询 22 4.4业务管理 24 4.4.1 租赁信息查询 24 4.4.2 对某天所得租金进行统计 24 4.4.3 还车结算 26 4.4.4 续约 27 4.5预约信息查询 29 5 目录结构、部署方法与核心代码 29 5.1服务端 29 5.1.1服务端主要文件目录结构 29 5.1.2服务端部署方法 30 5.1.3 核心代码 30 }, 30 maxAge: 5, 30 })); 30 app.use(async (ctx, next) => { 30 await next(); 30 }); 30 app.use(bodyParser()); 30 // add controllers: 30 app.use(controller()); 30 app.listen(3000); 30 5.2客户端 30 5.2.1客户端主要文件目录结构 31 5.2.2客户端部署方法 31 5.2.3核心代码 31 import ‘./index.less’ 32 import ‘@/assets/icons/iconfont.css’ 32 import ‘v-org-tree/dist/v-org-tree.css’ 32 // 实际打包时应该不引入mock 32 Vue.use(iView, { 32 i18n: (key, value) => i18n.t(key, value) 32 Vue.prototype.$config = config 32 router, 32 i18n, 32 store, 32 render: h => h(App) 32 1 车辆租赁管理系统需求分析 1.1系统需求分析 从系统需求层面来看,车辆租赁管理系统面向客户和企业员工,所以要在权限上设置不同对象。本次车辆租赁管理系统面对客户时要尽可能提供方便快捷的检索方式,而面对后台管理员时应提供严谨的操作准则。 1.2功能需求分析 车辆租赁管理系统主要对车辆出租过程中的各项业务进行管理,通过对车辆出租过程的需求分析,整理出系统的六个基本功能模块。 根据实际的管理情况,系统的主要功能模块包含以下几个方面 车辆信息管理:车辆信息管理主要是实现对车辆的基本信息以及租赁状态的管理。包括对车辆信息的增、删、改、查等基本操作。 司机信息管理:司机信息管理主要实现对司机人员的基本信息以及出车状态的管理。其中按照人员管理的操作情况可以分为司机的添加、司机信息的编辑和司机删除等具体操作。 客户信息管理:对进行车辆租赁的客户实现基本信息管理和分类信息管理,主要包括添加、删除和修改客户租赁车辆的状态信息等功能 租赁信息管理:业务信息管理模块主要实现客户的租赁业务的管理,其中包括出租、续租、催车还交、还车结算等功能。 1.3性能分析 1.3.1可操作性 在车辆租赁管理系统中进行信息的编辑时,尽可能减少后台管理人员或者客户的操作步骤。这样便可以在一定程度上避免操作错误,从而导致查询效率的下降。 1.3.2可靠性 车辆租赁系统管理系统的整体运行需要安全性和稳定性,所以定期要对SQL sever数据库进行检查,确保数据的正确性。 1.3.3安全性 本系统需要对客户的权限做出严格的限制,避免客户进入后台的现象。 1.3.4可移植性 本系统并非是专门为某一个汽车租赁公司设计开发,所以确保改系统具有良好的普适性和可移植性。 2开发环境介绍 2.1前端 2.1.1Vue.js Vue.js(读音 /vju?/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 2.1.2iView for Vue UI组件库 一套基于 Vue.js 的高质量UI 组件库 2.1.3 HTML HTML 不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的。语言文档制作不是很复杂,本文转载自http://www.biyezuopin.vip/onews.asp?id=15041但功能强大,支持不同数据格式的文件镶入。 2.1.4 CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 2.2后端 2.2.1 Sql Sever SQL Server是由Microsoft开发和推广的关系数据库管理系统(DBMS),其具有真正的客户机/服务器体系结构,图形化用户界面,使系统管理和数据库管理更加直观、简单。丰富的编程接口工具,为用户进行程序设计提供了更大的选择余地。SQL Server与Windows NT完全集成,利用了NT的许多功能,如发送和接受消息,管理登录安全性等。SQL Server也可以很好地与Microsoft BackOffice产品集成。 2.2.2 koa.js Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数,Koa 可丢弃回调函数,并有力地增强错误处理。 Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,能够快速而愉快地编写服务端应用程序。 2.2.3 Knex.js Knex.js是一个npm包,用于node.js下连接各种数据库并构建查询。
<template>
<div ref="dom"></div>
</template>
<script>
import echarts from 'echarts'
import { on, off } from '@/libs/tools'
export default {
name: 'serviceRequests',
data () {
return {
dom: null
}
},
methods: {
resize () {
this.dom.resize()
}
},
mounted () {
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: '3%',
left: '1.2%',
right: '1%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '运营商/网络服务',
type: 'line',
stack: '总量',
areaStyle: { normal: {
color: '#2d8cf0'
} },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '银行/证券',
type: 'line',
stack: '总量',
areaStyle: { normal: {
color: '#10A6FF'
} },
data: [257, 358, 278, 234, 290, 330, 310]
},
{
name: '游戏/视频',
type: 'line',
stack: '总量',
areaStyle: { normal: {
color: '#0C17A6'
} },
data: [379, 268, 354, 269, 310, 478, 358]
},
{
name: '餐饮/外卖',
type: 'line',
stack: '总量',
areaStyle: { normal: {
color: '#4608A6'
} },
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '快递/电商',
type: 'line',
stack: '总量',
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: { normal: {
color: '#398DBF'
} },
data: [820, 645, 546, 745, 872, 624, 258]
}
]
}
this.$nextTick(() => {
this.dom = echarts.init(this.$refs.dom)
this.dom.setOption(option)
on(window, 'resize', this.resize)
})
},
beforeDestroy () {
off(window, 'resize', this.resize)
}
}
</script>
|