基于vue和egg实现的留学生租房系统

YoungTime

发布日期: 2021-03-26 10:41:54 浏览量: 189
评分:
star star star star star star star star star star_border
*转载请注明来自write-bug.com

一、技术简介

1.1 HTML5

HTML5 是下一代的 HTML。将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

1.2 Vue

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动

1.3 Egg.js

为企业级框架和应用而生的nodejs框架,egg.js是阿里推出的基于koa的node开发框架。为企业级框架和应用而生。Egg 的插件机制有很高的可扩展性,一个插件只做一件事(比如 Nunjucks 模板封装成了 egg-view-nunjucks、MySQL 数据库封装成了 egg-mysql)。Egg 通过框架聚合这些插件,并根据自己的业务场景定制配置,这样应用的开发成本就变得很低。

1.4 Yarn

Yarn 对代码来说是一个包管理器,可以通过它使用全世界开发者的代码, 或者分享自己的代码。Yarn 做这些快捷、安全、可靠。

通过Yarn可以使用其他开发者针对不同问题的解决方案,使开发过程更简单。 使用过程中遇到问题,可以将其上报或者贡献解决方案。一旦问题被修复, Yarn会更新保持同步。

1.5 iView

iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。

1.6 Vant UI

Vant ( ˈvænt ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近50个组件,这些组件被广泛使用于有赞的各个移动端业务中。

1.7 百度地图JS API

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。免费对广大用户开放。

1.8 Vue I18n

Vue I18n是Vue.js的国际化插件。 它可以轻松地将一些本地化功能集成到您的Vue.js应用程序中。

i18n(其来源是英文单词 internationalization的首末字符i和n,18为中间的字符数)是“国际化”的简称。在资讯领域,国际化(i18n)指让产品(出版物,软件,硬件等)无需做大的改变就能够适应不同的语言和地区的需要。对程序来说,在不修改内部代码的情况下,能根据不同语言及地区显示相应的界面。

二、系统概要设计

系统的设计主要前台和后台两个部分

2.1 系统需求分析

2.1.1 管理端

  • 登入/登出

  • 房间管理

  • 社区管理(增删改查,省市筛选,联动删除,分页)

  • 房间管理(增删改查,省市筛选,地图定位,分页)

  • 学校管理(增删改查,分页)

  • 预约管理(联系预约人,出租房间,联动修改状态)

  • 管理员管理(增删)

  • 个人信息(密码验证,修改密码)

2.1.2 手机端

  • 登入/登出

  • 房间信息

  • 房屋列表(关键字查询,下拉加载)

  • 房间详情(地图展示,详情展示,预约房间)

  • 我的预约(状态查看)

  • 个人信息(修改手机号,修改密码,修改语言)

2.2 可行性分析

这里讲的可行性分析的任务是从技术上、经济上分析需解决的问题是否存在可行性。其目的是在尽可能短的时间内用尽可能小的代价确定问题是否有解。

技术上的可行性分析主要分析技术条件能否顺利完成开发工作,硬、软件能否满足开发者的需要等。

本套系统将未来即将可能修改的部分都进行了封装与配置,例如省市、语言种类、国际化提示、管理端TAB页签等,配置信息简单明了,方便修改,在现阶段技术实现和未来技术维护上,都有很大可行性。

2.3 Server端模型

由前台客户端发起请求来请求数据,Egg服务器判断是否在白名单或请求头中的token是否有效,若满足条件之一,则放行请求,根据router访问对应的controller,controller为数据的处理层,将数据处理好后,发送给service一个指令,service对数据库进行访问与操作,service先建立一个数据库连接池,无论是knex还是sql语句,都被编译为原生的sql,通过连接池的方法对数据库进行连接,再执行对应sql,将返回的结果相应给调用它的service,然后将service返回的结果在controller进行再次处理与封装,然后将响应数据和状态码(默认200)返回前台

三、数据库设计

3.1 数据概念结构设计

E-R模型是数据进行第一层抽象的表示方法。它的主要成分包括:实体、联系和属性。我们可以用E-R图将内容表达出来,辅助设计的实现。

3.2 数据库关系设计

该系统数据库关系图如下所示:

3.3 数据库设计

admin

  1. CREATE TABLE `admin` (
  2. `id` int(11) NOT NULL AUTO_INCREMENT,
  3. `login_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  4. `password` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  5. `role` int(11) NOT NULL COMMENT '1: 超级管理员\r\n2: 管理员\r\n',
  6. `isDel` int(11) NOT NULL DEFAULT 0,
  7. PRIMARY KEY (`id`) USING BTREE
  8. ) ENGINE = InnoDB AUTO_INCREMENT = 5 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Dynamic;

community

  1. CREATE TABLE `community` (
  2. `id` int(11) NOT NULL AUTO_INCREMENT,
  3. `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  4. `area` int(255) NOT NULL,
  5. `isDel` int(11) NOT NULL DEFAULT 0,
  6. PRIMARY KEY (`id`) USING BTREE
  7. ) ENGINE = InnoDB AUTO_INCREMENT = 6 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

order

  1. CREATE TABLE `order` (
  2. `id` int(11) NOT NULL AUTO_INCREMENT,
  3. `room_id` int(11) NOT NULL,
  4. `stu_id` int(11) NOT NULL,
  5. `status` int(11) NOT NULL DEFAULT 0 COMMENT '0:未出租 1:已出租',
  6. `create_time` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  7. `isDel` int(11) NOT NULL DEFAULT 0,
  8. PRIMARY KEY (`id`) USING BTREE
  9. ) ENGINE = InnoDB AUTO_INCREMENT = 12 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

room

  1. CREATE TABLE `room` (
  2. `id` int(11) NOT NULL AUTO_INCREMENT,
  3. `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  4. `community_id` int(11) NOT NULL,
  5. `tel` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  6. `desp` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  7. `price` int(255) NOT NULL,
  8. `address` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  9. `longitude` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  10. `latitude` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  11. `isDel` int(11) NULL DEFAULT 0,
  12. PRIMARY KEY (`id`) USING BTREE
  13. ) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

student

  1. CREATE TABLE `student` (
  2. `id` int(11) NOT NULL,
  3. `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  4. `password` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  5. `sex` int(11) NOT NULL COMMENT '1:男 2:女',
  6. `tel` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  7. `university_id` int(11) NOT NULL,
  8. `isDel` int(11) NOT NULL DEFAULT 0,
  9. PRIMARY KEY (`id`) USING BTREE
  10. ) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

university

  1. CREATE TABLE `university` (
  2. `id` int(11) NOT NULL AUTO_INCREMENT,
  3. `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  4. `isDel` int(11) NOT NULL DEFAULT 0,
  5. PRIMARY KEY (`id`) USING BTREE
  6. ) ENGINE = InnoDB AUTO_INCREMENT = 13 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

四、后台设计

本系统采用前后端分离式开发,前端使用vue编写,后端使用egg编写,前后端分离开发可以很大程度的减少系统维护难度,在一端做了修改时,另一端只需要关心业务逻辑的变化,而不需要更改程序自身的逻辑,提高开发效率。

4.1 Egg

前端发送给后台的请求,每个请求发送至后台时,先通过编写好的中间件(middleware),然后根据访问的路由(router)去执行对应的控制器(controller),控制器中只做数据操作,不对数据库进行直接操作,将数据整理为服务(service)所需要的形式,直接发送给对应的服务,服务对数据库进行直接操作,然后将结果直接返回给控制器,控制器再将结果响应给前台。

如此,完成了一次请求。

4.2 权限校验

已登录的用户,在请求时的请求头会带Authorization字段,若请求在白名单内,则不需要通过jwt中间件,直接放行,否则要校验此字段,字段里是bare + 登录时生成的json web token。

jwt中间件对token进行解码后,判断是否合法并且在有效期内,通过则放行,不通过则直接返回状态码401(无权限)。

当请求为两端的login时,jwt中间件不进行验证,直接放行。

代码实现

4.3 连接数据库

本系统通过knex对数据库进行操作,以函数式编程的方式,简化了手写sql语句的操作,使代码更具语义化与可读性。

配置MySQL数据库:

五、管理端设计

页面采用蚂蚁金服出品的Ant Design UI 组件库,提供了完善的设计原则、最佳实践和设计资源文件(Sketch 和 Axure),来帮助业务快速设计出高质量的产品原型。

5.1 登录页面

输入用户名密码,点击登录,将login_name和password发送至后台,后台进行校验,生成一个jwt,将这个token存至cookie中,当前端再次发起其他请求时,将这个token带到请求头的Authorization字段中,供后台解析。

若cookie中无token,在axios拦截器中对这一请求进行拦截,提示失效并强行跳转回登录页。

5.2 主页

管理端首页是一个温馨的背景图和提示语logo,背景图宽度自适应,根据浏览器宽度不同显示不同的内容

5.3 房间管理

5.3.1 社区管理

社区管理部分会搜索出所有目前存在的社区列表,并进行了分页处理

搜索社区关键字可查询到对应社区。

省市部分可对结果进行筛选。

此处通过一个地区的json渲染出对应的城市列表,点击时对数据进行筛选。

对于社区的新增语编辑有一个二级联动选择地区的功能,此处同样也是用到了前文提到的地区json文件渲染

删除时会有对应的提示气泡,没有采用弹窗,界面更轻量更友好。

5.3.2 房间管理

删除、分页与关键字搜索功能同上

更新房间,新建时会判断传入输入框的参数中有没有id,如果有,则将数据回显,并且显示当前社区,在地图对应位置上显示标志物。如果没有,则输入框均显示空,地图上中心点为固定位置(可修改)并且没有标志物。

选择社区部分,输入关键字可搜索到社区,并在前面自动拼上市/省+区/县,

这里做了请求防抖功能,当输入关键字后不会立即发送请求,而是会等待300毫秒,如果在这300毫秒内又有输入,则重新开始计时,减少发送请求次数,降低服务器压力。

在地图上点击后,会添加标志物,再次点击会更换位置。

由于百度地图jsapi只提供了增加标志物与删除标志物的功能,所以此处在点击之后,添加新的标志物,并将之前的标志物删除,实现移动位置的效果。

5.4 学校管理

此页面做了分页,每页查询十条数据,每次返回的数据会将总数据量返回,以此显示总页数。

删除提示使用的气泡弹窗的样式,减少了滥用覆盖层,既避免了打断用户心流,又减少了用户的误操作。

在对学校进行编辑操作时,由于只需要编辑学校名称,此处就没有做弹窗,直接在表格内编辑,当名称在表中已存在时会弹出提示。

创建学校使用了弹窗,需要输入,同样也做了非空非重复的校验。

5.5 管理员管理

仅超级管理员可进入此界面,普通管理员没有这个tab页签,而且仅可删除普通管理员。点击新建即可创建新的管理员。

登录名与密码均做了非空与正则表达式的校验。

代码

5.6 个人信息

此处只做基本信息的展示与密码修改功能。

当点击密码时弹出密码修改框。

输入原密码与两次新密码后,会先发送一个密码校验的请求,校验通过后会发送新密码与登录名,去修改密码。

六、手机端设计

手机端使用vant UI组件库。

6.1 用户登录

当学号与密码有空时,会弹出提示框。

6.2 房屋信息页

房屋信息页可根据标题进行搜索,搜索结果也是和管理端同理的分页处理,当页面滑动到一定阈值时会自动加载下一页数据,实现瀑布流式的数据展示。

当查询数据条数小于10时,不再继续发送请求并显示没有更多了。

6.3 房屋详情页

点击列表上的房屋,可进入详情页,上部地图与管理端基本一致,功能有所缩减。

点击右上角预约功能会弹出确认提示框,确认后会提交预约单。成功后会提示预约成功,而如果已经预约过看房,则会提示已经预约过。

6.4 我的预约

预约列表部分同房屋信息。

会根据租用状态显示,并显示预约的时间。

点击自习室可跳转至详情页。

页面会进行查询指定时间段内当前自习室占用情况,默认时间段为当前时间至一小时后,最小可选时间为当前时间,最大可选时间为当天23点59分,并可配置。

座位图使用了pinchzoom进行缩放与平移控制。

座位为单选,单击后所选座位会变为红色,点击提交-确定即可预约。

点击确定后会重新检索座位情况,若在此时间段内有人占用,座位会显示灰色。

点击此座位会显示该座位占用时间,以此让用户方便知道该座位可预约什么时段,提高座位利用率。

当用户在预约的时段内已有其他预约,则不可预约。

6.5 个人信息

个人信息页面显示详细信息,点击手机号可弹出手机号修改框。

手机号格式错误会弹出提示框。

点击修改密码会弹出密码修改框。

输入三个密码后,点击确认会先发送一个验证密码请求,校验成功后会返回code 20000,那么会紧接着发送更新密码的请求,请求成功后即更改成功。

6.6 国际化

由于系统特殊性,制作国际化功能必要很大,在个人信息页面点击修改语言会弹出选择框

当用户首次使用此系统时,会判断浏览器cookie中有没有language字段,如果有,则根据此字段显示对应的语言,如果没有,则直接写入zh-cn(简体中文),随后读取简体中文的语言,修改语言后,会把cookie中的language字段的值改写,重启浏览器/应用后即可生效

代码

上传的附件 cloud_download 基于vue和egg实现的留学生租房系统.7z ( 10.78mb, 3次下载 )
error_outline 下载需要12点积分

发送私信

最合适你的人,是不需要奔跑着去追赶,拼了命去靠近的

6
文章数
9
评论数
eject