标签：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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。