WEB编程实验报告南昌大学

1、 1实实 验验 报报 告告实验课程：实验课程： java web 编程技术编程技术 学生姓名：学生姓名： 学学 号：号： 专业班级：专业班级： 物流物流 101 班班 20132013 年年 0606 月月 1212 日日 2目录目录实验一实验一 web 编程环境编程环境.3实验二实验二 html 和和 css 编程技术编程技术.7实验三实验三 javascript 编程技术编程技术.10实验四实验四 servlet 编程技术编程技术.13实验五实验五 jsp 编程技术编程技术.16实验六实验六 javabean 编程技术编程技术.21实验七实验七 基于基于 mvc 模式构建系统模式构建系统.

2、25 南南昌昌大大学学实实验验报报告告 3学生姓名： 学 号： 专业班级： 物流 101 班 实验类型： 验证 综合 设计 创新 实验日期： 实验成绩： 一、一、实验项目一实验项目一 web 编程环境编程环境二、二、实验目的实验目的第 1 章搭建 web 编程环境，能正确安装配置 java 运行环境、web 服务器和数据库服务器第 2 章熟悉 web 编程集成环境 myeclipse.第 3 章熟练掌握 web 工程的创建、发布、运行流程。三、三、实验内容实验内容1.安装并配置 java 运行环境 jdk 和 jre2.安装 web 服务器 tomcat, 配置 tomcat 服务器3.安装并

3、配置数据库 mysql.4.安装 myeclispe，熟悉各项菜单项5.为 myeclispe 集成配置 jdk 和 tomcat6.创建、发布、运行一个 web 工程。四、四、实验仪器及耗材实验仪器及耗材计算机，jdk，tomcat, mysql, myeclipse 等软件。五、五、实验步骤实验步骤1.先安装 jdk1.6，选择自定义安装，安装到 c：jdk2.配置环境变量，class：.;c:jdkbin , classpath:.;c:jdklib ，java_home：c:jdk安装 tomcat，安装在 c: tomcat 下，配置 tomcat_home 环境变量，catalin

4、a_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%libtools.jar;%catalina_home%commonlibservlet.jar; 43.运行 toncat 的 bin 文件夹下的 tomcat6.exe。在浏览器内输入htt

5、p:/localhost:8080，会出现 tomcat 的管理窗口。 54.暗转 sql2000 企业版，选择安装数据库服务器，接下来都选择缺省值，知道服务器配置界面选择使用本地系统账户，进入身份验证模式，选择混合模式。5.下载安装 sdk。6.安装 myeclispe 到 c： eclipse。为myeclipse集成tomcat 5.5 【windows】【preferces】命令在左边的菜单按【myeclipse】【servers】【tomcat】【tomcat5.x】-enable 7.配置 eclipse，在 preference 中展开 java 元素，选择 install jr

6、e.8.在 tomcat 的 webapps 目录下建立一个 firstapp 文件子目录，然后使用文本编辑器编辑一下代码： 6the first web program!;welcome to you9、保存到 firstapp 目录下面。六、六、实验结果实验结果一、浏览器输入：htte:/localhost:8080,出现 tomcat 管理窗口。二、在 tomcat 的 manager 目录下面选择 firstapp，运行 html 文档，会显示 welcome。七、七、实验心得实验心得对 jsp 程序的编写流程和工作环境有了大致了解，并学会了如何配置环境，发布基本的web 服务的流程。

7、 7 南南昌昌大大学学实实验验报报告告学生姓名： 学 号： 专业班级：物流 101 班 实验类型： 验证 综合 设计 创新 实验日期： 实验成绩： 1）实验项目二）实验项目二 html 和和 css 编程技术编程技术 2）实验目的）实验目的熟悉 html 静态网页编程技术，熟悉 html 各种标记，特别是表单标记熟悉 css 编程技术，掌握 css 来格式化网页、掌握 css 盒式模型掌握 div+css 布局和设计网页，掌握 css 设计网页的一般流程熟悉 dreamweaver 的 css 设计器3）实验内容）实验内容1.构思一个新闻发布网站，主题自选，设计好新闻类别2.制作主页 psd

8、图3.用 div+css 布局主页框架。 （如可分成 top, mid, foot, 其中 mid 再分两大块 left和 main）4.分别细化设计每一大块。5.要中间部分的左边或右边要设计一个小登录表单，并用 css 美化。4）实验仪器及耗材）实验仪器及耗材计算机，dreamweaver 8，photoshop，myeclipse 等软件。5）实验步骤）实验步骤1、打开 dreamweaver 8，使用其 div 层的功能将主页分为 top、left、right、三块，top 主要来放置网站的 logo、标题、登录信息，left 来存放新闻网站的分类，right 来存放内容。这样设计简单直

9、观，浏览者很方便可以查询到所需新闻。2、用 ps 编辑一些图片作为网站的素材3、用 dreamweaver 的 css 样式表编辑各个层的样式4、在 top 的左上角设置一个登录表单，登录后用户可以发布新闻信息。6）实验结果实验结果1、制作 psd 图 82、使用 div+css 布局 93、细化每一块4、美化表单部分7）1 通过此次试验了解了网站的基本设计，熟悉了 html 静态网页编程技术，熟悉 html 各种标记，特别是表单标记2 熟悉 css 编程技术，掌握 css 来格式化网页3 掌握了一些基本的 div+css 布局和设计网页4 熟悉了 dreamweaver 的 css 设计器5

10、 在这次的实验中我懂得了 dreamweaver 表单和 div 的基本应用，并且掌握了如何用css 美化网页。 10 南昌大学实验报告南昌大学实验报告学生姓名： 学 号： 专业班级： 物流 101 班 实验类型： 验证 综合 设计 创新 实验日期： 实验成绩： 1) 实验项目三实验项目三 javascript 编程技术编程技术2) 实验目的实验目的熟悉 javascript 语法掌握 javascript 函数的创建和调用熟悉 javascript 对象，特别是浏览器对象，了解 dom 模型，知道文档对象的访问方法。会用 javascript 来对表单进行验证。3) 实验内容实验内容1)用

11、javascript 完成对登录表单的验证2)设计一个新闻发布的页面，并用 javascript 对新闻发布表单进行验证。4) 实验仪器及耗材实验仪器及耗材计算机，dreamweaver 8，photoshop，myeclipse 等软件。5) 实验步骤实验步骤1、function check(form_add) if(document.form_add.username.value=) alert(请输入用户名); document.form_add.username.focus(); return false; if(document.form_add.username.value.len

12、gth12) 11 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.value.length1) alert(请您再输入验证密码！); document.form_add.confirmpassword.focus

13、(); 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 语句中修改条件，就可以更改登录的条件，可以增加用户名和密码的数据库)2、将此页面保存到 tomcatwebapps 下的 firstapp 文件夹中，在 tomc

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

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

16、yeclipse 等软件。5. 实验步骤（页面内容自己加）实验步骤（页面内容自己加）一、编写 index.jsp 页面:基于实验一的页面设置，以下是登录表单部分的代码用户名:密码: 保存为 index.jsp 14二、servelet a 编写：package app.user.action; import java.io.ioexception; import java.io.printwriter; import javax.servlet.servletexception; import javax.servlet.http.httpservlet; import javax.

17、servlet.http.httpservletrequest; import javax.servlet.http.httpservletresponse; import app.user.service.userservice; import javax.servlet.http.httpsession;public class a extends httpservlet private userservice userservice=new userservice(); private string username; private string password; public vo

18、id dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception username=request.getparameter(username); password=request.getparameter(password); printwriter out=response.getwriter(); if(password.equals(“1234”)&username.equals(“xufangzheng”) session.setattrib

19、ute(“index”,”ok”);response.sendrrdirect(“b.jsp”);/跳转到目标页面 b.jspelseresponse.sendredirect(“index.jsp”);/返回主页return; 若用户名为 xufangzheng,密码为 1234，则会跳转到 b.jsp 页面进行处理。b.jsp 是一个新闻发布页面 15三、b.jsp 编写所属栏目:作者：内容:四、xml 的配置hello userregisteraction6. 实验结果实验结果在登入表单输入用户名和密码，如果用户名是 xufangzheng，密码是 1234 则跳转到 b.jsp页面，否

20、则重新定位到主页。7. 实验心得实验心得本次实验我了解了 servlet 的基本原理和如何运用 servlet 完成用户的认证，对掌握 web 技术有了更深一步的认识。 16 南南昌昌大大学学实实验验报报告告学生姓名： 学 号： 专业班级： 物流 101 班 实验类型： 验证 综合 设计 创新 实验日期： 实验成绩： 1)实验项目五实验项目五 jsp 编程技术编程技术2)实验目的实验目的6.熟悉 jsp 编译指令，动作标记。7.熟悉 jsp 的隐含对象8.正确理解 request、session、application 三个对象的作用域9.能正确处理汉字乱码问题10. 能熟练使用 jsp 技术

21、来编写网页3)实验内容实验内容1.编写一个文章类，用 myeclipse 的工作自动产生 getter 和 settet 函数2.修改前面编写过的管理员的新闻发布页面，改成 jsp 页面要求如下：1）撰写界面至少包括文件标题，所属栏目、作者、内容几项2）界面用 css 进行美化3）每个输入框均应有 name 属性。4）权限控制，必须是管理员用户才能访问，跟前面实验的登录权限控制关联起）权限控制，必须是管理员用户才能访问，跟前面实验的登录权限控制关联起来。来。 3.编写一个 servlet 来处理新闻发布页面提交的表单要求：1）读取表单各项内容，并把存入一个文章对象中。2）把文章对象绑定在 re

22、quest 对象中，并转发到新闻显示页面。3. 编写一个新闻显示页面。 要求： 1) 编写静态页面模板，页面用 div+css 设计2）设定文章对象已存在 request 对象中，取出文章对象3）把静态页面的内容改成动态内容，如标题，作者，内容等。4) 实验仪器及耗材实验仪器及耗材计算机，dreamweaver 8，photoshop，myeclipse 等软件。5) 实验步骤实验步骤 171、 题意不明确2、 管理员权限控制 servlet 代码：package app.user.action; import java.io.ioexception; import java.io.print

23、writer; import javax.servlet.servletexception; import javax.servlet.http.httpservlet; import javax.servlet.http.httpservletrequest; import javax.servlet.http.httpservletresponse; import app.user.service.userservice; import javax.servlet.http.httpsession;public class a extends httpservlet private use

24、rservice userservice=new userservice(); private string username; private string password; public void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception username=request.getparameter(username); password=request.getparameter(password); printwriter ou

25、t=response.getwriter(); if(password.equals(“1234”)&username.equals(“xufangzheng”) session.setattribute(“index”,”ok”);response.sendrrdirect(“news.jsp”);/跳转到目标页面 news.jspelseresponse.sendredirect(“index.jsp”);/返回主页return; 18若用户名为 xufangzheng,密码为 1234，则会跳转到 news.jsp 页面进行处理。news.jsp 是一个新闻发布页面3、 修改新闻发布页面

26、，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.servlet.http.httpservlet;import javax.servlet.http.httpservletrequest;im

27、port 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 19 / put your code here public void doget(httpservletrequest request, httpservletre

28、sponse 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(this.getclass(); out.println(, using the get method); out.println(

29、 ); out.println(); out.flush(); out.close(); public void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception string timu = request.getparameter(timu); string neirong = request.getparameter(neirong); string zuozhe= request.getparameter(zuozhe); newsad

30、dbean 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(adderror.jsp).forward(request, response); /将内容提交至错误页面 public void ini

31、t() throws servletexception 20 5、 编写新闻显示 newsput.jsp 页面：新闻显示页面%out.println(“新闻显示”);request.secharacterencoding(“gbk”);rnumeration enumparams=request.getparameternames();while(inumparams.hasmoreelements()string paraname=enumparams.nextelement().tostring();string paravalue=request.getparameter(paranam

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

33、期： 实验成绩： 一、实验项目六一、实验项目六 javabean 编程技术编程技术 二、实验目的二、实验目的1.熟悉 javabean 的规范2.会编写 javabean; 会在 jsp 和 servlet 中创建和使用 javabean 对象3.掌握 jsp 的、的使用4.掌握 jsp 中表单和表单 bean 的映射5.掌握 servlet 中表单和表单 bean 的映射6.会编写封装业绩逻辑的 javabean7.会使用上传下载组件 jspsmartupload 外部组件三、实验内容三、实验内容一、修改前面的封装新闻（文章）的 javabean，使其符合 javabean 规范二、修改前面

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

35、va.io;public class newsbeanpublic newsbean()private string timu;private string neirong;private string zuozhe; 22public 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()retur

36、n timu;public string getneirong()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.httpservletreques

37、t;import javax.servlet.http.httpservletresponse;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 serv

38、letexception, ioexception 23 response.setcontenttype(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.fl

39、ush(); out.close(); public void dopost(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 newsaddbea

40、n(); 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”);)/将对象保持到 session 中，通过 session 映射到 javabeanelse request.getrequestdispatcher(adderror.jsp).forward(request, r