基于Java（JSP）+MySQL设计与实现的 MVC 鲜花订购系统

基于MVC的鲜花订购系统的设计与实现

摘 要

摘 要：鲜花订购系统与网络相结合，给用户提供更加周到和人性化的服务。网站模式为MVC模式，基于MySql数据库,采用Jsp，Session绘画跟踪、JavaScript等技术,实现了普通用户可以浏览、查看鲜花信息,可以注册成为网站用户、多种方式进行登录,然后查看或修改个人信息,还可以查看个人的订单情况等,管理员可以对普通用户、鲜花信息进行管理等功能。

1.目的与意义

随着计算机科学的发展,数据库技术在 Internet中的应用越来越广泛为广大网络用户提供了更加周到和人性化的服务。个性化已逐渐成为当今Web应用的朝流。简单的到店购买鲜花服务已经不能满足人们的需求，利用先进的管理手段，丰富鲜花订购的方式，提高服务效率，是当今社会所面临的一个重要课题，为此我们设计一个鲜花订购系统实现用户和鲜花的增删查改，使得鲜花订购更加便利，也使服务更加有效率。

2.理论基础及技术路线

2.1MVC

MVC是Model-View-Controller的缩写，它能很好地使数据层与表示层进行分离，应用程序的输入、输出和处理流程。其模式分为三部分，Model（模型）是用于处理应用程序数据逻辑的部分，负责在数据库中存取数据；View（视图）是处理数据显示部分，依据模型数据而创建；Controller（控制器）是处理用户交互的部分，负责从视图读取数据，控制用户输入并发送数据。

以用户注册为例：

2.2JSP

JSP是基于Java Servlet以及整个Java体系的Web开发技术，具有动态页面与静态页面分离，能够脱离硬件平台的束搏，以及编译后运行的优点，可以建立安全、跨平台的先进动态网站。

2.3Spring

Spring框架是由于软件开发的复杂性而创建的。Spring使用的是基本的JavaBean来完成以前只可能由EJB完成的事情。然而，Spring的用途不仅仅限于服务器端的开发。从简单性、可测试性和松耦合性角度而言，绝大部分Java应用都可以从Spring中受益。

• 目的：解决企业应用开发的复杂性
• 功能：使用基本的JavaBean代替EJB，并提供了更多的企业应用功能
• 范围：任何Java应用
• Spring是一个轻量级控制反转(IoC)和面向切面(AOP)的容器框架。

2.4Mybatis

MyBatis 是一款优秀的持久层框架，它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息，将接口和 Java 的 POJOs(Plain Ordinary Java Object,普通的 Java对象)映射成数据库中的记录。

2.5其他技术

运用Session会话跟踪技术，通过在服务器端记录信息确定用户的身份，用来记录以及跟踪用户在登录网页后的整个会话。同时通过配置文件，利用Servlet过滤器，使用他们来它们拦截请求和响应，比如利用过滤器判断用户是否为管理员才决定他们能否进入后台管理界面。例如网页用“欢迎来到管理员页面”用到的标签语句，也可以采用自定义标签技术。

3.模块总体设计

3.1系统主体模块

“鲜花订购系统”的主要功能模块分别前端与后台，前端有：首页、注册注销、鲜花品种与样式展示、子页面（普通用户、管理员）；后台有：用户管理、鲜花管理等功能。系统功能如图所示：

功能介绍

• 首页：显示网站栏目与网站介绍，并根据当前用户权限对其提供子页面的链接，进入个人主页面或多个子页面，同时提供注销功能。
• 商品浏览：根据不同季节与特殊节日的需求，提供不同的商品，一来吸引眼球，再者可以帮助用户更快地选择心意的鲜花。
• 普通用户：前端为用户提供登录注册，商品浏览页、详细页，个人收藏页、加入购物车，查看个人订单等一系列功能，还可查看用户详细信息并进行修改等操作。
• 管理员：对商品（鲜花）进行增删查改，通过后台管理订单信息，对订单状态，收货地址进行修改等操作，还可管理普通用户信息。
• 数据库表定义

用户表

管理员信息表

鲜花信息表

购物车信息表

Focus信息表

订单信息表

记录表

商品评价表

3.2系统E-R图

• 主题：鲜花订购系统
• 用况：普通用户注册、登录，浏览鲜花，修改个人信息、查看个人收藏、订单等功能；管理员对普通用户、鲜花、以及订单进行增删查改操作。

3.3系统实现

3.3.1开发环境工程目录截图

• 开发工具：Eclipse
• 数据库：MYSQL
• 调式环境：火狐浏览器、IE浏览器、GoogleChrome等
• 适用环境：支持任何浏览器。
• 说明：Mapper类：逻辑层，实现对数据库进行持久化操作；pojo类：包含有getter和setter方法，支持业务逻辑的协助类。方便程序员使用数据库中的数据表，对数据库进行操作；Service类：业务层，封装通用的业务逻辑和操作，与数据层交互。Impl是把mapper和service进行整合的文件；Controller类：控制器，通过接受前端请求经过业务处理层处理之后封装成model，再将model返回给对应的view显示；Interceptor类：拦截器，属于面向切面编程，拦截service并做出操作；resources资源包，存放配置文件，用于指导Spring工厂进行bean生产，依赖关系注入及bean实例分发，
• 开发文件夹截图：
• controller+interceptor+mapper

• pojo+service

• util+resources

• webapp

3.4主要界面介绍

3.4.1前端主要页面

登录：可根据用户名、电话、邮箱等多种方式进行登录，并输入正确的验证码，完成登录，LoginServlet会将用户登录信息进行验证，如果返回为0则跳转到error.html并提示用户登录失败，否则将用户的权限存入session中，然后跳转到首页，如果用户直接点击管理员页面，则提示你的权限不够，请用管理员账号登陆访问页面！

核心代码（登录功能：login.jsp）

<script type="text/javascript" language="javascript">
    function checkForm(){
        var account = checkUserMess();
        return account ;
    }

    function checkUserMess(){
        var phone=/^1[34578]\d{9}$/;/* 手机号验证，11位手机号 */
        var account=/^\w{3,}$/;/*用户名验证，至少三位 */
        var email=/^\w+@\w+\.[A-Za-z]{2,3}(\.[A-Za-z]{2,3})?$/;

        /* 获取用户登陆信息 */
        var account = $("#signin-mess").val();

        /* 判断用户输入是否为邮箱，是则将name属性值改为邮箱 */
        if(email.test(account)){
            $("#signin-mess").attr("name","email");
        }

        /* 判断用户输入是否为邮箱，是则将name属性值改为邮箱 */
        if(phone.test(account)){
            $("#signin-mess").attr("name","phone");
        }
    }
</script>

注册页面

首页

登录成功后进入系统首页，可预览当前鲜花品种及其样式，根据不同需求进入不同浏览子页面（商品详细页、个人订单页等）。

商品详细页（子页面）

个人收藏页（子页面）

加入购物车（子页面）

• 其核心代码
• 放获取商品信息添加到购物车那部分

个人订单页（子页面）

商品评价：收到商品后对本商品进行评价

用户信息页（查看或修改个人信息）

登录拦截：在进行收藏商品或下单等功能，需要登录才能执行，系统自动跳转登录页面并提示用户进行登录操作。

3.4.2后台主要页面

鲜花信息页：对商品进行增删查改

• 其一添加商品上传图片文件的核心代码（flower-add.jsp）

<div class="layui-form-item" style="margin-bottom: 10px">
                        <div class="layui-input-block">
                            <!-- 用一个div来当作美化的上传按钮，file按钮被透明化 -->
                            <div id="btn" style="width: 100px;margin-left: 90px;margin-bottom: 10px">
                                文件上传
                                <input type="file" name="pictureFile" class="file" onclick="daojishi()"> <%--onclick="daojishi()"--%>
                            </div>
                            <!--图片回显-->
<%--                            <c:if test="${sessionScope.flower.photo!=null}">
                                <img src="${ctx}/${sessionScope.flower.photo}" width="50" height="50">
                            </c:if>--%>
                            <!-- 文件名显示区域 -->
                            <div id="filename"></div>
                        </div>
                        ${requestScope.msg}

订单表管理：对订单状态，收货地址等进行查询、修改或删除此订单

其一的核心代码（orderform-update.jsp）

<div style="padding: 15px;">
            <h1 style="text-align: center;margin-bottom: 25px;margin-top: 20px">修改订单</h1>
            <div style="width: 500px;margin: 0px auto">

                <form class="layui-form layui-form-pane" action="${ctx}/orderform/${sessionScope.orderform.id}/update">
                    <div class="layui-form-item" style="margin-bottom: 30px">
                        <label class="layui-form-label">收件人姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="conName"  value="${sessionScope.orderform.conName}" autocomplete="off" class="layui-input" style="width: 400px">
                        </div>
                    </div>
                    <div class="layui-form-item" style="margin-bottom: 30px">
                        <label class="layui-form-label">收件人性别</label>
                        <div class="layui-input-block">
                            <input type="text" name="conSex" required lay-verify="required" value="${sessionScope.orderform.conSex}" autocomplete="off" class="layui-input" style="width: 400px">
                        </div>
                    </div>
                    <div class="layui-form-item" style="margin-bottom: 30px">
                        <label class="layui-form-label">收件人电话</label>
                        <div class="layui-input-block">
                            <input type="text" name="conPhone" required lay-verify="required" value="${sessionScope.orderform.conPhone}" autocomplete="off" class="layui-input" style="width: 400px">
                        </div>
                    </div>
                    <div class="layui-form-item" style="margin-bottom: 30px">
                        <label class="layui-form-label">地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="address" required lay-verify="required" value="${sessionScope.orderform.address}" autocomplete="off" class="layui-input" style="width: 400px">
                        </div>
                    </div>
                    <div class="layui-form-item" style="margin-bottom: 20px">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <input type="text" name="remark"  value="${sessionScope.orderform.remark}" autocomplete="off" class="layui-input" style="width: 400px">
                        </div>
                    </div>

                        <button type="submit" class="layui-btn" id="test1" style="margin-top: 10px">
                            <i class="layui-icon">&#xe67c;</i>提交
                        </button>
                </form>
            </div>
        </div>

    </div>