第5章 系统的实现

根据对该体育商城系统的需求分析,该商城的界面主要分为后台管理页面和前台客户端页面,用户只可以访问前台客户端页面,通过浏览网页来满足自己的购物需求,商城前端的所有功能都是通过后台的管理来实现的,所显示的所有商品信息都需要通过后台管理系统来增加、修改和删除,后台管理页面只有管理员可以访问。因为在后台需要对所有商品的信息进行处理,所以后台管理部分的开发比前台客户端要复杂。
对于该体育商城系统,概括起来,主要实现了以下功能:
前台部分
商品分类:用户可以查看商品的所有分类,方便用户快速找到自己需要的商品。
商品描述:用户可以查看每件商品的详细描述。
销量排行:用户可以看到该商城中商品销售排在前五的商品。
商品搜索:用户可以搜索自己感兴趣的体育商品,该搜索栏支持模糊查询,只需输入关键字就可以查到。
会员注册:用户填写自己的基本信息,可以成为该商城的会员用户。
用户登录:注册成功后,可以登录该商城的网站。
购物车:用户看中一件商品不需要马上付款,可以先加入到购物车中,挑选结束后再整体付款。
订单管理:用户可以查看自己已下的订单,看是否被管理员受理,收到商品后,可以点击收货,并对商品进行评价。
留言:用户可以对网站进行留言,发表自己的建议或意见。
公告管理:管理员可以在后台发布公告,用户可以在前台进行点击看到公告的详细信息。
联系我们:提供网站的联系方式,用户有某些需求可以直接联系。
后台部分
系统参数:管理员可以查看此刻系统运行环境。
管理员维护:管理员可以对自己的密码进行修改。
会员管理:管理员可以对该体育商城的用户进行删除。
商品管理:管理员可以对商品的类别进行添加、修改和删除,对具体某一类别的商品进行添加和删除。
订单管理:管理员可以查看用户订单的详细信息,还可以受理用户的订单或删除用户的订单。
销量管理:管理员可以查看该商城中所有商品的销售情况,按商品的销售量由多到少进行排列。
留言公告管理:管理员可以查看所有用户的留言或删除,发布新的公告或删除旧的公告。
退出系统:当管理员的所有操作都结束后,可以点击退出系统进行退出。
下面分别说明这些功能进行具体的说明。

5.1 体育商城前台界面

5.1.1首页界面

用户第一次登录商城时,可以在浏览器中输入localhost:8087/tyypsc,发出请求后,前台显示index.jsp,用户可以看体育商城主界面,主要分为三个div模块,上面为一块,下面分成左右两块,界面如图5-1所示。
在这里插入图片描述

5.1.2商品分类

在这里插入图片描述

5.1.3商品描述

用户在商城主页面点击任意一张喜欢的商品图片可以跳转到一个新的jsp页面,在该页面用户可以看到该体育用品的基本介绍,和已购买用户的评价,如图5-4所示。
在这里插入图片描述

5.1.4 销量排行

根据顾客的喜欢程度,将销售情况较好的前五件商品展示出来,这样更有利于顾客的挑选,如图5-5所示。
在这里插入图片描述

5.1.5 商品搜索

该搜索功能支持模糊查询,只要输入所需商品关键字,点击商品搜索按钮,调用goodsAction.java中的goodSearch方法,可跳转到goodSearch.jsp页面,可以查询到用户需要的商品,如图5-6所示。
在这里插入图片描述

5.1.6会员注册

注册功能是购物网站最基本的功能,用户只有成功注册,才能继续进行接下来的一系列操作,在该体育商城中,当用户在前台页面点击注册按钮后,会弹出注册的jsp页面,显示一个填写信息的form表单,用户按照要求填写基本信息,check1方法会判断用户填入的信息是否符合要求,如果符合要求,点击确定按钮,提示注册成功,如图5-7所示。

在这里插入图片描述

5.1.7购物车

购物车模块也是一个购物网站不可缺少的功能,用户可以将喜欢的商品先放入购物车中,然后点击导航栏中的购物车,会跳转到购物车的jsp页面,在这个页面中,用户可以查看自己已挑选的商品,还可改变购买数量,这里的个数后台通过正则表达式进行限制,只可以输入正整数,如图5-9所示。
在这里插入图片描述

5.1.8 订单管理

顾客可以在前台页面点击我的订单查询自己的订单信息,点击后会跳转到myOrder.jsp页面,如图5-10所示。
在这里插入图片描述

5.1.9留言

顾客在导航栏点击在线留言,可跳转到liuyanAll.jsp页面,在这个页面可以发表问题,咨询,建议并进行提交,如图5-12所示。

在这里插入图片描述

5.2 体育商城后台管理

5.2.1 首页界面

在该体育商城中,在前台页面的下方有个管理登录按钮,管理员点击后,可跳转到后台的登录页面,管理员按要求输入用户名、密码和验证码,就可成功登录后台管理系统,后台通过frame框架分成三部分,页面顶部为一部分,下面分成左右两部分,如图5-16、5-17和5-18所示。
在这里插入图片描述
以下这段代码主要实现了后台登录时验证码的功能

public class RandomValidateCode {
public static final String RANDOMCODEKEY = "RANDOMVALIDATECODEKEY";//放到session中的key
    private Random random = new Random();
private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
//从这里面随机产生一个字符串
    private int width = 80;//图片宽
    private int height = 26;//图片高
    private int lineSize = 40;//干扰线数量
    private int stringNum = 4;//随机产生字符数量
    //获得字体
    private Font getFont(){
        return new Font("Fixedsys",Font.CENTER_BASELINE,18);
    }
    //获得颜色
    private Color getRandColor(int fc,int bc){
        if(fc > 255)
            fc = 255;
        if(bc > 255)
            bc = 255;
        int r = fc + random.nextInt(bc-fc-16);
        int g = fc + random.nextInt(bc-fc-14);
        int b = fc + random.nextInt(bc-fc-18);
        return new Color(r,g,b);
    }
    //生成随机图片
    public void getRandcode(HttpServletRequest request,
            HttpServletResponse response) {
        HttpSession session = request.getSession();
        //BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类
 BufferedImage image = new  BufferedImage(width,height,BufferedImage.TYPE_INT_BGR);
        Graphics g = image.getGraphics();
//产生Image对象的Graphics对象,该对象可以对图像进行各种绘制操作
        g.fillRect(0, 0, width, height);
        g.setFont(new Font("Times New Roman",Font.ROMAN_BASELINE,18));
        g.setColor(getRandColor(110, 133));
        //绘制干扰线
        for(int i=0;i<=lineSize;i++){
            drowLine(g);
        }
        //绘制随机字符
        String randomString = "";
        for(int i=1;i<=stringNum;i++){
            randomString=drowString(g,randomString,i);
        }
        session.removeAttribute(RANDOMCODEKEY);
        session.setAttribute(RANDOMCODEKEY, randomString);
        System.out.println(randomString);
        g.dispose();
        try {
            ImageIO.write(image, "JPEG", response.getOutputStream());
//将内存中的图片以流动的形式显示到客户端
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    //绘制字符串
    private String drowString(Graphics g,String randomString,int i){
        g.setFont(getFont());
        g.setColor(new Color(random.nextInt(101),random.nextInt(111),random.nextInt(121)));
        String rand = String.valueOf(getRandomString(random.nextInt(randString.length())));
        randomString +=rand;
        g.translate(random.nextInt(3), random.nextInt(3));
        g.drawString(rand, 13*i, 16);
        return randomString;
    }
    //绘制干扰线
    private void drowLine(Graphics g){
        int x = random.nextInt(width);
        int y = random.nextInt(height);
        int xl = random.nextInt(13);
        int yl = random.nextInt(15);
        g.drawLine(x, y, x+xl, y+yl);
    }
     //获取随机的字符
    public String getRandomString(int num){
        return String.valueOf(randString.charAt(num));

在这里插入图片描述

第六章 联系与交流

q:969060742 完整代码、sql、报告、辅导视频
Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐