暑期学习与“懒人电商”项目经验总结

该文章作为本人暑期学习和实战的经验总结，既是笔记也是自己踩过的坑，分享给大家，如有错误请各位大佬指正。

一.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，其他过程仅了解不太会用，以后用到再仔细学一下吧）

(9)  input   type="file"  属性获取的文件

该方法获取的不管是单文件还是多文件，最后得到的都是数组形式的。

 

另外，用ajax发送inupt file文件的方式也有所不同。

创建一个FormData对象。

var $target = e.target || e.srcElement;
var formdata = new FormData();
formdata.append("file", $target.files[0]);

在data里以对象的形式传递文件。

$.ajax({
    type:"post",
    url:"http://localhost:9000/user/setCoverPic",
    headers:{'token':token},
    dataType:"json",
    contentType:false,
    processData:false,
    data: formdata,
    success:function(){},
 })

 注意：contentType:false和processData:false必须加上。

具体原因见大佬文章：Ajax上传文件的cache、processdata、contentType属性以及FormData对象的总结_joey无心快语的博客-CSDN博客