【小区停车管理系统】毕业设计 Nodejs+msql+Vue前后端源码

一 使用技术

后端技术: node.js+koa2+mysql
前端技术: vue+elementui+axios

二 技术说明

后端技术说明:使用nodejs作为后端开发语言,使用koa2作为后端开发框架,koa2是基于nodejs开发的应用开发框架,提供了多种常用开发中使用的中间件,提升开发效率。数据库方面使用mysql作为数据存储。
前端技术说明:vue是基于javascript的渐进式开发框架,极大的提升了开发效率与质量。elementui是基于vue框架开发的ui框架,提供了大量的常用web应用ui组件,能够最大程度的减少对于前端样式的开发以及统一应用ui风格。Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,能够使用简介的api实现跟后端的通讯。

三 技术实现思路

后端技术实现:
链接数据库,使用了nodejs的库mysql进行链接。
用户鉴权部分使用koa-jwt及koa中间件,在请求前实现权限校验。并将token中存放的用户信息解析到中间件中,供控制器调用。
用户请求鉴权根据用户输入的账号密码查找数据库中的匹配的账号密码,并返回登录结果及token,token在后面的请求中,均会放在header中,供后端鉴权使用。
系统管理员可以对车位进行增删查改,在数据库中的users表中,对系统管理员账号设置一个is_admin字段,并且在登录后会将这个字段存入token中。在车位的增删改查中,均会对这个字段进行查验。前端也会对是否为管理员进行查验,非系统管理员不会显示这个界面。
小区参数配置也属于系统管理员操作项,对小区参数配置时,也会对是否为系统管理员权限进行查验。前端也会对是否为管理员进行查验,非系统管理员不会显示这个界面。小区参数配置存放在数据库的configure表中。
系统管理员可以新增车位管理员,车位管理员拥有车位清洁缴费,车位出租和车位出售,以及车辆停车权限。会对是否为系统管理员权限进行查验。前端也会对是否为管理员进行查验,非系统管理员不会显示这个界面。
车位清洁缴费,前端传输车位id和当前缴费月份,首先请求后端的缴费计算接口,后端计算应交费用返回给前端,然后再请求清洁缴费接口。清洁缴费接口会在pays表中创建一条缴费数据,并更新parkings表中的clean_end_time字段,完成后返回缴费成功。
车位出租,前端传入车位id,租赁开始和结束日期,租赁人名称和联系方式,车牌号。首先请求后端的缴费计算接口,后端计算应交费用返回给前端,然后再请求租赁缴费接口。租赁缴费接口会在pays表中创建一条缴费数据,并更新parkings表中的clean_end_time,lease_name,lease_phone,parking_car_no字段,完成后返回缴费成功。
车位出售,前端传入车位id,购买人名称和联系方式,车牌号首先请求后端的缴费计算接口,后端计算应交费用返回给前端,然后再请求出售缴费接口,缴费接口会在pays表中创建一条缴费数据,并更新parking表中的业主,业主联系方式,车牌号等字段。
车辆停车,系统在数据库parking表中查找车牌号,如果有,则为长期停车,并判断是否为租赁且已过期,未过期放行,已过期则提示缴费。如果没有,则为临时停车,记录当前进入时间,车牌号,存入数据库temporary_parking中,出场时,查找当前车牌号记录和停留时间,按临停时间返回应收金额。
车辆收费统计
临停收费统计:查找临停数据库temporary_parking中当前月缴费成功的订单。并计算总金额。
长期停车收费统计:查找缴费表pays中当月收费总金额。并返回 车位租金缴费/车位清洁费/车位出售各自的总金额。

**

四 数据库设计

**
Users 用户表
Configure 系统参数表
parkings车位表
Pays 收费表
Temporary_parking 临时停车表

**

五 思维导图

**

百度脑图

Node.js和Vue.js都是非常流行的前端和后端技术。为了连接这两个技术,我们可以采用以下步骤: 1. 开发后端: 使用Node.js构建后端服务,提供API接口。可以使用任何适合的框架,比如Express、Koa等。 2. 安装CORS: 在Node.js中安装cors以允许跨域资源共享,因为我们将会从vue前端连接到后端Node.js服务。 3. 开发前端: 使用Vue.js构建前端,可以使用Vue CLI或者其他适当的方式。使用vue-router轻松构建应用程序路由系统。 4. 连接前后端: 使用Axios或fetch来调用API接口,从Node.js后端获取数据并将其显示在Vue.js前端。 在Vue中,我们可以定义axios来发送异步HTTP请求。我们可以发送GET、POST、PUT等HTTP请求。比如,我们可以定义一个从后端获取数据的axios实例: ``` javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'http://localhost:3000/api', // 后端接口地址 }); export default instance; ``` 然后,在Vue组件中,我们可以使用这个实例来发送HTTP请求。举个例子,我们可以获取用户列表: ``` javascript <script> import api from '@/services'; export default { data() { return { users: [], }; }, created() { api.get('/users') .then(response => { this.users = response.data; }) .catch(error => { console.log(error); }); }, }; </script> ``` 在这个例子中,我们使用Axios从后端Node.js服务获取用户列表,然后将它保存在Vue.js的数据中。这样,在前端页面上就可以显示这些用户了。 综上,这是使用Node.js和Vue.js连接前后端的一些简单步骤。有了这个基础知识,我们可以更深入的学习和应用这两个技术来构建更好的Web应用程序。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值