Web前端（十四）-VRD、首页分类展示、轮播图、登录、会话管理、Cookie和Session、Cookies记住用户名和密码、Session记住登录状态

VRD

• 准备工作:

  1. 创建工程vrd，11改8，打3个勾

  2. 把昨天工程5-2的application.properties里面内容复制到新工程，把里面的weibodb改成vrddb

  3. 建库建表

      create database vrddb charset=utf8;
      use vrddb;
      create table user(id int primary key auto_increment,username varchar(50),password varchar(50))charset=utf8;
      insert into user values(null,'admin','123456');

  4. 创建entity包下的User实体类和mapper包下的UserMapper，还有controller包下的UserController

 

首页分类展示功能

1. 建表和插入数据

    create table category(id int primary key auto_increment,name varchar(20))charset=utf8;
    insert into category values(null,'手绘'),(null,'次时代'),(null,'雕刻'),(null,'室内设计'),(null,'地编');

2. 创建Category实体类

3. 创建CategoryMapper，里面提供一个selectAll方法

4. 创建header.js，并在index.html页面中引入，在header.js里面创建vue对象，负责管理header标签的展示，created里面请求所有分类信息，并赋值给vue里面的数组变量，让页面中分类信息和数组变量进行绑定，这样分类数组数据一得到页面就会跟着发生改变。

 

轮播图展示功能

1. 建表和插入数据

    create table banner(id int primary key auto_increment,url varchar(255));
    insert into banner values(null,'images/banner0.jpg'),(null,'images/banner1.jpg'),(null,'images/banner2.jpg');

2. 创建Banner实体类

3. 创建BannerMapper，里面提供selectAll方法，并在单元测试类中测试.

4. 创建banner.js，并在index.html页面中引入，创建Vue对象负责管理表示轮播图的标签，在created里面发请求获取轮播图数组赋值给vue对象中的b_arr数组变量，让页面中轮播图和b_arr数组绑定。

 

登录功能

1. 工程中添加login.html和admin.html两个页面

2. 在首页修改管理员入口的href="/login.html"

3. 在login.html里面添加vue相关代码，给登录按钮添加点击事件，发出登录请求

4. 创建UserController，并添加login方法处理登录请求

 

会话管理

• 为什么使用会话管理?

  客户端和服务器之间进行数据通讯，遵循的是HTTP协议，HTTP协议属于无状态协议(一次请求对应一次响应，响应完则断开连接)，服务器是无法跟踪客户端请求的，通过会话管理中的Cookie和Session两种技术可以实现跟踪客户端请求的需求。通过Cookie技术可以让服务器给客户端添加一个标识，添加完之后客户端每次发出请求时都会带上这个标识，这样服务器就能够识别此客户端了，但是这种技术数据是保存在客户端的，存在被篡改的风险，Session的出现就是为了解决这个问题，因为Session是把数据保存在服务器的，Session是基于Cookie实现的，使用Session客户端需要通过Cookie保存一个id(类似银行卡,只是一个凭证,没有其它数据)。

 

Cookie和Session的区别：

• Cookie：作用类似打孔式会员卡，数据保存在客户端

  • 保存时间： 默认数据保存在客户端浏览器的内存中，当浏览器关闭时数据会被清除，可以自定义保存时间，自定义时间后数据会保存到磁盘中，时间到了之后才会被清除

  • 保存内容：cookie里面只能保存字符串，而且数据量只能是4k以内

  • 应用场景：记住用户名和密码 (因为使用Cookie可以保存任意时间)

• Session： 作用类似于银行卡，数据保存在服务器

  • 保存时间：数据是保存在服务器内存中，保存时间为半个小时左右，而且程序关闭或重新启动时Session里面的数据都会被清除

  • 保存内容：可以保存任何对象类型的数据，并且没有大小限制

  • 应用场景：记住登录状态

 

通过Cookie实现记住用户名和密码

• 执行流程:

  • 在登录成功时判断是否需要记住用户名和密码，通过Cookie保存用户名和密码

  • 在login.html登录页面把保存在cookie里面的用户名和密码取出，赋值给vue里面的变量，文本框和密码框和vue里面的变量进行绑定，当变量有值时页面会自动跟着改变。

 //取出浏览器中通过cookie保存的用户名和密码
 let cookie = document.cookie;
 //username=admin; password=123456
 let cookieArr = cookie.split(";");
 //遍历每一个cookie
 for (let c of cookieArr) {
     //通过=分割得到name和value
     let arr = c.split("=");let name = arr[0];let value = arr[1];
     if (name.trim()=="username"){
         console.log("用户名="+value);
         vm.username = value;
     }
     if (name.trim()=="password"){
         console.log("密码="+value);
         vm.password=value;
     }
 }

 

通过Session记住登录状态

• 在UserController中登录成功时，把用户对象保存到Session里

• 并在UserController中提供检查是否登录过的方法

@RequestMapping("/checklogin")
 public boolean check(HttpSession session){
     //取出登录成功时保存进Session里面的user对象
     User user = (User) session.getAttribute("user");
     //有值说明登录过 返回true 反之false
     return user==null?false:true;
 }

• 在header.js中发出请求，询问是否登录过，把结果给到vue中的变量isLogin

• 在index.html页面中让超链接是否显示和isLogin变量绑定