本人刚刚接触JavaWeb,是菜鸡一枚。不久之前自己学做了一个无框架的Javaweb项目,记录在这里。下面是整个项目的程序。
先来看下成果图
这里用到了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小项目就完成啦,做的过程中虽然遇到了许许多多的问题,不过在解决问题时,也是灰常开心滴。
作为一个新手,难免会做的不好,各位大佬轻喷 >_<。