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變數繫結