一、总言
暑假做了招新网站,主要就是报名,数据通过表单进入数据库,然后从前端提取数据库信息,并进行相关操作,下面我就具体说说相关实现。
二、实现
一、前端
一开始做的前端采用的是bootstrap框架,主要用栅格系统完成响应式的设计。设计一些js效果,比如滚动监听改变导航栏透明度,背景的雨滴特效,点击特效。表单验证用到了正则,和一个算数验证插件。开发工具为sublime。下面我简单的介绍一些js效果。
首先是雨水背景,先创建一滴雨水的各个属性,然后for循环不断生成,每次在同一水平线不同位置随机生成。期间也有参考他人代码。下面为雨水js代码。
<script>
var c=document.getElementById("c");
var ctx=c.getContext("2d");
c.width=window.innerWidth;
c.height=window.innerHeight;
// c.height = 1160;
// c.height=$(window).height();
// ctx.fillRect(0,0,100,100);
// a,b,c,d分别代表x方向偏移,y方向偏移,宽,高
var string1 = "|";
string1.split("");
var fontsize=20;
columns=c.width/fontsize;
var drop = [];
for(var x=0;x<columns;x++)
{
drop[x]=0;
}
function drap(){
// ctx.fillStyle="rgba(0,0,0,0.07)";
// ctx.fillStyle="rgba(255,251,240,0.07)";
ctx.fillStyle="rgba(255,255,255,1)";
ctx.fillRect(0,0,c.width,c.height);
// ctx.fillStyle="#0F0";
ctx.fillStyle="#A52A2A";
ctx.font=fontsize+"px arial";
for(var i=0;i<drop.length;i++){
var text1=string1[Math.floor(Math.random()*string1.length)];
ctx.fillText(text1,i*fontsize,drop[i]*fontsize);
drop[i]++;
if(drop[i]*fontsize>c.height&&Math.random()>0.9){//90%的几率掉落
drop[i]=0;
}
}
}
setInterval(drap,25);
</script>
然后是滚动监听,这个比较简单,通过函数获取距离即可,然后获取导航栏的id改变样式。
<script>
function _scroll(){
var scrollTop =$(window).scrollTop();
// var widhe = $(window).height();
if( scrollTop < 10 ){
// if(scrollTop<widhe){
$('.navbar').css('opacity',1);
// $('.navbar').css('background','#F7F7F7');
}else{
// $('.navbar').css('background','#fff');
$('.navbar').css('opacity',0.5);
}
}
$(window).on('scroll',function() {
_scroll()
});
</script>
然后介绍一个简单的表单正则验证的js。
写个焦点函数,获取表单的输入值,然后进行验证,如果是对的则不会发生任何事情,否则会出现提示文本信息。
function checkNameFocus(){
function $(id){
return document.getElementById(id);
}
var userNameId=$("username");
var namePrompt=$("un");
var reg = /^[\u4e00-\u9fa5]{2,11}$/;
if (reg.test(userNameId.value) != true) {
namePrompt.innerHTML="名字必须为2-11个汉字!";
flag1 = 0;
}
else{
flag1 = 1;
namePrompt.innerHTML="";
return;
}
}
前端的一些js就介绍到这里,然后前端的网页实现是bootstrap框架的栅格系统,有兴趣的可以自己去查一查,我就放一点代码作为参考。
<div class="col-sm-12">
<div class="col-sm-2"> </div>
<div class="col-xs-8 col-sm-4 bod col-sm-offset-0 col-xs-offset-2">
<div class="web">
<h3 style="text-align: center;font-weight: 600;">WEB组</h3>
<p class="lead">WEB组对每一届新成员的基本学习规划是:网站基本知识 -> HTML、CSS+DIV布局 -> 数据库 -> PHP编程基础 -> Javascript -> PHP Web2.0网站开发,同时涉及到前端和后端两个方向,经常有网站项目。</p>
</div>
</div>
<div class="col-xs-8 col-sm-4 bod col-sm-offset-0 col-xs-offset-2">
<div class="pic">
<img class="img-responsive" src="images/web-logo.jpg" alt="web">
</div>
</div>
</div>
<div class="col-sm-2"> </div>
前端就简单介绍到这里,下面介绍一下后台的实现。
二、后台
关于后台的实现,我用的是eclipse,首先要明白javaweb的一些概念,下面是一些概念的介绍。
DAO —— Data Access Object数据访问对象(接口)
DAOImpl 上面的实现类
entity —— 数据的对象
Service(不是Server)——就是中间层、逻辑层(接口)
ServiceImpl就是上面的实现类
util就是工具类的包
Servlet——JAVA WEB小应用。
连接数据库一般将自己的数据库信息配置好properties,包括用户名密码,用到的数据库的名字等信息。数据库我用的是mysql,建立数据库比较简单,配置好环境,学习了基本语法就可以了。
package sql;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.util.Properties;
//连接数据库
public class consql {
private static String driver;
private static String dburl;
private static String user;
private static String password;
private static final consql factory = new consql();
private Connection conn;
static{
Properties prop = new Properties();
try {
InputStream in = consql.class.getClassLoader()
.getResourceAsStream("zxmysql.properties");
prop.load(in);
} catch (Exception e) {
System.out.println("========配置文件读取错误=======");
}
driver = prop.getProperty("driver");
dburl = prop.getProperty("dburl");
user = prop.getProperty("user");
password = prop.getProperty("password");
}
private consql () {
}
public static consql getInstance() {
return factory;
}
public Connection makeConnection() {
try {
Class.forName(driver);
conn = DriverManager.getConnection(dburl,user,password);
} catch (Exception e) {
e.printStackTrace();
}
return conn;
}
}
连接完数据库可以自己写java类测试一下是否连接成功。
然后通过get、set方法实现一个类,编写entity层,这个比较简单。
然后编写dao接口和utils层。
先写dao接口然后写util,下面是dao接口代码。
package userdao;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;
import entersql.Getstudent;
import entersql.User;
public interface StudentDao {
public void save(Connection conn,Getstudent user) throws SQLException ;
public void update(Connection conn,Getstudent user) throws SQLException;
public void delete(Connection conn,Getstudent user) throws SQLException;
public ResultSet get(Connection conn, Getstudent user) throws SQLException;
public List<Getstudent> getex(Connection conn) throws SQLException;
public ResultSet getlogin(Connection conn , User user) throws SQLException;
// ResultSet get(Getstudent user) throws SQLException;
}
util相对于比较简单,根据自己所需要的功能编写mysql语句,实现数据库的增删改查等功能即可,类似于下面这样。
public void delete(Connection conn, Getstudent user) throws SQLException {
java.sql.PreparedStatement ps = conn.prepareStatement("DELETE FROM student_tbl WHERE student_xh = ?");
ps.setString(1, user.getXH());
ps.execute();
}
然后是servlet的编写,通过前端传回的数据,让数据进入数据库等,这里用到了很多,我就只拿删除数据库中的数据为例子。
package servlet;
import java.io.IOException;
import java.sql.Connection;
import java.sql.SQLException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import entersql.Getstudent;
import sql.consql;
import sqlOpr.sqlcz;
import userdao.StudentDao;
public class DeleServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public DeleServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
//response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html");
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String student_xh = request.getParameter("student_xh");
RequestDispatcher rd = null;
String forward = null;
Getstudent user = new Getstudent();
user.setXH(student_xh);
StudentDao userDao = new sqlcz();
Connection conn = consql.getInstance().makeConnection();
try {
userDao.delete(conn, user);
} catch (SQLException e) {
e.printStackTrace();
}
forward = "/WEB-INF/JieMian.jsp";
rd = request.getRequestDispatcher(forward);
rd.forward(request, response);
}
}
在前端form表单中写好action,调用servlet即可,写了servlet之后web-xml一定要配置相应的信息。以以上为例。
<servlet>
<servlet-name>BmServlet</servlet-name>
<servlet-class>servlet.BmServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>BmServlet</servlet-name>
<url-pattern>/bmServlet</url-pattern>
</servlet-mapping>
然后就是一些其他功能,查重什么的,实现也不是很难,我就不过介绍,主要还用到了ajax,用于学号查重,十分方便。
var flag5 = false; //用户名验证
$(function(){
var $xuehao = $("#xuehao"); //学号
$xuehao.blur(function(){ //$xuehao.blur(function(){
var xuehao = $xuehao.val();
//console.log("hello")
$.ajax({
//url : "./CheckXuehao",
url : "./CheckXuehao",
type : "post",
datatype : "json",
data : {
"xuehao" : xuehao
},
success : function(msg){
if (msg == 0) {
flag5 = false;
//var namePrompt=$("#xh");
//namePrompt.innerHTML="学号被占用";
$("#xh23").html("该学号已报名!");
} else {
flag5 = true;
//var namePrompt=$("#xh");
//namePrompt.innerHTML="";
$("#xh23").html("");
}
}
});
});
});
三、管理页面
这里做的比较简单,前端用的就是bootstrap的表单,然后连接数据库,用next()函数扫描数据库,只要有数据,用表单打印一行即可。删除修改也是通过servlet实现,上面介绍的servlet实际上就是我删除所用到的servlet。下载数据表格,是通过poi实现,先导入所需要的jar包,然后编写servlet,配置好相对应的web-xml信息,这里借鉴了其他人的代码。
package servlet;
import java.io.IOException;
import java.io.OutputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.poi.hssf.usermodel.HSSFCell;
import org.apache.poi.hssf.usermodel.HSSFCellStyle;
import org.apache.poi.hssf.usermodel.HSSFFont;
import org.apache.poi.hssf.usermodel.HSSFRow;
import org.apache.poi.hssf.usermodel.HSSFSheet;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.hssf.util.HSSFColor;
import org.apache.poi.ss.usermodel.HorizontalAlignment;
import entersql.Getstudent;
import sql.consql;
import sqlOpr.sqlcz;
import userdao.StudentDao;
public class POI extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = -8642375343202664090L;
@SuppressWarnings("deprecation")
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
ArrayList fieldname = getFieldName();
String fname = "student " + getTimeStamp();
OutputStream os = resp.getOutputStream();
Connection conn = consql.getInstance().makeConnection();
StudentDao studentDao = new sqlcz();
List<Getstudent> list = null;
try {
list = studentDao.getex(conn);
} catch (SQLException e) {
// TODO 自动生成的 catch 块
e.printStackTrace();
}
resp.reset();
resp.setHeader("Content-disposition", "attachment;filename = " + fname + ".xls");
resp.setContentType("application/msexcel");
HSSFWorkbook wb = new HSSFWorkbook();
HSSFSheet sheet = wb.createSheet();
HSSFRow row = sheet.createRow((short) 0);
for(int j = 0;j<fieldname.size();j++){
HSSFCell cell = row.createCell((short)j);
cell.setCellType(HSSFCell.CELL_TYPE_STRING);
sheet.setColumnWidth((short)j,(short)6000);
HSSFCellStyle cellStyle = wb.createCellStyle();
HSSFFont font = wb.createFont();
font.setBold(true);
short color = HSSFColor.RED.index;
font.setColor(color);
cellStyle.setFont(font);
cell.setCellStyle(cellStyle);
cell.setCellValue((String) fieldname.get(j));
}
int i = 0;
Iterator<Getstudent> it = list.iterator();
while(it.hasNext()){
HSSFRow rowi = sheet.createRow((short)++i);
Getstudent stu = it.next();
HSSFCell cell0 = rowi.createCell((short)0);
HSSFCell cell1 = rowi.createCell((short)1);
HSSFCell cell2 = rowi.createCell((short)2);
cell0.setCellValue((String) stu.getName());
cell1.setCellValue((String) stu.getXH());
cell2.setCellValue((String) stu.getPhone());
}
wb.write(os);
os.flush();
os.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO 自动生成的方法存根
super.doGet(req, resp);
}
public ArrayList getFieldName(){
String str[]={"姓名","学号","电话"};
ArrayList list=new ArrayList();
for(int i=0;i<str.length;i++){
list.add(str[i]);
}
return list;
}
public static String getTimeStamp() {
SimpleDateFormat dateFormat = new SimpleDateFormat(
"yyyy-MM-dd hh:MM:ss");
Date date = new Date();
return dateFormat.format(date);
}
}
有些servlet引入到了我的其他包的类,所以代码不可直接套用。
我也处于学习阶段,有些地方写的不好或者解释不清楚还请见谅。