在上一周我简单地在notepad++上实现了一个小小的界面，但是最后的web工程项目最终要在配置好tomcat和mysql的eclipse上实现，所以这周我决定使用配置好的eclipse来实现一个简单地网页。
说起来容易，但是感觉做起来并不简单。因为还没入手开始做的时候，我甚至都不知道要将代码写在什么文件里，并且对于在新建的.jsp文件中可以嵌入java代码也不清楚。但是功夫不负有心人，在查阅了大量的资料后，终于有了门路。
如下是我实验的代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <meta charset="utf-8" /> <div style="background-color:#87CEEB;1277px;height:50px;position:relative;"> <img src="image2.jpg" style="50px;height:50px;float:left;"> <a style="vertical-align:middle;line-height:50px;text-decoration:none;" href="music张韶涵 - 亲爱的那不是爱情.mp3">Play Sound</a> <form style="300px;height:25px;vertical-align:middle;line-height:50px;float:right;"> 目的地 <input type="text" > <a href="">登陆</a> <a href="">|注册</a> </form> </div> <h1 id="hh" style="position:absolute;"> Travelling and Enjoyment! </h1> <script type="text/javascript" language="javascript"> var hh=document.getElementById("hh"); setInterval(ff,1500); var l=0; function ff(){ l+=10; hh.style.right+=(l+"px");}; </script> <div align="center";style="1200;height:600;clear:both;position:relative;"> <div style="float:left;900px;height:600px;"> <img id="img1"; style="900px;height:600px;" src="image1.jpg"> <script language="javascript"> var n=1; function cc(){ if(n=4} n=1; document.all.img1.src="n+"jpg""; n+=1; }; setInteval(cc,1000); </script> </div> <div style="float:right;300px;height:600px;"> <div style="float:right;300px;height:200px;"> <ul type="square" > <a style="text-decoration:none" href=""><li style="vertical-align:middle;line-height:200px;float:left;";>旅游圣地</li></a> </ul> </div> <div style="float:right;300px;height:200px;"> <ul type="square" > <a style="text-decoration:none"href=""> <li style="vertical-align:middle;line-height:200px;float:left;";>旅游攻略</li></a> </ul> </div> <div style="float:right;300px;height:200px;"> <ul type="square" > <a style="text-decoration:none" href=""><li style="vertical-align:middle;line-height:200px;float:left;";>大众点评</li></a> </ul> </div> </div> </div> <div style="clear:both"> <b>当前时间为:<%=new java.util.Date().toLocaleString()%></b> </div> </body> </html>
运行结果：
在实现的过程中还遇到了一个小困难，就是编写的代码在eclipse上运行时，可以显示图片，但是在网页上却显示不了图片，通过查阅资料，了解到要将图片保存到WebContent下，而不可以使用绝对路径显示图片。
在实现了这个小网页后，我决定试试连接mysql：
如下为连接数据库代码：
package test; import java.sql.*; public class Main { public static void main(String args[]) { try { Class.forName("com.mysql.jdbc.Driver"); //加载MYSQL JDBC驱动程序 //Class.forName("org.gjt.mm.mysql.Driver"); System.out.println("Success loading Mysql Driver!"); } catch (Exception e) { System.out.print("Error loading Mysql Driver!"); e.printStackTrace(); } try { Connection connect = DriverManager.getConnection( "jdbc:mysql://localhost:3306/bookdb","root","88888888"); //连接URL为 jdbc:mysql//服务器地址/数据库名 ，后面的2个参数分别是登陆用户名和密码 System.out.println("Success connect Mysql server!"); Statement stmt = connect.createStatement(); ResultSet rs = stmt.executeQuery("select * from books"); //user 为你表的名称 while (rs.next()) { System.out.println(rs.getString("name")); } } catch (Exception e) { System.out.print("get data error!"); e.printStackTrace(); } } }
运行结果：
经过这次小小的实践，感觉要学习的东西还有好多，为了完成项目，我还要多多努力。