实践案列
子月吾生
one day by one day
展开
-
用vant实现下拉刷新和上拉加载功能(vue项目)
我这次的详细做法是:1、首先在下面显示的文件下建立了一个list.js文件(要做分页加载的页面都可以引入使用)。2、list.js文件的内容如下:export default { data() { return { //三个判断 loading: false,//是否在加载中 finished: false,//是否加载完成 refreshLoading: false, pageSize: 20, // 列表请求数 p原创 2020-12-01 11:18:19 · 2527 阅读 · 3 评论 -
前端验证码倒计时的实现(实战)
是用vue写的,但是逻辑基本上都是一样的。效果如下:验证码倒计时: codeTimer() { this.timer = 60; let _this = this;//setTimeout里面的this不一样,所以在这里先保存好 if (this.timer >= 1) { //this.$refs.eleCode是vue获取dom元素的一种方法 this.$refs.eleCode.setAttribut原创 2020-09-07 13:56:47 · 2496 阅读 · 0 评论 -
前端验证码登陆模块的实现(vue实现)
实现效果如下:用vue写的,但实现逻辑都是一样的。摘取出来的输入框的html部分: //号码输入框 <input class="login-input login-phone" placeholder="请输入你的手机号码" type="number" v-model="loginNumberVal" @input="lenControl"原创 2020-09-07 11:53:12 · 1905 阅读 · 0 评论 -
css实现固定区域的上下滑动(vue基础实践案例)
dsdwdwd原创 2020-08-25 17:33:54 · 3367 阅读 · 0 评论 -
js实现小球随机运动
HTML <div class='box'> <div class='ball'></div> </div>style:.box{ width:300px; height:400px; background-color:green; opacity:0.5; margin:auto; position:r...原创 2019-09-29 00:09:24 · 2567 阅读 · 1 评论 -
移动端用户登录&注册案例
用的是TypeScript语言,主要是展示相关的思想逻辑,而不是语法。会说明注册和登录页面进行局部切换的逻辑、用账号密码登录的相关逻辑、用手机号和验证码登录的相关逻辑、获取验证码的相关逻辑,忘记密码的相关逻辑,最后点击登录的相关逻辑一、注册和登录页面进行局部切换效果图:即点击验证码登录时会切换到验证码登录,可以看到登录密码输入框的信息变成验证码输入框的信息,思想:将账号输入框写在一...原创 2019-08-15 20:34:39 · 3866 阅读 · 1 评论 -
为什么要设置短信验证码倒计时和图片验证码(登录原理)
1、短信验证码倒计时的作用:主要是为了防止用户频繁的点击,获取短信验证码是有时间限制的,这样就可以让用户在规定的时间内只能点击一次,在客户端就只是告知用户这个什么时候可以点击,在服务端就可以更少的调用这个接口,不去影响服务器的性能每点击一次都会发送一条短信,也是会收费用的,限制用户点击次数也可以节省费用设置短信验证码可以定位到目标用户,提高安全性2、设置图片验证码的作用:防止有人...原创 2019-08-23 18:09:47 · 1310 阅读 · 0 评论 -
解决前端跨域的方法有哪些
1、首先一个域名的组成:当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域JavaScript出于安全方面的考虑,不允许跨域调用其它页面的对象。跨域就可以理解为因为JavaScript同源策略的限制,a.com下的js无法操作b.com或者c.a.com域名下的对象。2、处理跨域的方法:1)处理方法一——在后台进行处理:通过在同域名下web服务器创建一个代理例如某个前端页面...原创 2019-06-14 19:32:03 · 550 阅读 · 0 评论 -
前后端的数据交互的模拟(ajax和php)
用到的服务器是和php配套使用的apache(阿帕奇)服务器,后端语言是PHP。一、后端的实现我建立了一个data.php文件,作为后端。整体代码如下,都有详细的注释。简单思想是客户端如果发送的是GET请求,一般是要查询数据,我在这里就建立了查询函数;如果发送的是POST请求,一般就是要提交并要在数据库创建新数据,我这里就建立了创建数据函数。没有用到数据库,直接保存了几个人的信息在这个...原创 2019-06-14 17:10:26 · 1468 阅读 · 0 评论 -
下拉菜单滑动效果(animation实践)
==思路:==通过给父元素设定固定的宽度和高度以及设置overflow:hidden属性将超出的ul li列表隐藏掉。视觉上看到的上下滑动的其实是父元素的高度,而不是ul li列表,列表并没有动过。但视觉上感觉到的就是ul li列表在上下滑动。完整代码如下: <title>下拉菜单滑动效果</title> <style> *{ ...原创 2019-04-22 13:44:26 · 1320 阅读 · 0 评论