目录
- 轮播图
- 修改操作
- 删除操作
- 查询并展示所有轮播图
- 无状态的HTTP协议
- Cookie
- Cookie的原理
- Cookie的创建
- 获取Cookie
- 更新Cookie
- 设置cookie的声明周期
- 设置cookie访问路径
- Cookie优缺点
- Session
- Session原理
- 创建Session
- Session的使用
- sesion的生命周期
- Session的优缺点
- Cookie和Session的区别
- 登录功能实现
- 登录页面准备
- 登录请求
- 登录后台实现
- 登录页面处理
轮播图
修改操作
如果带图片：上传，修改数据库信息，删除旧图，
如果不带图片：不走上传，直接修改数据库信息，不走删除旧图
SlideServiceImpl
@Override
public void save(Slide slide, HttpServletRequest req,MultipartFile photo) throws Exception {
// 获取upload路径
String realPath = req.getServletContext().getRealPath("/upload");
File file = new File(realPath);
if(!file.exists()){// 如果路径不存在，就创建一个
file.mkdirs();
}
// 判断photo是否为空
if(photo!=null){// 做上传操作
// 获取文件名
//获取后缀
String oName = photo.getOriginalFilename(); // asldfsadf.jpg
String suffix = oName.substring(oName.lastIndexOf("."));
String name = System.currentTimeMillis()+suffix;
// 准备输入流
InputStream input = photo.getInputStream();
// 输出流
FileOutputStream output = new FileOutputStream(new File(realPath, name));
// 上传的核心代码
IOUtils.copy(input, output);
// 关流
output.close();
input.close();
// name path
slide.setName(name);
slide.setPath("/upload/"+name);
// System.out.println(slide);
}
// 添加数据库操作
if(slide.getId()==null){
if(photo!=null){
mapper.add(slide);
}
}else{// 修改操作
// 如果修改了图片，删除之前的图片
// 根据id查到之前的信息
Slide dbSlide = mapper.findOne(slide.getId());
// 修改
mapper.update(slide);
if(photo!=null){
String name = dbSlide.getName();
File file2 = new File(realPath, name);
if(file2.exists()){
file2.delete();
}
}
}
}
SlideMapper
<!-- Slide findOne(Long id); -->
<select id="findOne" resultType="slide">
select * from t_slide where id = #{id}
</select>
<!-- void update(Slide slide);
判断name和path是否为空，不为空则代表了修改了图片
-->
<update id="update">
update t_slide set
<if test="name != null">
name = #{name},
</if>
<if test="path != null">
path = #{path},
</if>
createDate = #{createDate}, enable = #{enable}
where id = #{id}
</update>
删除操作
slide.js
var delId;
// 删除操作 绑定的是删除按钮
$("body").on("click","a[data-id]",function(){
// 获取id
delId = $(this).data("id");
// alert(delId)
// 弹出模态框
$("#delModal").modal("show");
});
// 删除模态框确定按钮 绑定一个事件 发送删除请求
$("#delModalButton").click(function(){
// alert("......");
// 删除请求
$.ajax({
type: "post",
url: "/system/slide/delById",
data: {"id":delId}, // "id="+delId
dataType: "json",
success: function(msg){
if(msg.success){// 成功
// 关闭模态框
$("#delModal").modal("hide");
// 刷新数据 ????
GridManager.refreshGrid("demo-ajaxPageCode", true);
}else{
// 关闭模态框
$("#delModal").modal("hide");
// 失败提示
alert(msg.error)
}
}
});
});
SlideController
@RequestMapping("/delById")
@ResponseBody
public AjaxResult delById(Long id,HttpServletRequest req){
try {
service.delById(id,req);
return new AjaxResult();
} catch (Exception e) {
e.printStackTrace(); // 打印异常信息
return new AjaxResult(false, "删除失败");
}
}
SlideServiceImpl
@Override
public void delById(Long id, HttpServletRequest req) {
// 删除upload中的图片 删除数据库
// 获取父路径
String realPath = req.getServletContext().getRealPath("/upload");
Slide dbSlide = mapper.findOne(id);
String name = dbSlide.getName();
File file = new File(realPath, name);
// 删除upload下面的图片
if(file.exists()){
file.delete();
}
// 删除数据库
mapper.delById(id);
}
SlideMapper
<!-- void delById(Long id); -->
<delete id="delById">
delete from t_slide where id=#{id}
</delete>
查询并展示所有轮播图
页面加载发送查询请求，拿到数据后遍历动态拼接展示在对应位置
前台首页index.html
<div class="container swiper-container" id="banner">
<div class="swiper-wrapper" id="slidePhoto">
<!-- <a target="_blank" href="" class="swiper-slide swiper-lazy" data-background="/static/home/img/index/banner.png"><div class="swiper-lazy-preloader"></div></a> -->
</div>
<div class="swiper-pagination"></div>
<script>
$(function() {
// 发送请求， 查询所有的图片
$.ajax({
type: "post",
url: "/home/slide/findAll",
dataType: "json",
success: function(msg){
//console.debug(msg);
$.each(msg,function(){
$("#slidePhoto").append('<a target="_blank" href="" class="swiper-slide swiper-lazy" data-background="'+this.path+'"><div class="swiper-lazy-preloader"></div></a>')
});
// 轮播图效果
var bannerSwiper = new Swiper ('#banner.swiper-container', {
autoplay: { disableOnInteraction: false },
loop: true,
pagination: {
el: '.swiper-pagination',
bulletElement: 'div',
clickable: true
},
lazy: true
});
$("#banner .swiper-slide")
.mouseenter(function() {
bannerSwiper.autoplay.stop();
})
.mouseleave(function() {
bannerSwiper.autoplay.start();
});
}
})
});
</script>
</div>
HomeController
/**
* @Description:前台首页查询所有的轮播图
*/
@RequestMapping("/slide/findAll")
@ResponseBody
public List<Slide> findAllHome(){
return slideService.findAllHome();
}
SlideServiceImpl
@Override
public List<Slide> findAllHome() {
return mapper.findAllHome();
}
SlideMapper
<!-- List<Slide> findAll(); -->
<select id="findAllHome" resultType="slide">
select * from t_slide
</select>
无状态的HTTP协议
无状态：前一次请求和后一次请求之间没有关联（数据不可以共享）
会话：客户端与服务端的多次请求和响应的一个过程称之为一次会话，一次会话可以有多次请求。
会话跟踪技术：Cookie，Session，
Cookie
Cookie的原理
Cookie的创建
CookieController
@RequestMapping("/add")
public void addCookie(HttpServletResponse response) throws Exception{
// 创建cookie
Cookie c1 = new Cookie("id", "123"); // key和value都是string类型
Cookie c2 = new Cookie("name", "tom");
// 编码
Cookie c3 = new Cookie("address",URLEncoder.encode("湖北武汉","utf-8") ); // cookie的value不能是中文
// 把cookie添加到浏览器端
response.addCookie(c1);
response.addCookie(c2);
response.addCookie(c3);
// 向浏览器端输出success
response.getWriter().write("success");
}
第一次访问会在服务器端生成cookie并响应给浏览器
再次访问其他地址浏览器会在请求头加上cookie
获取Cookie
CookieController
@RequestMapping("/get")
public void getCookies(HttpServletRequest request) throws Exception{
// 获取cookies
Cookie[] cookies = request.getCookies();
for (Cookie cookie : cookies) {
System.out.println(cookie.getName()); // 获取cookie的key
// 解码 获取cookie的value
System.out.println(URLDecoder.decode(cookie.getValue(), "utf-8"));
}
}
更新Cookie
第一种：先获取相应的value – 遍历 – 判断 – setValue(String value)
第二种：添加一个相同name值的Cookie,直接覆盖
CookieController
@RequestMapping("/add")
public void addCookie(HttpServletResponse response) throws Exception{
// 创建cookie
Cookie c1 = new Cookie("id", "123"); // key和value都是string类型
Cookie c2 = new Cookie("name", "tom");
// 更新， 覆盖
Cookie c4 = new Cookie("name", "jack");
// 编码
Cookie c3 = new Cookie("address",URLEncoder.encode("湖北武汉","utf-8") ); // cookie的value不能是中文
// 把cookie添加到浏览器端
response.addCookie(c1);
response.addCookie(c2);
response.addCookie(c3);
response.addCookie(c4);
// 向浏览器端输出success
response.getWriter().write("success");
}
设置cookie的声明周期
生命周期：指的是Cookie中的数据能保存多久
默认请求下：浏览器会将Cookie保存在内存中，只要浏览器不关闭,数据都在。直到浏览器关闭，数据消失
如果设置了setMaxAge(int n)，
n<0：默认状态，保存在内存中，关闭浏览器数据失效
n=0：立即删除
n>0：保存在硬盘中，持续n秒(这时跟浏览器关不关闭无关，直到时间走完之后自动删除
例子：c1.setMaxAge(30)；//设置c1的声明周期为30s
@RequestMapping("/add")
public void addCookie(HttpServletResponse response) throws Exception{
// 创建cookie
Cookie c1 = new Cookie("id", "123"); // key和value都是string类型
Cookie c2 = new Cookie("name", "tom");
// 更新， 覆盖
Cookie c4 = new Cookie("name", "jack");
// 编码
Cookie c3 = new Cookie("address",URLEncoder.encode("湖北武汉","utf-8") ); // cookie的value不能是中文
// 设置存活时间 要在添加到浏览器之前设置
c1.setMaxAge(0); // 立即删除
c3.setMaxAge(10); // 存活时间是10秒
// 把cookie添加到浏览器端
response.addCookie(c1);
response.addCookie(c2);
response.addCookie(c3);
response.addCookie(c4);
// 向浏览器端输出success
response.getWriter().write("success");
}
设置cookie访问路径
Cookie不能跨路径获取，用c1.setPath(“/”);//设置/跟路径有效，解决跨路径问题
@RequestMapping("/add")
public void addCookie(HttpServletResponse response) throws Exception{
// 创建cookie
Cookie c1 = new Cookie("id", "123"); // key和value都是string类型
Cookie c2 = new Cookie("name", "tom");
// 更新， 覆盖
Cookie c4 = new Cookie("name", "jack");
// 编码
Cookie c3 = new Cookie("address",URLEncoder.encode("湖北武汉","utf-8") ); // cookie的value不能是中文
// 设置存活时间 要在添加到浏览器之前设置
c1.setMaxAge(0); // 立即删除
c3.setMaxAge(10); // 存活时间是10秒
// 设置cookie的跨路径
c4.setPath("/");
// 把cookie添加到浏览器端
response.addCookie(c1);
response.addCookie(c2);
response.addCookie(c3);
response.addCookie(c4);
// 向浏览器端输出success
response.getWriter().write("success");
}
Cookie优缺点
优点：减轻了服务器的压力
缺点：1.数据保存在浏览中,数据容易丢失,数据容易被获取,不安全。Cookie可以被禁用
2.保存数据类型有限,只能是字符串
3.保存的数据大小有限制,大约是4kb左右
Session
Session原理
创建Session
自动创建：直接访问JSP
手动创建：req.getSession()，SpringMvc中可以直接参数获取
SessionController
@RequestMapping("/create")
public String createSession( HttpServletRequest request,HttpSession session){
// 创建session 没有session就创建一个，如果有session，获取session
// HttpSession session1 = request.getSession();
// HttpSession session2 = request.getSession();
// System.out.println(session2==session1);
// 设置数据
session.setAttribute("name", "王天霸");
session.setAttribute("age", 20);
// 重定向
return "redirect:/session.jsp";
}
Session的使用
绑定数据：setAttribute(String name,String value)
获取数据：getAttribute(String name)
移除数据：removeAttribute(String name)
sesion的生命周期
sesion的生命周期
1.出生：创建Session对象；
2.invalidate()：销毁session对象
数据保存的时间
出生：添加数据的时候
数据消失：过期时间结束；
默认的过期时间是30分钟，如果没有自定义的web.xml，默认就在tomcat/conf/web.xml里；从不操作开始计时
自定义：
代码方式：session.setMaxInactiveInterval(int s)，不建议使用
web.xml方式：< session-config >,单位是分钟
Session的优缺点
优点：由于session是将数据保存在服务器端，安全性高相对较高
大小相对于Cookie来说大得多
数据类型没有限制
缺点：可能会影响服务器的性能
Cookie和Session的区别
Cookie：数据保持在浏览器端，不安全，大小有限制 ，类型有限制，但是服务器压力小
Session：数据保持在服务器端，安全，大小无限制 ，类型无限制，但是会影响服务器性能
登录功能实现
登录页面准备
准备前台页面 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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<%@include file="/WEB-INF/views/common/topStatic.jsp" %>
<title>CMS登陆</title>
</head>
<body>
<section class="material-half-bg">
<div class="cover"></div>
</section>
<section class="login-content">
<div class="logo">
<h1>cms后台登陆</h1>
</div>
<div class="login-box">
<form class="login-form" method="post" action="/system/login">
<h3 class="login-head"><i class="fa fa-lg fa-fw fa-user"></i>登陆</h3>
<div class="form-group">
<label class="control-label">用户名</label>
<input class="form-control" type="text" name="username" placeholder="用户名" autofocus>
</div>
<div class="form-group">
<label class="control-label">密码</label>
<input class="form-control" type="password" name="password" placeholder="密码">
</div>
<div class="form-group">
<div class="utility">
<div class="animated-checkbox">
<label>
<input type="checkbox"><span class="label-text">记住我</span>
</label>
</div>
</div>
</div>
<div class="form-group btn-container">
<button class="btn btn-primary btn-block"><i class="fa fa-sign-in fa-lg fa-fw"></i>登陆</button>
</div>
</form>
</div>
</section>
<%@include file="/WEB-INF/views/common/buttomStatic.jsp" %>
</body>
</html>
后台UserController做跳转登录页面
@Controller
@RequestMapping("/system")
public class UserController {
@RequestMapping("/login")
public String goLogin(){
return "login";
}
}
登录请求
页面设置登录按钮id
<div class="form-group btn-container">
<button id="loginBtn" class="btn btn-primary btn-block"><i class="fa fa-sign-in fa-lg fa-fw"></i>登陆</button>
</div>
加载发送请求
<script type="text/javascript">
$(function(){
$("#loginBtn").click(function(){
$(".login-form").ajaxSubmit({
success: function(msg){
console.debug(msg);
}
});
});
})
</script>
后台依次处理
UserController
@RequestMapping(value="/login",method=RequestMethod.POST)
@ResponseBody
public AjaxResult login(String username,String password){
try {
service.login(username,password);
return new AjaxResult();
} catch (Exception e) {
// 从exception中取错误信息
return new AjaxResult(false, e.getMessage());
}
}
登录后台实现
UserController
@RequestMapping(value="/login",method=RequestMethod.POST)
@ResponseBody
public AjaxResult login(String username,String password,HttpSession session){
try {
User user = service.login(username,password);
// 把用户信息放入session中
session.setAttribute("USER_IN_SESSION", user);
return new AjaxResult();
} catch (Exception e) {
// 从exception中取错误信息
return new AjaxResult(false, e.getMessage());
}
}
UserServiceImpl
@Override
public User login(String username, String password) throws Exception {
// 1.通过名称去数据库查询信息，user对象
User user = mapper.findUserByName(username);
// 判断user是否为null
if(user==null){
throw new Exception("用户名不存在");
}else{// 用户存在 ，判断密码是否相同
if(!user.getPassword().equals(password)){
throw new Exception("密码错误");
}else{// 登录成功
return user;
}
}
}
UserMapper
<!-- User findUserByName(String username); -->
<select id="findUserByName" resultType="user">
select * from t_user where username=#{username}
</select>
登录页面处理
tips：
<!-- type="button" type的值不指定就默认是submit走同步请求不走异步请求 -->
<div class="form-group btn-container">
<button type="button" id="loginBtn" class="btn btn-primary btn-block"><i class="fa fa-sign-in fa-lg fa-fw"></i>登陆</button>
</div>
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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<%@include file="/WEB-INF/views/common/topStatic.jsp" %>
<title>CMS登陆</title>
</head>
<body>
<section class="material-half-bg">
<div class="cover"></div>
</section>
<section class="login-content">
<div class="logo">
<h1>cms后台登陆</h1>
</div>
<div class="login-box">
<form class="login-form" method="post" action="/system/login">
<h3 class="login-head"><i class="fa fa-lg fa-fw fa-user"></i>登陆<span id="loginError"></span></h3>
<div class="form-group">
<label class="control-label">用户名</label>
<input class="form-control" type="text" name="username" placeholder="用户名" autofocus>
</div>
<div class="form-group">
<label class="control-label">密码</label>
<input class="form-control" type="password" name="password" placeholder="密码">
</div>
<div class="form-group">
<div class="utility">
<div class="animated-checkbox">
<label>
<input type="checkbox"><span class="label-text">记住我</span>
</label>
</div>
</div>
</div>
<div class="form-group btn-container">
<button type="button" id="loginBtn" class="btn btn-primary btn-block"><i class="fa fa-sign-in fa-lg fa-fw"></i>登陆</button>
</div>
</form>
</div>
</section>
<%@include file="/WEB-INF/views/common/buttomStatic.jsp" %>
<script type="text/javascript">
$(function(){
$("#loginBtn").click(function(){
$(".login-form").ajaxSubmit({
success: function(msg){
if(msg.success){// 成功
// 跳转到后台首页
location.href="/system/index";
}else{
$("#loginError").html("<font color='red' size='4'>"+msg.error+"</font>");
}
}
});
});
})
</script>
</body>
</html>
