毕业项目参考：SSM+shiro+bootstrap 校内交易二手网前后台实现

冷月寒雪

已于 2024-02-21 17:33:16 修改

阅读量2.8k

点赞数 7

分类专栏：毕业设计文章标签： SSM shiro 毕业项目二手交易 ajax

于 2019-04-08 18:43:57 首次发布

本文链接：https://blog.csdn.net/goGoing_/article/details/89101434

版权

毕业设计专栏收录该内容

1 篇文章 0 订阅

订阅专栏

毕业项目参考(Maven)：SSM+shiro+bootstrap 校内交易二手网前后台实现

(首页开启了大小写检测，认真填写验证码哦~)
想起来以前在公司刚完成一个中型的二手交易项目，之后又接了一个私单，正好也是一篇关于校园交易二手网的一个小项目，所以就把公司里用的ssm+shiro安全框架直接搬出来进行了一个快捷开发，以及前台的bootstrap的展现，里面运用到的技能点有：短信接口的实现(网易云)、支付宝接口的实现(沙箱环境)、邮箱验证、idcode、echars、jBox弹窗的实现、keyframes初始化小加载、购物车实现、三级联动、ajax等等等，下面进行一个简单的介绍吧。

一、登录注册功能

在登录注册这一块其实下了很大的功夫，因为这边我配置了一个shiro安全框架，不同的人有不同的权限，因为项目周期关系，我这边的原生权限的角色就是三种：买家、卖家、超级管理员，首先看一下我的shiro配置：
在这里插入图片描述
当然，shiro远远不止你想象的那么简单，因为里面我还配置了xml的监听过滤，以及MyRealm方法类,创建AuthorizationInfo、AuthenticationInfo两个方法，通过方法来管理权限。
1、注册
从注册出发，

在这一块可以以游客身份进去，同样也可直接登录进去。我点击登录
在这里插入图片描述
注册是一块很重要的内容，在这里我采用的是新HTML5前端表单效验，判空和输入不和法会出现上面所看见的提示，当然也可以采用追加span标签的方法，个人觉得这个效验真的效果很好，只需要自己写一个正则表达式以及写出不合法所显示的内容就行，不用写span标签来调整位置十分的费劲。第二，上面的获取验证码是真的可以实现在手机上的，因为我调用了网易云短信接口，这一块每个人都是可以申请到官网，有20条免费的短信来验证。同时，在前端我也设置了倒计时的效果从60秒不停的变动，到0的时候，把这个div里面的内容改为“重新获取”；首先还是先给大家看看我的短信接口调用吧，个人很中意ajax

 //正则表达式
var form = document.querySelector('#tologin');
form.addEventListener('invalid',function(event){
    var elem = event.target;
    var vali = elem.validity;
    var name = elem.name;

    switch (name){
        case 'phone':
            if(vali.valueMissing){
                elem.setCustomValidity('手机号码不能为空');
            }else if(vali.patternMismatch){
                elem.setCustomValidity('请输入合法的手机号码');
            }else{
                elem.setCustomValidity('');
            }
            break;
        case 'userName':
            if(vali.valueMissing){
                elem.setCustomValidity('用户名不能为空');
            }else if(vali.patternMismatch){
                elem.setCustomValidity('只能包含6-10位字母或汉字');
            }else{
                elem.setCustomValidity('');
            }
            break;
        case 'password':
            if(vali.valueMissing){
                elem.setCustomValidity('密码不能为空');
            }else if(vali.patternMismatch){
                elem.setCustomValidity('密码必须为6-10位字符');
            }else{
                elem.setCustomValidity('');
            }
            break;
    }
},true);
//<-end for 正则->

   //倒计时事件
    var time;
    var min=60;
    $(".tableText").click(function() {
        var phone = $("input[name='phone']").val();
        if (phone==""){
            alert("手机号码不能为空!");
            return false;
        }else {
            //console.log(1)
            if (time){return}
            time = setInterval(stop,1000);//倒计时，每一秒执行一次,并且给计时器一个方法 time 为返回值ID  可以通过此返回值来停止方法  clearInterval（time）
            $.ajax({
                url:"/phone.do",
                type:"get",
                dataType:"text",
                data:{"phone":phone},
                success:function (obj) {
                    alert(obj);
                },
                error:function () {
                    alert("error!");
                }
            })
        }
    });
    function stop(){
        min--;
        if(min>0){
            $('.yanzhengma').html('('+min+'秒)重发');
        }else{
            clearInterval(time);
            time=null;
            $('.yanzhengma').html('重新获取验证');
            min=5;
        }
    }

2、 MD5加密
为了严谨、我在注册成功后我将用户名的账号密码存入数据库之前，我走了一遍MD5加密(其实shiro安全框架是有加密的，只是配置文件稍微有点繁琐，没有过多的耽误时间。同时在登录的时候将数据库里的密码取出后先走一遍MD5解密而后和输入的值比较，如果没有走MD5的话，输入的对也不会匹配，这一点是要注意的
在这里插入图片描述
这就是走了MD5以后存入数据库的值，你是看不出来我存入之前的密码是多少的，应该算是最简单的一种密码加密方式吧。
3、登录功能实现
在登录功能界面里面我有一个前端框架idcode随机生成验证码的实现，并且利用前端来判断用户输入的功能是否和生成的验证码相等，其实生成验证码的方法有很多种，好多人都是在后台来完成的，我觉得这个地方应该不太需要吧？毕竟我们还没有到数据交互的地步所以我自己选择的就是在前端来生成验证码并且进行校验；

二、前台呈现

前台这一块当然是个关键，毕竟这关系到用户体验，这一块的模板我用了ESTL标准标签库的遍历商品以及添加购物车的实现，同时，有一个小小的初始化keyfarms。看主界面：

在这里插入图片描述
同时呢，我们会根据进来的用户id查询出他的购物车，遍历出他购物车里面的商品，

当点击图片上的购物车小图标的时候，我们会通过ajax把这件商品的id查出并且添加到右上角的小车车里面，并且我用了jquery框架里面的jBox生成一个小弹窗，提示添加成功。点击右上角的小车车会在里面遍历出购物车里面的东西并且显示出来，这一块我用的也是ajax技术实现，尤其是添加购物车，异步查询。返回来的结果集用ajax去拼接，是尼玛真的不好拼，MMP的，耽误了好长时间。前台呈现没给大家看看呢。。主要的格调是我喜欢简约的布局方式：
在这里插入图片描述
当然，既然作为商城，我们会有一系列的查询，日后有时间，我准备

这一套的实现是用了动态sql传参拼接来完成的。

同时，我们还可以点击商品进入商品详情页，里面有商品的具体属性以及该商品的评论。
在这里插入图片描述
同时，我们在这一块一样可以查看购物车、添加购物车、发表评论、立即结算，下一步给大家看看立即结算的界面。在结算的界面里，我调用了三级联动以及支付宝接口的调用

点击立即结算，将调用沙箱环境支付宝
在这里插入图片描述
支付成功后，会跳转到主页界面，同时，这个商品会下架，因为我们是二手交易，物品的数量只有1，所以当然要下架啦。当然，我们会在个人中心里面看见我自己的订单，以及订单退款的实现：

这边我实现了一个退款功能，我不再演示了。

三、卖家入驻

因为原生权限的管控，并不是一个普通会员就能在我们这里发布自己的商品并且售出的，需要有一个申请的阶段，所有，当我们点击发布商品的时候，同样会调用ajax去判断当前用户的role，如果是普通用户我设置了一个jbox的弹窗：

在这里插入图片描述
所以要申请啊，点击我要入驻，跳转界面：

屏幕调小看不见下面的表单啦，意思一下。点击以后会有一个支付入驻费用的界面（想在我这边卖东西当然我要收取有点成本费用了啊）

在这里插入图片描述
收取完费用以后，并不是你就可以立即发布商品，这个时候当然要我们的管理员去审批，所以接下来我们去登录超级管理员去后台审批：

后台的图表我用的echars功能，里面的数据是动态生成，都是从数据库里面拉出来的，上面的几个数据说实话我本来是想写活的，但是我时间关系我没有写，鼠标移动上去有css样式的感觉还是不错的。下一步，权限审批：
在这里插入图片描述
点击审批，我们会调用邮箱接口，向申请的人发送一封邮件，告诉他入驻已经审批，同时要改变用户的权限；这里面的业务并不是很复杂，但是我的sql语句是子查询来改版t_user_role角色。

在这里插入图片描述
当管理员同意以后，向申请人发送一封邮箱，告诉他审批通过。

这样就可以成功的发布了自己的物品了。

四、总结

其实，我这里面的功能模块不是太多，运用到的小知识点其实很多，里面的接口调用也许学校的朋友可能没有接触到或者是老师没有教过，实现起来很容易，我的代码你拿去就可以使用的非常简洁，以后我自己还会不断的完善里面小小的地方，如果要是有中意的或者是有想做毕业项目参考的，可以给我留言。一起讨论交流指点我更感谢大家

冷月寒雪

关注

7
点赞
踩
25

收藏

觉得还不错? 一键收藏
9
评论
毕业项目参考：SSM+shiro+bootstrap 校内交易二手网前后台实现

毕业项目参考(Maven)：SSM+shiro+bootstrap 校内交易二手网前后台实现最近写了一篇关于校园交易二手网的一个小项目，用的框架是ssm+shiro安全框架，以及前台bootstrap的展现，里面运用到的技能点有：短信接口的实现(网易云)、支付宝接口的实现(沙箱环境)、邮箱验证、idcode、echars、jBox弹窗的实现、keyframes初始化小加载、购物车实现、三级联动、...
复制链接

扫一扫