WEB编程实验报告---南昌大学.doc

1、 实 验 报 告实验课程： JAVA WEB编程技术 学生姓名： 学 号： 专业班级： 物流101班 2013年 06 月 12 日目录实验一 WEB编程环境3实验二 HTML和CSS编程技术7实验三 JAVASCRIPT编程技术10实验四 SERVLET编程技术13实验五 JSP编程技术16实验六 JAVABEAN编程技术21实验七 基于MVC模式构建系统25 南昌大学实验报告学生姓名： 学 号： 专业班级： 物流101班 实验类型： 验证 综合 设计 创新 实验日期： 实验成绩： 一、 实验项目一 Web编程环境二、 实验目的第1章 搭建Web编程环境，能正确安装配置java运行环境、WE

2、B服务器和数据库服务器第2章 熟悉WEB编程集成环境MYEclipse.第3章 熟练掌握WEB工程的创建、发布、运行流程。三、 实验内容1. 安装并配置java运行环境JDK和JRE2. 安装Web服务器tomcat, 配置Tomcat服务器3. 安装并配置数据库MySQL.4. 安装MyEclispe，熟悉各项菜单项5. 为MyEclispe集成配置JDK和Tomcat6. 创建、发布、运行一个WEB工程。四、 实验仪器及耗材计算机，JDK，TOMCAT, MySQL, MyEclipse等软件。五、 实验步骤1. 先安装jdk1.6，选择自定义安装，安装到C：JDK2. 配置环境变量，cl

3、ass：.;C:JDKbin , classpath:.;C:JDKlib ，java_home：C:JDK安装tomcat，安装在C: Tomcat 下，配置tomcat_home环境变量，CATALINA_HOME: C: Tomcat，CATALINA_BASE: C: Tomcat，TOMCAT_HOME: C:Tomcat然后修改环境变量中的classpath，把tomat安装目录下的commonlib下的servlet.jar追加到classpath中去，修改后的classpath如下：classpath=.;%JAVA_HOME%libdt.jar;%JAVA_HOME%libt

4、ools.jar;%CATALINA_HOME%commonlibservlet.jar;3. 运行toncat的bin文件夹下的tomcat6.exe。在浏览器内输入http:/localhost:8080，会出现tomcat的管理窗口。4. 暗转SQL2000企业版，选择安装数据库服务器，接下来都选择缺省值，知道服务器配置界面选择使用本地系统账户，进入身份验证模式，选择混合模式。5. 下载安装SDK。6. 安装MyEclispe到C：Eclipse。7. 配置eclipse，在preference中展开java元素，选择install JRE.8. 在tomcat的webapps目录下建立

5、一个firstapp文件子目录，然后使用文本编辑器编辑一下代码：The first web program!;welcome to you9、保存到firstapp目录下面。六、 实验结果一、 浏览器输入：htte:/localhost:8080,出现tomcat管理窗口。二、 在tomcat的manager目录下面选择firstapp，运行html文档，会显示welcome。七、 实验心得对jsp程序的编写流程和工作环境有了大致了解，并学会了如何配置环境，发布基本的web服务的流程。 南昌大学实验报告学生姓名： 学 号： 专业班级：物流101班 实验类型： 验证 综合 设计 创新 实验日期：

6、 实验成绩： 1）实验项目二 HTML和CSS编程技术 2）实验目的熟悉HTML静态网页编程技术，熟悉HTML各种标记，特别是表单标记熟悉CSS编程技术，掌握CSS来格式化网页、掌握CSS盒式模型掌握DIV+CSS布局和设计网页，掌握CSS设计网页的一般流程熟悉Dreamweaver的CSS设计器3）实验内容1. 构思一个新闻发布网站，主题自选，设计好新闻类别2. 制作主页PSD图3. 用DIV+CSS布局主页框架。（如可分成top, mid, foot, 其中mid再分两大块left和main）4. 分别细化设计每一大块。5. 要中间部分的左边或右边要设计一个小登录表单，并用CSS美化。4）

7、实验仪器及耗材计算机，Dreamweaver 8，Photoshop，MyEclipse等软件。5）实验步骤1、打开Dreamweaver 8，使用其DIV层的功能将主页分为top、left、right、三块，top主要来放置网站的logo、标题、登录信息，left来存放新闻网站的分类，right来存放内容。这样设计简单直观，浏览者很方便可以查询到所需新闻。2、用ps编辑一些图片作为网站的素材3、用Dreamweaver的css样式表编辑各个层的样式4、在top的左上角设置一个登录表单，登录后用户可以发布新闻信息。6） 实验结果1、制作PSD图2、使用DIV+CSS布局3、细化每一块4、美化表

8、单部分7）1通过此次试验了解了网站的基本设计，熟悉了HTML静态网页编程技术，熟悉HTML各种标记，特别是表单标记2 熟悉CSS编程技术，掌握CSS来格式化网页3 掌握了一些基本的DIV+CSS布局和设计网页4 熟悉了Dreamweaver的CSS设计器5在这次的实验中我懂得了dreamweaver表单和DIV的基本应用，并且掌握了如何用css美化网页。 南昌大学实验报告学生姓名： 学 号： 专业班级： 物流101班 实验类型： 验证 综合 设计 创新 实验日期： 实验成绩： 1) 实验项目三 JavaScript编程技术2) 实验目的l 熟悉JavaScript语法l 掌握JavaScrip

9、t函数的创建和调用l 熟悉JavaScript对象，特别是浏览器对象，了解DOM模型，知道文档对象的访问方法。l 会用JavaScript来对表单进行验证。3) 实验内容1) 用JavaScript完成对登录表单的验证2) 设计一个新闻发布的页面，并用JavaScript对新闻发布表单进行验证。4) 实验仪器及耗材计算机，Dreamweaver 8，Photoshop，MyEclipse等软件。5) 实验步骤1、function check(Form_Add) if(document.Form_Add.UserName.value=) alert(请输入用户名); document.Form_

10、Add.UserName.focus(); return false;if(document.Form_Add.UserName.value.length12) alert(输入的用户名太长); document.Form_Add.UserName.focus(); return false;if(document.Form_Add.PWS.value.length5) alert(请您输入密码，有效长度范围为：520！); document.Form_Add.PWS.focus(); return false;if(document.Form_Add.ConfirmPassword.valu

11、e.length1) alert(请您再输入验证密码！); document.Form_Add.ConfirmPassword.focus(); return false;if(document.Form_Add.ConfirmPassword.value!=document.Form_Add.PWS.value) alert(确认密码与密码不一致！); document.Form_Add.ConfirmPassword.focus(); return false;Username:用户名不得小于二个字节Password:Rpassword:(只需要在上面的if语句中修改条件，就可以更改登录的

12、条件，可以增加用户名和密码的数据库)2、将此页面保存到tomcatwebapps下的firstapp文件夹中，在tomcat控制窗口运行即可。六、实验结果这是一个注册验证系统，必须输入符合条件的用户名和密码才能登录。1、 表单验证结果2、 文章发布页面验证6) 实验心得熟悉了JavaScript语法，掌握了JavaScript函数的创建和调用，javascript的基本语法和代码，可以用其编写一些基本的jsp页面 南昌大学实验报告学生姓名： 学 号： 专业班级： 实验类型： 验证 综合 设计 创新 实验日期： 实验成绩： 1. 实验项目四 Servlet编程技术2. 实验目的1. 熟悉Serv

13、let技术的创建和运行流程。2. 会在web.xml配置Servlet的URL3. 熟悉请求request和响应response接口4. 熟悉请求转发接口requestDispatcher接口5. 熟悉会话Session接口，掌握基于Session登录权限控制。3. 实验内容完成一个基于Session的登录权限控制模块。要求：a) 主页登录表单提交后转到Servlet进行处理，根据用户类型转到不同的页面。如果在用户名或密码不正确把登录表单包含进来b) 对于某些页面必须登录才能访问，如新闻发布页面。如果没有登录则禁止访问，并重定向到登录页面。4. 实验仪器及耗材计算机， MyEclipse等软件

14、。5. 实验步骤（页面内容自己加）一、 编写index.jsp页面:基于实验一的页面设置，以下是登录表单部分的代码用户名:密码: 保存为index.jsp二、 Servelet A编写：packageapp.user.action; importjava.io.IOException; importjava.io.PrintWriter; importjavax.servlet.ServletException; importjavax.servlet.http.HttpServlet; importjavax.servlet.http.HttpServletRequest; imp

15、ortjavax.servlet.http.HttpServletResponse; importapp.user.service.UserService; import javax.servlet.http.HttpSession;publicclassAextendsHttpServlet privateUserServiceuserService=newUserService(); privateStringuserName; privateStringpassWord; publicvoiddoPost(HttpServletRequestrequest,HttpServletResp

16、onseresponse)throwsServletException,IOException userName=request.getParameter(UserName); passWord=request.getParameter(PassWord); PrintWriterout=response.getWriter(); if(passWord.equals(“1234”)&username.equals(“xufangzheng”) session.setAttribute(“index”,”OK”);response.sendRrdirect(“B.jsp”);/跳转到目标页面B

17、.jspElseResponse.sendRedirect(“index.jsp”);/返回主页Return;若用户名为xufangzheng,密码为1234，则会跳转到B.jsp页面进行处理。B.JSP是一个新闻发布页面三、B.jsp编写所属栏目:作者：内容:四、xml的配置hello UserRegisterAction6. 实验结果在登入表单输入用户名和密码，如果用户名是xufangzheng，密码是1234则跳转到B.jsp页面，否则重新定位到主页。7. 实验心得本次实验我了解了servlet的基本原理和如何运用servlet完成用户的认证，对掌握web技术有了更深一步的认识。 南昌大

18、学实验报告学生姓名： 学 号： 专业班级： 物流101班 实验类型： 验证 综合 设计 创新 实验日期： 实验成绩： 1) 实验项目五 JSP编程技术2) 实验目的6. 熟悉JSP编译指令，动作标记。7. 熟悉JSP的隐含对象8. 正确理解request、session、application三个对象的作用域9. 能正确处理汉字乱码问题10. 能熟练使用JSP技术来编写网页3) 实验内容1. 编写一个文章类，用Myeclipse的工作自动产生getter和settet函数2. 修改前面编写过的管理员的新闻发布页面，改成JSP页面要求如下：1）撰写界面至少包括文件标题，所属栏目、作者、内容几项2

19、）界面用CSS进行美化3）每个输入框均应有name属性。4）权限控制，必须是管理员用户才能访问，跟前面实验的登录权限控制关联起来。 3. 编写一个Servlet来处理新闻发布页面提交的表单要求：1）读取表单各项内容，并把存入一个文章对象中。2）把文章对象绑定在request对象中，并转发到新闻显示页面。3. 编写一个新闻显示页面。 要求： 1) 编写静态页面模板，页面用div+css设计2）设定文章对象已存在request对象中，取出文章对象3）把静态页面的内容改成动态内容，如标题，作者，内容等。4) 实验仪器及耗材计算机，Dreamweaver 8，Photoshop，MyEclipse等软

20、件。5) 实验步骤1、 题意不明确2、 管理员权限控制servlet代码：packageapp.user.action; importjava.io.IOException; importjava.io.PrintWriter; importjavax.servlet.ServletException; importjavax.servlet.http.HttpServlet; importjavax.servlet.http.HttpServletRequest; importjavax.servlet.http.HttpServletResponse; importapp.user.ser

21、vice.UserService; import javax.servlet.http.HttpSession;publicclassAextendsHttpServlet privateUserServiceuserService=newUserService(); privateStringuserName; privateStringpassWord; publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException userName=requ

22、est.getParameter(UserName); passWord=request.getParameter(PassWord); PrintWriterout=response.getWriter(); if(passWord.equals(“1234”)&username.equals(“xufangzheng”) session.setAttribute(“index”,”OK”);response.sendRrdirect(“news.jsp”);/跳转到目标页面news.jspElseResponse.sendRedirect(“index.jsp”);/返回主页Return;

23、若用户名为xufangzheng,密码为1234，则会跳转到news.jsp页面进行处理。news.JSP是一个新闻发布页面3、 修改新闻发布页面，news.jsp代码如下 News 所属栏目:题目：input type=”text” name=”timu”作者：内容:4、 编写新闻处理servlet ，命名为chuli，目的是在新闻DIV中将提交的新闻和作者内容写到DIV中import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servle

24、t.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import admin.manageBean.NewsAddBean;public class chuli extends HttpServlet public chulit() super(); public void destroy() super.destroy(); / Just puts destroy string in log / Put your code h

25、ere public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException response.setContentType(text/html); PrintWriter out = response.getWriter(); out .println(); out.println(); out.println( A Servlet); out.println( ); out.print( This is ); out.print(thi

26、s.getClass(); out.println(, using the GET method); out.println( ); out.println(); out.flush(); out.close(); public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException String timu = request.getParameter(timu); String neirong = request.getParamete

27、r(neirong); String zuozhe= request.getParameter(zuozhe); NewsAddBean nb = new NewsAddBean(); nb.settimu(timu); nb.setneirong(neirong); nb.setzuozhe(azuozhe); if(nb.newsAdd()=1) request.getRequestDispatcher(newsPut.jsp).forward(request, response); /将内容提交至新闻显示页面else request.getRequestDispatcher(addErr

28、or.jsp).forward(request, response); /将内容提交至错误页面 public void init() throws ServletException 5、 编写新闻显示newsPut.jsp页面：新闻显示页面%Out.println(“新闻显示”);Request.seCharacterEncoding(“GBK”);Rnumeration enumParams=request.getParameterNames();While(inumParams.hasMoreElements()String paraName=enumParams.nextElement(

29、).toString();String paraValue=request.getParameter(paraName);%:/通过循环一次输出request中的各个对象6) 实验结果首先输入用户名：luyang 密码：1234可以登入新闻发布页面，否则返回主页。在进入新闻发布页面中选择提交，若有部分信息不全，则显示错误页若各类信息都有了，则在新闻显示页面上会显示所提交的信息。7) 实验心得本次实验让我掌握了如何运用jsp的各种内建对象处理表当，同时巩固了servlet的具体应用，已经可以编写简单的新闻发布系统，并且熟悉了管理员控制权限的基本原理。 南昌大学实验报告学生姓名： 学 号： 专业班

30、级： 物流101班 实验类型： 验证 综合 设计 创新 实验日期： 实验成绩： 一、实验项目六 JavaBean编程技术 二、实验目的1. 熟悉JavaBean的规范2. 会编写JavaBean; 会在JSP和Servlet中创建和使用JavaBean对象3. 掌握JSP的、的使用4. 掌握JSP中表单和表单Bean的映射5. 掌握Servlet中表单和表单Bean的映射6. 会编写封装业绩逻辑的JavaBean7. 会使用上传下载组件jspSmartUpload外部组件三、实验内容一、 修改前面的封装新闻（文章）的JavaBean，使其符合JavaBean规范二、 修改前面的新闻发表Serl

31、vet，用来完成新闻发布表单的处理，要求利用映射机制把新闻表单映射到新闻的JavaBean中，以便后继把这个JavaBean写入数据库。三、 编写一个封闭新闻管理的业务Bean. 这里只需定义接口即可。四、 参考教材，编写一个上传下载模块（可选）五、 参考教材，实现登录动态验证（可选）四、实验仪器及耗材计算机，Dreamweaver 8，Photoshop，MyEclipse等软件。五、实验步骤1、 JavaBean newsBean 的编写,通过该Bean可以显示提交的新闻信息：Package demo.bean;Import java.io;Public class newsBeanPub

32、lic newsBean()Private String timu;Private String neirong;Private String zuozhe;Public void settimu(String timu)This.timu=timu;Public void setneirong(String neirog)This.neirong=neirong;Public void setzuozhe(String zuozhe)This.zuozhe=zuozhe;Public String gettimu()Return timu;Public String getneirong()

33、Return neirong;Public String getzuozhe()Return zuozhe;2、 修改新闻处理的servlet,将其处理的结果映射到newsBean中import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServ

34、letResponse;import public class chuli extends HttpServlet public chulit() super(); public void destroy() super.destroy(); / Just puts destroy string in log / Put your code here public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException response.s

35、etContentType(text/html); PrintWriter out = response.getWriter(); out .println(); out.println(); out.println( A Servlet); out.println( ); out.print( This is ); out.print(this.getClass(); out.println(, using the GET method); out.println( ); out.println(); out.flush(); out.close(); public void doPost(

36、HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException String timu = request.getParameter(timu); String neirong = request.getParameter(neirong); String zuozhe= request.getParameter(zuozhe); NewsAddBean nb = new NewsAddBean(); nb.settimu(timu); nb.setneirong(neirong); nb.setzuozhe(azuozhe); if(nb.newsAdd()=1) session.setAttribute(“timu”,timu); session.setAttribute(“neirong”,neirong);session.setAttribute(“zuozhe”,zuozhe);response.sendRedirect(“xiansih.jsp”);)/将对象保持