ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-09-30 17:58:41  阅读:116  来源: 互联网

标签:url window 暑期 token localStorage 懒人 var 电商 result


该文章作为本人暑期学习和实战的经验总结,如有错误请各位大佬指正。

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

标签:url,window,暑期,token,localStorage,懒人,var,电商,result
来源: https://blog.csdn.net/qq_55793804/article/details/120568032

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有