【计算机软件毕业设计】基于Jsp的网上投稿系统设计与实现(专家审稿).doc

河北农业大学
本科毕业论文(设计)

题 目： 基于Jsp的网上投稿系统设计与实现(专家审稿)
摘 要
传统的投稿方式有邮寄和电子邮件两种。邮寄方式投递时间长,反馈时间更长,并有投递错误、半路遗失的可能,既慢又不保险。电子邮件服务投递邮件,也存在着许多不足如作者本人邮箱容量的限制、编辑邮箱承载量的限制等。随着计算机技术在科技期刊编辑流程中的应用日益增加,越来越多的科技期刊倾向于建立网络在线投稿系统。该系统的方便性、快捷性,使投稿者和编辑者交流更密切。本论文设计了一种基于Web的网络投稿系统。本设计采用网站开发工具ASP作为网站开发平台,使用MACROMEDIA公司的网页制作工具Dreamweaver MX制作页面,用JavaScript语言编制连接数据库的程序,借助数据库工具SQL Server制作系统的数据库,Web服务器软件使用新一代IIS 5,采用B/S方案构建服务器体系结构,制作了一个具有小型网站投稿信息管理系统,具备稿件浏览、编辑稿件、添加稿件、更新稿件和删除稿件等功能。在该系统下,网络前台的用户可以在线写稿、预览、投递,并能在第一时间内收到用稿通知;后台管理员则可在线阅读、审批来稿以及给作者发送邮件,从而实现投稿-采编-发布一体化。网络投稿系统的开发既可以节省编辑部的工作时间又能提高该工作的效率,适应了新时代文化的传播,是一项很有实践价值的项目。
【关键词】在线投稿；稿件；数据库； B/S

ABSTRACT
Traditional way of contributions have two kinds of mail and E-mail.Mail delivery time is long, the feedback time is longer, and have the possibility of delivery errors, lost halfway, both slow and no insurance.E-mail service delivery, there are also many insufficiencies such as the author's own mailbox capacity limits, edit mailbox capacity limits, etc.Along with the computer technology in the application of science and technology periodical editing process is increasing, more and more science and technology journals tend to establish online submission system.The system is convenient and expeditious, communicate more closely to contributors and editors.This paper designs a network contribution system based on Web.This design USES the Web development tools ASP as a Web development platform, use MACROMEDIA company's Web page creation tools Dreamweaver MX page, connect to the database program with the JavaScript language, using SQL Server database tool making system database, Web Server software using a new generation of IIS 5, using B/S scheme build Server architecture, has made a small contributor information management system, with articles browsing, editing, and add articles, update, and delete articles, and other functions.Under this system, the network at the front desk of the user can online writing, preview, delivery, and can receive the first notice in the first;Administrators can read online, the examination and approval and to email the author contributions, so as to realize contribute - editorial - release integration.The development of the online submission system, which can save the editorial work time and can improve the efficiency of the work, to adapt to the spread of the new age culture, is a very practical value of the project.
【Keywords】Online submission; manuscript; database; B/S

目 录
1.绪论 1
1.1背景和意义 1
1.2 发展及现状 1
2.系统分析 2
2.1经济性与实用性分析 3
2.2运行可行性 3
2.3功能分析 3
2.3.1前台系统 3
2.3.2后台数据建立 3
2.4.系统开发与运行环境 3
2.5开发工具与技术 4
2.5.1.JSP 4
2.5.2javascript 4
2.5.3.Mysql 5
2.5.4. XHTML+CSS 5
3.系统设计 6
3.1系统结构示意图 6
3.2专家模块功能图 6
3.3系统流程图 7
3.4数据库设计 7
3.5数据库连接设计 8
4.系统实现 11
4.1页面的设计及说明 11
4.1.1登陆页面的设计 11
4.1.2注册页面的设计 11
4.1.3系统的主页面 12
4.1.4专家登录进去的页面 11
4.2主要代码部分 15
结论 21
参考文献 22
致 谢 23

1.绪论
1.1背景和意义
近年来，随着信息科学与技术的迅猛发展，人们获取信息的方式变的越来越多，除了传统的报纸，文章，书籍，因特网成为了人们搜集信息的新宠。近数年来，发展迅速，逐渐被应用于各个领域，大大方便了人们的生活。其中的WEB技术采用浏览器和超文本链接，得到了众多很多用户的青睐。同时，越来越多的事业单位及教育机构等逐渐开始通过因特网技术宣传自己，这为有信息需求的人提供了方便快捷的服务。鉴于传统的投稿方式显现出越来越多的弊端，如：浪费纸张，浪费时间等，在线投稿系统就变得越来越受使用者的欢迎。该系统能很方便的管理用户和稿件的基本信息，它对于作者，主编，专家这三方面来说，都扮演了十分重要的角色。同时该系统也是对稿件信息的一种相当方便的管理系统。
将Internet技术与数据库技术相结合，使得Internet技术与数据库技术都发生了质的变化。由于数据库技术的支撑，Web页面由静态网页发展成为动态网页；由于Web技术的支撑，数据库应用系统实现了数据环境和应用环境的分离，使得客户端用相对统一的浏览器实现跨平台的零客户端应用。本设计的题目是基于B/S模式的在线投稿网站系统，它主要依据网络系统结合数据库系统与网站设计的具体工作要求，通过强大的互连网技术，进行投稿系统在线管理服务。根据用户的需要，提供相关各方面信息，实现用户与系统的及时沟通。
建立基于JSP在线投稿系统之后，作者可以在线投稿，编辑和专家在线审稿，作者可以及时得到主编和专家的反馈信息，这正是用户所希望能实现的。
1.2 发展及现状
现在在线投稿系统发展已经有一些比较不错的系统，首先是国内外的一些投稿系统：
一、Nature系列期刊（Nature Materials）
1.Nature系列期刊的身高系统非常优秀，编辑反馈很快，审稿周期比较合理，之后的校订出版谨慎细致。
2.投稿准备工作：Nature Materials接收word和PDF文件。正文格式没有特殊要求，标准的double space，没有模板。文章长度需要控制在要求的范围内，对不同类型的文章（letter，article，review，progress…）都有具体的字数和图表数目上限。
3.投稿过程：使用Nature Materials在线投稿系统，建立账号后，首先要填写所有作者的个人信息（详细单位，地址，电话，邮件等），接着填写文章题目和摘要，选择所投文章的归属分类。然后是上传投稿文件，包括：cover letter，Figures，正文，Support information文件。之后系统自动转化文件格式为PDF，并且会要求你逐个查看转化后的PDF文件，投稿完成。
4.审稿：Nature Materials的审稿比较严格，通常有三个审稿人，如果特殊需要可能会添加一个审稿人。Nature Materials稿件首先根据领域分到不同的编辑，编辑确定稿件是否送审，通常是一周左右的时间进行预审，确定送审与否。Letter整体审稿周期大概3-4周，通常稿件都会要求修改，并且重新从审。
5.出版：文章接收后，Nature Materials会要求作者重新递交production materials，图标都要达到他们的印刷要求。除了填写必要的版权表格，另外文章全文光盘一张，图表光盘一张，抛光相纸打印的图表一式两份（规定尺寸）。
二．国内也有一些发展起来的在在线投稿系统，已中华系列杂志在线投稿系统为例。
1.要求使用该系统，首先要注册，登录后，一般要求利用该系统上传稿件，并在该系统中填写作者信息，摘要等。投稿成功后会在你注册的E-mail中收到投稿成功的信息。
2.杂志社会在该系统上处理上传的稿件相对国内外发展比较成熟健全的在线投稿系统，国内的在线投稿系统不论是从上传稿件的要求，还是审稿的效率上来说，都和国内外系列差距巨大。2.系统分析
2.1经济性与实用性分析
该系统不是一个很庞大的系统，小组三名开发人员足矣。每人分别负责作者模块，主编模块，专家模块的设计与开发，成本很低，在windows系统上就可以运行，系统维护较为方便。对于用户来讲，系统所具备的功能，正是用户所需要的，因此有实际的开发价值且能够得到运用。
2.2运行可行性
该系统运行后，用于作者投递稿件、编辑及专家审查稿件、以及作者及时接收编辑和专家的意见反馈。实现从投稿，审稿，编辑，发行等全过程的网络化，比传统模式更加灵活方便。通我们认为该项目的开发是可行的。
2.3功能分析
随着计算机在办公中的普遍应用，越来越多的杂志社或编辑部采用计算机软件对稿件进行管理。为此开发稿件处理系统，使其可以减轻编辑人员的重复劳动，可以全方位整合资源，提高工作效率，缩短稿件发表周期，提高竞争能力。它还可以帮助编辑部管理作者、专家信息，帮助编辑部与他们的联系，实现投稿、审稿的网络化，扩大工作的范围和影响力，提高稿件质量。
专家审稿模块所应实现的功能有：（1）专家注册和登录；（2）查看编辑分发给自己的稿件；（3）专家审稿并发送审稿意见等。根据可行性研究的结果和用户的要求，分析现有情况及问题，采用B/S结构，将在线投稿系统划分为前台模块和后台数据模块。
下面分析各模块的功能需求：
2.3.1前台系统
前台系统模块：首页、用户具有不同的权限，进入不同的页面，从而对后台数据具有不同的操作。前台采用JSP+JS +CSS+DIV技术尽可能做到最大的美化以及功能的实现。
2.3.2后台数据建立
后台数据库主要包括：系统用户信息、稿件所有信息。本数据库主要包括了2张表来记录不同的信息，一张表记录用户的基本信息，如用户名、密码、电话号码、地址等。另外一张表记录稿件的基本信息，如稿件类型、编号、标题、作者、论文名称、审稿人、审稿状态、审稿人意见等。
2.4.系统开发与运行环境
开发环境：
操作系统：Microsoft Windows 7
数 据 库：Mysql
开发工具：Mysql Myeclipse8.5 jdk1.6 Tomcat6.0
建议系统运行环境：
a.硬件环境：
内存： 512M以上.
硬盘： 10G以上.
b. 软件环境
操作系统：Microsoft Windows 7
WEB服务器：Tomcat6.0
数 据 库： Mysql
2.5开发工具与技术
2.5.1.JSP
JSP（Java Server Pages）是由Sun Microsystems 公司倡导、许多公司参与一起建立的一种动态网页技术标准，JSP技术在Servlet技术基础上发展起来的，它正在飞速发展中，现已成为Java服务器编程的重要组成部分。JSP是结合markup(HTML和XML)和Java代码来处理一种动态页面。每一页第一次被调用时，通过JSP引擎自动被编译成Servlet，然后被执行，以后每次调用时，执行编译过的Servlet。JSP提供了多种方式访问Java class、Servlet、Applets和Web Server，因此，Web应用的功能可以分成多个明确定义公用接口的组件，通过JSP将它们结合在一起。
JSP的技术特点：
（1）一次编写，到处运行。
（2）系统的多平台支持。
（3）强大的可伸缩性。
（4）多样化和功能强大的开发工具支持。
（5）支持服务器端组件。
2.5.2javascript
Javascript[1]是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言遗留的速度问题，为客户提供更流畅的浏览效果。它是一种新的描述语言，它可以被嵌入HTML的文件之中。主要是基于客户端运行。
用JavaScript可以验证表单有效性等大量互动性功能，都是在客户端完成的，不需要和Web Server发生任何数据交换，因此，不会增加Web Server的负担，从而提高了运行速率。另外，JavaScript编写的程序不必在运行前编译，它们可以直接写入Web页面中并由调用它们的浏览器来解释执行。这样，一些基本的交互信息就不用在服务器端完成，从而提高了客户端的响应时间。
2.5.3.Mysql
MySQL是一个关系型数据库管理系统，由瑞典MySQL AB公司开发，目前属于Oracle公司，是最流行的关系型数据库管理系统。在WEB应用方面MySQL是最好的RDBMS(Relational Database Management System：关系数据库管理系统)应用软件之一。MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。MySQL所使用的SQL语言是用于访问数据库的最常用标准化语言。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，一般中小型网站的开发都选择MySQL作为网站数据库。
2.5.4. XHTML+CSS
XHTML+CSS，即CSS+DIV技术，它是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。用来布局前台页面
其主要优点是：1、缩减代码，提高页面浏览速度。
2、结构清晰，对搜索引擎更加友好。
3、支持各种浏览器，兼容性好。
4、简单的修改，缩短改版时间。
5、更好的扩展性。
6、更灵活控制页面布局。

3.系统设计
系统设计是新系统的物理设计阶段。根据系统分析阶段所确定的新系统的逻辑模型、功能要求，在用户提供的环境条件下，设计出一个能在计算机网络环境上实施的方案，即建立新系统的物理模型。
系统设计的三个原则：可扩展性原则、易用性原则、阶段开发原则
3.1系统结构示意图
系统采用了mysql与tomcat分离的方式，Web服务器通过Web Server 应用程序来访问数据库，而用户则通过客户端的浏览器连接到Web服务器。系统的结构如图3.1所示。

图3.1 系统结构示意图
3.2专家模块功能图
专家与作者和编辑有着相同的功能：都可以注册和登录，修改自己信息。但专家有自己独特的功能：可以审查主编分发给自己的稿件。而且只有当主编指明分发给自己时，才能查看该稿件，而不与其他专家贡献稿件。其功能结构图如图3.2所示：
专家

注册
登录
查看修改信息
评论稿件

图3.2 专家模块功能图
3.3系统流程图
在这个在线投稿管理系统中，是以前台系统为主。根据系统各个功能模块之间的依存关系，例如登录的系统管理员只有在成功登录，和取得相应权限后，才能对后台数据进行相应操作管理。后台数据维护子系统流程图如图3.3所示：

图3.3 系统流程图
3.4数据库设计
数据库的设计是按照以下分析进行的。
1.系统登录级别：权限的设置，不同身份的用户登陆后有不同等级的操作，因此，对数据库的访问权限要区分开来。
2.系统登录的状态：状态的属性，设为登录和注销两类，防止不登录进入系统。
在系统数据库设计时，我们应该考虑如何用数据模型来描述数据的结构和语义,用来实现对现实操作的抽象。在本系统中我所采用的是“实体联系模型”来描述数据库的结构和语义，实现对现实操作的抽象。
本系统使用的数据库是Mysql数据库，系统数据库实例名为online_submation，当进行数据插入的时候，编号自动加1，如果对系统的设置要求变化，可以在后台数据中修改相应参数。数据库中两个个数据表如表3.1到表3.2所示：

表3.1 用户信息表
字段名
数据类型
是否允许为空
是否主键
是否外键
含义
uid
int
no
Yes
no
唯一字段
uname
Varchar(20)
yes
no
no
用户名
upswd
Varchar(20)
yes
no
no
密码
sex
Varchar(20)
yes
no
no
性别
phone
Varchar(20)
yes
no
no
电话号码
address
Varchar(20)
yes
no
no
地址
lim
int
yes
no
no
用户权限

表3.2 稿件信息表
字段名
数据类型
是否允许为空
是否主键
是否外键
含义
id
int
no
no
no
唯一字段
title
Varchar（255）
yes
no
no
标题
content
Varchar（255）
yes
no
no
摘要
author
Varchar（50）
yes
no
no
作者
time
Varchar（90）
yes
no
no
时间
phone
Varchar（30）
yes
no
no
电话
type
Varchar（200）
yes
no
no
类型
expert_option
Varchar（255）
yes
no
no
专家意见
editor_option
Varchar（255）
yes
no
no
编辑意见
3.5数据库连接设计
在本系统使用Mysql开发软件，配置在 Windows 7的操作系统上。配置步骤如下。
步骤1：创建数据库。首先打开Mysql，在本地服务器上新建一个名为online_submation的数据库连接，然后在该数据库上创建“数据库设计”中的各个数据表。
步骤2：数据库连接。
在开发该系统时，创建一个名为ConnectionManager.java 的文件，在里面设置一系列数据库连接语句代码，代码如下:
package mon;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class ConnectionManager {

public static String DBDRIVER="com.mysql.jdbc.Driver";
public static String DBURL="jdbc:mysql://localhost:3306/online_submation";
public static String DBUSER="root";
public static String DBPASS="root";
Connection conn=null;
PreparedStatement pstm;
public ConnectionManager(){
try {
Class.forName(DBDRIVER);
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
System.out.println("加载数据库驱动失败！");
e.printStackTrace();
}

try {
this.conn=DriverManager.getConnection(DBURL,DBUSER,DBPASS);
} catch (SQLException e) {
// TODO Auto-generated catch block
System.out.println("创建数据库连接失败！");
e.printStackTrace();
}
}
public Connection getConnection(){
return this.conn;
}

public static void close(ResultSet rs,PreparedStatement prs,Statement sta,Connection conn)
{
try {
if(rs!=null){
rs.close();
}
if(prs!=null){
prs.close();
}
if(sta!=null){
sta.close();
}
if(conn!=null){
conn.close();

}
} catch (Exception e) {
// TODO: handle exception
System.out.println("close error");

}
4.系统实现
4.1页面的设计及说明
页面设计根据作者希望向浏览者传递的信息（包括产品、功能、理念等），进行网站功能策划，然后进行的页面设计美化工作。是人从浏览器获取信息的媒介，能否设计出友好的浏览页面，是一个项目是否合格的一个重要体现。
本系统的详细页面设计具体展示如下：
4.1.1登陆页面的设计
登陆界面是给用户留下第一印象的界面，它的美观与否直接影响到用户的心情，。本界面主要利用css+div技术，使界面看起来简洁，美观，如图4.1所示。

图4.1用户登录页面
4.1.2注册页面的设计
对于所有新用户来说，都需要注册才能进入系统。注册的内容包括：用户名、密码、性别、地址、手机、注册类型等内容。如图4.2所示：

图4.2注册页面
4.1.3系统的主页面
用户登录进去，就看到主页面，如图4.3所示。

图4.3主页面
4.1.4专家登陆进去的页面
用户信息页面如图4.4所示。

图4.4用户信息页面
修改用户信息页面如图4.5所示。

图4.5修改用户信息页面
专家查看稿件页面如图4.6所示。

图4.6专家查看稿件页面
专家给出意见页面如图4.7所示。

图4.7专家给出意见页面
专家可以下载主编发给自己的稿件，如图4.8所示

图4.8下载稿件
4.2主要代码部分
利用ajax技术对注册用户名验重及javascript技术验证注册各项信息不能为空
<script type="text/javascript">
var xmlHttp;
var flag;

function creatXMLHttp(){
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
function checkUser(uname){
if(uname==""){
document.getElementById("msg").innerHTML="用户名不能为空";
return false;
}
creatXMLHttp();
xmlHttp.open("get","CheckServlet?uname="+uname,true);
xmlHttp.onreadystatechange=checkUseridCallback;
xmlHttp.send(null);
document.getElementById("msg").innerHTML="正在验证...";
}
function checkUseridCallback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var text=xmlHttp.responseText;
if(text=="false"){
flag=false;
document.getElementById("msg").innerHTML="此用户名已经注册";
}
if(text=="true"){
flag=true;
document.getElementById("msg").innerHTML="";
}
}
}
return flag;
}

function checkPass(){

var password;
//password=document.form2.password.value;
//password=$("#inputPass").val();
password=document.getElementById("inputPass").value;

passlength=password.length;

if(password==""){

document.getElementById("pass").innerHTML="密码不能为空";
return false;
}
if(passlength<=5){
document.getElementById("pass").innerHTML="密码最少6位";
return false;
}
if(passlength>5){
document.getElementById("pass").innerHTML="";
}
}

function checkPass1(){
var password1,password;
//password1=document.form2.password1.value;
//password=document.form2.password.value;
//password=$("#inputPass").val();
//password1=$("#inputPass").val();
password=document.getElementById("inputPass").value;
password1=document.getElementById("inputPass1").value;
if(password1==""){
document.getElementById("pass1").innerHTML="确认密码不能为空";
return false;
}
if(password!=password1){
document.getElementById("pass1").innerHTML="两次输入密码不一致";
return false;
}
if(password1!=""&password1==password){
document.getElementById("pass1").innerHTML="";
}
}

function checkPhone(){
var phone;
var format=/^1[3458]\d{9}$/;
//phone=$("#inputPhone").val();
phone=document.getElementById("inputPhone").value;
if(phone==""){
document.getElementById("phone").innerHTML="手机号不能为空";
return false;
}
if(!format.test(phone)){
document.getElementById("phone").innerHTML="请输入正确的手机号格式";
return false;
}

if(phone!=""&format.test(phone)){
document.getElementById("phone").innerHTML="";
}
}

function checkAddress(){
var address;
//address=$("#inputAddress").val();
address=document.getElementById("inputAddress").value;
if(address==""){
document.getElementById("address").innerHTML="地址不能为空";
return false;
}
if(address!=""){
document.getElementById("address").innerHTML="";
}
}

function checkAnswer(){
var answer;
//answer=$("#inputAnswer").val();
answer=document.getElementById("inputAnswer").value;
if(answer==""){
document.getElementById("answer").innerHTML="答案不能为空";
}
if(answer!=""){
document.getElementById("answer").innerHTML="";
}
}

function kong(){
var password,password1,uname,phone,answer,address;
password=document.getElementById("inputPass").value;
password1=document.getElementById("inputPass1").value;
uname=document.getElementById("inputUser").value;
phone=document.getElementById("inputPhone").value;
answer=document.getElementById("inputAnswer").value;
address=document.getElementById("inputAddress").value;
var a1,a2,a3,a4,a5,a6;
a1=document.getElementById("msg").innerHTML;
a2=document.getElementById("pass").innerHTML;
a3=document.getElementById("pass1").innerHTML;
a4=document.getElementById("phone").innerHTML;
a5=document.getElementById("answer").innerHTML;
a6=document.getElementById("address").innerHTML;
if(uname==""||password==""||password1==""||phone==""||answer==""||address==""){
return false;
}
if(a1!=""||a2!=""||a3!=""||a4!=""||a5!=""||a6!=""){
return false;
}
return true;
document.action.submit();
}

</script>
</head>

<body>

<div class="container">

<form class="form