uni-app DAY 04

一、token运行原理

使用token实现“登录后获取个人信息

客户端服务器
第一次请求:登录1、客户端发送简单请求,包含uname和upwd
2、服务器验证登录信息,成功后,把客户端信息保存在一个对象中,形如:{
用户编号:123,
用户名:yaya,
登录时间:x年x月x日 xx:xx:xx,
登录过期时间:x年x月x日 xx:xx:xx
….}
3.服务器将上述对象加密为定长字符串(即token);随同响应消息一同返回给客户端:
{
code:200, msg: ‘login succ’,
token: '加密后的定长字符串'
}
4.接收到响应消息,把其中的token保存在客户端
uni.setStorageSync(‘userToken’, res.token)
第二次请求:获取个人档案5.从客户端读取之前保存的token
let token=uni.getStorageSync('userToken')
6.发送请求消息,把token放在请求消息头中(与后端协商好的请求头)
uni.request({
url,
header:{ token: token }
})
生成的请求消息形如:
GET /user/get_basic.php HTTP1.1
token: ''加密后的字符串''
7.服务器接收到请求消息,从请求头中读取req.headers.token(即token),解密令牌,得到原始的令牌信息,即:{
用户编号:123,
用户名:yaya
登录时间:x年x月x日 xx:xx:xx,
登录过期时间:x年x月x日 xx:xx:xx
….
}
8. 服务器根据用户信息查询数据库,将用户信息返回给客户端

六、重点面试题:uni-app中的生命周期方法

第一组:应用程序级生命周期方法——App.vue:
onLaunch():应用程序启动,每个应用此方法只能调用一次
onShow():应用程序显示出来,可以多次调用
onHide():应用程序隐藏起来,可以多次调用
第二组:页面级生命周期方法——pages
onLoad():页面加载完成,类似于组件的mounted,每个组件只挂载一次;一般用于异步请求页面需要的数据
onShow():页面显示出来,可以多次调用
onReady():页面准备就绪,第一次挂载完成后,进场动画执行完成,可供用户使用
onHide():页面隐藏起来,可以多次调用
onUnload():页面卸载了,类似于组件的destroyed;一般用于释放页面所占用的资源,例如:定时器、WebSocket....
onPageScroll():页面滚动了
onReachBottom():页面滚动到底部了
onPullDownRefresh():页面在顶部下拉刷新了
第三组:组件级生命周期方法——components
beforeCreate() / created()
beforeMount() / mounted()
beforeUpdate() / updated()
beforeDestroy() / destroyed()
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的Uni-app手写日历组件的实现步骤: 1. 创建一个日历组件,可以使用uni-calendar或者自己手写一个日历组件。 2. 在data中定义一个calendarData对象,用于存储日历相关的数据,比如当前年月、当前月有多少天等。 ``` data() { return { calendarData: { year: 2021, month: 9, days: [] } } } ``` 3. 在created生命周期中,初始化日历数据。 ``` created() { this.initCalendarData(); }, methods: { initCalendarData() { const date = new Date(); const year = date.getFullYear(); const month = date.getMonth() + 1; const days = this.getDaysOfMonth(year, month); this.calendarData = { year, month, days }; }, getDaysOfMonth(year, month) { const days = []; const date = new Date(year, month - 1, 1); const weekDay = date.getDay(); const lastMonthDays = this.getDaysOfLastMonth(year, month); const thisMonthDays = this.getDaysOfMonth(year, month); const nextMonthDays = 42 - thisMonthDays - weekDay; for (let i = weekDay - 1; i >= 0; i--) { days.push({ day: lastMonthDays - i, type: 'lastMonth' }); } for (let i = 1; i <= thisMonthDays; i++) { days.push({ day: i, type: 'thisMonth' }); } for (let i = 1; i <= nextMonthDays; i++) { days.push({ day: i, type: 'nextMonth' }); } return days; }, getDaysOfMonth(year, month) { return new Date(year, month, 0).getDate(); }, getDaysOfLastMonth(year, month) { if (month === 1) { year--; month = 12; } else { month--; } return this.getDaysOfMonth(year, month); } } ``` 4. 在日历组件中,使用v-for循环渲染日历。 ``` <template> <view class="calendar"> <view class="calendar-header">{{ calendarData.year }}年{{ calendarData.month }}月</view> <view class="calendar-body"> <view class="calendar-week"> <view class="calendar-day">日</view> <view class="calendar-day">一</view> <view class="calendar-day">二</view> <view class="calendar-day">三</view> <view class="calendar-day">四</view> <view class="calendar-day">五</view> <view class="calendar-day">六</view> </view> <view class="calendar-days"> <view class="calendar-day" v-for="(day, index) in calendarData.days" :key="index"> <view class="day-text" :class="day.type">{{ day.day }}</view> </view> </view> </view> </view> </template> ``` 5. 根据需要,可以为不同日期设置不同的样式。 ``` .day-text { width: 50px; height: 50px; line-height: 50px; text-align: center; } .lastMonth { color: #999; } .thisMonth { color: #333; } .nextMonth { color: #999; } ``` 6. 最后,可以为日历组件添加一些交互事件,比如点击某个日期时,弹出该日期对应的课程安排等。 以上就是一个简单的Uni-app手写日历组件的实现步骤,具体实现可以根据需求进行优化和改进。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值