社区维修平台前端技术:nodejs+vue+elementui

主要的模块包括基本住户管理、社区公告管理、维修工管理、维修订单管理、接单信息管理、订单信息管理、在线沟通管理、举报信息管理、留言板管理、系统管理模块等功能。管理员对后台对有相应的操作权限。系统中管理员为主要是为了安全有效地存储和管理及维护系统的各类信息,可以对系统进行管理与更新维护。

element ui 打不开了_vue.js

 

 Express是一个基于Node.js平台的极简、灵活的web应用开发框架,本项目有全自动化的安装bat脚本,无须担心
下面我们讲解
1、 node_modules文件夹(有npn install产生)
    这文件夹就是在创建完项目后,cd到项目目录执行npm install后生成的文件夹,下载了项目需要的依赖项。
2、package.json文件
     此文件是项目的配置文件(可定义应用程序名,版本,依赖项等等)。node_modules文件夹下的依赖项是从哪里知道的呢?原因就是项目根目录下的这个package.json文件,执行npm install时会去找此文件中的dependencies,并安装指定的依赖项。
3、public文件夹(包含images、javascripts、stylesheets)
      这个文件夹做过Web开发的应该一看就知道,为了存放图片、脚本、样式等文件的。
4、routes文件夹
      用于存放路由文件。
5、views文件夹
      存放视图。

element ui 打不开了_javascript_02

 

新闻资讯:通过点击新闻资讯可以进行查看新闻内容、发布时间、新闻标题等信息,进行查看
维修订单:通过点击维修订单可以进行查看维修订单的物品名称、维修类型、发布日期、用户名、住户姓名、号、地址等信息,进行查看、接单,在线交流。维修员通过点击接单进入接单页面可以进行查看物品名称、维修类型、用户名、住户姓名、接单内容、接单日期、账号、姓名、电话等信息,进行提交或重置操作。维修员通过点击交流可以进行页面进行在线查看标题、用户名、住户姓名、进行输入聊天内容、日期等信息,进行在线交流操作。
开发语言:nodejs
框架:Express
数据库:mysql 5.7
数据库工具:Navicat11
开发软件:VS code/HBuilder X
浏览器:谷歌浏览器

element ui 打不开了_javascript_03

 

用户通过用户登录页面可以填写用户名和密码,等信息进行登录操作,用户登录成功后,进入用户后台系统页面可以查看个人中心、维修订单管理、接单信息管理、订单信息管理、在线沟通管理、举报信息管理模块等功能模块,进行相对应操作。

element ui 打不开了_javascript_04


用户通过点击个人中心可以进行查看修改密码、个人信息两个子模块,个人信息:通过页面可以进行输入用户名、住户姓名、性别、头像、号等信息,进行修改操作。

维修订单管理:用户通过列表可以进行查看名称、物品名称、维修类型、图片、发布日期、用户名、住户姓名、、地址等信息,进行查看、添加或删除操作。住户通过点击添加进入页面可以进行填写名称、维修类型、物品名称、图片、发布日期、用户名、住户姓名、地址、、维修内容等信息,进行提交维修订单操作。

 

element ui 打不开了_javascript_05

 

接单信息管理:住户通过接单信息列表可以进行查看订单编号、物品名称、维修类型、用户名、住户姓名、接单内容、接单日期、账号、姓名、电话等信息,进行查看详情或通过输入订单编号进行查询操作

订单信息管理:住户通过接单信息列表可以进行查看订单编号、物品名称、维修类型、用户名、住户姓名、维修费用、账号、姓名、是否支付等信息,进行查看详情或通过输入订单编号、物品名称、住户姓名进行查询操作。

在线沟通管理:通过在线沟通列表可以进行查看标题、用户名、住户姓名、聊天内容、聊天回复、账号、姓名等信息,进行查看详情或修改、删除操作,通过输入标题、住户姓名进行查询操作

举报信息管理:通过举报信息列表可以进行查看标题、账号、姓名、举报内容、举报日期、住户

 

element ui 打不开了_vue.js_06


管理员通过后台登录页面,可以进行填写用户名和密码,等信息,输入无误后进行登录操作

管理员登录成功后进入到系统操作界面,可以对个人中心、住户管理、社区公告管理、维修工管理、维修订单管理、接单信息管理、订单信息管理、在线沟通管理、举报信息管理、留言板管理、系统管理等功能模块进行相对应操作。

管理员通过个人中心可以获取修改密码和个人信息两个子模块,通过个人信息列表可以进行查看管理员的个人信息并进行查看修改操作

住户管理:管理员通过列表查看用户名、密码、住户姓名、性别、头像、号等信息,管理员可以进行修改或查看删除操作,也可以通过点击输入用户名可以进行搜索

element ui 打不开了_javascript_07


社区公告管理:管理员通过列表可以获取公告标题、图片、公告内容、发布时间等信息,进行插件社区公告详情信息、修改或删除操作,管理员通过输入公告标题进行查询或添加公告操作

维修工管理:管理员通过点击维修工页面可以进行查看账户、密码、姓名、性别、等级、头像、身份证、电话、简介等信息,进行查看详情或修改或删除操作,并通过账号进行查询操作

接单信息管理:住户通过接单信息列表可以进行查看订单编号、物品名称、维修类型、用户名、住户姓名、接单内容、接单日期、账号、姓名、电话等信息,进行查看详情、修改或删除操作,通过输入订单编号进行查询操作

element ui 打不开了_element ui 打不开了_08


订单信息管理:管理员通过接单信息列表可以进行查看订单编号、物品名称、维修类型、用户名、住户姓名、维修费用、账号、姓名、是否支付等信息,进行查看详情、修改或删除操作,并通过输入订单编号、物品名称、住户姓名进行查询操作

在线沟通管理:通过在线沟通列表可以进行查看标题、用户名、住户姓名、聊天内容、聊天回复、账号、姓名等信息,进行查看详情或修改、删除操作,通过输入标题、住户姓名进行查询操作

举报信息管理:通过列表可以获取标题、账号、姓名、举报内容、举报日期、用户名、住户姓名、审核回复、审核状态、审核等信息,进行查看详情或修改删除操作,并且通过输入标题、姓名进行搜索操作

element ui 打不开了_javascript_09


维修员通过后台登录页面,可以进行填写用户名和密码,等信息,输入无误后进行登录操作

个人中心:维修员通过个人中心页面可以进行输入账号、密码、姓名、性别、密码、等级、上传图片、身份证、电话等信息,进行更新信息或退出操作。

留言反馈:通过页面可以进行在线留言,输入留言内容进行立即提交操作。

维修工:通过点击维修工可以进行查看维修工的账号、性别、头像、等级、身份证、电话、简介等信息,进行查看或举报操作,如图5-14所示。通过点击举报进入举报页面可以进行输入标题、账号、姓名、举报内容、举报日期、用户名、住户姓名等信息,进行举报提交操作。