简单的删除、修改(数据回显+省市联动)、展示、保存、登录、注册、注销(java+mysql+tomcat7.0)

一、项目部署

1.Eclipse创建一个Dynamic Web Project
2.在src里面创建1个Package(com.airui),该包下面有5个子包 (dao,domain,service,servlet,utils),在src里导入c3p0-config.xml,如图下:
在这里插入图片描述
3.dao、domain、service里创建class,servlet里创建servlet,utils我是直接导入了一个封装好的jar包,如图下:
在这里插入图片描述
4.lib里导入一些jar包,WebContent里创建jsp文件、导入jq.js、创建一些jsp,如图下:
在这里插入图片描述

5.重要的一步部署Tomcat环境
链接: 链接:https://pan.baidu.com/s/1wXRY3CfNhz_M0l_1-WB0BQ 提取码:v6mq
(项目源码+Tomcat7.0+jar包+连接池)
6.创建一个数据库,建city、user两张表
注:字段要与domain里的实体类的字段一致
user:
在这里插入图片描述
city:
在这里插入图片描述

二.实现功能图

1.登录界面------logon.jsp
在这里插入图片描述
2.注册界面------regist.jsp
在这里插入图片描述
3.展示界面------show.jsp
在这里插入图片描述
在这里插入图片描述
3.展示用户界面-----showUser.jsp
在这里插入图片描述
4.展示界面------update.jsp(数据回显)
在这里插入图片描述
5.注销之后的界面
在这里插入图片描述

三.Dao层

1.UserDao

package com.airui.dao;

import java.sql.SQLException;
import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import com.airui.domain.PageBean;
import com.airui.domain.User;

public class UserDao {
    
	//注册--相当于添加
	public void regist(User u, QueryRunner qr) {
		String sql="insert into user values(null,?,?,?,?,?,?);";
		Object[]o= {u.getUsername(),u.getPassword(),u.getSex(),u.getHobby(),u.getAddr(),u.getImg()};
		try {
			qr.update(sql,o);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
     
	//分页展示
	public List<User> show(PageBean pb, QueryRunner qr) {
		//sql语句
		String sql="select * from user limit ?,?;";
		/*
		 * Select * from xx limit x,y;
		 *	X:(page-1)*tr
		 *	Y:tr
		 * */
		//要一一对应sql语句中的每一个'?'
		Object[] o= {(pb.getPage()-1)*pb.getTr(),pb.getTr()};
		try {
			//用集合封装数据
			List<User> list=qr.query(sql, new BeanListHandler<User>(User.class),o);
			return list;
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}
	
    //删除
	public void delete(int id, QueryRunner qr) {
        String sql="delete from user where id=?;";
		
		try {
			qr.update(sql, id);
		} catch (SQLException e) {
			
			e.printStackTrace();
		}
		
	}
    
	//登录
	public User login(String username, String password, QueryRunner qr) {
		String sql="select * from user where username=? and password=?;";
		Object[] o= {username,password};
		try {
			return qr.query(sql, new BeanHandler<User>(User.class),o);
			 
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}
    
	//查找用户名是否重复
	public boolean findUsername(String username, QueryRunner qr) {
		String sql="select * from user where username=?;";
		try {
			List<User> list=qr.query(sql, new BeanListHandler<User>(User.class),username);
			if (list.size()!=0) {
				return true;
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return false;
	}
    
	//根据id查将数据写入本地文件
	public User findid(int id, QueryRunner qr) {
		String sql="select * from user where id=?;";
		try {
			return qr.query(sql, new BeanHandler<User>(User.class),id);
		} catch (SQLException e) {
			
			e.printStackTrace();
		}
		return null;
	}
	
    //批量删除
	public void deleteall(String[] ids, QueryRunner qr) {
		//sql语句
        String sql="delete from user where id=?;";
		
        // 由于dbutils工具类的批量删除操作,需要的是二维数组来存放给?赋值的一维数组
        // 必须创建一个二维数组,这个二维数组的大小,就是一维数组的个数
		Object[][]  arr=new Object[ids.length][];
		
		for (int i = 0; i < ids.length; i++) {
			Object arr1[]={ids[i]};
			arr[i] = arr1;
		}
		try {
			//批量删除的方法,需要传入一个二维数组
			qr.batch(sql, arr);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}
	
    //查找id---修改、删除需根据id进行操作
	public User findbyid(int id, QueryRunner qr) {
        //sql语句
		String sql="select * from emp where id=?;";
		
		try {
			//返回一个User对象需用BeanHandler,'?'对应id
			User e=qr.query(sql, new BeanHandler<User>(User.class), id);
			return e;
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;

	}
    //更新
	public void update(User u, QueryRunner qr) {
		String sql = "update user set username=?,password=?,sex=?,hobby=?,addr=?,img=? where id=?;";
		Object[] o = { u.getUsername(), u.getPassword(), u.getSex(),
				u.getHobby(), u.getAddr(), u.getImg(), u.getId() };

		try {
			qr.update(sql, o);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
	}
    //查询user表中数据的数量
	public int count(QueryRunner qr) {
		String sql="select count(*) from user";
		try {
			Object o=qr.query(sql, new ScalarHandler());
			return Integer.parseInt(o.toString());
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return 0;
	}

}




2.CityDao

package com.airui.dao;

import java.sql.SQLException;
import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.airui.domain.City;
import com.airui.domain.User;

public class CityDao {
    
	//查找省份--根据数据库省市表进行aid为null查询  --->  CityService
	public List<City> findprovince(QueryRunner qr) {
		String sql="select * from city where aid is null;";
		try {
			return qr.query(sql, new BeanListHandler<City>(City.class));
			
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return null;
	}
    
	//查找市---根据数据库省市表进行自连接查询  --->  CityService
	public List<City> findcity(String name, QueryRunner qr) {
		String sql="select * from city where aid=(select id from city where addrname=?);";
		try {
			return qr.query(sql, new BeanListHandler<City>(City.class),name);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return null;
	}
	
}




四.Domain层

1.User实体类

package com.airui.domain;

public class User {
       private Integer id;
       private String  username;
       private String  password;
       private String  sex;
       private String  hobby;
       private String  addr;
       private String  img;
	public User() {
		super();
		// TODO Auto-generated constructor stub
	}
	public User(Integer id, String username, String password, String sex, String hobby, String addr, String img) {
		super();
		this.id = id;
		this.username = username;
		this.password = password;
		this.sex = sex;
		this.hobby = hobby;
		this.addr = addr;
		this.img = img;
	}
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	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 getHobby() {
		return hobby;
	}
	public void setHobby(String hobby) {
		this.hobby = hobby;
	}
	public String getAddr() {
		return addr;
	}
	public void setAddr(String addr) {
		this.addr = addr;
	}
	public String getImg() {
		return img;
	}
	public void setImg(String img) {
		this.img = img;
	}
	@Override
	public String toString() {
		return "User [id=" + id + ", username=" + username + ", password=" + password + ", sex=" + sex + ", hobby="
				+ hobby + ", addr=" + addr + ", img=" + img + "]";
	}
       
}




2.City实体类

package com.airui.domain;

public class City {
	private Integer id;
    private String addrname;
    private Integer aid;
	public City() {
		super();
		// TODO Auto-generated constructor stub
	}
	public City(Integer id, String addrname, Integer aid) {
		super();
		this.id = id;
		this.addrname = addrname;
		this.aid = aid;
	}
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getAddrname() {
		return addrname;
	}
	public void setAddrname(String addrname) {
		this.addrname = addrname;
	}
	public Integer getAid() {
		return aid;
	}
	public void setAid(Integer aid) {
		this.aid = aid;
	}
	@Override
	public String toString() {
		return "CityDao [id=" + id + ", addrname=" + addrname + ", aid=" + aid + "]";
	}
}



3.PageBean(分页)

package com.airui.domain;

import java.util.List;

public class PageBean {
       private int tr;        //每页要显示数据的个数
       
       private int trsum;     //一共有多少条数据
       
       private int page;      //当前是第几页,用户前端页面,传给后台的
       /*
        * 用法:Math.ceil(double x)
        * 功能:返回大于或者等于指定表达式的最小整数,即向上取整
        * 用例:写分页的时候要根据查到的记录总数count和
        * 每页数据数roots,
        * 求出总共有多少页。这里都定义为int类型的
        * */
       private int pagesum;    //总页码,Matn.ceil(trsum/tr)
       
       private List<User> list;  //当前页的数据用list集合装起来
       
	public PageBean() {
		super();
		// TODO Auto-generated constructor stub
	}
	public PageBean(int tr, int trsum, int page, int pagesum, List<User> list) {
		super();
		this.tr = tr;
		this.trsum = trsum;
		this.page = page;
		this.pagesum = pagesum;
		this.list = list;
	}
	public int getTr() {
		return tr;
	}
	public void setTr(int tr) {
		this.tr = tr;
	}
	public int getTrsum() {
		return trsum;
	}
	public void setTrsum(int trsum) {
		this.trsum = trsum;
	}
	public int getPage() {
		return page;
	}
	public void setPage(int page) {
		this.page = page;
	}
	public int getPagesum() {
		return pagesum;
	}
	public void setPagesum(int pagesum) {
		this.pagesum = pagesum;
	}
	public List<User> getList() {
		return list;
	}
	public void setList(List<User> list) {
		this.list = list;
	}
	@Override
	public String toString() {
		return "PageBean [tr=" + tr + ", trsum=" + trsum + ", page=" + page + ", pagesum=" + pagesum + ", list=" + list
				+ "]";
	}
       
}




五.Service层

1.UserService

package com.airui.service;

import java.util.List;

import org.apache.commons.dbutils.QueryRunner;

import com.airui.dao.UserDao;
import com.airui.domain.PageBean;
import com.airui.domain.User;
import com.airui.utils.JDBCUtils;

public class UserService {

	UserDao ud=new UserDao();
	QueryRunner qr=JDBCUtils.getQR();
	
	//注册
	public void regist(User u) {
		
		 ud.regist(u,qr);
	}

    //删除
	public void delete(int id) {
		ud.delete(id,qr);
		
	}
    
	//登录
	public User login(String username, String password) {
		return ud.login(username,password,qr);
	}
	//查找用户名是否重复
	public boolean findUsername(String username) {
		return ud.findUsername(username,qr);
	}
    
	//根据id查将数据写入本地文件
	public User findid(int id) {
		return ud.findid(id,qr);
		 
	}
    //批量删除
	public void deleteall(String[] ids) {
		ud.deleteall(ids,qr);
		
	}
	//查找id---修改、删除需根据id进行操作
	public User findbyid(int id) {
		
		return ud.findbyid(id,qr);
	}
    //更新
	public void update(User u) {
		ud.update(u,qr);
		
	}
    //计数
	public int count() {
		
		return ud.count(qr);
	}
    //分页展示数据
	public List<User> show(PageBean pb) {
		List<User> list=ud.show(pb,qr);
		return list;
	}

}



2.CityService

package com.airui.service;

import java.util.List;

import org.apache.commons.dbutils.QueryRunner;

import com.airui.dao.CityDao;
import com.airui.domain.City;
import com.airui.utils.JDBCUtils;

public class CityService {

	CityDao cd=new CityDao();
	QueryRunner qr=JDBCUtils.getQR();
	
	//通过CityDao查找省份返回一个list  --->  CityServlet
	public List<City> findprovince() {
		List<City> list=cd.findprovince(qr);
		return list;
	}
    
	//通过CityDao查找市返回一个list  --->  CityServlet
	public List<City> findcity(String name) {
		List<City> list=cd.findcity(name,qr);
		return list;
	}

}


六.Servlet层

1.ShowServlet(用来分页展示)

package com.airui.servlet;

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

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 com.airui.domain.PageBean;
import com.airui.domain.User;
import com.airui.service.UserService;


@WebServlet("/ShowServlet")
public class ShowServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //处理中文乱码
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		//创建EmpService层对象
		UserService us = new UserService();
		PageBean pb = new PageBean();
		//每页有多少条数据
		int tr=3;
		pb.setTr(tr);
		//一共有多少条数据
		int trsum=us.count();
		pb.setTrsum(trsum);
		//一共有多少页
		int pagesum=(int)Math.ceil(trsum*1.0/tr);
		pb.setPagesum(pagesum);
		//当前页数据
		int page=1;
		String p=request.getParameter("page");
		if (p!=null) {
			//格式转换
			page=Integer.parseInt(p);
			
		}
		//setAttribute:获取当前页的page
		request.getSession().setAttribute("page", page);
		pb.setPage(page);
		//每页的所有数据
		List<User> list=us.show(pb);
		pb.setList(list);
		//向前端服务器发送数据
		request.setAttribute("pb", pb);
		//转发
		request.getRequestDispatcher("/show.jsp").forward(request, response);
	}

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

}





2.RegistServlet(用来注册)

package com.airui.servlet;

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

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;

import org.apache.commons.lang.StringUtils;

import com.airui.domain.User;
import com.airui.service.UserService;


@WebServlet("/RegistServlet")
@MultipartConfig
public class RegistServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//处理中文乱码
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		//getParameter主要是后端获取前端页面出传递过来的数据,接收一般变量 ,如text类型
		String username=request.getParameter("username");
		String password=request.getParameter("password");
		String sex=request.getParameter("sex");
		//getParameterValues是后端获取前端页面出传递过来的数据,接收数组变量 ,如checkobx类型
		String[] hobbys=request.getParameterValues("hobby");
		String hobby="";
		if (hobbys!=null) {
			hobby=StringUtils.join(hobbys,",");
		}
		String province=request.getParameter("province");
		String city=request.getParameter("city");
		String addr=province+","+city;
		
		//getPart该方法通常用于获取上传文件
		Part file=request.getPart("file");
		//currentTimeMillis返回一个时间戳
		long time=System.currentTimeMillis();
		String img=time+".jpg";
		
		//获取工程目录
		String realPath=getServletContext().getRealPath("");
		file.write(realPath+"/"+img);
		
		User u = new User(null,username,password,sex,hobby,addr,img);
		
		UserService us = new UserService();
		
		us.regist(u);
		
		request.getRequestDispatcher("/login.jsp").forward(request, response);
				
			
	}

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

}



3.LoginServlet(用来登录)

package com.airui.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 com.airui.domain.User;
import com.airui.service.UserService;


@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
		
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//处理中文乱码
		request.setCharacterEncoding("utf-8");
	    response.setContentType("text/html;charset=utf-8");
	    //接受ajax的帐号密码
	    String username = request.getParameter("username");
        String password = request.getParameter("password");
        UserService us = new UserService();
        //根据密码查询用户
        User u= us.login(username, password);
        //判断user是否为空
        if (u == null) {
        	response.getWriter().write("false");
            
        }else {
        	//将用户的对象放到session中
        	request.getSession().setAttribute("u", u);
        	response.getWriter().write("true");
        }

	}

}




4.LogoutServlet(用来注销)

package com.airui.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 javax.servlet.http.HttpSession;


@WebServlet("/LogoutServlet")
public class LogoutServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//request.getSession(true):若存在会话则返回该会话,否则新建一个会话。
		//request.getSession(false):若存在会话则返回该会话,否则返回NULL
		HttpSession session=request.getSession(false);
		if(session==null) {
			request.getRequestDispatcher("/show.jsp").forward(request, response);
		}
		//session.removeAttribute()适用于清空指定的属性 
		session.removeAttribute("u");
		request.getRequestDispatcher("/show.jsp").forward(request, response);
	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}




5.FindByIDServlet(修改、删除操作需要根据id)

package com.airui.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 com.airui.domain.User;
import com.airui.service.UserService;



@WebServlet("/FindByIDServlet")
public class FindByIDServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//处理中文乱码
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html,charset=utf-8");
		//创建EmpService层对象
		UserService us = new UserService();
		//获取数据
		String i=request.getParameter("id");
		int id=Integer.parseInt(i);
		//调用Empservice中的findbyid方法
		User e=us.findbyid(id);
		//传送数据
		request.setAttribute("e", e);
		//转发
		request.getRequestDispatcher("/update.jsp").forward(request, response);
	}

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

}




6.UpdateServlet(用来更新)

package com.airui.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;

import org.apache.commons.lang.StringUtils;

import com.airui.domain.User;
import com.airui.service.UserService;


@WebServlet("/UpdateServlet")
@MultipartConfig
public class UpdateServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//处理中文乱码
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		String id=request.getParameter("id");
		String username=request.getParameter("username");
		String password=request.getParameter("password");
		String sex=request.getParameter("sex");
		String[] hobbys=request.getParameterValues("hobby");
		String hobby="";
		if (hobbys!=null) {
			hobby=StringUtils.join(hobbys,",");
		}
		String province=request.getParameter("province");
		String city=request.getParameter("city");
		String addr=province+","+city;
		
		//getPart该方法通常用于获取上传文件
		Part file=request.getPart("file");
		String img=request.getParameter("oldImg");
		if (file.getSize()!=0) {
			//currentTimeMillis返回一个时间戳
			long time=System.currentTimeMillis();
			img=time+".jpg";
			//获取工程目录
			String realPath=getServletContext().getRealPath("");
			//文件写入工程目录
			file.write(realPath+"/"+img);
		}
		User u = new User(Integer.parseInt(id),username,password,sex,hobby,addr,img);
		UserService us = new UserService();
		us.update(u);
		request.getRequestDispatcher("ShowServlet").forward(request, response);
	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}





7.DeleteServlet(单个删除)

package com.airui.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 com.airui.service.UserService;

@WebServlet("/DeleteServlet")
public class DeleteServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//处理中文乱码
		request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        //创建对象
        UserService us = new UserService();
        //获取id
        String i=request.getParameter("id");
        int id=Integer.parseInt(i);
        //传入一个id删除,删除就不需要返回一个对象或集合了
        us.delete(id);
        //转发
        request.getRequestDispatcher("ShowServlet").forward(request, response);
	}

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

}


8.DeleteAllServlet(批量删除)

package com.airui.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 com.airui.service.UserService;



@WebServlet("/DeleteAllServlet")
public class DeleteAllServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//处理中文乱码
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html,charset=utf-8");    
		//获取数据:request.getParameterValues("a"),a->show.jsp里面的input框的name属性值,即name="a";
		String[] ids=request.getParameterValues("ids");
        UserService us = new UserService();
        if (ids!=null) {
              us.deleteall(ids);
				
		}
        //转发
        request.getRequestDispatcher("ShowServlet").forward(request, response);
	}

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

}


9.SaveServlet(用来保存用户信息到一个文件中,每次点击保存时,这个文件会新增一条数据)

package com.airui.servlet;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;

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 com.airui.domain.User;
import com.airui.service.UserService;

/**
 * Servlet implementation class SaveServlet
 */
@WebServlet("/SaveServlet")
public class SaveServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//处理中文乱码
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		
		String i=request.getParameter("id");
		int id=Integer.parseInt(i);
		UserService us = new UserService();
        User u=us.findid(id);
        //输出流FileOutputStream把数据写入本地文件(将用户信息保存到E:/a.txt文件下)
		FileOutputStream out = new FileOutputStream(new File("E:/a.txt"),true);
		//getBytes()得到一个字符数组
		out.write(u.toString().getBytes());
		//用完记得关闭
		out.close();
        request.getRequestDispatcher("ShowServlet").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);
	}

}





10.FindUser(用来查找用户名是否重复)

package com.airui.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 com.airui.service.UserService;

/**
 * Servlet implementation class FindUser
 */
@WebServlet("/FindUser")
public class FindUser extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//处理中文乱码
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		//得到ajax传过来的帐号信息
		String username=request.getParameter("username");
		
		UserService us = new UserService();
		//如果b为true,则表示找到了
		//如果b为false,则表示未找到
		boolean b=us.findUsername(username);
		//response.getWriter().write()用于ajax,返回局部html代码,只能打印输出文本格式的(包括html标签),不可以打印对象
		//b传到前端的msg(调用FindUser)
		response.getWriter().write(b+"");
		
	}

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

}





11.CityServlet(用来查找省、市----省市联动)

package com.airui.servlet;

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

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 com.airui.domain.City;
import com.airui.service.CityService;

import net.sf.json.JSONArray;

/**
 * Servlet implementation class CityServlet
 */
@WebServlet("/CityServlet")
public class CityServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//处理中文乱码
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		//创建CityService层对象
		CityService cs = new CityService();
		//获取省份返回一个list集合
		List<City> list=cs.findprovince();
		//创建JSONArray,JSONArray是[]包裹起来的一个数组(Array)
		JSONArray arr=new JSONArray();
		for (City c : list) {
			//通过City实体类getAddrname方法获取省份
			String provinceName=c.getAddrname();
			//将数据添加到数组里
			arr.add(provinceName);
		}
		//将封装好的json数据,发送给ajax的前端
		response.getWriter().write(arr.toString());
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//处理中文乱码
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		//获取省名
		String name=request.getParameter("province");
		
		CityService cs = new CityService();
		//获取市名封装在一个集合里
		List<City> list=cs.findcity(name);
		
		JSONArray arr=new JSONArray();
		for (City c : list) {
			//通过City实体类getAddrname方法获取市名
			String cityName=c.getAddrname();
			arr.add(cityName);
		}
		//将封装好的json数据,发送给ajax的前端
		response.getWriter().write(arr.toString());
	}

}




七.Jsp

1.show.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body background="cc.jpeg">
     <h1 align="center"><font size="7">在线信息管理系统</font></h1>
     
     <div align="center">
         <c:if test="${u==null }">
               <button onclick="window.location='/work2/login.jsp'">请登陆!</button>
         </c:if>
         <c:if test="${u!=null }">
                                欢迎【<a href="/work2/showUser.jsp">${u.username }</a>】回来!
         </c:if>
         <!-- window.location方法可以链接到其他页面 -->
         <c:if test="${u!=null }">
               <button onclick="window.location='/work2/LogoutServlet'">注销</button>
         </c:if>
      <!-- post提交到Servlet中DeleteAll -->
      <form action="/work2/DeleteAllServlet" method="post" >
         <input type="submit" id="del" value="批量删除">
            <table border="1" bordercolor="coral">
                   <tr>
                       <td><input type="checkbox" id="all">全选/全不选</td>
                       <td>头像</td>
                       <td>编号</td>
                       <td>帐号</td>
                       <td>密码</td>
                       <td>性别</td>
                       <td>爱好</td>
                       <td>地址</td>
                       <td>操作</td>
                   </tr>
                   <c:forEach items="${pb.list }" var="u">
                      <tr>
                           <td><input type="checkbox" name="ids" value="${u.id }"></td>
                           <td><img src="${u.img }" width="50px" height="50px"></td>
                           <td>${u.id }</td>
	                       <td>${u.username }</td>
	                       <td>${u.password }</td>
	                       <td>${u.sex }</td>
	                       <td>${u.hobby }</td>
	                       <td>${u.addr }</td>
	                       <td>
	                           <a href="/work2/FindByIDServlet?id=${u.id }">修改</a>
	                           <a href="/work2/DeleteServlet?id=${u.id }">删除</a>
	                           <a href="/work2/SaveServlet?id=${u.id }">保存</a>
	                       </td>
	                  </tr>
                   </c:forEach>
            </table>
      </form>
      
            <!-- 首页直接显示page=1,默认为1,所以这边可以不用写/work/Show?page=1-->
      <a href="/work2/ShowServlet">首页</a>
            <!-- 想要显示"上一页",必须保证当前页pb.page不等于1,
                                     同时'上一页的页码'='当前页的页码'-1才能显示'上一页'
                                     若当前页pb.page等于1时,就没有"上一页"-->
      <c:if test="${pb.page!=1 }">
            <a href="/work2/ShowServlet?page=${pb.page-1 }">上一页</a>
      </c:if>
            <!-- 中间显示:当前页/总页码  例:1/3 -->
      ${pb.page }/${pb.pagesum }
            <!-- 想要显示"下一页",必须保证当前页pb.page不等于最后一页pb.pagesum,
                                     同时'下一页的页码'='当前页的页码'+1才能显示'下一页'
                                     若当前页pb.page等于pb.pagesum时,就没有"下一页"-->
      <c:if test="${pb.page!=pb.pagesum }">
            <a href="/work2/ShowServlet?page=${pb.page+1 }">下一页</a>
      </c:if>
            <!-- 首页直接显示page='最后一页' -->
      <a href="/work2/ShowServlet?page=${pb.pagesum }">尾页</a>
      <input type="button" id="btn" value="退出">
    </div>
</body>
<script type="text/javascript" src="jq.js"></script>
  <script type="text/javascript">
  /* all是全选/全不选多选框的id属性值,change是checkbox多选框被'✔'时即被选中 */
  $("#all").change(function(){
  	 /* 如果当前的多选按钮的,checked属性,是checked,表示,被选中
  	    attr()方法来获取和设置元素属性 */
  	if($(this).attr("checked")=="checked"){
		$("input[type='checkbox']").attr("checked",true);	  		
  	}else{
		$("input[type='checkbox']").attr("checked",false);
  	}
  
  });
  $("#del").click(function(){
	  	alert("删除成功");
	  
	  });
  $("#btn").click(function(){
	  var flag=confirm("请选择确认或取消");
		if (flag) {
			window.close();
		}
  });
  
  </script>
</html>

2.update.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title></title>
    

  </head>
  
  <body>
   <form action="/work2/UpdateServlet" method="post" enctype="multipart/form-data">
	<input type="hidden" name="id" value="${u.id }">
	<input type="hidden" name="oldImg" value="${u.img }">
	
	账号:<input name="username" id="username" value="${u.username }"><br>
	密码:<input name="password" id="password" value="${u.password }"><br>
	性别:
		
		<input type="radio" name="sex" value="男" <c:if test="${u.sex=='男' }">checked</c:if>><input type="radio" name="sex" value="女" <c:if test="${u.sex=='女' }">checked</c:if>><br>	
	爱好:
		<input type="checkbox" name="hobby" value="篮球" <c:if test="${u.hobby.contains('篮球') }">checked</c:if>>篮球
		<input type="checkbox" name="hobby" value="足球" <c:if test="${u.hobby.contains('足球') }">checked</c:if>>足球
		<input type="checkbox" name="hobby" value="羽毛球" <c:if test="${u.hobby.contains('羽毛球') }">checked</c:if>>羽毛球<br>
	地址:
		<select id="province" name="province">
			<option>---请选择---</option>
		</select>
		<select id="city" name="city">
			<option>---请选择---</option>
		</select><br>
	头像:
		<img src="${u.img }" width="100px" height="100px">
		<input type="file" name="file" id="file"><br>
	
	<input type="submit" value="修改">
	
	</form>



  </body>
  <script type="text/javascript" src="jq.js"></script>
  <script type="text/javascript">
  
  // 将el表达式,拿到了js中使用
  var city = "${u.addr}";
  
  
  var cc = city.split(",");
  
  $.get("/work2/CityServlet",function(msg){
  	
  	// 字符串类型的数据,不能在js中直接使用
  	// 将字符串,解析成js代码,这样,就可以直接运行了
  	// [1,2,3,4]
  	var province = eval("("+msg+")");
  	
  	for (var i = 0; i < province.length; i++) {
  		if(province[i]==cc[0]){
			$("#province").append("<option selected='selected'>"+province[i]+"</option>");
  		}else{
  			$("#province").append("<option>"+province[i]+"</option>");
  		}
	}
  
  });
  
  $.post("/work2/CityServlet",{province:cc[0]},function(msg){
  		var city = eval("("+msg+")");
  		for (var i = 0; i < city.length; i++) {
  			if(city[i]==cc[1]){
				$("#city").append("<option selected='selected'>"+city[i]+"</option>");
  			}else{
				$("#city").append("<option>"+city[i]+"</option>");
  			}
		}
  	
  });
  
  // 省下拉框中的内容,发送改变,就会调用此方法
  $("#province").change(function(){
  	// 清空city中的内容
  	$("#city").text("");
  	// 回复到最初的状态
  	$("#city").append("<option>---请选择---</option>");
  	$.post("/work2/CityServlet",{province:$(this).val()},function(msg){
  		var city = eval("("+msg+")");
  		for (var i = 0; i < city.length; i++) {
			$("#city").append("<option>"+city[i]+"</option>");
		}
  	
  	});
  });
  </script>
</html>

3.regist.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
      <form action="${pageContext.request.contextPath }/RegistServlet" method="post" enctype="multipart/form-data">
	            帐号:<input name="username" id="username"><span id="s1">账号的长度必须为3位以上!</span><br>
	            密码:<input name="password" id="password"><span id="s2">密码的长度必须为3位以上!</span><br>
	            确认密码:<input name="repassword" id="repassword"><span id="s3">密码和确认密码一致!</span><br>
	            性别:<input type="radio" name="sex"  value="男" checked="checked"><input type="radio" name="sex"  value="女"><br>
	            爱好:<input type="checkbox" name="hobby" value="篮球">篮球
	          <input type="checkbox" name="hobby" value="足球">足球
	          <input type="checkbox" name="hobby" value="羽毛球">羽毛球<br>
	            
	            地址:<select id="province" name="province">
	            <option>---请选择---</option>
	          </select>
	          <select id="city" name="city">
	            <option>---请选择---</option>
	          </select>
	          <br>
	            头像:<input type="file" name="file" id="file"><br>
	      <input type="submit" value="注册">
      </form>
</body>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript">
     $.get("/work2/CityServlet",function(msg){
    	 //字符串类型的数据,不能在js中直接使用
    	 //将字符串,解析成js代码,这样就可以直接运行了
    	 //[1,2,3,4]
    	 var province=eval("("+msg+")");
    	 
    	 for (var i = 0; i < province.length; i++) {
			$("#province").append("<option>"+province[i]+"</option>");
		}
     });
     
     //将下拉框中的内容,发生改变,就会调用此方法
     $("#province").change(function(){
    	 //清空city中的内容
    	 $("#city").text("");
    	 //恢复到最初的状态
    	 $("#city").append("<option>---请选择---</option>");
    	 $.post("/work2/CityServlet",{province:$(this).val()},function(msg){
    		 var city=eval("("+msg+")");
    		 for (var i = 0; i < city.length; i++) {
    				$("#city").append("<option>"+city[i]+"</option>");
    			}
    	 })
     });
     
     //验证的内容
     //1.帐号的长度
     $("#username").blur(function(){
    	 var un=$(this).val();
    	 if(un.length>2){
    		 //帐号的长度符合要求
    		 //验证账号是否重复
    		 
    		 $.post("/work2/FindUser",{username:un},function(msg){
    			 if (msg=="true") {
    				 $("#s1").text("对不起,帐号已重复");
				}else{
					$("#s1").text("√");
				}
    		 })
    		 
    	 }else{
    		 $("#s1").text("帐号的长度不符合要求!");
    	 }
     });
     //2.密码的长度
     $("#password").blur(function(){
    	 var pwd=$(this).val();
    	 if(pwd.length>2){
    		 
					$("#s2").text("√");
		}else{
    		 $("#s2").text("密码的长度不符合要求!");
    	 }
     })
     //3.密码与确认密码是否相等
     $("#repassword").blur(function(){
    	 var pwd=$("#password").val();
    	 var repwd=$(this).val();
    	 if(repwd==pwd){
    		 
					$("#s3").text("√");
		}else{
    		 $("#s3").text("两次密码不一样!");
    	 }
     });
     //4.信息必须一致
     $("form").submit(function(){
    	  	var s1 = $("#s1").text();
    	  	var s2 = $("#s2").text();
    	  	var s3 = $("#s3").text();
    	  	var file = $("#file").val();
    	  	
    	  	if(s1=="√"&&s2=="√"&&s3=="√"&&file.length>0){
    	  		return true;
    	  	}else{
    	  		alert("请正确填写信息!");
    	  		return false;
    	  	}
    	  	
    	  
    	  });
</script>
</html>

4.login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
      
                          帐号:<input id="username"><br>
                          密码: <input id="password"><br>
            <input type="button" value="登陆" id="submit">
            <button onclick="window.location='/work2/regist.jsp'">注册</button>
      
      
</body>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript">
  $("#submit").click(function(){
	  var un=$("#username").val();
	  var pw=$("#password").val();
	  
	  $.post("/work2/LoginServlet",{username:un,password:pw},function(msg){
		  if (msg=="true") {
			location.href="/work2/ShowServlet";
		}else{
			alert("帐号或密码错误!");
		}
	  })
  });
  
  </script>
</html>

5.showUser.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
           帐号:  ${u.username }<br>
	  密码:  ${u.password }<br>
	
	  <a href="/work2/ShowServlet"><input type="button" value="返回"></a>
	
	  <!-- 注销 -->
</body>
</html>
  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
对于Vue+TypeScript和Element Plus的三级联动数据回显,可以按照以下步骤进行实现: 1. 首先,在Vue组件中定义省市区的数据源,可以使用数组或者对象的形式存储。例如: ```typescript data() { return { provinceList: [], // 省份数据源 cityList: [], // 城市数据源 districtList: [], // 区县数据源 selectedProvince: '', // 选中的省份 selectedCity: '', // 选中的城市 selectedDistrict: '', // 选中的区县 // 其他数据... }; }, ``` 2. 在组件的`mounted`生命周期钩子函数中初始化省份数据源,并根据选中的省份获取对应的城市和区县数据。例如: ```typescript mounted() { // 初始化省份数据源 this.provinceList = [ { id: 1, name: '北京' }, { id: 2, name: '上海' }, { id: 3, name: '广东' }, // 其他省份... ]; // 根据选中的省份获取城市和区县数据 this.fetchCityList(this.selectedProvince); this.fetchDistrictList(this.selectedCity); }, ``` 3. 实现方法`fetchCityList`和`fetchDistrictList`,用于根据选中的省份和城市获取对应的城市和区县数据。可以使用ajax、axios或者其他方式获取数据。例如: ```typescript methods: { fetchCityList(provinceId: number) { // 根据省份ID获取城市数据,此处假设省份ID与城市数据对应 this.cityList = [ { id: 11, name: '北京市' }, { id: 12, name: '天津市' }, { id: 13, name: '石家庄市' }, // 其他城市... ]; // 清空选中的城市和区县 this.selectedCity = ''; this.selectedDistrict = ''; }, fetchDistrictList(cityId: number) { // 根据城市ID获取区县数据,此处假设城市ID与区县数据对应 this.districtList = [ { id: 111, name: '东城区' }, { id: 112, name: '西城区' }, { id: 113, name: '朝阳区' }, // 其他区县... ]; // 清空选中的区县 this.selectedDistrict = ''; }, }, ``` 4. 在模板中使用`<el-select>`组件实现三级联动选择框,并绑定选中的值和数据源。例如: ```html <el-select v-model="selectedProvince" placeholder="请选择省份" @change="fetchCityList(selectedProvince)"> <el-option v-for="province in provinceList" :key="province.id" :value="province.id" :label="province.name"></el-option> </el-select> <el-select v-model="selectedCity" placeholder="请选择城市" @change="fetchDistrictList(selectedCity)"> <el-option v-for="city in cityList" :key="city.id" :value="city.id" :label="city.name"></el-option> </el-select> <el-select v-model="selectedDistrict" placeholder="请选择区县"> <el-option v-for="district in districtList" :key="district.id" :value="district.id" :label="district.name"></el-option> </el-select> ``` 通过以上步骤,就可以实现省市区三级联动数据回显的功能了。当选择省份时,会根据选中的省份动态获取对应的城市数据;当选择城市时,会根据选中的城市动态获取对应的区县数据。同时,选中的值会与`selectedProvince`、`selectedCity`和`selectedDistrict`进行双向绑定,以便在提交表单或其他操作时使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值