java管理系统网站毕业设计论文.doc

北京航空航天大学北海学院毕业设计(论文) 第 VI 页毕业设计（论文） 营销助手（电子商务网站管理系统） 学院名称软件与信息工程学院 专业名称数字媒体技术 学生学号N3100*12 学生姓名吕*熙 指导教师王*平、陈*艳201*年*月 北京航空航天大学北海学院毕业设计(论文) 第 25 页本人声明我声明，本论文及其研究工作是由本人在导师指导下独立完成的，在完成论文时所利用的一切资料均已在参考文献中列出。 作者：吕*熙签字：时间： 营销助手（电子商务网站管理系统）学生姓名：吕*熙指导老师：王*平、陈*艳摘 要随着计算机网络的普及，互联网购物已经成为当今社会发展最快、对人们的思想意识和生活方式影响最大互联网产品之一。电子商务发展速度非常迅猛，这就形成了对电子商务网站管理系统的庞大需求。电子商务带动了经济消费的新的高潮，引发了一个新的时代。从而电子商务公司如雨后春笋，纷纷崛起，而随着互联网的普及使用互联网购物的人数也非常多，这就造成了互联网商家团体拥有巨大数量的订单。订单数量每日可达数十万，最少一天也要几百单，这就使得公司职员的工作了空前繁复。如果补充职员则会使得公司支出太多，所以电子商务网站管理系统就应势产生，借助互联网购物平台提供的开放平台直接连接购物平台网站的后台程序，与后台直接交互拉取数据，借助计算机处理订单数据，这样极大的减少了工作人员的负担，最大程度的向办公自动化靠近。网站管理系统的开发是一个实践性很强的课题，与市场经济紧密结合，如果只从理论上去研究是远远不够的，还需要加入实际操作体会网站管理系统的意义。本文将深入探讨网站管理系统的开发过程。关键词：网站管理系统、电子商务、java网站Marketing assistant（E-Commerce site management system）Author :Lv *xiTutor : *ping Wang,*yan ChenAbstractAlong with the network popularization, the Internet shopping has become in todays society, the fastest growing influence on peoples ideology and way of life, one of the largest Internet E-Commerce site management system. Electronic commerce and so did the new climax of economic consumption , sparked a new era . Thus E-Commerce companies have mushroomed , began to rise , and with the popularity if Internet use , the number of Internet shopping is very much , which creates a Internet business group has large number of orders .Order quantity can reach hundreds of thousands of daily , at least one day also want hundreds of single , this makes the company clerk unprecedented heavy and complicated .If added staff will make the company spending too much , so E-Commerce sites management system should be potential , with the help of Internet shopping platform to provide open platform connected directly shopping platform website background program , direct interaction with the background pull data, with the aid of computer data processing orders, so that greatly reduce the burden of staff, to be near office automation to a great extent.Web site management system isa practical subject, together with market economy, if only went up form theoretical research is not enough, also need to join the of the actual operation experience website management system.This paper will study the television channel package contents and processes.Key words：Web site management system, E-Commerce ,Java web site目 录第1章 绪论11.1 论文研究背景及目的11.2 国内外的发展状况及现状分析21.2.1 国内情况21.2.2 国外情况21.3 主要研究内容31.4 使用的软件3第2章 Java Web网站架构分析42.1 为何选择Java语言开发程序42.2 数据库的选择和使用42.3 前台设计的技术分析5第3章 软件和数据库设计概述63.1 软件设计流程63.1.1 设计目标63.1.2 用户特点73.1.3 管理系统的总需求目标73.1.4 数据需求73.2 总数据库分析73.1.1 表层级设计73.1.2 数据库层级分析103.1.3 数据库存储逻辑10第4章 控制层Java语言设计114.1 使用Java框架进行开发114.2 使用Action与前台进行交互114.3 使用Service处理数据和运算124.4 数据库托管给DAO层134.5 使用拦截器和过滤器进行权限管理13第5章 前台界面的开发和相关技术145.1 前台相关技术解析145.1.1 使用JQuery前台开发框架编写脚本145.1.2使用DIV+CSS设计界面布局145.1.3 使用Struts2标签从后台获取数据155.2 用户前台界面设计155.2.1 主窗口设计155.2.2 物流界面设计165.2.3 订单跟进系统界面设计165.2.4 上传界面设计175.3 管理员前台界面设计185.2.1 个人信息管理185.2.2 用户信息管理185.2.3 店铺信息和功能管理20第6章 问题汇总及解决办法226.1 遇到的问题226.2 解决方法226.3 不足之处236.4 今后的学习23结 论24致 谢25参考文献26第1章 绪论1.1 论文研究背景及目的近几年来，web程序发展异常迅猛，不仅出现了各种各样的的购物网站、社交网站、金融管理系统等，还出现了可以直接处理word、excel和PPT的功能强大的Web程序。主要是因为Web程序的瘦客户端的特点，即不需要安装客户端软件，只需要浏览器就可以直接进行操作的程序。Web程序可以非常简单，以至于只需要几个HTML页面就可以完成，就像小型企业使用的展示网站一样。当然也可以很复杂，比如淘宝网和京东购物网站，需要强大的服务器程序和非常智能的前台程序。还有一些直接代替客户端的软件，比如微信网页端、QQ网页端和人人网等社交网站。实现这些Web程序所用到的技术也很多，最流行的有微软的.NET技术、PHP技术和Java EE技术。Java EE技术作为最流行的网站开发技术之一，在Web开发领域占有着非常有力的位置。但是Java Web开发所涉及的技术比较复杂，涉及了很多开发框架和工具，而且它们各有所长，可以独立使用也可以联合使用。不过大型企业网站的开发需要掌握多个开发框架，这对需要掌握Java Web开发的人来说，有一定的困难。目前Java EE开发技术主要使用SSH框架，所谓的SSH框架是Spring、Hibernate和Struts三个框架整合在一起的一个框架。Spring是面向切面编程，配合XML使用，使用注解和以来注入的方式很大程度的节省了代码的编写量，并且对于程序的控制更加方便，后期维护也很方便。Hibernate是一种数据库托管框架，使用这种框架的时候会将所有需要与数据库进行交互的工作都交给Hibernate，在程序开发阶段和维护阶段都有很大的好处。Struts是一种与前台进行交互的程序，接受前台传入的数据和将后台数据传向前台，是服务器与浏览器端的媒介程序。这三种框架可以单个使用也可以配合使用，将三个框架整合在一起就称为SSH框架，这个是目前社会上所使用Java EE进行网站开发使用最多的框架。Java EE对于网站开发来讲不像PHP和.Net那样易学易用，支持Java的主机也少于支持PHP的主机，这从一定程度上限制了Java技术在网站上的发展，不过在企业软件应用上来讲，Java还是拥有相当大的优势的，虽然其配置和部署相对于其他语言来说要复杂一些，但Java程序可以处理高度复杂的应用，对于跨平台的中大型企业应用系统来讲，基于Java技术的开发几乎成为唯一的选择。1.2 国内外的发展状况及现状分析 1.2.1 国内情况中国企业对于公司内部管理系统越来越重视，随着物价增长，企业需要一个更加节省人力物力的工作方式，而这些对于一个企业来说，只能从员工协作入手，企业内部员工工作耦合性强，工作分工明确才能使公司结构分明便于管理。而对于一个大型企业来讲，人数多就直接造成了管理的负担，这就需要将具有逻辑性的事物交由计算机处理，只有这样才能够节省人力和物力。企业运行大致都有销售和采购的步骤，企业越大销售和采购所产生的数据也就更大，而这些数据都与公司的财务相互关联。如果各个步骤都是由人力进行独立的监管，这就会产生很多单个文件，在处理财务问题上就会显得很棘手。如果在数据产生之后直接将数据输入电脑，最后通过固定的逻辑分析出所需要的数据，这就大大节省了人力，而且计算机不易出错，数据也相对准确。对于一个企业来说，使用计算机进行数据搜集和分析是非常有利的。中国近几十年经济发展迅猛，各行各业大小公司如雨后春笋纷纷崛起，而企业内部建设却未必跟得上。所以，企业内部管理系统会成为中国当下需求量非常大的产品。使用内部管理系统不止可以减少人力投入、降低出错率，更重要的是可以实现远程办公，只要登录企业网站就可以直接读取和输入数据，这使得企业管理层在处理工作的时候更加游刃有余。而中国企业对于管理系统的需求量却空前庞大，所以这在中国将会有一个很好的发展环境。1.2.2 国外情况国外的市场差异较大，发达国家的供需已经较为稳定，新兴企业较少，从而所需产品也相对少一些，更多的只是对原有系统的升级或者重新开发。较大的企业一般都有自己的开发部门，开发完成之后直接负责维护，所以现今生存的开发公司都是技术过硬，专业水平很高并且开发经验丰富。一般来说成立几年以上的开发公司都有自己的开发框架，一旦接收新的项目直接在框架上改动就可以，这样开发速度非常快，所以主要的市场还是在软件维护上。而一些发展中国家如泰国、越南等则是需求较少，这就导致了市场环境不能培育开发行业的发展。技术方面主要以美国为技术先驱，.net、PHP和java都是美国境内开发的。不过日本对于软件研究也非常出色，居世界第二位。日本民众紧凑的工作习惯使得日本较为适合进行软件开发。日本和美国成为世界其他国家学习软件开发技术的主要基地。1.3 主要研究内容 本论文将具体、深入探讨Java Web开发及涵盖的内容。从服务器配置、网页布局、数据库和Java程序开发详细对开发过程进行剖析。通过自己开发的过程中，研究整体开发的制作流程和方法以及遇到的一些问题和解决方案。1.4 使用的软件毕业设计制作过程中，主要使用程序开发软件MyEclipse，数据库界面工具使用微软SQL Server配套的SQL Server Management Studio，前台测试主要使用Firefox浏览器，不过为了实现多浏览器兼容同时也使用IE和Chrome浏览器。一般来说做Java Web前台程序需要专人做前台设计，而前台设计一般使用Dreamweaver。不过我所做的毕设是管理网站，主要考虑性能，对于图片的使用较少，所以我完全使用代码编辑前台，直接使用MyEclipse。第2章 Java Web网站架构分析2.1 为何选择Java语言开发程序Java是一种面向对象的程序设计语言，主要用于开发跨平台应用，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台的总称。Java自面世以来就非常流行，而且发展非常迅速，对C+等语言形成有力冲击。Java技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的专业开发者专业社群。在全球云计算和互联网的产业环境下，Java更具本了显著的优势和广阔前景。Java语言的跨平台性对于以后的可能的服务器搬移和性能维护提供便利。Java Web可以在window系统和Linux系统上运行。网站运行之后涉及到其他的程序共用一台服务器，所以考虑到兼容性可能会更换服务器系统，更换如果更换的服务器系统不能运行Java将会需要重新开发，这对于公司将是一种浪费。更重要的是Java程序在Web开发上对于逻辑编辑和运算能力有更出色的表现，在程序开发和维护也更加的便利，所以Java是我所最适合使用的开发语言。2.2 数据库的选择和使用SQL是英文Structured Query Language的缩写，是一种数据库结构化查询语言。SQL语言的主要功能就是同各种数据库建立联系。按照ANSI（美国国家标准协会）的规定，SQL被作为关系型数据库管理系统的标准语言。SQL语句可以用来执行各种各样的操作，例如从数据库中提取数据，更新数据库中的数据等。目前，绝大多数流行的关系型数据库管理系统，如Microsoft SQL Server, Oracle, Sybase, Access等都采用了SQL的语言标准。现在使用较多的是SQL Server、MySQL和Oracle等，MySQL是开源免费的，不过在性能上相对较弱，不足以支持大量数据运行。Oracle是大型的数据库，大部分企业型软件都使用Oracle数据库，不过Oracle是收费的，费用较贵，不适合小企业使用。SQL Server是微软开发的一种数据库软件，性能优越，而且有多个版本，有开发版（免费），就算是企业版软件费用也相对较为便宜，而且SQL Server的界面管理软件SQL Server Management Studio对于数据库的配置和使用也提供了非常大的便利。而且在网站项目启动之前，公司已有一个客户端项目正在开发，选择的恰好就是SQL Server,为了使两个项目的数据同步，所以在网站项目选择数据库时决定使用SQL Server.2.3 前台设计的技术分析网站前台主要负责向用户展示网站功能，是软件与用户最直接的交互，目前较为常用的有以下几种：大量图片或flash网页、纯flash网页、少量图片或纯代码网页。大量图片或flash的网页美观大方，可以使得整个网站具有美感，使得用户在使用中心情更加舒畅，但是由于图片和flash所占空间较大，占用服务器带宽也较大，很大程度上加大了服务器的工作量，对于系统管理网站来说是一种非常不可取的网页设计方式。纯flash网页所带来用户体验更加舒适，适合网页游戏，但是需要配置足够强大的服务器和带宽，对于系统管理网站来说非常不可取。少量图片的网页可以保持一定的美感，还可以通过代码来调整页面颜色，更重要的是网页主要采取代码维持页面的显示，所占带宽较少，对于服务器来说压力较小，这样服务器的反应速度得以提升，是管理系统管理网站最适合的网页设计方式。而且，少量图片的网页适合在MyEclipse中进行编写，不需要使用其他网页编辑软件，在开发和测试过程中较为方便。第3章 软件和数据库设计概述3.1 软件设计流程3.1.1 设计目标以往一个订单的完成是这个样子的，电商公司登录淘宝网查看订单，每天工作结束前将订单总结管理，最后生成一份下单表格，然后再将表格发送给生产厂商，由生产厂商确认有货并且发货之后再将已发货订单总结成一张表格反馈给电商公司，然后电商公司员工根据生产厂商的发货表格登录淘宝网点击发货。不得不说这样非常耗费时间，而且浪费人力。开发的系统主要为了实现与淘宝网相连接，实现自主拉取淘宝网账单信息，为工厂工作人员提供登陆账号并提供观看订单权限，及时查看未发货订单，并生产发货，节省电商公司与生产厂商沟通时间。同事为了解决售后问题提供订单跟进功能，由电商公司在管理系统网站发起跟进订单，可以留言和上传相关图片，普通工作人员处理不了的可以申请主管介入。同时为订单划分四个级别：“正常”、“健康”、“紧急”和“危险”，工作人员会根据级别决定优先处理哪些订单。同时在制定处理方案上进行沟通，决定是退货、维修还是退款等。电商公司同等商品不止一家生产厂商也不只一个网店，所以会建立多个数据库，每个数据库存储一个网店的订单信息，分配不同的主管和工作人员。然后建立总的数据库存储网店权限信息，权限信息主要用于存储和改变店铺开关状态和从淘宝网拉取权限，以及存储管理系统网站用户信息。为了提高提高店铺服务质量，系统将会在物流部分加入短信接口，及时提醒买家订单进展情况。并且，当淘宝网连接出现问题是可以使用备用上传功能上传订单表格，并由服务器解析存储到服务器数据库，其最终效果与淘宝网拉取订单是一样的。为了协同另一软件使用，提供聊天记录上传功能，由另一软件通过分析聊天记录计算转化率和咨询未成交率。3.1.2 用户特点管理系统网站面向公司职员开放，其中包括生产厂商的业务员和经销点负责人员，电商公司的销售人员、客服代表和部门主管。这些人都有一定的业务能力，经常使用电脑和管理系统网站，对于简易且功能性强的网页比较容易接受。3.1.3 管理系统的总需求目标实现全数据存储，尽量做到工作由计算机完成，向工作人员提供流畅的工作环境。并且对于连接淘宝网功能做出备用功能，即上传订单表格。利用现有的软件配置一定的硬件，开发一个开放体系结构、易扩充的、易维护的、具有良好人际交互界面的网站管理系统，实现订单全跟踪、数据完备的、高效的计算机系统。3.1.4 数据需求（1）数据的录入和处理的准确定和实时性数据的输入是否准确是数据处理的前提，错误的输入会导致系统输出不正常和不可用，从而使系统的工作失去意义。数据的输入来源是手工输入，手工输入要通过系统界面上的安排系统具有容错性，并且对操作人员要进行系统的培训。在系统中，数据的输入往往是大量的，因此系统要有一定的处理能力，以保证迅速的处理数据。（2）数据的安全性本系统为电商公司和生产厂商公用的系统，所以在数据安全上要分配权限，不需要厂商工作人员看到的信息就不能呈现。另外，系统的登录要严格控制，而且在进行关键操作时要进行手机验证码确认。3.2 总数据库分析3.1.1 表层级设计店铺数据库分为FollowOrderTable（订单跟踪表）、OrderDetailTable（订单详情表）和UseableOrderTable（可用订单表）。订单跟踪表存储售后纠纷订单的售后跟踪信息，其中包括售后级别、图片路径、处理过程、是否主管介入和下一步需要哪一方处理（如图3.1所示为FollowOrderTable数据库表结构）。订单详情表按照订单号和产品区分行数据，主要存储单个订单内不同产品的详细信息，其中包括订单编号、SkuID、产品名称、产品购买数量、产品颜色分类、产品尺寸、产品进货价和产品出货价等其他财务相关数据（如图3.2所示为OrderDetailTable数据库表结构）。可用订单表存储订单的重要数据，为物流系统和订单跟进系统提供信息，另外还需要给短信系统提供买家信息，其中包括订单编号、订单状态、订单宝贝总类以及买家详细信息等（如图3.3所示为UseableOrderTable数据库表）。图3.1 FollowOrderTable数据库表图3.2 OrderDetailTable数据库表图3.3 UseableOrderTable数据库表3.1.2 数据库层级分析因为管理系统网站需要同事负责多个店铺的运营，需要提高数据检索速度，所以就将数据分开存储，对于单个店铺创建相应数据库，最后由一个总的数据库负责统筹管理。总数据库有三张数据表AuthorizeTable（店铺权限表）、sendTiming（短信发送序列表）和SystemTable（用户表）。店铺权限表负责存储店铺连接淘宝网的相关权限信息以及负责程序调配数据库的店铺信息（如图3.4 AuthorizeTable数据库权限表结构）。图3.4 AuthorizeTable数据库权限表结构3.1.3 数据库存储逻辑这个系统是针对整个电商公司的，而不是单个的淘宝网店铺，所以要实现多个店铺分管各自的数据库，但是用户可能是共同的，也就是一个用户可能负责管理多个店铺，所以在数据库逻辑上需要建立多个针对店铺的数据库，同时，为了实现计算机对数据的管理，还要有一个主要的数据库存储数据库的信息，如店铺连接淘宝API的权限，所有的用户的信息。这样，在以后的使用中，即使有些数据发生变化可以直接更改数据库数据来确保程序的运行而不用去更改系统的源代码。第4章 控制层Java语言设计4.1 使用Java框架进行开发之前在学校学的是Servlet，是JSP编辑的一种变种，更适合程序开发，同时它是一个Java文件，在Tomcat运行的时候会把Servlet转变成为一个JSP文件呈现给用户，但是这种方法开发吃力，而且在与前台相链接的时候要进行复杂而重复的配置，所以我使用了Struts框架，Struts框架是对Servlet进行了整合，使用起来更加便捷。同时，在进行开发的时候将源代码分包编写，负责逻辑的程序放在Service包里，负责与数据库进行连接的放在DAO包里，其他还有过滤器、拦截器各分一个包。所有对服务器进行监听的程序放在Listener包里，对于需要支持程序运行的一些模型类放在Model包，另外创建一个用来创建数据库链接的类，在使用起来可以节省很多代码，更加方便维护。4.2 使用Action与前台进行交互网站开发分为前台和服务器端，这之间的练习是需要通过http协议，浏览器发起请求需要有服务器的支持，而Action就是实现这种功能的关键工具，接收前台传来的参数、文件和图片等数据。同时Action可以将浏览器所需的数据传递给前台呈献给用户。同时Action不需要繁复的配置，而且Action提供的拦截器功能，可以实现面向切面编程吗，在每次使用Action之前和之后都能进行相应的处理，这更加节省了代码的编写量。同时Action的配置可以实现动态装配，针对不同的返回值转向不同的页面，在转发之前实现相应的功能，编写简单、实用，而且出错率较小。Action需要实现的有AdminAction、CreateOrderListAction、SendMessageAction、UploadAction、和UserAction。AdminAction负责接收和返还管理员界面操作的数据，如更改管理员信息、更改和添加用户、更改和添加店铺和分配用户权限。CreateOrderListAction负责实现物流界面的显示和操作，接收和返还订单物流数据，实现接收订单出库、抵港等状态的时间，接收用户的短信请求。并且实现了订单搜索功能，可以根据宝贝名称、买家昵称、订单状态、成交时间和订单编号搜索返还相应的订单列表。并且能够根据订单编号返还订单的详细信息。SendMessageAction负责接收短信的接收用户手机号码和短信内容，直接向用户发送短信，并没有返还信息。UploadAction负责接收文件，提供订单的两个表格和聊天记录的上传，在上传之后转给Service层进行处理。UserAction最简单但却是最重要的，负责实现用户登录和退出，在登录之后将登录信息存入到Session中，Session是一个自客户端与服务器建立链接至结束就一直存在的元素，很多功能都要以来Session实现。在之后的每次处理是都要先检测Session中是否有用户登录信息，检测权限，对于Session中没有登录信息时则拒绝请求。这些Action每次接收到参数都会传送给Service层相应函数接受处理，之后再经过Service层相应函数的返回信息决定应该转发给哪一个JSP界面或者哪个Action。4.3 使用Service处理数据和运算当Action从前台接收到参数时如果直接在Action中进行处理会使得Action代码量过于庞大，不便于更改和维护。实现分层之后将逻辑代码放在Service层，对于多种运算的逻辑进行编写，代码逻辑更加清晰一目了然，在以后的维护和升级中都会更加方便。比如物流模块中填写物流时间的功能，每次提交之后需要将时间存入数据库，并且根据时间判断何时应该向用户发送短信，而发送短信如果不是即时发送则需要先存入数据库之后再由Listener包内的监听器检查并实现短信发送，这个时候不止要对时间进行分析，还要分开存入数据库。还有上传订单表格的处理，需要针对订单表和订单详情表同时进行处理，这就需要Service层进行分开处理存入数据库，然后保存到服务器的相关路径。而且，在读取两张订单表的时候还要进行运算得出订单商品颜色属性等信息。Service是负责服务器端主要程序，也是整个网站管理系统的支柱，是最核心的程序，依靠众多小模块的算法支撑起来的一个程序层，在开发中耗费的工作量很大，如果没有这一层的程序网站管理系统就不能够实现多样化、多功能，也不能实现计算机管理，这一层是集合知识和逻辑最多的一个程序层。4.4 数据库托管给DAO层数据库是支持一个系统的重要组成部分，所有需要使用的数据都要存入到数据库中，再使用的时候从数据库中提取并返回到前台。而数据库链接需要代码量很大，如果直接放到Service层会使得Service层代码逻辑紊乱，不利于开发和维护，所以在Service层将所需要的数据封装成为对象传递给DAO层处理。比如订单数据，订单这一对象处理所含参数有四十多个，如果直接放在Service层所造成的代码芜杂程度不可想象。所以我将所有用到的对象如管理员、订单、订单详情、订单跟踪、店铺、用户和API链接所需参数封装成的对象都编写为独立的DAO类对象，将其放入DAO层，在使用的时候能够随心所欲，而且在以后需要维护的时候更加方便。4.5 使用拦截器和过滤器进行权限管理在我们平时上网的时候我们会经常通过聊天工具将网页共享给好友，这个时候我们只要将网页链接复制下来发给好友，对方就可以直接在浏览器打开观看。但是，网站管理系统却绝对不允许这样的事情发生，只有经过规则允许的人才能观看相应的信息，以防止商业秘密被暴漏。Struts2提供拦截器功能，每次使用Action时就会对Action进行拦截并且处理分析之后决定请求导向，而前台与服务器之间的数据通讯都需要经过Action实现，所以可以在每次请求是检查用户权限，如果用户没有登录就拒绝请求，而如果因为用户全新不足则返回提醒用户。但是拦截器对于访问服务器物理路径却没有管理能力，这就需要其他的功能进行管理。Java网站开发提供过滤器功能，对于每次前台的访问都要进行过滤和处理，在这点上与Struts2所提供的拦截器功能有些相似，但是过滤器却可以实现对物理路径访问进行管理。比如访问服务器图片和JSP页面，直接访问服务器文件是不受拦截器管制的，而拦截器却可以进行管理，在每次接受请求时检查用户权限这在网站权限管理和防止信息泄露上是意义重大的，可以有效的防止信息被暴力获取。第5章 前台界面的开发和相关技术5.1 前台相关技术解析 5.1.1 使用JQuery前台开发框架编写脚本网站开发不管服务器程序做的多么完美，最终还是需要呈现给用户，正如一栋大楼，即使建筑骨架再结实也需要经过装修之后才能投入使用。前台技术需要向服务器发起请求并将所获得的结果表现出来呈现给用户。在这个过程中，链接服务器的部分只有启用Javascript脚本才能使用户在体验上觉得舒适，不至于打开更多不必要的窗口。而想要更加漂亮的显示给用户需要经过DIV+CSS布局完成。DIV+CSS我已经几本掌握，使用起来也是随心所欲，但是Javascript脚本语言本身就与Java语言的编写方式区别很大，掌握起来有些困难，所以我选择JQuery框架来掌控Javascript脚本语言。JQuery是一个集成Javascript脚本语言的框架，JQuery使用起来方便，学习的时候也容易理解，它已经将经常使用的Javascript脚本语言的功能封装成一个方法，在使用的时候只要传递具体的参数就可以使用。所以，在前台开发上，使用JQuery是非常必要的，也是现在前台开发的主流方式。5.1.2使用DIV+CSS设计界面布局网页设计不像图片设计一样，可以在设计软件里直接调整位置，一个网页需要占用尽量少的空间而又有更多的功能，所以这就需要使用代码来布局，经过浏览器的解析显示给用户。DIV可以创建一个模块，就像一个边框，可以在边框内部显示更多的内容，也可以随意调整位置，在网页布局中意义很大，是网页设计中必须的一项技术。而想给DIV配有各种属性就需要CSS支持，CSS可以调整DIV边框的大小和向内、向外的距离，也可以调整DIV的颜色和位置属性，同时也可以使DIV隐藏或者显示，而这些都可以通过Javascript控制，这就对网页布局来说方便多了，可以通过代码逻辑来决定的显示方式比图片更有多变性和可操作性。使用DIV+CSS可以满足不同尺寸显示器的要求，根据显示器大小调整自身。同时可以根据用户使用习惯决定某一模块的放置位置，对于网页设计来说不可或缺。5.1.3 使用Struts2标签从后台获取数据Struts2标签是一种与Struts框架配合使用的网页标签，可以实现迭代列表显示。只需要将所需内容放在服务器返回的数据中在前台接收到服务器的返回数据之后，根据相应的参数名称就可以直接在网页上显示。如订单列表，一个订单列表有数百个订单，这些订单放在一个List里，经过Action被前台接收，再通过前台的Struts2标签进行循环显示，同时也可以控制显示顺序。而在物流模块需要显示订单的各种属性，这些属性只有封装在Order对象中才能使用起来更加方便。在前台接收之后再通过Struts2标签逐个显示，操作起来得心应手。5.2 用户前台界面设计5.2.1 主窗口设计如图5.1 主窗口布局图，最上方显示用户名和用户身份，以及可以更换的店铺，更换店铺是一个下拉列表，选项都是已登录用户有权限操作的店铺，同时提供退出，直接返回到登陆页面。而中间部分使用的是四个按键，点击之后下方的“欢迎”页面转变为对应的页面，这样可是在不变化窗口的情况下完成所有的操作，节省客户端内存空间，同时也使得用户在操作的时候更加灵便。上部横条为一个DIV标签，下部分主页面也是一个DIV标签，使用CSS设置位置属性，使其保持固定位置不会随着显示器的改变而发生变化。图5.1 主窗口布局图5.2.2 物流界面设计如图5.2物流界面设计图，物流界面提供三种使用界面：等待填报、等待出库、等待抵港，这三种是界面对应着三种状态的订单，选择等待填报的则是正在等待出库和等待抵港的订单，而等待出库和等待抵港则对应着相应的订单序列。这样可以使用户只需要浏览应该进行操作的订单，减少工作时间。物流界面提供搜索功能，如果用户有需要可以根据宝贝名称、买家昵称、订单编号、订单状态和成交时间段来搜索。下方左侧是订单列表，是借助Struts2标签完成的显示，单击一个订单编号之后在右侧会显示出相应的信息，有一下几项：收货地址、联系方式、联系人、成交时间、付款时间、备货时间、预计出库、实际出库、预计抵港和实际抵港时间，相应信息下面则是订单所包含的产品信息，其中有skuid、产品名称、产品定价、颜色、尺寸、数量和实习付款金额。订单列表、详细信息和产品信息板块都是DIV布局的，再使用CSS为订单列表和产品信息板块加上滚动条，可以快速浏览。图5.2 物流界面设计图5.2.3 订单跟进系统界面设计如图5.3 订单跟进界面设计图，首先使用两个DIV左右排列，左边显示订单列表和订单搜索功能，订单列表分为“久爱”和“工厂”两种，分别代表需要久爱致和公司处理的订单和工厂方便处理的订单，右边DIV内部含有上下两个DIV，上面的带有订单基本信息、时间记录和跟进记录，下方的是操作记录，带有图片显示功能，只需要点击“查看”按钮就会打开一个新的只含有相对应图片的页面。在使用过程中，首先搜索已经完成的订单，在下方选择需要发起的级别之后点击“发起”，记录中就会生成一个新的记录。在之后就可以补充内容、上传相应图片。普通用户解决不了的可以通过“邀请主管介入”按钮邀请主管处理，点击之后后台会给主管发送短信提示。处理完毕之后转给下一步需要处理的有关部门。图5.3 订单跟进界面设计图5.2.4 上传界面设计如图5.4 上传界面设计图，此页面分为订单上传和聊天记录上传，上传订单的时候需要上传订单表和订单详情表，都是从淘宝网导出的一套表格，上传之前会对表格进行审查，审查不通过则拒绝上传。聊天记录上传的时候可以上传一个或者两个，同时也会进行相应的审查，审查不通过同样拒绝上传。如果通过上传图5.4 上传界面设计图5.3管理员前台界面设计 5.2.1 个人信息管理节管理员个人信息只有用户名、真实姓名、密码和手机号，其中用户名不能修改，而其他信息可以双击显示区域直接变成可编辑区域，通过提交按钮由JQuery将已更改的信息提交给服务器。在点击提交之后会在前台判断是否有信息发生改变，如果没有改变将不会提交请求。图5.5 管理员信息界面设计图5.2.2 用户信息管理如图5.6 用户管理界面设计图。打开此界面之后所有用户以列表显示，每列包括用户名、真实姓名（可不填）、用户类型、所在店铺、岗位、用户密码和权限。其中用户类型值固定的几种，所以可以通过下拉列表选择，选择之后前台脚本程序会判断是否与原来相同，如果不相同就会将请求发给服务器执行更改。用户所在店铺会将所有可选择的店铺以多选框显示出来，只要将鼠标悬浮在这一单元格上就可以显示出“提交”按钮，在更改之后直接提交给服务器。岗位信息也是通过下拉菜单进行更改，如果信息改变则会直接提交给服务器更改。用户名密码则是通过双击进入编辑模式，编辑好密码之后按下“Enter”键就可以提交给服务器执行更改。权限信息可以使用多选框更改，但是直接显示则会是页面布局宽度过大，所以将单元格隐藏，只要将鼠标悬浮在“查看”上面就可以显示编辑权限的单元格，只要更改之后点击“提交”按钮就可以直接提交给服务器执行更改。用户列表的用户类型和所在店铺会提供筛选功能，点击表头右边不分下拉菜单选中之后表格会按照所选项目显示指定符合类型的用户。图5.6 用户管理界面设计图如图5.7 新建用户界面设计图。点击右侧“新建用户”按钮之后就可以弹出一个使用DIV+CSS制作的一个伪窗口，这个窗口只有打开和关闭的功能，在系统任务栏不会有显示。创建用户需要填写用户名、密码、真实姓名、用户类型、所在店铺、岗位、手机号和权限，填写完成之后点击“提交按钮”提交到服务器执行注册，提交之前前台脚本会判断是否有缺少信息如果存在缺少信息则会拒绝提交并弹出提醒窗口，点击“关闭”按钮直接关闭该窗口不执行任何操作。图5.7 新建用户界面设计图5.2.3 店铺信息和功能管理如图5.8 店铺信息管理界面设计图，店铺信息有淘宝ID（店铺在淘宝网的名称）、店长、店长姓名、店长手机、店铺开关、详细和删除。店长显示此系统的用户名。店铺开关是为此系统中此店铺功能的开关，如果设置为关闭则不能实现连接淘宝API并同步订单信息，也不能提供上传订单表格，但是可以观看订单。同时可以直接点击“删除”按钮直接删除此店铺，之后将不提供所有已有功能。图5.8 店铺信息管理界面设计图如图5.9 店铺详情管理界面设计图，点击“详细”按钮之后会弹出“店铺详情”窗口，除了在列表中显示的信息之外，还会显示不经常进行编辑的连接淘宝API的权限信息，包括Appkey、Secrect、数据库名称、授权码、刷新码，更改的时候需要提供手机验证码，验证码会直接发送到已经登陆的管理员手机上，如果需要重新发送只需要点击右侧的“重新发送”按钮即可。点击“提交”按钮可以提交给服务器执行修改，提交之前前台脚本会检索是否有缺失信息，如果存在缺失信息就会直接提醒管理员，同时不执行任何操作。图5.9 店铺详情管理界面设计图如图5.10新建店铺界面设计图，点击右侧“新建店铺”按钮之后就会弹出新建店铺的窗口，新建店铺需要填写店铺后台ID名（用于系统内部运算识别）、店铺简称、淘宝店铺名、店长、店长ID、店长电话，选择店铺开关或者关闭，还需要提供连接淘宝API的权限信息：Appkey、Secrect、数据库名称、授权码、刷新码。同时在提交之前需要填写手机验证码，提交之后同样需要经过前台脚本检索，不通过就会提醒管理员，通过之后再经过前台脚本提交给服务器执行修改。图5.10 新建店铺界面设计图第6章 问题汇总及解决办法6.1 遇到的问题在网站开发过程中，有很多问题经常发生，也是最令我头疼的，我总结出一下几种最典型的问题：1、乱码问题，网站不同于客户端程序开发，因为涉及到数据库、服务器程序、前台页面，这三种处于不同的运行环境，所以在中文传输上经常发生中文乱码问题，后台阅读清晰的中文数据在前台却是乱码，还有前台提交到服务器的数据也是乱码，这些问题经常发生。2、路径问题，服务器因为将程序放到指定位置，所以程序运行需要经过编译才能运行，所在在指定的相对路径并不能找到文件，这种问题时有发生，在存放图片和日志文件时会显得非常难以捉摸。3、特殊数据存放问题，在数据存储上，有些记录数据难以存放。比如订单跟进模块中的根基记录的存放，记录需要跟随订单存放，如果防止在其他数据库表中则会对数据库造成芜杂，需要多次访问数据库，而且记录无法设置主键，很可能会造成重复，根本无法创建新表。如果放置在订单跟进数据库表中也很不方便，因为记录本身是一个有时间性质且多行的数据，防止在一行表中很难完成。6.2 解决方法开发工作本身就是困难的，需要的