简单java web制作思路

经过俩天的摸索，和学姐的帮助下终于做出来一个简单地网页版的学生信息添加的系统。接下来说一下答题的思路：

首先我个人习惯先做网页界面，创建3个jsp文件分别是添加界面，成功界面，失败界面。这件看起来更加分明一点。首先添加界面是这样的：

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<form  method="post" action="textservlet" onsubmit="return check()">

<div >

<label for="gs1">登录账号:</label>

<input type="text" id="gs1" placeholder="请输入用户名"  name="gs1">

</div>

<div >

<label for="gs2">登录密码:</label>

<input type="password" id="gs2" placeholder="请输入密码" class="input-text input-long" name="gs2">

</div>

<div >

<label for="gs3">姓   别:</label>

<select name="p">

  <option value ="nan">男</option>

  <option value ="nv">女</option>

</select>

</div>

<div >

<label for="gs4"  >姓   名:</label>

<input type="text" id="gs4" placeholder="请输入姓名" class="input-text input-long" name="gs4">

</div>

<div >

<label for="gs5"  >学   号:</label>

<input type="text" id="gs5" placeholder="请输入学号" class="input-text input-long" name="gs5">

</div>

<div >

<label for="gs6"  >电子邮件:</label>

<input type="text" id="gs6" placeholder="请输入邮件" class="input-text input-long" name="gs6">

</div>

<div >

<label for="gs7"  >所在学院:</label>

<input type="text" id="gs7" placeholder="请输入所在学院" class="input-text input-long" name="gs7">

</div>

<div >

<label for="gs8"  >所在系:</label>

<input type="text" id="gs8" placeholder="请输入所在系" class="input-text input-long" name="gs8">

</div>

<div >

<label for="gs9"  >所在班级:</label>

<input type="text" id="gs9" placeholder="请输入所在班级" class="input-text input-long" name="gs9">

</div>

<div >

<label for="gs10">入学年份(届):</label>

<select name="p2">

  <option value ="2014">2014</option>

  <option value ="2015">2015</option>

   <option value ="2016">2016</option>

  <option value ="2017">2017</option>

   <option value ="2018">2018</option>

  <option value ="2019">2019</option>

</select>

</div>

<div >

<label for="gs11"  >生源地:</label>

<input type="text" id="gs11"  name="gs11">

</div>

<div >

<label for="gs12"  >备注:</label>

<input type="text" id="gs12"  name="gs12">

</div>

<div>

<input type="submit" id="xuan" name="xuan" value="添加">

</div>

</form>

<!-- 输入字段验证部分 -->

<script type="text/javascript">

function check(){

	var username=document.getElementById("gs1");

	var password=document.getElementById("gs2");

	var number=document.getElementById("gs5");

	var mail=document.getElementById("gs6");

	var sReg = /[_a-zA-Z\d\-\.]+@[_a-zA-Z\d\-]+(\.[_a-zA-Z\d\-]+)+$/; //正则表达式

	//判断用户名位数

	if((username.value).length<6||(username.value).length>12){

		alert('账号请输入6到12位英文字符或数字，以英文字母开头');

		gs1.focus();

		return false;

	}

	//判断用户名是否包含汉字

	if(/.*[\u4e00-\u9fa5]+.*$/.test(username.value)){

		alert('账号用户名不能包含汉字');

		gs1.focus();

		return false;

	}

	//判断用户名是否以英文字母开头

	if(!isNaN(username.value[0])){

		alert('登录账号请以英文字母开头');

		gs1.focus();

		return false;

	}

	//判断密码位数

	if((password.value).length!=8){

		alert('密码应为8位英文或数字');

		gs2.focus();

		return false;

	}

	//判断学号是否以2018开头

     if(number.value<"20180000"|| number.value>"20189999")

				{

				 alert(" 学号由2018开头的八位组成");

	             gs5.focus();

	             return false;

				}

	//验证手机号是否合法

	//判断邮箱格式是否正确

	if(! sReg.test(mail.value)){

		alert('邮箱格式错误');

		gs6.focus();

		return false;

	}

}

</script>

<!-- 验证结束 -->

</body>

</html>

这里面用JavaScript写了邮箱，账号等等的格式判断。

添加成功界面如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<h1 style="text-align:center;">添加成功</h1>

<h1 style="text-align:center;"><a href="text.jsp">返回继续添加信息</a></h1>

</body>

</ht

添加失败界面如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<h1 style="text-align:center;">添加失败</h1>

<h1 style="text-align:center;"><a href="text.jsp">返回继续添加信息</a></h1>

</body>

</html>

接下来开始封装数据和数据库建立连接，首先创建一个Bean包，来封装数据用代码如下:

package text.jsp.bean;

public class UserBean {

	private String id;

	private String password;

	private String sex;

	private String name;

	private String number;

	private String mail;

	private String yuan;

	private String xi;

	private String classes;

	private String time;

	private String place;

	public String getId() {

		return id;

	}

	public void setId(String id) {

		this.id = id;

	}

	public String getPassword() {

		return password;

	}

	public void setPassword(String password) {

		this.password = password;

	}

	public String getSex() {

		return sex;

	}

	public void setSex(String sex) {

		this.sex = sex;

	}

	public String getName() {

		return name;

	}

	public void setName(String name) {

		this.name = name;

	}

	public String getNumber() {

		return number;

	}

	public void setNumber(String number) {

		this.number = number;

	}

	public String getMail() {

		return mail;

	}

	public void setMail(String mail) {

		this.mail = mail;

	}

	public String getYuan() {

		return yuan;

	}

	public void setYuan(String yuan) {

		this.yuan = yuan;

	}

	public String getXi() {

		return xi;

	}

	public void setXi(String xi) {

		this.xi = xi;

	}

	public String getClasses() {

		return classes;

	}

	public void setClasses(String classes) {

		this.classes = classes;

	}

	public String getTime() {

		return time;

	}

	public void setTime(String time) {

		this.time = time;

	}

	public String getPlace() {

		return place;

	}

	public void setPlace(String place) {

		this.place = place;

	}

	public UserBean(String id,String password,String sex,String name,String number,String mail,String yuan,String xi,String classes,String time,String place){

		this.id=id;

		this.password=password;

		this.sex=sex;

		this.name=name;

		this.number=number;

		this.mail=mail;

		this.yuan=yuan;

		this.xi=xi;

		this.classes=classes;

		this.time=time;

		this.place=place;

	}

}

然后创建一个util包主要是连接数据库以及判断数据库是否连接成功，若不成功则在控制台输出报错信息，这个代码一般都是直接复制的只需要改一下数据库的名字。代码如下:

package text.jsp.util;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

public class DBUtil

{

	private static Connection con;

    private static Statement stm;

    private static ResultSet rs;

	private static String classname="com.mysql.cj.jdbc.Driver";

	private static String url="jdbc:mysql://localhost:3306/gs?useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT&&useSSL=false&&allowPublicKeyRetrieval=true";

	public  Connection getCon(){

    	try{

    		Class.forName(classname);

    		System.out.println("驱动加载成功");

    	}

    	catch(ClassNotFoundException e){

    		e.printStackTrace();

    	}

    	try{

    	    con=DriverManager.getConnection(url,"root","123456");

    	    System.out.println("数据库连接成功");

    	}

    	catch(Exception e){

    	    e.printStackTrace(System.err);

    		con=null;

    	}

    	return con;

    }

	public static void close(Statement stm, Connection conn) {

		if(stm!=null) {

			try {

				stm.close();

			} catch (SQLException e) {

				e.printStackTrace();

			}

		}

		if(conn!=null) {

			try {

				conn.close();

			} catch (SQLException e) {

				e.printStackTrace();

			}

		}

	}

	public static void close(ResultSet rs, Statement stm, Connection con) {

		if(rs!=null) {

			try {

				rs.close();

			} catch (SQLException e) {

				e.printStackTrace();

			}

		}

		if(stm!=null) {

			try {

				stm.close();

			} catch (SQLException e) {

				e.printStackTrace();

			}

		}

		if(con!=null) {

			try {

				con.close();

			} catch (SQLException e) {

				e.printStackTrace();

			}

		}

	}

}

然后创建一个Dao包，这个主要是将数据传到数据库的相应位置，写代码的时候一定要变量一一对应，否则会报错。代码如下:

package text.jsp.dao;

import java.sql.Connection;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

import text.jsp.bean.UserBean;

import text.jsp.util.DBUtil;

public class UserDao {

	public boolean add(UserBean user) {

		String sql = "insert into text1021(id,password,sex,name,number,mail,yuan,xi,classes,time,place) values('" + user.getId() + "','" + user.getPassword() + "','" + user.getSex()  + "','" + user.getName()  + "','" + user.getNumber()  + "','" + user.getMail() + "','" + user.getYuan() +"','"+user.getXi() + "','" +user.getClasses() + "','" +user.getTime() + "','" + user.getPlace()+"')";

		DBUtil  db=new DBUtil();

		Connection conn =  db.getCon();//   ÷

		Statement state = null;

		boolean f = false;

		int a = 0 ;

		try {

			state = conn.createStatement();

			a = state.executeUpdate(sql);

		} catch (Exception e) {

			e.printStackTrace();

		} finally {

			DBUtil.close(state, conn);

		}

		if (a > 0) {

			f = true;

		}

		return f;

	}		

}

最后就要比较重要的servlet包，这个主要作用就是从jsp里面接受请求并作出判断并返回成功或者失败界面

代码如下：

package text.jsp.servlet;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import text.jsp.dao.UserDao;

import text.jsp.bean.UserBean;

/**

 * Servlet implementation class textservlet

 */

@WebServlet("/textservlet")

public class textservlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#HttpServlet()

     */

    public textservlet() {

        super();

        // TODO Auto-generated constructor stub

    }

    UserDao userDao=new UserDao();

	/**

	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

	 */

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		// TODO Auto-generated method stub

		request.setCharacterEncoding("UTF-8");

		response.setCharacterEncoding("UTF-8");

		response.setContentType("textml;charset=UTF-8");

		response.setHeader("content-type", "textml;charset=UTF-8");

		 String id=request.getParameter("gs1");

		 String password=request.getParameter("gs2");

		 String sex=request.getParameter("p");

		 String name=request.getParameter("gs4");

		 String number=request.getParameter("gs5");

		 String mail=request.getParameter("gs6");

		 String yuan=request.getParameter("gs7");

		 String xi=request.getParameter("gs8");

		 String classes=request.getParameter("gs9");

		 String time=request.getParameter("p2");

		 String place=request.getParameter("gs11");

		 UserBean userbean=new UserBean( id, password, sex, name, number, mail, yuan, xi, classes, time, place);

		 if(userDao.add(userbean)) {

				request.getRequestDispatcher("success.jsp").forward(request,response);

			}

			else {

				request.getRequestDispatcher("fail.jsp").forward(request,response);

			}

	}

	/**

	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

	 */

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		// TODO Auto-generated method stub

		doGet(request, response);

	}

}

这样一个简单地web项目就做好了，主要难点就是数据库的连接，并将数据传到数据库里面。至于界面的设计应该是相对简单的。

巴特西

简单java web制作思路

最新文章

热门文章