JavaEE学习日志(六十八)
- 黑马商城项目(一)
- 总体需求
- 本章功能实现
- 域名解析服务器
- 前后端分离
- AJAX跨域访问
- BaseServlet抽取
- 用户注册
- 实现步骤
- 前端
- UserServlet
- UserService
- UserDao
- 用户登录
- 实现步骤
- 前端
- UserServlet
- UserService
- UserDao
- 退出登录
- 实现步骤
- 前端
- UserServlet
黑马商城项目(一)
总体需求
- 用户模块
- 登录
- 注册
- 退出登录
- 修改
- 商品模块
- 商品的展示
- 分类展示
- 购物车模块
- 订单模块
- 在线支付
- 后台管理模块
本章功能实现
完成用户(User)模块的:
- 注册
- 登录
- 退出登录
域名解析服务器
前后端分离
AJAX跨域访问
跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。
//允许AJAX跨域访问
response.setHeader("Access-Control-Allow-Origin", "http://www.itheima326.com:8020");
//AJAX访问允许客户端保存cookie
response.setHeader("Access-Control-Allow-Credentials","true");
BaseServlet抽取
package com.itheima.web;
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 java.io.IOException;
import java.lang.reflect.Method;
public abstract class BaseServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//获取客户端提交的数据,方法名
String md = request.getParameter("method");
Class clazz = this.getClass();
Method method = clazz.getMethod(md, HttpServletRequest.class, HttpServletResponse.class);
method.invoke(this, request, response);
}catch (Exception ex){
ex.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
用户注册
实现步骤
- 客户端发起AJAX请求,表单数据提交到服务器Servlet
- Servlet接收客户端请求数据并封装JavaBean
- 调用业务层方法
- 业务层调用持久层方法
- Servlet将注册结果封装对象,向客户端回写JSON数据
- 客户端判断JSON数据,跳转页面
前端
注意:
- 在
<form>
表单中加入<input type="hidden" name="method" value="register">
可以多提交一组隐藏的数据 -
$("#regForm").serialize()
可以获得表单中所有提交的数据
<script type="text/javascript">
$(function(){
//注册按钮绑定事件
$("#regBut").click(function(){
//把表单数据提交到服务器,异步提交
var params = $("#regForm").serialize();
//把数据以AJAX形式提交到Servlet
//工具函数,传递url,参数,回调函数
HM.ajax("/user",params,function(data){
//data就是响应回的json
if(data.code==1){
//页面跳转到登录页面
location.href="http://www.itheima331.com:8020/web/login.html"
}
});
});
});
</script>
UserServlet
注意:
- 使用BaseServlet抽取
- 封装一个响应结果对象,封装3个成员
状态码 int
状态码信息 String
响应数据 Object - 使用bean工厂,传递UserService接口,创建UserService接口的实现类对象
package com.itheima.web;
import com.itheima.domain.User;
import com.itheima.service.UserService;
import com.itheima.utils.BeanFactory;
import com.itheima.utils.UUIDUtils;
import net.sf.json.JSONObject;
import org.apache.commons.beanutils.BeanUtils;
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 java.io.IOException;
import java.util.Map;
@WebServlet(urlPatterns = "/user")
public class UserServlet extends BaseServlet {
//bean工厂,获取业务层接口实现类对象
private UserService userService = BeanFactory.newInstance(UserService.class);
/*
请求,处理客户端的注册功能
获取表单数据Map
把数据封装到JavaBean对象
调用业务层传递JavaBean
响应回客户端
*/
public void register(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException{
Map<String, String[]> map = request.getParameterMap();
User user = new User();
try {
BeanUtils.populate(user,map);
}catch (Exception ex){
ex.printStackTrace();
}
//user对象数据不全,需要手动设置
//设置激活码,1
user.setState(1);
//设置主键
user.setUid(UUIDUtils.getUUID());
userService.register(user);
//结果对象创建
//封装状态码和对应的信息,不要写死
Result result = new Result(Result.SUCCESS,"注册成功");
//对象转成json
//print默认调用toString()
response.getWriter().print(JSONObject.fromObject(result));
}
}
UserService
使用bean工厂,传递UserDao接口,创建UserDao接口的实现类对象
package com.itheima.service.impl;
import com.itheima.dao.UserDao;
import com.itheima.domain.User;
import com.itheima.service.UserService;
import com.itheima.utils.BeanFactory;
import java.sql.SQLException;
public class UserServiceImpl implements UserService {
//bean工厂,获取dao接口实现类
private UserDao userDao = BeanFactory.newInstance(UserDao.class);
/*
接收web层传递的user
调用dao传递user
*/
@Override
public void register(User user) {
try {
userDao.register(user);
} catch (SQLException e) {
e.printStackTrace();
}
}
}
UserDao
package com.itheima.dao.impl;
import com.itheima.dao.UserDao;
import com.itheima.domain.User;
import com.itheima.utils.C3P0UtilsXML;
import org.apache.commons.dbutils.QueryRunner;
import java.sql.SQLException;
public class UserDaoImpl implements UserDao {
private QueryRunner qr = new QueryRunner(C3P0UtilsXML.getDataSource());
/*
实现用户注册
user对象数据,存储到数据库中
user对象是业务层传递的
*/
@Override
public void register(User user) throws SQLException {
//添加数据
String sql = "insert into user values (?,?,?,?,?,?,?,?,?,?)";
//数据封装到数组中
Object[] params = {
user.getUid(),
user.getUsername(),
user.getPassword(),
user.getName(),
user.getEmail(),
user.getBirthday(),
user.getGender(),
user.getState(),
user.getCode(),
user.getRemark()
};
qr.update(sql, params);
}
}
用户登录
实现步骤
- 客户端发起AJAX请求,表单数据提交到服务器Servlet
- Servlet接收客户端请求数据并传递到业务层
- 调用业务层方法获取返回值
- 业务层调用持久层方法
- Servlet将登录结果封装成对象,返回JSON数据
- 登录成功保存session
- 用户名姓名保存在cookie中,回写浏览器
- 客户端判断JSON数据,跳转页面
- 客户端在页面顶部显示登录的用户名
前端
第一部分:登录按钮事件
<script type="text/javascript">
$(function(){
//登录按钮绑定点击事件
$("#submit").click(function(){
//获取表单数据,用户名和密码
var params = $("#loginForm").serialize();
//把数据提交到服务器端
HM.ajax("/user",params,function(data){
//data是响应回来的json
if(data.code==1){
//登录成功,跳转到首页
location.href="http://www.itheima331.com:8020/web/index.html";
}else if(data.code==0){
//登录失败,json的键message取出数据
$("#loginMsg").html(data.message).css("color","red");
}
});
});
});
</script>
第二部分:显示欢迎,xx
<script type="text/javascript">
$(function(){
//取出cookie中的用户名,填充到菜单中
//工具方法cookieValue函数,传递cookie键,返回值
var cookieValue = HM.cookieValue("username");
//判断取出的cookie值
if(cookieValue==null || cookieValue==""){
//没有cookie,没有登陆,显示登录注册
var s = "<li><a href=\"http://www.itheima331.com:8020/web/login.html\">登录</a></li>\n" +
"\t\t\t<li><a href=\"http://www.itheima331.com:8020/web/register.html\">注册</a></li>\n" +
"\t\t\t<li><a href=\"http://www.itheima331.com:8020/web/view/cart/list.html\">购物车</a></li>\n" +
"\t\t\t<li><a href=\"http://www.itheima331.com:8020/web/view/cart/list.html\">我的订单</a></li>";
$("#login-menu").html(s);
}else{
//有cookie,显示你好,xx
var s = "<li>欢迎,"+cookieValue+"</li>\n" +
"\t\t\t<li><a href=\"http://www.itheima331.com:8020/web/register.html\">退出登录</a></li>\n" +
"\t\t\t<li><a href=\"http://www.itheima331.com:8020/web/view/cart/list.html\">购物车</a></li>\n" +
"\t\t\t<li><a href=\"http://www.itheima331.com:8020/web/view/cart/list.html\">我的订单</a></li>";
$("#login-menu").html(s);
}
});
</script>
UserServlet
/*
请求,处理客户端登录
获取用户名和密码
传递业务层,接收返回值User
判断User对象的值
user!=null 登录成功
把user对象存储到session域
创建cookie,保存用户名
写回客户端浏览器
进行响应json
user==null 登录失败
进行响应json
*/
public void login(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException{
String username = request.getParameter("username");
String password = request.getParameter("password");
//调用业务层方法,传递用户名密码,获取返回值User
User user = userService.login(username, password);
//判断user对象
if(user!=null){
//查询到数据,登录成功
//user对象存储到session
request.getSession().setAttribute("user",user);
//创建cookie对象,保存用户名
Cookie cookie = new Cookie("username",username);
//设置cookie参数
cookie.setMaxAge(60*10);
cookie.setPath(request.getContextPath());
//设置cookie携带的域名,域名是顶级域名
cookie.setDomain("itheima331.com");
response.addCookie(cookie);
//进行响应json
//设置响应的结果对象
Result result = new Result(Result.SUCCESS,"登录成功");
response.getWriter().print(JSONObject.fromObject(result));
}else {
//没查到
//进行响应json
//设置响应的结果对象
Result result = new Result(Result.FAILS,"登录失败,请检查用户名密码");
response.getWriter().print(JSONObject.fromObject(result));
}
}
UserService
/*
用户登录方法
web层传递用户名和密码
调用dao层传递参数,结果返回到web层
*/
@Override
public User login(String username, String password) {
User user = null;
try {
user= userDao.login(username,password);
} catch (SQLException e) {
e.printStackTrace();
}
return user;
}
UserDao
/*
用户登录方法
业务层传递用户名密码
作为条件查询数据表
返回User对象
*/
@Override
public User login(String username, String password) throws SQLException {
//拼写查询的sql语句
String sql = "select * from user where username = ? and password = ?";
return qr.query(sql,new BeanHandler<User>(User.class),username,password);
}
退出登录
实现步骤
- 点击退出登录按钮
- 服务器端销毁session对象
- 客户端跳转到首页
- 页面头部不在显示登录的用户名
前端
<script type="text/javascript">
$(function(){
//取出cookie中的用户名,填充到菜单中
//工具方法cookieValue函数,传递cookie键,返回值
var cookieValue = HM.cookieValue("username");
//判断取出的cookie值
if(cookieValue==null || cookieValue==""){
//没有cookie,没有登陆,显示登录注册
var s = "<li><a href=\"http://www.itheima331.com:8020/web/login.html\">登录</a></li>\n" +
"\t\t\t<li><a href=\"http://www.itheima331.com:8020/web/register.html\">注册</a></li>\n" +
"\t\t\t<li><a href=\"http://www.itheima331.com:8020/web/view/cart/list.html\">购物车</a></li>\n" +
"\t\t\t<li><a href=\"http://www.itheima331.com:8020/web/view/cart/list.html\">我的订单</a></li>";
$("#login-menu").html(s);
}else{
//有cookie,显示你好,xx
var s = "<li>欢迎,"+cookieValue+"</li>\n" +
"\t\t\t<li><a href=\"#\" οnclick='loginOut()'>退出登录</a></li>\n" +
"\t\t\t<li><a href=\"http://www.itheima331.com:8020/web/view/cart/list.html\">购物车</a></li>\n" +
"\t\t\t<li><a href=\"http://www.itheima331.com:8020/web/view/cart/list.html\">我的订单</a></li>";
$("#login-menu").html(s);
}
});
//退出登录的函数
function loginOut(){
//发送请求,退出登录
HM.ajax("/user","method=loginOut",function(data){
if(data.code==1){
location.href="http://www.itheima331.com:8020/web/index.html";
}
});
}
</script>
UserServlet
/*
客户端的退出登录
销毁session对象
销毁客户端的cookie
*/
public void loginOut(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException{
//销毁session对象
request.getSession().invalidate();
//销毁客户端的cookie
//创建cookie对象,保存用户名
Cookie cookie = new Cookie("username",null);
//设置cookie参数
cookie.setMaxAge(0);
cookie.setPath(request.getContextPath());
//设置cookie携带的域名,域名是顶级域名
cookie.setDomain("itheima331.com");
response.addCookie(cookie);
Result result = new Result(Result.SUCCESS,"退出成功");
response.getWriter().print(JSONObject.fromObject(result));
}