南昌大学web实验汇总.doc

1、实 验 报 告实验课程： WEB编程设计 学生姓名： 学 号： 专业班级： 2015年 6月 目录实验一 Web编程环境2实验二 HTML和CSS编程技术10实验三 JavaScript编程技术14实验四 Servlet编程技术18实验五 JSP编程技术24实验六 JavaBean编程技术29实验七 JDBC数据库编程技术35实验八 基于MVC模式的新闻发布平台41 南昌大学实验报告学生姓名： xxx 学 号： xxx 专业班级： xxx 实验类型： 验证 综合 设计 创新 实验日期： 2015-4-29 实验成绩： 一、 实验项目 Web编程环境二、 实验目的1. 搭建Web编程环境，能正确

2、安装配置java运行环境、WEB服务器和数据库服务器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等软件。五、 实验步骤（一） 安装并配置java运行JDK和JRE1、 下载该

3、软件，运行安装软件，安装目录这里选为D:Program FilesJava， 其它步骤采用默认值。安装完成，2、 设置JAVA环境变量，步骤如下：右击“计算机”，选择“属性”菜单，在弹出的“系统属性”对话框中选择“高级系统设置”选项卡，然后单击“环境变量”按钮，弹出“环境变量”对话框框。如图1-23、首先，点击“新建”，变量名为JAVA_HOME，变量值为java的安装路径，即“D:Program FilesJava Javajdk1.5.0_12”。如图1-3所示4、 其次，在系统变量里面找到path(没有就新建)，然后点编辑，则变量值为直接写上“D:Program FilesJava jd

4、k1.5.0_12bin”。5、 最后，再点“新建”，然后在变量名上写classpath,该变量的含义是为java加载类(class或lib)路径，只有类在classpath中，java命令才能识别。其值为“.;%JAVA_HOME%lib6、验证是否配置成功（二）安装Web服务器tomcat, 配置Tomcat服务器 1、下载apache-tomcat 6.0。双击“apache-tomcat-6.0.29.exe”，出现安装向导，单击Next按钮，出现“授权”界面，接受授权协议后，选择“Nomal”安装模式，2、单击Next按钮，默认安装于D：Program FilesApache Sof

5、iware FoundationTomcat 6.0，单击Next按钮，默认HTTP服务端口号8080、登录用户名为“admin”、密码为空，然后选择默认Java的JRE安装目录。3、单击Install按钮，开始Tomcat的安装。安装完成后，在“开始”“程序”菜单中会出现安装程序创建的Apache Tomcat 7.0 Tomcat7菜单组， 选择“Apache Tomcat 7.0 Tomcat7”菜单中的 Monitor Tomcat命令，在任务栏中会出现Apache Tomcat系统托盘，右击托盘，在弹出的快捷菜单中选择Start Service命令，即可启动Tomcat 7.0服务器

6、。4、Tomcat正常启动后会在系统栏加载图标。(如果启动失败，请检查端口是否被占用。如果已经有程序在使用8080端口，解决办法是停止正在运行的程序或者更改TOMCAT的使用端口。)5、打开IE浏览器，在浏览器地址栏中输入“http：/localhost:8080”并回车，显示如图（三）安装并配置数据库MySQL1、下载MYSQL 5 5.0.67.zip，然后解压为Setup.exe，双击Setup.exe文件，开始mysql5.0的安装，如图3-1所示2、默认是Typical，点击Next开始下一步安装。点击Install进行安装，如图3-2所示。3、安装结束，选择现在开始配置MySql服

7、务器（以后可进行配置修改），点击Finish继续。选择Detailed Configuration，点Next继续。如图33所示4、全部选择默认设置，直到图3-4所示界面。这一步是设置mysql服务端口号，默认端口号是3306，采用默认值。5、点击下一步进入的默认字符集设置界面, 如图3-5，原来的标准字符集是Latin1，不支持汉字，更改为默认字符集为utf-8或BGK等能支持汉字的字符集。6、点击下一步，进入超级用户密码设置界面如图3-6，对mysql拥有全部的权限，有个复选框是选择是否允许远程机器用root用户连接到你的MySql服务器上面，如果有这个需求，勾选。输入两次密码后（本书程序

8、数据库访问密码为root），点击下一步，完成安装。（四）安装MyEclispe，熟悉各项菜单项（五）为MyEclispe集成配置JDK和Tomcat1、为MyEclipse配置JRE启动MyEclipse 9.0后，选择主菜单中的【Windows】【Preferences】（首选项）命令，弹出如图5-1所示的首选项窗口。在左侧树形控件中选择【Java】【Installed JREs】，在窗口的右侧编辑区选择用户计算机上的JRE安装目录，配置好JDK环境。如右侧编辑区没有列出JRE，则可按Add按钮进行添加，在新对话框中根据提示选择JRE的安装目录即可。2、为MyEclipse集成Tomcat

9、7.0在Eclipse的集成开发环境中选择【Windows】【Preferces】命令，在左边的菜单按【MyEclipse】【Servers】【Tomcat】【Tomcat7.x】，找到Tomcat 7.x ，设置为“Enable”, 然后选择好Tomcat 的基本路径，如图5-2所示。（六） 创建、发布、运行一个WEB工程。1、从MyEclipse菜单【File】【New】【Web Project】来新建一个Web Project项目，如图6-1所示。2、点击“Finish”，如图6-2所示。3、下面建立一个jsp文件，右击“Webroot”，在快捷菜单选【New】【JSP】创建一个jsp文

10、件，出现jsp文件对话框，如图6-3所示。4、在下面的Servers面板中或在上面的工具栏里，单击部署命令按钮，出现工程部署对话框，如图6-4所示。单击“add”按钮，添加一个发布项。5、选择Tomcat 7.x，点击“完成”可以看出，将工程发布到Tomcat 的安装目录上去了，如图6-5所示。6、添加完毕，就显示工程的发布信息。如果工程中java文件内容变化了，则需要重新发布，发布前需要将web服务器停止。重新发布单击“redeploy”按钮，如图6-6所示。7、在上图点击“Browse”可以转到Tomcat文件夹查看发布的工程，如图6-7所示。8、下面启动Tomcat。从工具栏里的选择向下

11、箭头，选择Tomcat 9启动。或在下面的Servers面板中的选择按钮，选择Tomcat 9启动。 如图6-8所示。9、在Eclipse的Console窗口中会显示启动信息，成功启动以后，通过浏览器访问刚才创建的jsp文件，地址和结果如图6-9所示，注意区分大小写。六、 实验结果 新建系统变量 编辑系统变量Path 编辑系统变量ClassPath 环境变量配置成功 选择安装方式 Tomcat的基本配置 启动Tomcat 自动运行设置 Tomcat的欢迎界面 选择安装类型 准备SQL安装 MySql配置向导 设置MySql服务的端口号 设置默认字符集 设置用户名和密码为MyEclipse配置J

12、RE 为MyEclipse集成Tomcat 新建Web工程 新建Web工程结果图新建JSP页面对话框 添加发布的工程 选择Web服务器 部署管理界面 发布到Tomcat中的目录结构 启动Tomcat服务器 浏览网页七、 实验心得刚开始觉得特别简单就是下载安装而已，结果却是各种出错，连原因都找不到，自己不够细心，好多细节和注意的没留心，也有对这些软件应用的部首系。觉得做什么都应该先虔诚虚心的学习再动手。八、 参考资料 Java WEB编程技术郭路生编 南昌大学实验报告二学生姓名： xxx 学 号： xxx 专业班级：xxx 实验类型： 验证 综合 设计 创新 实验日期： 实验成绩： 一、 实验项

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

14、、 实验仪器及耗材计算机，Dreamweaver 8，Photoshop，MyEclipse等软件。五、 实验步骤1， 1. 选择好自己制作新闻发布网站的主题，及其新闻类别2， 将构思好的导航条用Photoshop制作好，3， 在Dreamweaver 8中通过css布局把页面整体框架做好。4， 在左边框架中设计登录表单，5， 完善网页各个部分，运行观看效果。六、 实验结果网页源代码：web2 首页 人口计生 公共卫生 时评 健康饮食 中医中药 医学前沿 最新资讯 李斌：护士要与患者守望相助共抗疾病 吃碘盐致甲状腺癌高发证据不足 专家解读|跳出“螺蛳壳”做道场 叶酸可用于结直肠癌一级预防 我国

15、哮喘患病率10年翻一番 逾九成患者未 国家卫生计生委发布4项推荐性卫生行业标 中国政府医疗防疫队挺进地震重灾区 重特大疾病医疗救助工作意见出台 城乡医疗救助制度年 评论|公立医院改革：肯定探索 鼓励再探索 时评|禁烟草广告 只靠广告法还不够 业界评说|“不是不管，是换种方式管” 国务院发布中医药健康服务发展规划（20152020年） 用户登录 用户名： 密码： copyrightCopyright(C) 1999-2015 健康报社 版权所有 违者必究 制作效果图：七、 实验心得理想的设计比较好，可是能力有限做不出来，css布局是关键和难点，党在更改布局时经常出现页面出界等问题，还要一个比较重

16、要的体会是：不是WEB太难，而是自己做的少，学的太少，如果从基础学起做起，也是会有收获的 南昌大学实验报告学生姓名： xxx 学 号： xxx 专业班级：xxx 实验类型： 验证 综合 设计 创新 实验日期： 实验成绩： 一、 实验项目 JavaScript编程技术二、 实验目的1. 熟悉JavaScript语法2. 掌握JavaScript函数的创建和调用3. 熟悉JavaScript对象，特别是浏览器对象，了解DOM模型，知道文档对象的访问方法。4. 会用JavaScript来对表单进行验证。三、 实验内容1. 用JavaScript完成对登录表单的验证2. 设计一个新闻发布的页面，并用J

17、avaScript对新闻发布表单进行验证。四、 实验仪器及耗材计算机，Dreamweaver 8，Photoshop，MyEclipse等软件。五、 实验步骤1， 在实验二做好的网页的基础上，在原有表单的基础上进行表单验证的制作。通过用JavaScript来编写实习表单验证，通过引入外部.js文件来进行数据验证。2， 在完成表单验证之后，通过编写新闻发布的HTML文档，并实现与浏览器的交互，完成新闻发布页面的实现。六、 实验结果一利用onsubmit事件进行表单验证引用外部的.js文件：function checkform()if(document.userlogin.username.val

18、ue=) alert (提示:nn请输入用户名！); document.userlogin.username.focus(); return false; if (document.userlogin.username.value.length6) alert (提示:nn用户名6位); document.userlogin.username.focus(); return false; if (document.userlogin.pwd.value=) alert (提示:nn请输入密码！); document.userlogin.pwd.foucs(); return false; if

19、 (document.userlogin.pwd1.value=) alert (提示:nn请输入用户名！); document.userlogin.pwd1.focus(); return false; 二：新闻发布：1新闻发布代码：新闻发布 新闻发布页面 新闻名称： 新闻作者： 新闻内容：          2引用的checkarticle.js文件：function checkarticle()if(document.publish.newsname.value=) alert (提示:nn请输入新闻名称！); doc

20、ument.publish.newsname.focus(); return false; if (document.publish.author.value=) alert (提示:nn请输入作者名称！); document.publish.author.focus(); return false; if (document.publish.textarea.value=) alert (提示:nn请输入新闻内容！); document.publish.textarea.focus(); return false; 七、 实验心得实验的要求其实都是书本学习的应用，通过自己的体会实例才能真正学

21、会以及以后的熟练的应用。每次实验错误还是会有的，改正的过程就是学习的过程，本次实验主要考察浏览器与文档的交互及新学的.js的引入应用，这些都比较巧妙，但实现的功能效果却特别好，javascripe实现的是一种实时的，动态的交互的表达能力。对于学习编程的我们特别有用。 南昌大学实验报告学生姓名： xxx 学 号： xxx 专业班级：xxx 实验类型： 验证 综合 设计 创新 实验日期： 实验成绩： 一、 实验项目 Servlet编程技术二、 实验目的1. 熟悉Servlet技术的创建和运行流程。2. 会在web.xml配置Servlet的URL3. 熟悉请求request和响应response接

22、口4. 熟悉请求转发接口requestDispatcher接口5. 熟悉会话Session接口，掌握基于Session登录权限控制。三、 实验内容完成一个基于Session的登录权限控制模块。要求：a) 主页登录表单提交后转到Servlet进行处理，根据用户类型转到不同的页面。如果在用户名或密码不正确把登录表单包含进来b) 对于某些页面必须登录才能访问，如新闻发布页面。如果没有登录则禁止访问，并重定向到登录页面。四、 实验仪器及耗材计算机， MyEclipse等软件。五、 实验步骤1， 安装并配置MyEclipse在电脑上，熟悉MyEclipse环境与基本操作后，新建一个名为shiyan的we

23、b工程，新建一个名为Portal Servlet的servlet,发布工程并启动。2， 在web-inf下编写loginForm.html3， 在包中编写欢迎界面的代码WellcomeServlet.java4， 实现登录权限编写登录表单login.html.5， 创建另一个工程，并编写登录验证的servlet,文件名为LoginServlet.java6， 编写管理员和普通用户的servlet,文件名为AdminServlet.java和NormalServlet.java。相关代码如下：1Portal Servletpackage com;import java.io.IOExceptio

24、n;import java.io.PrintWriter;import javax.servlet.RequestDispatcher;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class PortalServlet extends HttpServlet public void doGet(

25、HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException response.setContentType(text/html;charset=GBK);PrintWriter out = response.getWriter();out.println( 登录页面);String name = request.getParameter(username);String psw = request.getParameter(password);if(web.equal

26、s(name) & 123456.equals(psw)out.print(这里是PortalServlet!); out.print(登录成功，下面把请求转发给wellComeServlet!);RequestDispatcher rd =request.getRequestDispatcher(WellcomeServlet);rd.forward(request,response);else/经常写成一句out.print(这里是PortalServlet！没有登录或用户名密码错误！);out.print(下面通过include()把登录表单loginForm.html导入);reque

27、st.getRequestDispatcher(/loginForm.html).include(request, response);out.println( );out.flush();out.close(); 2 WellcomeServlet.javapackage com;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.Ht

28、tpServletRequest;import javax.servlet.http.HttpServletResponse;public class WellcomeServlet extends HttpServlet /* * The doGet method of the servlet. * * This method is called when a form has its tag value method equals to get. * * param request the request send by the client to the server * param r

29、esponse the response send by the server to the client * throws ServletException if an error occurred * throws IOException if an error occurred */public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException response.setContentType(text/html;charset=G

30、BK);PrintWriter out = response.getWriter();out.println( wellcome); out.print(这里是WellcomeSerlvet!); out.print(欢迎 + request.getParameter(username)+ 的到来！);out.println( );out.flush();out.close();3loginForm.html 登录表单 用户名: 密 码：    4另一工程sy的Loginservlet.javapackage com;import java.io.IOException;i

31、mport java.io.PrintWriter;import javax.servlet.RequestDispatcher;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;public class LoginServlet exte

32、nds HttpServlet public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException response.setContentType(text/html;charset=GBK);PrintWriter out = response.getWriter();String name = request.getParameter(username);String psw = request.getParameter(passwo

33、rd);if(admin.equals(name) & 888888.equals(psw)/管理员用户HttpSession session = request.getSession();/把登录信息（用户名和用户权限等级）存储在Session中。session.setAttribute(username,name);session.setAttribute(grade, admin);/重定向到管理员页面 response.sendRedirect(AdminServlet);else if(normal.equals(name) & 123456.equals(psw)/普通用户HttpSession sess