本人刚刚接触JavaWeb,是菜鸡一枚。不久之前自己学做了一个无框架的Javaweb项目,记录在这里。下面是整个项目的程序。

github java 小项目 java web小项目实例_javaweb


先来看下成果图

github java 小项目 java web小项目实例_xml_02


github java 小项目 java web小项目实例_xml_03


github java 小项目 java web小项目实例_javaweb_04


这里用到了bootstrap的样式,网址是:http://www.bootcss.com。我觉着还挺好看的。

接下来开始步入正题,首先:建数据库表,用到的是oracle数据库。表格可以说是相当简单了,有木有。

create table STUDENT
(
  stu_id   INTEGER not null,
  stu_name VARCHAR2(25),
  stu_sex  VARCHAR2(25)
)

然后我们先来做登录界面,首先建一个login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
<title>欢迎登陆</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<%String xiaoxi;
if((String)request.getAttribute("xiaoxi")==null){
	xiaoxi="";
}
else{
	xiaoxi=(String)request.getAttribute("xiaoxi");
}
%>
<div class="container" style="margin-top:100px;width:500px;height:500px">
<form action="LoginSeverlet" method="post" style="margin-top:100px">
<div class="input-group">
  <span class="input-group-addon" style="width:100px">用户名</span>
  <input id="ipt1" type="text" class="form-control" name="Username" >
</div>
<div class="input-group" style="margin-top:50px">
  <span class="input-group-addon" style="width:100px">密码</span>
  <input id="ipt2" type="password" class="form-control" name="Password">
</div>
<button type="submit" class="btn btn-primary" style="margin-top:50px" onclick="checkform()">登陆</button>
<p style="color:red"><%=xiaoxi%></p>
</form>
</div>
</body>
<script type="text/javascript">    
function checkform(){ 
    if(document.getElementById('ipt1').value.length==0){    
        alert('用户名不能为空!');
        document.getElementById('ipt1').focus();
        return false;
    }
    if(document.getElementById('ipt2').value.length==0){    
        alert('密码不能为空!');
        document.getElementById('ipt2').focus();
        return false;
    }
}
</script>
</html>

然后再来写一个LoginSeverlet来处理表单提交的数据:

package com.neusoft;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class LoginSeverlet extends HttpServlet {

	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(req, resp);
	}

	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		String userName=req.getParameter("Username");
		String passWord=req.getParameter("Password");
		String username="admin";
		String password="1";
		if(username.equals(userName)&&password.equals(passWord)){
			req.getRequestDispatcher("user_center.jsp").forward(req, resp);
		}
		else{
			req.setAttribute("xiaoxi", "用户名或者密码错误");
			req.getRequestDispatcher("login.jsp").forward(req, resp);		
		}
	}
}

再通过web.xml文件将他们关联起来:

<servlet>
		<servlet-name>LoginSeverlet</servlet-name>
		<servlet-class>com.neusoft.LoginSeverlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>LoginSeverlet</servlet-name>
		<url-pattern>/LoginSeverlet</url-pattern>
	</servlet-mapping>

如果登录成功用户就会进入user_center.jsp界面中,这里我只设置了用户名为admin,密码为1。如果失败页面会提示用户名和密码输入错误。
接下来我们建一个实体类Student,也是灰常灰常滴简单呐。

package entity;

public class Student {
	private String stuId;
	private String stuName;
	private String stuSex;
	public String getStuId() {
		return stuId;
	}
	public void setStuId(String stuId) {
		this.stuId = stuId;
	}
	public String getStuName() {
		return stuName;
	}
	public void setStuName(String stuName) {
		this.stuName = stuName;
	}
	public String getStuSex() {
		return stuSex;
	}
	public void setStuSex(String stuSex) {
		this.stuSex = stuSex;
	}
}

然后建一个数据库连接类OperateOracle,用于连接数据库和写了增删查的方法,相信大家都会吧。

package DB;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;


import entity.Student;

public class OperateOracle {
	Connection connection = null;
	ResultSet rs = null;
	PreparedStatement pstm = null;
	/**
     * 获取Connection对象
     * 
     * @return
     */
	public Connection getConnection(){		
		try{
			Class.forName("oracle.jdbc.driver.OracleDriver");
			connection = DriverManager.getConnection("jdbc:oracle:" + "thin:@127.0.0.1:1521:XE","wang","12345");
			 System.out.println("成功连接数据库");
		}
		catch(ClassNotFoundException e){
			 throw new RuntimeException("class not find !", e);
		}
		catch(SQLException e){
			throw new RuntimeException("get connection error!", e);
		}
		return connection;
	}
	/**
     * 释放资源
     */
	 public void ReleaseResource() {
	        if (rs != null) {
	            try {
	                rs.close();
	            } catch (SQLException e) {
	                e.printStackTrace();
	            }
	        }
	        if (pstm != null) {
	            try {
	                pstm.close();
	            } catch (SQLException e) {
	                e.printStackTrace();
	            }
	        }
	        if (connection != null) {
	            try {
	                connection.close();
	            } catch (SQLException e) {
	                e.printStackTrace();
	            }
	        }
	    }
	 /**
	     * 从数据库中查询数据
	     */
	    public List SelectData() {
	        connection = getConnection();
	        String sql = "select * from student";
	        List<Student> stu = new ArrayList<Student>();
	        try {
	            pstm = connection.prepareStatement(sql);
	            rs = pstm.executeQuery();
	            Student student;
 	            while (rs.next()) {
 	            	student = new Student();
	                student.setStuId(rs.getString("stu_id"));
	                student.setStuName(rs.getString("stu_name"));
	                student.setStuSex(rs.getString("stu_sex"));
	                stu.add(student);
	            }
	           
	        } catch (SQLException e) {
	            e.printStackTrace();
	        } finally {
	            ReleaseResource();
	        }
	        return stu;
	    }
	    /**
	     * 从数据库中删除数据
	     */
	    public void deleteData(String name) {
	        connection = getConnection();
	        String sql = "delete from student where stu_name='"+name+"'";
	        try {
	            pstm = connection.prepareStatement(sql);
	           pstm.executeUpdate();
	           
	        } catch (SQLException e) {
	            e.printStackTrace();
	        } finally {
	            ReleaseResource();
	        }
	    }
	    /**
	     * 向数据库中插入数据
	     */
	    public void addData(int number,String name,String sex) {
	        connection = getConnection();
	        String sql = "insert into student values('"+number+"','"+name+"','"+sex+"')";
	        try {
	            pstm = connection.prepareStatement(sql);
	           pstm.executeUpdate();
	           
	        } catch (SQLException e) {
	            e.printStackTrace();
	        } finally {
	            ReleaseResource();
	        }
	    }	   
}

然后建一个user_center.jsp界面。

<%@ page contentType="text/html; charset=UTF-8" import="entity.Student" import="java.util.List" import="java.util.ArrayList"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page pageEncoding="UTF-8"%>
<html>
<head>
<mesta http-equiv="Content-Type" content="text/html;charset="utf-8">
<title>标题</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>
<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/Test/SelectSeverlet",true);
	xmlhttp.send();
}
</script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<%List<Student> stu = new ArrayList<Student>();
stu = (List) request.getAttribute("stu");%>
<div style="margin-top:10px">
<button class="btn btn-primary" type="button"  onclick="loadXMLDoc()">查询</button>
<a href="add.jsp" style="text-decoration:none;color:white"><button class="btn btn-primary" type="button" >新增</button></a>
</div>
<hr/>
<div id="myDiv"></div>
</body>
</html>

页面中只有两个按钮,查询和新增,然后通过ajax局部刷新将查询结果显示在按钮下方的id="myDiv"的Div中。这里将调用的servlet写在js代码中,也非常好理解吧,看不懂这个方法的请根据链接自行学习:ajax局部刷新。
然后我们来写查询的servlet,建一个SelectSeverlet,通过这个servlet,将查询结果转发到aabb.jsp(这里myDiv处显示的就是aabb.jsp的内容)。代码如图:

package com.neusoft;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import DB.OperateOracle;
import entity.Student;

public class SelectSeverlet extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		OperateOracle oo=new OperateOracle();
    	List<Student> stu =oo.SelectData();
    	req.setAttribute("stu",stu);
    	req.getRequestDispatcher("aabb.jsp").forward(req, resp);
	}
}

同上,在web.xml中将它们关联起来:

<servlet>
		<servlet-name>SelectSeverlet</servlet-name>
		<servlet-class>com.neusoft.SelectSeverlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>SelectSeverlet</servlet-name>
		<url-pattern>/SelectSeverlet</url-pattern>
	</servlet-mapping>

然后建一个aabb.jsp用来显示查询结果:

<%@ page contentType="text/html; charset=UTF-8" import="entity.Student"
	import="java.util.List" import="java.util.ArrayList"%>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
	<%@page pageEncoding="UTF-8"%>
<html>
<head>
<title>标题</title>
<link rel="stylesheet" href="lib/bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<%
	List<Student> stu = new ArrayList<Student>();
	stu = (List) request.getAttribute("stu");
%>
<table class="table table-bordered" border="1" cellspacing="0">
	<thead>
		<tr>
			<td style="width:20%;text-align:center">学号</td>
			<td style="width:20%;text-align:center">姓名</td>
			<td style="width:20%;text-align:center">性别</td>
			<td style="width:20%;text-align:center">操作</td>
		</tr>
	</thead>
	<tbody>
	<c:forEach var="s" items="${stu}">
	   <tr id=>
			<td style="width:20%;text-align:center">${s.stuId}</td>
			<td style="width:20%;text-align:center">${s.stuName}</td>
			<td style="width:20%;text-align:center">${s.stuSex}</td>
			<td style="width:20%;text-align:center">
			<button class="btn btn-primary"><a href="DeleteServlet?name=${s.stuName}" style="color:white">删除</a></button>
			</td>
		</tr>
	</c:forEach>	
	</tbody>
</table>
</body>
</html>

这里用到了<c:foreach>标签来遍历数据库查询的结果,需要在jsp中写上
<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core”%>。并将tomcat文件下webapps\examples\WEB-INF\lib文件夹下的taglibs-standard-impl-1.2.5.jar和taglibs-standard-spec-1.2.5.jar两个jar包拷贝到WEB-INF下的lib文件夹中方才好用。到此为止查询的功能就完成啦。
接下来是删除,如上代码,这里的删除是通过名字删除的,调用的是DeleteServlet,参数为名字。然后写一个DeleteSeverlet,这里需要加一个方法来处理汉字乱码,代码如下

package com.neusoft;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import DB.OperateOracle;
import entity.Student;

public class deleteSeverlet extends HttpServlet {
	public static String ISOToInnerCode(String str) { 
		if (str == null) 
		return null; 
		try { 
		str = (new String(str.getBytes("ISO-8859-1"), "UTF-8")).trim(); 
		} catch (Exception ex) { 
		} 
		return str; 
		}
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doPost(req,resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		OperateOracle oo=new OperateOracle();
		String name=ISOToInnerCode(req.getParameter("name"));
    	oo.deleteData(name);
    	req.getRequestDispatcher("success.jsp").forward(req, resp);
	}
}

老规矩,配置web.xml

<servlet>
		<servlet-name>DeleteServlet</servlet-name>
		<servlet-class>com.neusoft.deleteSeverlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>DeleteServlet</servlet-name>
		<url-pattern>/DeleteServlet</url-pattern>
	</servlet-mapping>

这里删除成功会跳转到success.jsp:

<%@ page contentType="text/html; charset=UTF-8"%>
<html>
  <head>
	<title>标题</title>
	<link rel="stylesheet" href="lib/bootstrap-3.3.7-dist/css/bootstrap.css">
  </head>
  <body >
  <div>
  <p>操作成功</p>
  <a href="user_center.jsp" style="color:white;text-decoration:none"><button class="btn btn-primary" type="button" >返回</button></a>
  </div>
  </body>
</html>

最后一个功能为新增,新建一个AddSeverlet:

package com.neusoft;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import DB.OperateOracle;
import entity.Student;
public class AddSeverlet extends HttpServlet {
	public static String ISOToInnerCode(String str) { 
		if (str == null) 
		return null; 
		try { 
		str = (new String(str.getBytes("ISO-8859-1"), "UTF-8")).trim(); 
		} catch (Exception ex) { 
		} 
		return str; 
		}
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doPost(req,resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {

		String name = ISOToInnerCode(req.getParameter("Name")); 
		String sex = ISOToInnerCode(req.getParameter("Sex"));
    	int number = Integer.parseInt(req.getParameter("Number"));
    	OperateOracle oo=new OperateOracle();
    	oo.addData(number, name, sex);
    	req.getRequestDispatcher("success.jsp").forward(req, resp);
	}
}

操作成功同样会跳转到成功界面,这里也需要处理一下汉字乱码问题。然后和上面一样配置一下web.xml文件。我的第一个javaweb小项目就完成啦,做的过程中虽然遇到了许许多多的问题,不过在解决问题时,也是灰常开心滴。

作为一个新手,难免会做的不好,各位大佬轻喷 >_<。