After two days with the help of exploration, and sister finally made out a system by simply adding a Web version of student information. Then talk about the idea of the answer:
First, I used to do first personal web interface, create three jsp files are added interface, the interface success, failure interface. That looks a little more clearly. First, add the interface is as follows:
<%@ 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 =" Please enter the e-mail "class =" the INPUT-text the INPUT-Long "name =" GS6 ">
<label for =" GS7 "> the colleges: </ label>
<div>
</ div>
<input type = "text" id = "gs7" placeholder = " Please college enter where" class = "the INPUT-text the INPUT-Long" name = "GS7">
</div>
<div >
<label for = "the GS8 modular gateway"> where the line: </ label >
<iNPUT type = "text" ID = "GS8" placeholder = "Please line input where" class = "iNPUT-text iNPUT-Long" name = "GS8">
</ div>
<div>
<label for = "GS9 "> where the class: </ label>
<the iNPUT of the type =" text "the above mentioned id =" GS9 "placeholder =" Please enter the class where "class =" the iNPUT-text the iNPUT-Long "name =" GS9 ">
</ div>
< div>
<label for = "GS10"> Start year (session): </ label>
<the SELECT name = "P2">
<the 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");
if ((username.value) .length <6
// if the username digit
var mail=document.getElementById("gs6");
var sReg = /[_a-zA-Z\d\-\.]+@[_a-zA-Z\d\-]+(\.[_a-zA-Z\d\-]+)+$/ ; // regular expression
alert ( 'enter account number from 6 to 12 English characters or numbers, letters to the beginning');
gs1.focus ();
return to false;
}
// determines whether the user name contains characters
if (/. .. * [\ u4e00- \ u9fa5] + * $ / Test (username.value)) {
Alert ( 'account user name can not contain the characters');
gs1.focus ();
return to false;
}
// determines whether the user name beginning with a letter
(! isNaN (username.value [0])) {IF
Alert ( 'login account Please start with letters');
gs1.focus ();
return to false;
}
// Analyzing the number of passwords
if (( ! password.value) .length =. 8) {
Alert ( 'password should be eight alphanumeric');
gs2.focus ();
return to false;
}
// determines whether student number beginning with 2018
IF (number.value < "20.18 million" || number.value> "20,189,999")
{
Alert ( "student number of eight bits at the beginning of the 2018 composition");
gs5.focus ();
return to false;
}
// Check Mobile legality
// determines mailbox format is correct
iF {(sReg.test (mail.value)!)
Alert ( 'E-mail format error');
gs6.focus ();
return to false;
}
}
</ Script>
! <- verify end ->
</ body>
</ HTML>
This is written in JavaScript inside a mailbox, account number, etc. format judgment.
Added successfully interface is as follows:
<%@ 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
Add failed interface is as follows:
<%@ 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>
Then start the package data and the database to establish a connection, first create a package Bean, to encapsulate data code is as follows:
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;
}
}
Then create a util package is connected to the main database and determine whether the database connection is successful, if not successful then the error message in the console output, this is a direct copy of the code is generally only required a name change to the database. code show as below:
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("Driver loaded successfully ");
}
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 then create a package, this is mainly the corresponding location data to the database and write the code must be variable correspondence, otherwise it will error. code show as below:
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;
}
}
Finally, it must more important servlet package, the main role is to accept requests from jsp inside and make judgments and returns a success or failure interface
code show as below:
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);
}
}
Such a simple web project on the well, the main difficulty is the database connection, and data to the database inside. As for the interface design it should be relatively simple.