1.用户注册功能
1.1用户注册
思路分析：
1、使用表单收集用户输入的数据(form)
2、点立即注册提交表单
- type=submit时可以提交表单
- 使用js方式
```html立即注册
**在Servlet中如何处理不同的功能请求？**注意：以后的请求都要加上method参数名```javaprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//获取method的参数值String method = request.getParameter("method");if("checkUsername".equals(method)) {//调用校验用户名方法this.checkUsername(request, response);}else if("register".equals(method)) {//调用注册方法this.register(request, response);}}
register表单
<form action="UserServlet?method=register" id="f4" method="post">
3、在UserServlet中获取表单的数据
原先的方式：
//1、获取表单数据String name = request.getParameter("name");String sex = request.getParameter("sex");String ph = request.getParameter("phone");String xx = request.getParameter("xxx");String yy = request.getParameter("yy");String zz = request.getParameter("zz");...
存在的问题：当提交的参数有多个时，光获取参数的代码就要写很多行
4、将获取到的数据作为方法的参数传到service层
//2、调用service 将参数传给sercieUserService us = new UserService();us.register(name,sex,ph,xx,yy,zz);
存在的问题：当数据很多时，方法的参数要传很多个，传参时很容易错乱、发生问题
以下代码可以解决以上两个存在的问题：
Map<String, String[]> map = request.getParameterMap();/*getParameterMap()：获取参数列表中所有的参数名和参数值String：参数名String[]：参数值*///注册方法protected void register(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {try {//获取表单中的数据Map<String, String[]> map = request.getParameterMap();//创建User对象User user = new User();//BeanUtils工具类（将map中的数据封装到User对象中）BeanUtils.populate(user, map);//调用service层UserService us = new UserService();us.register(user);} catch (IllegalAccessException | InvocationTargetException e) {// TODO Auto-generated catch blocke.printStackTrace();}}
5、service将user对象传到dao层
//调用service层UserService us = new UserService();us.register(user);public class UserService {UserDao ud = new UserDao();public void register(User user) {ud.register(user);}}
6、在dao层使用dbutils写sql
public class UserDao {QueryRunner qr = new QueryRunner(C3p0Utils.getDataSource());public void register(User user) {String sql = "insert into user values(?,?,?,?,?,?,?,?,?,?)";Object [] param = {null,user.getName(),user.getSex(),user.getPhone_number(),user.getArea(),user.getManager(),user.getUsername(),user.getPassword(),user.getPhoto(),null};try {qr.update(sql, param);} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}}}
7、跳转到登录页面(待完善)
//Servlet//跳转到登录页面response.getWriter().write("<h1>注册成功，3秒后跳转到登录页面！！<h1>");response.setHeader("refresh", "3;url=/dami/login.jsp");
1.2功能完善：验证用户名唯一
ajax如何使用呢
register.jsp
onblur事件：
<tr><td width="25%" class="_left">用户名：</td><td><input type="text" id="username" name="username" onblur="checkUsername(this.value)" ><span id="s_username"></span></td></tr>
UserServlet：
protected void checkUsername(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {String username=request.getParameter("username");UserService us=new UserService();User user =us.checkUsername(username);String msg = "";//判断if(user == null) {//用户名不存在 该用户名可用msg = "true";}else {//用户名存在，该用户名不可以使用msg = "false";}//以流的形式将msg响应过去response.getWriter().write(msg);}
register.jsp
function checkUsername(username) {var url="UserServlet";var data ={"username":username,"method":"checkUsername"};$.post(url,data,function(msg){//选中id为s_username的元素对象！！！！！！！！！！！！！！！！！！！var user = $("#s_username");//函数体if(msg == "true"){//用户名可用，增加内容提user.html("<font color='green'>用户名可以使用！！</font>");}else{//用户名已被占用user.html("<font color='red'>用户名已被占用，清更换一个！！</font>");}})}
1.3、头像上传
IO流文件的复制：
文件上传、下载简略图：
问题1：get和post的区别？
get：提交的数据在地址栏上，提交的数据量有限 (大概最多是2kb左右)
post: 提交的数据在请求体中，一般来说无上限
思考：做文件上传应该采用get还是post？
使用post方式
文件上传：
浏览器的步骤：
- type的值必须为file
- 请求方式必须为post
- 将form的属性enctype的值设置为multipart/form-data
默认提交的数据是键值对的形式：
设置multipart/form-data之后提交的数据形式：以二进制的形式
问题2：multipart/form-data设置之后，在Servlet中根据method获取的值变为null？
原因就是因为改变了数据的提交形式
服务器端的步骤：
- 在Servlet上加该注解@MultipartConfig：支持文件上传
作用：可以获取除了type=file类型的input里的参数名和值
问题3：加上该注解后，根据photo参数名获取的值为null
- 如果想获取文件的信息，我们要使用
Part part = request.getPart("photo");
问题4：上传文件到指定路径part.write(path+”\“+图片的名称);
如何获取上传图片的名称？
并上传到指定的地方
//获取图片信息，封装到Part对象Part part = request.getPart("photo");//获取上传的图片名称//Content-Disposition: form-data; name="photo"; filename="wukong.png"String str = part.getHeader("Content-Disposition");String filename = str.substring(str.indexOf("filename")+10, str.length()-1);//调用write上传到指定的位置String path = "D:\\xm_upload";part.write(path+"\\"+filename);
<br />**问题5：当头像名称相同时，会将之前的头像给覆盖了**<br />
public class UUIDUtils {public static String getUUID() {return UUID.randomUUID().toString().replaceAll("-", "");}}filename = UUIDUtils.getUUID()+filename;
问题6：如何通过服务器访问到指定上传图片位置的图片？
双击tomcat—-》选中Modules
问题7：user表中的photo字段存什么值呢？
存filename就可以
//设置photo属性值user.setPhoto(filename);
4、手机验证码登录
4.1 向手机发送验证码
思路分析：
代码实现：
login.jsp
<input onclick="sendCode()" id="zphone" type="button" value=" 获取手机验证码 " style="width: 138px;float: left;height: 53px;margin-left: 5px;">//发送验证码function sendCode(){//获取输入手机号的值var val = $("#phone_number").val();$.post("/dami/user",{method:"sendCode","phoneNumber":val},function(){})RemainTime();}
Servlet：
注意：不要忘了加if else判断
//发送验证码protected void sendCode(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//获取手机号String phoneNumber = request.getParameter("phoneNumber");//真实环境中 调用阿里云相关的api//Ali.sendCode(phoneNumber);//模拟环境String code = RandomUtils.getFourRandom();System.out.println("您收到的验证码为："+code+"，五分钟内有效，千万不要泄露喔！！！");}
4.2 手机验证码登录
login.jsp
<span id="sub" onclick="login()">登录</span>function login(){//获取输入手机号的值var val = $("#phone_number").val();//获取输入验证码的值var code = $("#code").val();//向服务器传递数据$.post("/dami/user",{"method":"login","phoneNumber":val,"code":code},function(msg){if(msg == "0"){$("#msg").html("该手机号尚未注册，请先去注册");}else if(msg =="2"){$("#msg").html("验证码输入错误")}else if(msg == "1"){alert("登录成功！！！！");}})}
Servlet：
//登录protected void login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//获取手机号String phoneNumber = request.getParameter("phoneNumber");//获取验证码String code = request.getParameter("code");//1、判断手机号是否注册UserService us = new UserService();User user = us.checkPhoneNumber(phoneNumber);String msg = "";if(user != null) {//手机号已经存在 可以登录//判断验证码是否正确String sessionCode = (String) request.getSession().getAttribute("code");if((phoneNumber + code).equals(sessionCode)) {//验证码正确msg = "1";}else {//验证码错误msg = "2";}}else {//手机不存在 不能登录msg = "0";}response.getWriter().write(msg);}
注意：需要同时在sendCode中加以下的代码：
request.getSession().setAttribute("code", phoneNumber+code);
Service：
public User checkPhoneNumber(String phoneNumber) {// TODO Auto-generated method stubreturn ud.checkPhoneNumber(phoneNumber);}
Dao：
public User checkPhoneNumber(String phoneNumber) {//1、准备sqlString sql = "SELECT * FROM USER WHERE phone_number = ?";//2、给占位符复制Object [] param = {phoneNumber};//3、执行sqltry {User user = qr.query(sql, new BeanHandler<User>(User.class),param);return user;} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}return null;}
若有收获，就点个赞吧
0 人点赞
