如何使用ssm实现在线购书商城系统+vue

@TOC

ssm119在线购书商城系统+vue

第1章 绪论

1.1 课题背景

网络交易（Electronic Commerce）：是指实现整个贸易过程中各阶段的贸易活动的电子化。网络交易是一种多技术的集合体。其业务可包括：信息交换、售后服务、销售、电子支付、运输、组建虚拟企业、公司和贸易伙伴可以共同拥有和运营的商业方法等。网络交易的整个贸易活动都可以实现自动化和电子化。网络交易应用系统的工作实质是对信息进行收集、处理、加工分析，形成各种商务应用数据库，并将信息流转换为物流和资金流的过程。

现在的时代科技飞速地发展，网上购物已经深入大众的生活。互联网技术更是明显的提高，电脑已经走进千家万户。对于人们使用互联网进行网络交易已经逐渐深入人心，人们对于网购的信任度也比以往大幅提高，网络交易的份额正在逐年加大，网络交易的直观、有效、便捷等优点是传统的交易模式无法比拟的，因此，现在应抓住这个时机，在这个领域占有一席之地。

由上可见，要建立好一个在线购书商城系统，需要对大量的信息进行处理和分析，对于了解和掌握数据库系统的理论和实际应用都有很大的帮助。同时，网络交易在当前社会是一种很热门的商业活动，正在以人们无法想象的速度在全球范围内飞快地成长着。本次开发的基于Springboot+Vue的在线购书商城系统即满足了用户网络购买图书的需求，又为提高了书店的营业额，符合当今电子商务和互联网快速发展的潮流。

1.2 研究现状

在国外的发达国家，电子商务的发展先于国内一步，例如美国的大型购物网站亚马逊，沃尔玛电商，UPS，它拥有着庞大的用户群体，几乎美国的每家每户都使用过亚马逊购物网进行过网上购物。现如今全球B2B电子商业交易模式占市场的主导地位，我国的电子商务市场还拥有着比较巨大大的潜力，电子商务交易市场正在对传统的交易市场进行的巨大的冲击。也正是国外的先进技术的到来推动着我国互联网和电子商务的快速发展。

目前国内大型网上购物商城已经被淘宝，京东等做的十分成型，网上书城中，当当、亚马逊等也做的十分成熟。随着计算机的普及，粗略统计我国网民也达到了2.5亿人只多，我国网民使用网络购物的比例也得到了快速的增长，从4589万人增长到了1.08亿人，着说明了每6个人中就有一个使用过互联网购物。着恰恰说明了我国互联网电子商务在未来的前景还有很大的发展空间。电子商务在国内经过了多年的快速发展以后，已经几乎把人们能想的到的购物商品放在了网上，用户可以通过网络去搜索自己想要的一切商品，电子商务的力量现已经渗透到人们生活中的方方面面。

1.3 研究目的意义

新时代下互联网、多媒体技术等新技术发展迅速，与此同时这些新技术开始逐渐在各个领域崭露头角。网络正以一种与以往不同的冲击力影响着人们的活动，包含人们的正常生活。并且给人们带来了前所未有的挑战和机遇。

人们可以足不出户的买菜，买水果，买衣服等等，人们变得越来越不想出门，电商崛起，快捷、方便、便宜、选择多样化让人们离不开它，种种优势吸引着人们，而且网点成本比较低，不需要大投入，降低了成本，在这么多的优势下，导致很多实体店都经营不下去，纷纷倒闭关门。

因此，在线购书商城系统也络绎不绝地出现，读者也乐于在网络上购买，还便宜。在线购书商城系统的目的与意义在于为读者方便的寻找想要的书籍，在线购书商城系统永远不关门，二十四小时营业，读者也不需要一本一本的找，太麻烦，太浪费时间，可以方便快捷的查找自己想要的书籍，特别是对于看书爱好者，都是忙于事业和努力学习，时间对于他们来说就是生命，像对于这种人在网上买书可以节省他们大量的时间，所以在线购书商城系统具有实际意义。因此网上售书必然会有长远的发展。

本次毕业设计的任务是实现在线销售书籍，包含管理员管理数据库中的书籍，管理用户的信息等一系列功能。

30

第2章 关键技术简介

2.1 Java技术

Java是一种非常常用的编程语言，在全球编程语言排行版上总是前三。在方兴未艾的计算机技术发展历程中，Java的身影无处不在，并且拥有旺盛的生命力。Java的跨平台能力十分强大，只需一次编译，任何地方都可以运行。除此之外，它还拥有简单的语法和实用的类库，让编程人员可以尽可能将精力集中在问题的求解上，并且许多开源项目和科研成果都是采用它实现的。

在1995年这一年的5月份，著名的Sun Microsystems公司在程序开发设计上面郑重推出一种面向对象开发的程序设计语言——Java，最开始的时候Java是由詹姆斯.高斯林这位伟大的JAVA之父来进行主导，但是在后来由于各种原因，让甲骨文公司这个针对商业程序创建了oracle大型数据库的公司收购了Java[16]。Java的平台总共算下来有3个，分别为javaME和javaSE以及javaEE这3个java平台。下面将对其进行分别介绍。

（1）在电脑桌面程序的开发上面需要选择JavaME，这个用得也比较多。

（2）企业也会根据工作以及业务需要开发各种软件，那么就会选用JavcEE这个支持企业版软件的开发的Java平台，JavcEE主攻运用在企业领域上面的web应用，JavcEE也在javaSE的基础上获得了比如jsp技术 ，Servlet技术等程序开发技术的支持。

（3）现在生活中手机的普及化，也使得手机端这样的移动设备的软件的兴起，JavaME这个迷你版java平台就能运用于移动端的软件开发操作。

2.2 Vue框架

Vue是当今前端的三大框架之一，主要技术领域运用到的是单页SPA的应用之中。这样很好的提供了用户的浏览网页的交互体验。减少了浏览器的负载。提高浏览器的高效的浏览的速度。

Vue 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue可以在任意其他类型的项目中使用，使用成本较低，更加灵活，主张较弱，在Vue的项目中也可以轻松融汇其他的技术来开发，而且因为Vue的生态系统特别庞大，可以找到基本所有类型的工具在vue项目中使用。其特点：易用（使用成本低），灵活（生态系统完善，适用于任何规模的项目），高效（体积小，优化好，性能好）。

VUE的出现，加快了前后端分离的进程，提高了程序员的工作效率，也减少了工作时间。Vue.js是一套用于构建用户界面的，可以自底向上逐层应用的渐进式前端框架。它相比于其他主流的JavaScript框架例如AngularJS或React都具有运行效率高、语法简洁、自身占用空间小、上手容易等特点。它的核心只关注视图层，是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统，并且所有的这些都是响应式的。

2.3 B/S结构

此次设计的网络结构模式B/S结构（Browser/Server）。B/S架构也称为B/S模式，是一种服务器以及浏览器架构模式。B/S的工作模式都是先由浏览器请求，服务器再响应。B/S体系结构解决了异构系统中的连接难题，大大改善了系统的开放性，让系统的扩展和维护更加简单；同时，B/S体系结构操作也比较容易，界面全都为浏览器模式，容易分发数据的捕获程序。只要安装通用的浏览器（如WWW浏览器）就能通过Web服务器与数据库进行数据交互。此结构的好处之一在于由于它使用的统一的浏览器，使其可以在不同的地方且不需要用专门的软件进行操作，实现了不论你使用怎样的接入网的方式都可以对公共的数据进行调用和浏览。

相对于C/S模式，B/S模式是对C/S模式应用的扩展，B/S模式不用对不同的计算机安装不同应用程序，还有安全性的要求及对模式上手难度都比前者更好。B/S模式可以让客户机的压力大大减轻，工作的负荷被合理的分配了。

B/S三层框架结构图如图2-1所示：

显示逻辑

浏览器

事物处理逻辑

Web服务

数据库

事物处理逻辑

数据库服务器

响应

请求

相应

请求

求

图2-1 B/S三层框架结构图

2.4 MYSQL数据库

MySQL 是关系型数据库管理系统的代表， 因为MySQL是其免费开源的，而且MySQL的功能已经足够用对于学习和中小型企业来讲，所以开发中小型网站都会选择MySQL作为网站的数据库。[13]

MySQL具有开放性，它是一种关系型数据库管理系统，并且它的源代码可以被大众所熟知[3]。由于MySQL是开放源代码的，因此，只要经过授权就可以在自己需求的基础上对其进行修改。MySQL因为其固有的特点而备受关注，它具有很强的适应性，并且十分可靠，查询速度快。MySQL安装起来非常方便，且数据存储量大，不需要事务化处理。Sql语言拥有很多的方法，在项目中编写sql语句时使用起来是非常方便的，不会像其他语言那样需要编写更多的语句。正因为MySQL使用sql语言进行数据库管理，所以它收到了大多数程序员的热爱。

第3章 系统分析

3.1 可行性分析

在系统开发之初要进行系统可行分析，这样做的目的就是使用最小成本解决最大问题，一旦程序开发满足用户需要，带来的好处也是很多的。下面我们将从技术上、操作上、经济上等方面来考虑这个系统到底值不值得开发。

3.1.1 技术可行性

本在线购书商城系统采用Java和MYSQL数据库进行开发设计，作为计算机专业学生，在学校期间就接触到许多关于编程方面的知识，当然也包括各种编程软件，对他们的了解度也比较系统，所以技术开发上面还是有一定把握。

3.1.2 经济可行性

由于自己本身就是学生，还没有正式参加工作，金钱上面一直都处于缺乏状态。所以在开发程序过程中，我是不会花太多经济成本在上面的。针对开发软件和数据库，还有界面设计的photoshop软件等在百度上面就可以直接下载，然后根据各种安装视频进行安装，这些资源都是免费的，程序编码阶段使用的源代码在百度上面可以轻松获得，在有网络的环境下就能下载下来，不需要支付任何费用，经济成本很低。

3.1.3 操作可行性

本人自己就是学生，程序开发经验不足，在界面设计上面不会设计太复杂，要讲究简单好看，操作上要方便，不能让用户觉得不流畅。用户一旦进入操作界面，界面上就会有相应提示，跟着操作提示就可以找到对应的功能操作模块，对于用户来说免培训就能使用。本在线购书商城系统本身具有操作可行性，其界面设计清晰、功能权限分配合理，操作简单，不同用户登录后可对进行相应功能模块的操作，具有极高的操作可行性。

3.1.4 时间可行性

从时间上看，在三个月的时间里学习相关知识，开发本在线购书商城系统，时间上是有点紧，但是不是不可能实现，在做毕业设计的这几个月里，我通过努力使得功能应该基本可以实现。

综上所述，我们进行了四个方面的可行性研究，可以看出，该在线购书商城系统的开发是没有问题的。

3.2 系统功能分析

本在线购书商城系统主要满足两种用户的需求，这两种用户分别为管理员和用户，下面将对这两种用户分别实现的功能进行详细的阐述。

（1）用户：用户在系统前台可查看系统信息，包括首页、图书信息、图书资讯以及交流论坛等，注册登录后主要功能模块包括购物车、在线客服、个人中心、我的发布、我的订单、我的地址、我的收藏，用例图如图3-1所示。

图3-1 用户用例图

（2）管理员：管理员登录后可对系统进行全面的管理，主要功能模块包括个人中心、用户管理、图书分类管理、图书信息管理、交流论坛、系统管理以及订单管理。管理员用例图如图3-2所示。

图3-2 管理员用例图图

3.3 系统性能分析

（1）系统的存储性：因为是在线购书商城系统，所以就会在数据库要求上比较严格，信息录入的比较多，而且丰富复杂， 这就需要一个强大的数据库来存放更多的数据和保证数据的时时性。

（2）系统的易学性：系统设计的应该简单易学的，设计的各种功能应该简单操作，不需要努力学习培训，缩短用户熟悉系统的进程。

（3）系统的数据要求：数据应该录入准确，需要更新时，数据应该可以及时的修改，数据还应该有独立保存，不能删除数据的时候会连带着把还需要的数据都删除掉。

（4）系统稳定性：开发的在线购书商城系统要求运行稳定，运行过程中无界面不清楚、字体模糊等现象。

（5）系统可靠性：系统不可以有病毒类代码，必须有拦截器，验证方法，对里面信息的保护措施，这样才让人用的放心。

3.4 系统流程分析

3.4.1注册流程

未有账号的用户可进行注册操作，在注册时系统会判断用户名是否已存在，已存在的话，提示返回重新填写用户名，用户名不存在，填写其他注册信息，系统判断注册信息是否正确，正确则在数据库中添加用户信息，注册成功。用户注册流程图如图3-3所示。

图3-3注册流程图

3.4.2登录流程

登录模块主要满足了用户以及管理员的权限登录，用户登录流程图如图3-4所示

图3-4登录流程图

3.4.3购买流程

用户在购买图书时需要登录系统，只要登录后才可支付购买图书，用户购买图书的流程分析如图3-5所示。

图3-5 购买流程图

第4章 系统设计

4.1 系统结构设计

系统结构设计是一个将一个庞大的任务细分为多个小的任务的过程，这些小的任务分段完成后，组合在一起形成一个完整的任务。在整个设计过程，以确定可能的具体方案达成每一个小的最终目标，对于每一个小的目标而言，我们必须先了解一些相关的需求分析的信息。然后对系统进行初步的设计，并对其逐渐进行优化，设计出一个具体可实现的系统结构。

本在线购书商城系统主要包括用户模块和管理员模块，根据第三章中系统功能需求分析，可画出本在线购书商城系统的结构图如图4-1所示：

图 4-1 系统结构图

4.2系统顺序图

4.2.1登录模块顺序图

用户和管理员均可进行登录操作，登录模块的顺序图如图 4-2 所示。

图4-2用户登录顺序图

4.2.2添加信息模块顺序图

管理员和用户登录后均可进行添加信息操作，添加信息顺序图如图4-3所示

图4-3添加信息顺序图

4.3 数据库设计

4.3.1 数据库E-R图设计

E-R图展现了数据的实体结构关系，为系统数据管理奠定了基础，也对数据进行规范化的设置，保证后期的高效性，避免数据出现重复造成冗余使得数据更新出现异常，无法同步数据和插入数据。通过E-R图也可便于对数据的设计和修改，如果一个数据库在被设计时没有相对应的E-R图，则整体数据库就缺少明确的定位和条理性，使得处理数据的效率大大降低，在需要更新或者查找数据时报错的可能性大大提升，对与后期运行调试系统会造成不必要的麻烦。本在线购书商城系统的E-R图如下图所示：

1、图书分类信息实体E-R图如图4-4所示：

图4-4 图书分类信息实体的E-R图

2、图书信息实体E-R图如图4-5所示：

图4-5 图书信息实体E-R图

3、订单实体图如图4-6所示。

图4-6 订单实体E-R图

4、管理员信息实体图如图4-7所示。

图4-7 管理员信息实体E-R图

5、用户信息实体图如图4-8所示。

图4-8 用户信息实体E-R图

4.3.2数据库表设计

本在线购书商城系统采用了MYSQL数据库进行系统数据的储存，主要的数据库表的具体设置如下：

表4-1 tushufenlei图书分类信息表

|列名|说明|类型 ( 长度 )|备注| | - | - | - | - | |id|编号|bigint(20)|不允许空，主键| |addtime|创建时间|timestamp|允许空| |tushufenlei|图书分类|varchar(200)|允许空|

表4-2 tushuxinxi图书信息表

|列名|说明|类型 ( 长度 )|备注| | - | - | - | - | |id|编号|bigint(20)|不允许空，主键| |addtime|创建时间|timestamp|允许空| |tushumingcheng|图书名称|varchar(200)|允许空| |tushufenlei|图书分类|varchar(200)|允许空| |tupian|图片|varchar(200)|允许空| |zuozhe|作者|varchar(200)|允许空| |chubanshe|出版社|varchar(200)|允许空| |tushujianjie|图书简介|longtext|允许空| |clicktime|最近点击时间|datetime|允许空| |clicknum|点击次数|int(11)|允许空| |price|价格|float|允许空|

表4-3 orders订单信息表

|列名|说明|类型 ( 长度 )|备注| | - | - | - | - | |id|编号|bigint(20)|不允许空，主键| |addtime|下单时间|timestamp|允许空| |orderid|订单编号|varchar(200)|允许空| |tablename|商品表名|varchar(200)|允许空| |userid|用户编号|bigint(20)|允许空| |goodid|商品编号|bigint(20)|允许空| |goodname|商品名称|varchar(200)|允许空| |picture|商品图片|varchar(200)|允许空| |buynumber|购买数量|int(11)|允许空| |price|价格|float|允许空| |discountprice|折扣价格|float|允许空| |total|总价格|float|允许空| |discounttotal|折扣总价格|float|允许空| |type|支付类型|int(11)|允许空| |status|状态|varchar(200)|允许空| |address|地址|varchar(200)|允许空|

表4-4 users管理员信息表

|列名|说明|类型 ( 长度 )|备注| | - | - | - | - | |id|编号|bigint(20)|不允许空，主键| |username|用户名|varchar(100)|允许空| |password|密码|varchar(100)|允许空| |role|角色|varchar(100)|允许空| |addtime|添加时间|timestamp|允许空|

表4-5 yonghu用户信息表

|列名|说明|类型 ( 长度 )|备注| | - | - | - | - | |id|编号|bigint(20)|不允许空，主键| |addtime|创建时间|timestamp|允许空| |yonghuming|账号|varchar(200)|允许空| |mima|密码|varchar(200)|允许空| |xingming|姓名|varchar(200)|允许空| |xingbie|性别|varchar(200)|允许空| |touxiang|头像|varchar(200)|允许空| |lianxidianhua|联系电话|varchar(200)|允许空| |money|余额|float|允许空|

第5章 系统的实现

5.1 用户功能模块的实现

5.1.1用户注册界面

没有账号的用户可进入注册界面进行注册操作，用户注册界面的运行效果如图5-1所示.

图5-1 用户注册界面

5.1.2用户登录界面

用户要想实现图书购买等操作，必须进行登录操作，在登录界面输入正确的用户名和密码，选择登录类型，点击登录按钮进行登录，用户登录界面如图5-2所示。

图5-2用户登录界面

5.1.3系统主界面

用户可进入系统主界面查看系统信息，系统主界面的运行效果如图5-3所示.

图5-3 系统主界面

5.1.4图书详情界面

用户可选择图书查看图书详情信息，登录后可进行加入购物车和购买操作，图书详情界面如图5-4所示。

图5-4 图书详情界面

5.1.5购物车界面

用户在购物车界面可查看购物车图书信息，并可进行修改数量、删除图书以及购买等操作，购物车界面展示如图5-5所示。

图5-5 购物车界面

5.1.6我的订单界面

用户在我的订单界面可查看个人订单信息，我的订单界面如图5-6所示。

图5-6 我的订单界面

5.1.7我的地址界面

用户可增删改查个人地址信息，我的地址界面如图5-7所示。

图5-7 我的地址界面

5.2 管理员功能模块的实现

5.2.1管理员登录界面

管理员要想进入系统后台对系统进行管理，首要进入登录界面，需通过正确的账号、密码进行登录操作，管理员登录界面如图5-8所示 。

图5-8 管理员登录界面

5.2.2订单管理界面

管理员可管理所有订单信息，订单管理界面展示如图5-9所示 。

图5-9 订单管理界面

5.2.3用户管理界面

管理员可查看、修改和删除用户信息，并可新增用户，用户管理界面展示如图5-10所示 。

图5-10 用户管理界面

5.2.4图书分类管理界面

管理员可增删改查图书分类信息，图书分类界面展示如图5-11所示 。

图5-11 图书分类管理界面

5.2.5图书信息管理界面

管理员可添加、修改和删除图书信息，图书信息管理界面如图5-12所示。

图5-12 图书信息管理界面

5.2.6添加图书信息界面

管理员可进入到添加图书信息界面进行添加图书信息，添加图书信息界面展示如图5-13所示 。

图5-13 添加图书信息界面

NewsServiceImpl.java

package com.service.impl;

import org.springframework.stereotype.Service;
import java.util.Map;
import java.util.List;

import com.baomidou.mybatisplus.mapper.Wrapper;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.utils.PageUtils;
import com.utils.Query;


import com.dao.NewsDao;
import com.entity.NewsEntity;
import com.service.NewsService;
import com.entity.vo.NewsVO;
import com.entity.view.NewsView;

@Service("newsService")
public class NewsServiceImpl extends ServiceImpl<NewsDao, NewsEntity> implements NewsService {
	

    @Override
    public PageUtils queryPage(Map<String, Object> params) {
        Page<NewsEntity> page = this.selectPage(
                new Query<NewsEntity>(params).getPage(),
                new EntityWrapper<NewsEntity>()
        );
        return new PageUtils(page);
    }
    
    @Override
	public PageUtils queryPage(Map<String, Object> params, Wrapper<NewsEntity> wrapper) {
		  Page<NewsView> page =new Query<NewsView>(params).getPage();
	        page.setRecords(baseMapper.selectListView(page,wrapper));
	    	PageUtils pageUtil = new PageUtils(page);
	    	return pageUtil;
 	}
    
    @Override
	public List<NewsVO> selectListVO(Wrapper<NewsEntity> wrapper) {
 		return baseMapper.selectListVO(wrapper);
	}
	
	@Override
	public NewsVO selectVO(Wrapper<NewsEntity> wrapper) {
 		return baseMapper.selectVO(wrapper);
	}
	
	@Override
	public List<NewsView> selectListView(Wrapper<NewsEntity> wrapper) {
		return baseMapper.selectListView(wrapper);
	}

	@Override
	public NewsView selectView(Wrapper<NewsEntity> wrapper) {
		return baseMapper.selectView(wrapper);
	}

}

YonghuController.java

package com.controller;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Calendar;
import java.util.Map;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Date;
import java.util.List;
import javax.servlet.http.HttpServletRequest;

import com.utils.ValidatorUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.annotation.IgnoreAuth;

import com.entity.YonghuEntity;
import com.entity.view.YonghuView;

import com.service.YonghuService;
import com.service.TokenService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.MD5Util;
import com.utils.MPUtil;
import com.utils.CommonUtil;


/**
 * 用户
 * 后端接口
 * @author 
 * @email 
 * @date 2021-03-18 13:52:29
 */
@RestController
@RequestMapping("/yonghu")
public class YonghuController {
    @Autowired
    private YonghuService yonghuService;
    
	@Autowired
	private TokenService tokenService;
	
	/**
	 * 登录
	 */
	@IgnoreAuth
	@RequestMapping(value = "/login")
	public R login(String username, String password, String captcha, HttpServletRequest request) {
		YonghuEntity user = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("yonghuming", username));
		if(user==null || !user.getMima().equals(password)) {
			return R.error("账号或密码不正确");
		}
		String token = tokenService.generateToken(user.getId(), username,"yonghu",  "用户" );
		return R.ok().put("token", token);
	}
	
	/**
     * 注册
     */
	@IgnoreAuth
    @RequestMapping("/register")
    public R register(@RequestBody YonghuEntity yonghu){
    	//ValidatorUtils.validateEntity(yonghu);
    	YonghuEntity user = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("yonghuming", yonghu.getYonghuming()));
		if(user!=null) {
			return R.error("注册用户已存在");
		}
		Long uId = new Date().getTime();
		yonghu.setId(uId);
        yonghuService.insert(yonghu);
        return R.ok();
    }
	
	/**
	 * 退出
	 */
	@RequestMapping("/logout")
	public R logout(HttpServletRequest request) {
		request.getSession().invalidate();
		return R.ok("退出成功");
	}
	
	/**
     * 获取用户的session用户信息
     */
    @RequestMapping("/session")
    public R getCurrUser(HttpServletRequest request){
    	Long id = (Long)request.getSession().getAttribute("userId");
        YonghuEntity user = yonghuService.selectById(id);
        return R.ok().put("data", user);
    }
    
    /**
     * 密码重置
     */
    @IgnoreAuth
	@RequestMapping(value = "/resetPass")
    public R resetPass(String username, HttpServletRequest request){
    	YonghuEntity user = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("yonghuming", username));
    	if(user==null) {
    		return R.error("账号不存在");
    	}
    	user.setMima("123456");
        yonghuService.updateById(user);
        return R.ok("密码已重置为：123456");
    }


    /**
     * 后端列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,YonghuEntity yonghu, 
		HttpServletRequest request){

        EntityWrapper<YonghuEntity> ew = new EntityWrapper<YonghuEntity>();
		PageUtils page = yonghuService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, yonghu), params), params));
        return R.ok().put("data", page);
    }
    
    /**
     * 前端列表
     */
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params,YonghuEntity yonghu, HttpServletRequest request){
        EntityWrapper<YonghuEntity> ew = new EntityWrapper<YonghuEntity>();
		PageUtils page = yonghuService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, yonghu), params), params));
        return R.ok().put("data", page);
    }

	/**
     * 列表
     */
    @RequestMapping("/lists")
    public R list( YonghuEntity yonghu){
       	EntityWrapper<YonghuEntity> ew = new EntityWrapper<YonghuEntity>();
      	ew.allEq(MPUtil.allEQMapPre( yonghu, "yonghu")); 
        return R.ok().put("data", yonghuService.selectListView(ew));
    }

	 /**
     * 查询
     */
    @RequestMapping("/query")
    public R query(YonghuEntity yonghu){
        EntityWrapper< YonghuEntity> ew = new EntityWrapper< YonghuEntity>();
 		ew.allEq(MPUtil.allEQMapPre( yonghu, "yonghu")); 
		YonghuView yonghuView =  yonghuService.selectView(ew);
		return R.ok("查询用户成功").put("data", yonghuView);
    }
	
    /**
     * 后端详情
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id){
        YonghuEntity yonghu = yonghuService.selectById(id);
        return R.ok().put("data", yonghu);
    }

    /**
     * 前端详情
     */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id){
        YonghuEntity yonghu = yonghuService.selectById(id);
        return R.ok().put("data", yonghu);
    }
    



    /**
     * 后端保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody YonghuEntity yonghu, HttpServletRequest request){
    	yonghu.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(yonghu);
    	YonghuEntity user = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("yonghuming", yonghu.getYonghuming()));
		if(user!=null) {
			return R.error("用户已存在");
		}

		yonghu.setId(new Date().getTime());
        yonghuService.insert(yonghu);
        return R.ok();
    }
    
    /**
     * 前端保存
     */
    @RequestMapping("/add")
    public R add(@RequestBody YonghuEntity yonghu, HttpServletRequest request){
    	yonghu.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(yonghu);
    	YonghuEntity user = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("yonghuming", yonghu.getYonghuming()));
		if(user!=null) {
			return R.error("用户已存在");
		}

		yonghu.setId(new Date().getTime());
        yonghuService.insert(yonghu);
        return R.ok();
    }

    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody YonghuEntity yonghu, HttpServletRequest request){
        //ValidatorUtils.validateEntity(yonghu);
        yonghuService.updateById(yonghu);//全部更新
        return R.ok();
    }
    

    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        yonghuService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
    
    /**
     * 提醒接口
     */
	@RequestMapping("/remind/{columnName}/{type}")
	public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request, 
						 @PathVariable("type") String type,@RequestParam Map<String, Object> map) {
		map.put("column", columnName);
		map.put("type", type);
		
		if(type.equals("2")) {
			SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
			Calendar c = Calendar.getInstance();
			Date remindStartDate = null;
			Date remindEndDate = null;
			if(map.get("remindstart")!=null) {
				Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
				c.setTime(new Date()); 
				c.add(Calendar.DAY_OF_MONTH,remindStart);
				remindStartDate = c.getTime();
				map.put("remindstart", sdf.format(remindStartDate));
			}
			if(map.get("remindend")!=null) {
				Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
				c.setTime(new Date());
				c.add(Calendar.DAY_OF_MONTH,remindEnd);
				remindEndDate = c.getTime();
				map.put("remindend", sdf.format(remindEndDate));
			}
		}
		
		Wrapper<YonghuEntity> wrapper = new EntityWrapper<YonghuEntity>();
		if(map.get("remindstart")!=null) {
			wrapper.ge(columnName, map.get("remindstart"));
		}
		if(map.get("remindend")!=null) {
			wrapper.le(columnName, map.get("remindend"));
		}


		int count = yonghuService.selectCount(wrapper);
		return R.ok().put("count", count);
	}
	


}

YonghuServiceImpl.java

package com.service.impl;

import org.springframework.stereotype.Service;
import java.util.Map;
import java.util.List;

import com.baomidou.mybatisplus.mapper.Wrapper;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.utils.PageUtils;
import com.utils.Query;


import com.dao.YonghuDao;
import com.entity.YonghuEntity;
import com.service.YonghuService;
import com.entity.vo.YonghuVO;
import com.entity.view.YonghuView;

@Service("yonghuService")
public class YonghuServiceImpl extends ServiceImpl<YonghuDao, YonghuEntity> implements YonghuService {
	

    @Override
    public PageUtils queryPage(Map<String, Object> params) {
        Page<YonghuEntity> page = this.selectPage(
                new Query<YonghuEntity>(params).getPage(),
                new EntityWrapper<YonghuEntity>()
        );
        return new PageUtils(page);
    }
    
    @Override
	public PageUtils queryPage(Map<String, Object> params, Wrapper<YonghuEntity> wrapper) {
		  Page<YonghuView> page =new Query<YonghuView>(params).getPage();
	        page.setRecords(baseMapper.selectListView(page,wrapper));
	    	PageUtils pageUtil = new PageUtils(page);
	    	return pageUtil;
 	}
    
    @Override
	public List<YonghuVO> selectListVO(Wrapper<YonghuEntity> wrapper) {
 		return baseMapper.selectListVO(wrapper);
	}
	
	@Override
	public YonghuVO selectVO(Wrapper<YonghuEntity> wrapper) {
 		return baseMapper.selectVO(wrapper);
	}
	
	@Override
	public List<YonghuView> selectListView(Wrapper<YonghuEntity> wrapper) {
		return baseMapper.selectListView(wrapper);
	}

	@Override
	public YonghuView selectView(Wrapper<YonghuEntity> wrapper) {
		return baseMapper.selectView(wrapper);
	}

}

IndexAsideStatic.vue

<template>
  <el-aside class="index-aside" height="100vh" width="210px">
    <div class="index-aside-inner menulist" style="height:100%">
      <div v-for="item in menuList" :key="item.roleName" v-if="role==item.roleName" class="menulist-item" style="height:100%;broder:0;background-color:#9F6F55">
        <div class="menulistImg" style="backgroundColor:#ff0000;padding:25px 0" v-if="false && menulistStyle == 'vertical'">
          <el-image v-if="'http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg'" src="http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg" fit="cover" />
        </div>
        <el-menu mode="vertical" :unique-opened="true" class="el-menu-demo" style="height:100%;" background-color="#9F6F55" text-color="#ffffff" active-text-color="#72F181" default-active="0">
          <el-menu-item index="0" :style="menulistBorderBottom" @click="menuHandler('')"><i v-if="true" class="el-icon-s-home" />首页</el-menu-item>
          <el-submenu :index="1+''" :style="menulistBorderBottom">
            <template slot="title">
              <i v-if="true" class="el-icon-user-solid" />
              <span>个人中心</span>
            </template>
            <el-menu-item :index="1-1" @click="menuHandler('updatePassword')">修改密码</el-menu-item>
            <el-menu-item :index="1-2" @click="menuHandler('center')">个人信息</el-menu-item>
          </el-submenu>
          <el-submenu :style="menulistBorderBottom" v-for=" (menu,index) in item.backMenu" :key="menu.menu" :index="index+2+''">
            <template slot="title">
              <i v-if="true" :class="icons[index]" />
              <span>{{ menu.menu }}</span>
            </template>
            <el-menu-item v-for=" (child,sort) in menu.child" :key="sort" :index="(index+2)+'-'+sort" @click="menuHandler(child.tableName)">{{ child.menu }}</el-menu-item>
          </el-submenu>
        </el-menu>

      </div>
    </div>
  </el-aside>
</template>
<script>
import menu from '@/utils/menu'
export default {
  data() {
    return {
      menuList: [],
      dynamicMenuRoutes: [],
      role: '',
      icons: [
        'el-icon-s-cooperation',
        'el-icon-s-order',
        'el-icon-s-platform',
        'el-icon-s-fold',
        'el-icon-s-unfold',
        'el-icon-s-operation',
        'el-icon-s-promotion',
        'el-icon-s-release',
        'el-icon-s-ticket',
        'el-icon-s-management',
        'el-icon-s-open',
        'el-icon-s-shop',
        'el-icon-s-marketing',
        'el-icon-s-flag',
        'el-icon-s-comment',
        'el-icon-s-finance',
        'el-icon-s-claim',
        'el-icon-s-custom',
        'el-icon-s-opportunity',
        'el-icon-s-data',
        'el-icon-s-check',
        'el-icon-s-grid',
        'el-icon-menu',
        'el-icon-chat-dot-square',
        'el-icon-message',
        'el-icon-postcard',
        'el-icon-position',
        'el-icon-microphone',
        'el-icon-close-notification',
        'el-icon-bangzhu',
        'el-icon-time',
        'el-icon-odometer',
        'el-icon-crop',
        'el-icon-aim',
        'el-icon-switch-button',
        'el-icon-full-screen',
        'el-icon-copy-document',
        'el-icon-mic',
        'el-icon-stopwatch',
      ],
      menulistStyle: 'vertical',
	  menulistBorderBottom: {},
    }
  },
  mounted() {
    const menus = menu.list()
    this.menuList = menus
    this.role = this.$storage.get('role')
  },
  created(){
    setTimeout(()=>{
      this.menulistStyleChange()
    },10)
    this.icons.sort(()=>{
      return (0.5-Math.random())
    })
	this.lineBorder()
  },
  methods: {
	lineBorder() {
		let style = 'vertical'
		let w = '1px'
		let s = 'solid'
		let c = '#ccc'
		if(style == 'vertical') {
			this.menulistBorderBottom = {
				borderBottomWidth: w,
				borderBottomStyle: s,
				borderBottomColor: c
			}
		} else {
			this.menulistBorderBottom = {
				borderRightWidth: w,
				borderRightStyle: s,
				borderRightColor: c
			}
		}
	},
    menuHandler(name) {
      let router = this.$router
      name = '/'+name
      router.push(name)
    },
    // 菜单
    setMenulistHoverColor(){
      let that = this
      this.$nextTick(()=>{
        document.querySelectorAll('.menulist .el-menu-item').forEach(el=>{
          el.addEventListener("mouseenter", e => {
            e.stopPropagation()
            el.style.backgroundColor = "rgba(219, 219, 228, 0.59)"
          })
          el.addEventListener("mouseleave", e => {
            e.stopPropagation()
            el.style.backgroundColor = "#9F6F55"
          })
          el.addEventListener("focus", e => {
            e.stopPropagation()
            el.style.backgroundColor = "rgba(219, 219, 228, 0.59)"
          })
        })
        document.querySelectorAll('.menulist .el-submenu__title').forEach(el=>{
          el.addEventListener("mouseenter", e => {
            e.stopPropagation()
            el.style.backgroundColor = "rgba(219, 219, 228, 0.59)"
          })
          el.addEventListener("mouseleave", e => {
            e.stopPropagation()
            el.style.backgroundColor = "#9F6F55"
          })
        })
      })
    },
    setMenulistIconColor() {
      this.$nextTick(()=>{
        document.querySelectorAll('.menulist .el-submenu__title .el-submenu__icon-arrow').forEach(el=>{
          el.style.color = "rgba(153, 153, 153, 1)"
        })
      })
    },
    menulistStyleChange() {
      this.setMenulistIconColor()
      this.setMenulistHoverColor()
      this.setMenulistStyleHeightChange()
      let str = "vertical"
      if("horizontal" === str) {
        this.$nextTick(()=>{
          document.querySelectorAll('.el-container .el-container').forEach(el=>{
            el.style.display = "block"
            el.style.paddingTop = "60px" // header 高度
          })
          document.querySelectorAll('.el-aside').forEach(el=>{
            el.style.width = "100%"
            el.style.height = "60px"
            el.style.paddingTop = '0'
          })
          document.querySelectorAll('.index-aside .index-aside-inner').forEach(el=>{
            el.style.paddingTop = '0'
          })
        })
      }
      if("vertical" === str) {
        this.$nextTick(()=>{
          document.querySelectorAll('.index-aside .index-aside-inner').forEach(el=>{
            el.style.paddingTop = "60px"
          })
        })
      }
    },
    setMenulistStyleHeightChange() {
      this.$nextTick(()=>{
        document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-menu-item').forEach(el=>{
          el.style.height = "60px"
          el.style.lineHeight = "60px"
        })
        document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-submenu>.el-submenu__title').forEach(el=>{
          el.style.height = "60px"
          el.style.lineHeight = "60px"
        })
      })
    },
  }
}
</script>
<style lang="scss" scoped>
  .index-aside {
    position: relative;
    overflow: hidden;

    .menulistImg {
      padding: 24px 0;
      box-sizing: border-box;

      .el-image {
        margin: 0 auto;
        width: 100px;
        height: 100px;
        border-radius: 100%;
        display: block;
      }
    }

    .index-aside-inner {
      height: 100%;
      margin-right: -17px;
      margin-bottom: -17px;
      overflow: scroll;
      overflow-x: hidden !important;
      padding-top: 60px;
      box-sizing: border-box;

      &:focus {
        outline: none;
      }

      .el-menu {
        border: 0;
      }
    }
  }
</style>

声明

本博客适用于广泛的学术和教育用途，包括但不限于个人学习、开发设计，产品设计。仅供学习参考，旨在为读者提供深入理解和学术研究的材料。