这两天实习做一个项目需求：关于一个消息提示框，需要判断身份以及是否是首次登陆
思路如下：
首次登陆：我做了一个vue.prototype，代码如下，里面套用了axios，向后端请求身份信息，根据返回信息，判断是否登陆以及是否身份允许弹窗出现，然后确认是否是首次登陆的思路是，将用户ID+当前年月日，存入localstorage里面，每一次登陆，都会请求并进行对比判断，决定是否显示，并存入缓存，日期相同就不是首次登陆，日期不同就是首次登陆。
将axios方法抽离出来，写在vue.prototype方法上，挂在mounted中执行，方便于修改，以及调用，哪里需要这个方法，直接全局调用 <page-firsttip ref="pageFirsttip"></page-firsttip> ，相当方便。
收获：
熟悉了vue.prototype方法的使用，学会了方法抽离的一个意识，只要是一个功能方法，都可以抽离出来，这样方便后期开发的修改。
vue-prototype 提示框相关代码：
/**
* 当天首次登录提示框 组件
*/
Vue.component("page-firsttip",{
template:
[
'<div>',
'<div v-if="isTipmask">',
'<div class="tip_mask"></div>',
'<div class="tip_dialog_mask">',
'<div class="tip_dialog">',
'<div class="tip_dialog_content">',
'<div class="tip_head">',
'<p class="tip_head_p">“深圳智慧党建”系统升级维护通知</p>',
'<span class="tip_head_close" @click="closeTipDialog"></span>',
'</div>',
'<div class="tip_content">',
'<p class="tip_content_p1">广大党员：</p>',
'<p v-for="item,index in tipContent1" class="tip_content_p2">',
'{{item}}',
'</p>',
'<p class="tip_content_p3">二、可继续使用的部分功能 ：</p>',
'<p v-for="item,index in tipContent2" class="tip_content_p4">',
'{{item}}',
'</p>',
'<p class="tip_content_p5">感谢您一直以来对“深圳智慧党建”的使用与支持。</p>',
'</div>',
'<div class="tip_bottom">',
'<el-button class="tip_bottom_close" @click="closeTipDialog">关闭</el-button>',
'</div>',
'</div>',
'</div>',
'</div>',
'</div>',
'</div>'
].join(''),
data: function(){
return {
isTipmask: false,
tipContent1:[
''111'',
''222"
],
tipContent2:[
"333",
"4444"
]
}
},
methods: {
/**
* 关闭弹窗
*/
closeTipDialog: function(){
this.isTipmask = false;
},
/**
* 显示弹窗
*/
show: function(){
this.isTipmask = true;
},
/**
* 获取显示信息
*/
getTipmsg: function(){
var that = this
$.ajax({
url: baseURL + "web/login/showMaintain.mvc",
type: "POST",
dataType: "JSON",
success: function(result) {
// 判断是否是每天首次登录
if(result.code == 0){
let nowDate = new Date();
let str = '';
str = nowDate.getFullYear().toString()+(nowDate.getMonth()+1).toString()+nowDate.getDate().toString();
let userInfo = JSON.parse(localStorage.getItem("userInfo"))
console.log(userInfo.userId)
if(result.data == '1'){
if(str!==localStorage.getItem(userInfo.userId+"LastTime")){
that.show(); } }
localStorage.setItem(userInfo.userId+"LastTime",str); }} })}},
mounted() {
this.getTipmsg();
}})
全局调用：
<page-firsttip ref="pageFirsttip"></page-firsttip>
父子传值触发组件方法：
this.$refs['pageFirsttip'].show(options);
代码评审收获：
尽量使用let保持一直，不要var let混杂，const可以跟let混杂，const声明的是常量
代码调用尽量放在函数最下边，这样方法错误，函数上面也能执行，而不会被这个方法错误所阻塞
尽量使用flex布局，少用浮动，用也可以，要做到清除浮动
网友评论