暑期學習與“懶人電商”專案經驗總結

該文章作為本人暑期學習和實戰的經驗總結，如有錯誤請各位大佬指正，

一.HTML與CSS的知識點總結

(1) autocomplete="off"

input表單默認為autocomplete="on"，

該屬性會記錄用戶在input中輸入的資訊，有時會暴露用戶的隱私資料，故要設定該屬性保障用戶資訊隱私安全，多用于注冊，登錄等重要資訊的輸入框上，

如：

<input type="text" autocomplete="off" />

如果想整個表單元素都不使用autocomplete功能，則在form標簽中添加autocomplete="off"，

如：

<form action="#"autocomplete="off">

   <input type=”text” />

</form>

(2) type=”button”

form表單中button如果不做設定默認為type=”submit”，該屬性會把表單資訊提交到action屬性中設定的url地址，如果沒有設定action，則默認提交給當前頁面，由于該屬性的存在，點擊提交按鈕后會直接提交資訊，不會執行ajax命令，因此出現了后端接收到資料，而前端的ajax不執行的情況，要避免該情況要添加type=”button”，

如：<button type=”button”>提交</button>

(3) Switch開關

<input type="checkbox" class="switch">

/* 必須是input為checkbox才能實作 */
.switch{
      outline:none;
      appearance:none;
      -webkit-appearance:none;
      -moz-appearance:none;
      position:relative;
      width:40px;
      height:20px;
      background:#ccc;
      border-radius:10px;
      transition:border-color .3s,background-color .3s; 
}
.switch::after {
       content: '';
       display: inline-block;
       width: 1rem;
       height:1rem;
       border-radius: 50%;
       background: #fff;
       box-shadow: 0, 0, 2px, #999;
       transition:.4s;
       top: 2px;
       position: absolute;
       eft: 2px;
   }

   .switch:checked {
       background: rgb(19, 206, 102);
   }
/* 當被選中時：偽元素顯示下面樣式 位置發生變化 */
   .switch:checked::after {
       content: '';
       position: absolute;
       left: 55%;
       top: 2px;
}

效果圖如下：

當然這是最笨的原生寫法，

開發常用的組件庫（Element-Ui）：https://element.eleme.cn/#/zh-CN/component/switch

效果如圖：

/*系結v-model到一個Boolean型別的變數，可以使用active-color屬性與inactive-color屬性來設定開關的背景色，*/
<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> 
</el-switch>
<script>
  export default { 
     data() { 
       return {
         value: true
          }
        } 
      }; 
</script>

二.Javascript,JQuery,Ajax,Vue等知識點總結

(1) localStorage與token

詳見：localStorage和sessionStorage區別 - 前端—小白 - 博客園

我的做法是在登錄成功后在Ajax的success里面進行本地儲存接收到的token，在每次需要提交的時候再拿出來傳給后端，

//Ajax的success函式
//登錄成功的時候儲存
success: function (result) {
   token=result.data;
   var localStorage = window.localStorage;
   localStorage.setItem("token", token);
   window.location.href = "index.html";
   // console.log(token)
},

//要用的時候取出來
var token = localStorage.getItem('token');

//放在Ajax的headers里面傳給后端
headers: { 'token': token},

(2) 兩個html之間的值傳值??????從一個html頁面傳值到另一個頁面,兩個html之間的值傳遞(js location.search用法)_陳朝的博客-CSDN博客_html傳值給另一個html
我的做法：

hobby: function (e) {
   var that = e.currentTarget.id;
   window.location.href = "xiangxi.html?valus=" + that;//帶值跳轉到詳細頁面
},

//詳細頁面接收到資料并獲取
var id;
var url = window.location.search; //獲取url中"?"符后的字串
if (url.indexOf("?") != -1) {
   id = url.substr(url.indexOf("=") + 1);
}

這樣就可以拿到某件商品的id，從后端精確拿到資料進行渲染，

(3) Ajax獲取Map集合

如：'華為手機'(鍵):2999（值）

那么Ajax里面的success應該這么寫：

success : function(result) {
   var Data=result.data;
   for(var key in Data) {
      console.log("鍵:"+key+"值:"+Data[key])
    }
},

得到的樣式：

(4) window.onload

這個有點坑，只能用一次或者不用，出現多個會出現奇奇怪怪的問題...

(5) 銷售量和銷售額的切換

如圖:

<div class="ph-top" >
  <span>商品銷售排行</span>
  <button class="xl" @click="qiehuan2" :class="{x:checked}">銷售額</button>
  <button class="xe" @click="qiehuan1" :class="{x:ischecked}">銷售量</button>
</div>

設定兩個變數進行控制x這個class類，加上x則按鈕變色

 data: {
       goods: [],
       checked: false,
       ischecked: true
 },

通過滑鼠點擊事件切換按鈕和資訊，發起Ajax請求

qiehuan1() {
            //銷售量
            var token = localStorage.getItem('token');
            this.ischecked = true;
            this.checked = false;
            var self = this;
            $.ajax({
                type: "post",
                url: "http://localhost:9000/sales/getInfoList",
                headers: { 'token': token },
                dataType: "json",
                data: {},
                success: function (result) {
                    //console.log(result)
                    self.goods = [];
                    $.each(result.data, function (i, item) {
                       self.goods.push({
                           name: i,
                           value: item
                        })
                     })
                },
                error: function () { }
             })
},

根據ischecked的狀態修改下方銷售量/銷售額

<th class="p4" v-html="ischecked? '銷售量' :'銷售額' ">
  {{ischecked}}
</th>

(6) 新學到一個插件庫，分享一下，

https://echarts.apache.org/handbook/zh/get-started/

(7) created里面this的指向問題

如果在success里面用this，報錯找不到goods，

原本的理解是這里的this指向Vue物件，但是這里的this指向的是window物件，所以在window物件下找不到goods而報錯，

解決方法很簡單，把指向Vue物件保存給一個變數self，后面參考self修改資料即可，

(8) vue的生命周期

Vue實體的產生程序

① beforeCreate在實體初始化之后,資料觀測和事件配置之前被呼叫，

② created在實體創建完成后被立即呼叫，

③ beforeMount在掛載開始之前被呼叫，

④ mounted el被新創建的vm.$el替換,并掛載到實體上去之后呼叫該鉤子，

⑤ beforeUpdate資料更新時呼叫,發生在虛擬DOM打補丁之前，

⑥ updated由于資料更改導致的虛擬DOM重新渲染和打補丁,在這之后會呼叫該鉤子，

⑦ beforeDestroy實體銷毀之前呼叫，

⑧ destroyed實體銷毀后呼叫，

詳見大佬的文章：超詳細vue生命周期決議(詳解)_ら陳佚晨的博客-CSDN博客_vue生命周期

（當前階段，包括懶人電商專案我用的最多，也是最熟悉的就是created，其他程序僅了解不太會用，以后用到再仔細學一下吧）