IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 基于Vue的车辆租赁管理系统设计与实现 -> 正文阅读

[JavaScript知识库]基于Vue的车辆租赁管理系统设计与实现

目录
车辆租赁管理系统 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>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-09-21 00:19:29  更:2022-09-21 00:23:56 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 10:19:28-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码