商城项目第一天
功能模块
- 用户模块
- 登录
- 注册
- 退出
- 修改
- 商品模块
- 商品的展示
- 分类展示
- 购物车模块
- 订单模块
- 在线支付
- 后台管理模块
今日任务
- 完成用户模块
- 注册
- 登录
- 退出登录
前后端分离
所有用到的展现数据都是后端通过异步接口(AJAX/JSON)的方式提供的，前端只管展现
前端: 前端开发人员复制页面的显示效果,AJAX从服务器端获取数据,如何展示数据由前端开发人员决定
后端:Web服务器开发人员负责将JSON数据回传客户端,无需在对客户端显示内内容控制
开发环境搭建
- Maven骨架创建Web应用程序
- 前端开发工具编写网页
AJAX跨域访问
跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。
//允许AJAX跨域访问
response.setHeader("Access-Control-Allow-Origin", "http://www.itheima342.com:8020");
//AJAX访问允许客户端保存cookie
response.setHeader("Access-Control-Allow-Credentials","true");
BaseServlet抽取
public class BaseServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//获取方法调用的参数
String method = request.getParameter("method");
Method m = this.getClass().getDeclaredMethod(method, HttpServletRequest.class, HttpServletResponse.class);
m.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数据,跳转页面
注册页面
<script type="text/javascript">
// 页面加载完成
$(function(){
// 给 注册按钮绑定事件
$("#regBtn").click(function(){
// 获取表单数据 当做参数传递
var params = $("#regForm").serialize();
// 参数中有个隐藏的域 method=register
// 这个代表我们请求的时候 处理业务的那个方法名
// alert(params);
// 设置一个访问 url
var url = "/user";
// $.ajax({
// url:url,
// data:params,
// dataType:"json",
// success:function(data){
//
// }
// }) //以前写法 现在 我们有前端开发人员了 她会帮我们 封装一些操作
// 用前端人员封装好的 js代码 发送 Ajax请求
HM.ajax(url,params,function(data){// data json对象{code:1,message:注册成功}
// 就已经将请求发送给 后端的服务器
if(data.code==1){
alert(data.message);
location.href="http://www.itheima342.com:8020/web/login.html";
}
});
})
})
</script>
UserServlet
/**
* 写一个 注册方法 名字 register
*/
public void register(HttpServletRequest request, HttpServletResponse response)
throws InvocationTargetException, IllegalAccessException,
IOException {
// 获取请求参数中的参数列表
// 请求对象
Map<String, String[]> map =
request.getParameterMap();
// 创建用户对象
User user = new User();
// 使用工具类 完成封装
BeanUtils.populate(user,map);
//设置id
user.setUid(UUIDUtils.getUUID());
// 设置 激活状态
user.setState(Constant.JI_HUO);
System.out.println(user);
// 得到的user对象 没有 id state激活状态 1 remark 不写
// 将对象给service
service.register(user);
// 给 请求者响应
// 先将 响应信息 封装到 Result对象中
Result result = new Result(Constant.SUCCESS, "注册成功");
// 通过 json-lib JSONObject.formObject() 将对象转换成json对象
String s = JSONObject.fromObject(result).toString();
response.getWriter().write(s);
}
UserService
public void register(User user){
userDao.register(user);
}
UserDao
/*
* 实现用户注册
* user对象数据,存储数据库
* user对象,业务层传递
*/
/**
* 完成 用户注册 用户注册 其实就是 完成添加数据
* @param u
* @throws SQLException
*/
public void register(User u) throws SQLException {
String sql = "insert into user values(?,?,?,?,?,?,?,?,?,?)";
Object[] params={u.getUid(),u.getUsername(),u.getPassword(),
u.getName(),u.getEmail(),u.getBirthday(),
u.getGender(),u.getState(),u.getCode(),
u.getRemark()};
// 执行 sql
qr.update(sql,params);
}
用户登录实现
登录实现步骤:
- 客户端发起AJAX请求,表单数据提交到服务器Servlet
- Servlet接收客户端请求数据并传递到业务层
- 调用业务层方法获取返回值
- 业务层调用持久层方法
- Servlet将登录结果封装成对象,返回JSON数据
- 登录成功保存session
- 用户名姓名保存在cookie中,回写浏览器
- 客户端判断JSON数据,跳转页面
- 客户端在页面顶部显示登录的用户名
登录功能页面
//页面加载完成
$(function(){
// 登陆按钮绑定事件
$("#submit").click(function(){
// 获取表单数据
var params = $("#loginForm").serialize();
var url="/user";
// 发送请求
HM.ajax(url,params,function(data){
if(data.code==0){//登陆失败
$("#loginMsg").html(data.message).css("color","red");
}
if(data.code==1){//登陆成功
location.href="http://www.itheima342.com:8020/web/index.html";
}
});
})
})
UserServlet
/**
* 完成登陆功能
* 处理请求
* 获取用户名和密码
* 传递给业务层 接收返回值User
* 判断User对象
* 是空 响应对象封装的时候 封装 失败信息
*
* 不是空
* 代表用户登陆成功
* 将user对象 存储在session中
*
* 创建一个cookie 将username存储
* 写给客户端
* 在进行响应
*/
public void login(HttpServletRequest request, HttpServletResponse response)
throws IOException {
// 1:获取用户名和密码
String username = request.getParameter("username");
String password = request.getParameter("password");
// 2:传递service
User user = service.login(username, password);
// 3:判断user对象
if(user==null){
// 登陆失败
// 先将 响应信息 封装到 Result对象中
Result result = new Result(Constant.FAILS, "登陆失败");
// 通过 json-lib JSONObject.formObject() 将对象转换成json对象
String s = JSONObject.fromObject(result).toString();
response.getWriter().write(s);
}else{
// 登陆成功
// 存储到session中
request.getSession().setAttribute("user",user);
// 将用户名 以cooe形式 缓存在浏览器端
Cookie cookie = new Cookie("username",username);
// 设置cookie参数
cookie.setMaxAge(60*60);
cookie.setPath(request.getContextPath());
// 设置 cookie允许的跨域操作 存储
cookie.setDomain("itheima342.com");
response.addCookie(cookie);
// 先将 响应信息 封装到 Result对象中
Result result = new Result(Constant.SUCCESS, "登陆成功");
// 通过 json-lib JSONObject.formObject() 将对象转换成json对象
String s = JSONObject.fromObject(result).toString();
response.getWriter().write(s);
}
}
UserService
@Override
public User login(String username, String password) {
User user = null;
try {
user=dao.login(username,password);
} catch (SQLException e) {
e.printStackTrace();
}
return user;
}
UserDao
@Override
public User login(String username, String password) throws SQLException {
String sql = "select * from user where username=? and password=?";
Object[] params = {username,password};
return qr.query(sql, new BeanHandler<>(User.class), params);
}
}
Header页面的用户名显示
<script type="text/javascript">
// 页面加载之后做
$(function(){
// 先从浏览器中获取cookie
// alert(document.cookie);
var username = HM.cookieValue("username");
// alert(username);
if(username){
var str = "<li>欢迎"+username+"</li>\n" +
"\t\t\t<li><a href=\"javascript:;\" \"logout()\">退出登陆</a></li>\n" +
"\t\t\t<li><a href=\"http://www.itheima342.com:8020/web/view/cart/list.html\">购物车</a></li>\n" +
"\t\t\t<li><a href=\"http://www.itheima342.com:8020/web/view/order/list.html\">我的订单</a></li>";;
// 设置 id="login-menu" 内容
$("#login-menu").html(str);
}
})
function logout(){
// 向服务器发送请求
HM.ajax("/user","method=logout",function(data){
if(data.code==2){//退出登陆
location.href="http://www.itheima342.com:8020/web/login.html";
}
})
}
</script>
退出登录
实现步骤
- 点击退出登录按钮
- 服务器端销毁session对象
- 客户端跳转到首页
- 页面头部不在显示登录的用户名
UserServlet
/*
退出登陆
cookie 要清理 设置一遍 一模一样只不过 时间为0
session销毁
*/
public void logout(HttpServletRequest request, HttpServletResponse response)
throws IOException {
// 将用户名 以cooe形式 缓存在浏览器端
Cookie cookie = new Cookie("username",null);
// 设置cookie参数
cookie.setMaxAge(0);
cookie.setPath(request.getContextPath());
// 设置 cookie允许的跨域操作 存储
cookie.setDomain("itheima342.com");
response.addCookie(cookie);
// 销毁session
request.getSession().invalidate();
// 先将 响应信息 封装到 Result对象中
Result result = new Result(Constant.LOGOUT, "退出登陆");
// 通过 json-lib JSONObject.formObject() 将对象转换成json对象
String s = JSONObject.fromObject(result).toString();
response.getWriter().write(s);
}