前端页面主要使用element UI框架进行设计

逻辑梳理

登录功能实现

前台:

	为登录按钮添加点击事件,并传递参数,传递的参数是用户输入的用户名以及密码,调用后台接口来获取数据。

	创建config文件夹,用来存储配置文件

			创建env.js,用来封装基本的路由接口

			创建fetch.js,用来断定post请求和get请求的路由链接

后台:

路由模块,封装一个总路由模块index.js,用来加载不同的路由模块。

    首先创建用户的路由模块admin.js(需要在总路由模块中进行加载),书写请求方式及路由地址。为了方便维护,将所要执行的函数进行封装。

创建controller文件夹,用来编写后台接口

    在controller文件中创建用户的业务逻辑层中的Admin对象的方法login

为安全考虑,需要对密码进行加密,这里使用的MD5的方式定义新的常量用来接收加密后的密码

创建用来存储实体的文件夹models,以及连接数据库文件夹mongodb,在其创建db.js,用来存放连接数据库的相关配置以及数据库出现错误时的返回的相关代码块

	在models文件夹中创建用户的实体,进行暴露

在controller文件夹下的admin.js中导入用户实体

	判断用户是否存在,如果不存在

			进行注册,在session中存储当前用户的id

			创建实体Ids,存储id列表的信息

			若前台返回后台成功的提示信息时,表示注册成功

	如果用户存在,进入登录模式

			在session中存储当前用户的id

			判断加密后的密码是否等于数据库中用户所对应的密码

			正确,返回登录成功

cripto插件,表示接口,可以提供基本的加密功能

登录状态保持

	从session中获取当前用户的id名称,存储在vuex的仓库中,在页面刷新时重新调用方法,获取id号。达到登录状态的保持

当天数据显示的业务逻辑

当天注册用户数量统计:

后台:在路由模块中添加请求的路由地址

			在controller中添加用户业务逻辑层中的方法

						通过日期进行查询

			在models中查找用户集合实体是否存在,如存在,直接书写方法

					如不存在,创建用户集合

前台:在api下的getData文件中添加接口

			在home页面中调用接口,实现当天注册用户的数量显示

当天订单数量统计:

后台:在路由模块中添加请求的路由地址

			在controller中添加订单业务逻辑层中的方法

						通过日期进行查询

			在models中查找订单集合实体是否存在,如存在,直接书写方法

					如不存在,创建订单集合

前台:在api下的getData文件中添加接口

			在home页面中调用接口,实现当天订单的数量显示

当天注册管理员数量统计:

后台:在路由模块中添加请求的路由

			在controller中添加管理员业务逻辑层中的方法

						通过日期进行查询

			在models中查找管理员集合实体是否存在,如存在,直接书写方法

					如不存在,创建管理员集合

前台:在api下的getData文件中添加接口

			在home页面中调用接口,实现当天注册管理员的数量显示

注册用户总数量统计:

后台:在路由模块中添加请求的路由

			在controller中添加用户业务逻辑层中的方法

			在models中查找用户集合实体是否存在,如存在,直接书写方法

					如不存在,创建用户集合

前台:在api下的getData文件中添加接口

			在home页面中调用接口,实现注册用户的数量显示

订单总数量统计:

后台:在路由模块中添加请求的路由

			在controller中添加订单业务逻辑层中的方法

			在models中查找订单集合实体是否存在,如存在,直接书写方法

					如不存在,创建订单集合

前台:在api下的getData文件中添加接口

			在home页面中调用接口,实现订单的数量显示

注册管理员总数量统计:

后台:在路由模块中添加请求的路由

			在controller中添加管理员业务逻辑层中的方法

			在models中查找管理员集合实体是否存在,如存在,直接书写方法

					如不存在,创建管理员集合

前台:在api下的getData文件中添加接口

			在home页面中调用接口,实现注册管理员的数量显示

用户列表:

后台:在路由模块中添加请求的路由

			在controller中添加用户列表业务逻辑层中的方法,进行后台处理分页,传递参数当前页码及每页显示的				条数

			在models中查找用户集合实体是否存在,如存在,直接书写方法

					如不存在,创建用户集合

前台:在api下的getData文件中添加接口

			在userlist页面中调用两个接口,及用户总数量的接口和用户列表的接口

			实现用户列表的显示

商家列表

后台:在路由模块中添加请求的路由

			在controller中添加商家列表业务逻辑层中的方法,进行后台处理分页,传递参数当前页码及每页显示的				条数

			在models中查找商家集合实体是否存在,如存在,直接书写方法

					如不存在,创建商家集合

前台:在api下的getData文件中添加接口

			在shoplist页面中调用两个接口,及商家总数量的接口和商家列表的接口

			实现商家列表的显示

编辑功能实现

		前台:点击编辑按钮,显示修改商家列表的弹框

				点击确定按钮,弹出修改成功的弹框,调用接口,向后台传输所要修改的数据

		后台:在路由模块中添加请求的路由

					在controller业务逻辑层实现方法的实现,将前台传输过来的数据在数据库中完成修改

删除功能的实现

	权限的分配实现

			后台:创建middlewares文件夹用来进行权限的分配

			在路由层下的删除店铺接口中间插入方法,实现权限的分配

添加食品

	如果未选择商铺,则跳转到商铺列表界面

	添加食品分类功能实现

			前台:

				在api下的getData文件中添加接口

				点击添加按钮,调用后台接口

			后台:在路由模块下添加路由

					在controller业务逻辑层实现方法的实现,将前台传输的数据添加进数据库

食品列表

后台:在路由模块中添加请求的路由

			在controller中添加食品列表业务逻辑层中的方法,进行后台处理分页,传递参数当前页码及每页显示的				条数

			在models中查找食品集合实体是否存在,如存在,直接书写方法

					如不存在,创建食品集合

前台:在api下的getData文件中添加接口

			在foodlist页面中调用两个接口,及食品总数量的接口和食品列表的接口

			实现商家列表的显示

编辑功能实现

		前台:点击编辑按钮,显示修改食品列表的弹框,(如果未选择商铺,则跳转到商铺列表界面)

				添加食品分类功能实现

						前台:

							在api下的getData文件中添加接口

							点击添加按钮,调用后台接口

						后台:在路由模块下添加路由

									在controller业务逻辑层实现方法的实现,将前台传输的数据添加进数据库

				点击确定按钮,弹出修改成功的弹框,调用接口,向后台传输所要修改的数据

		后台:在路由模块中添加请求的路由

					在controller业务逻辑层实现方法的实现,将前台传输过来的数据在数据库中完成修改

删除功能的实现

	权限的分配实现

			后台:创建middlewares文件夹用来进行权限的分配

			在路由层下的删除店铺接口中间插入方法,实现权限的分配

添加商铺

	添加食品分类功能实现

			前台:

				在api下的getData文件中添加接口

				点击添加按钮,调用后台接口

			后台:在路由模块下添加路由

					在controller业务逻辑层实现方法的实现,将前台传输的数据添加进数据库

订单列表

后台:在路由模块中添加请求的路由

			在controller中添加订单列表业务逻辑层中的方法,进行后台处理分页,传递参数当前页码及每页显示的				条数

			在models中查找订单集合实体是否存在,如存在,直接书写方法

					如不存在,创建订单集合

前台:在api下的getData文件中添加接口

			在orderlist页面中调用两个接口,及订单总数量的接口和订单列表的接口

			实现订单列表的显示

管理员列表

后台:在路由模块中添加请求的路由

			在controller中添加管理员列表业务逻辑层中的方法,进行后台处理分页,传递参数当前页码及每页显示的条数

			在models中查找管理员集合实体是否存在,如存在,直接书写方法

					如不存在,创建管理员集合

前台:在api下的getData文件中添加接口

			在adminlist页面中调用两个接口,及管理员总数量的接口和管理员列表的接口

			实现管理列表的显示
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐