域名解析到别人网站,东莞做网络推广的公司,上海网站建设公司选哪家好,免费咨询图片大全大图登录功能开发
实现POST提交 HTTP协议规定请求消息内容类型(Content-Type)有哪些#xff1f;—— 只有四种 text/plain 没有编码的普通数据 application/x-www-form-urlencoded 编码后的普通数据 multipart/form-data 请求主体中包含文件上传域 application/json 请求主体是 J…登录功能开发
实现POST提交 HTTP协议规定请求消息内容类型(Content-Type)有哪些—— 只有四种 text/plain 没有编码的普通数据 application/x-www-form-urlencoded 编码后的普通数据 multipart/form-data 请求主体中包含文件上传域 application/json 请求主体是 JSON 格式字符串 HTTP协议规定响应消息内容类型(Content-Type)有哪些—— 有很多种 text/html、 text/plain、 text/css、 application/javascript、 image/jpeg、 application/mpeg3、 application/json、 … scriptexport default {data(){return {statusBarHeight: 0, //系统状态栏高度hidePwd: true, //是否隐藏密码phone: 13501234567, //用户输入的登录手机号pwd:123456, //用户输入的登录密码}},//生命周期方法 —— 页面挂载完成onLoad(){ //此处此方法类似于mounted()//console.log(login组件挂载完成)//获取系统信息读取其中的“状态栏高度”let {statusBarHeight} uni.getSystemInfoSync()// console.log(屏幕高度, screenHeight);this.statusBarHeight statusBarHeight},methods: {async doLogin(){//console.log(当前输入,this.phone, this.pwd)//1.验证手机号是否合法不合法就弹出提示框退出执行if(!/^1[3-9]\d{9}$/.test(this.phone)){uni.showToast({title: 手机号非法, //提示标题icon: none, //图标duration: 3000 //持续时长 })return}//2.验证密码是否合法不合法就弹出提示框退出执行if(this.pwd.length 6){uni.showToast({title:密码格式非法,icon: none,duration: 3000})return }//3.把手机号/密码提交给服务器端数据API进行登录验证/**********使用uni.request()发起POST请求************/let url https://www.codeboy.com/zhsqapi/user/loginlet [err, res] await uni.request({ url,method: POST,//header: { Content-Type: application/json},header: { }, //请求内容类型默认就是JSON格式//data: {phone:${this.phone}, pwd:${this.pwd}}//JSON系列化把普通的JS对象转换为JSON格式的字符串//data: JSON.stringify( {phone:this.phone, pwd:this.pwd})//uni.request方法会自动根据请求内容类型把数据转换为需要的格式data: {phone:this.phone, pwd:this.pwd}})if(err){console.log(执行失败, err);}else {console.log(异步请求成功, res);}//4.登录成功提示“欢迎回来”跳转到首页},}}
/script实现页面跳转 吐司对话框—— 用于简单的提醒非重要事件的提示 uni.showToast( {title, icon, duration} ) 模态对话框 —— 用于严重的提示甚至必须作出选择的提示 uni.showModal({title, content }) 加载中对话框—— 提示操作正在进行中 uni.showLoading( ) / uni.hideLoading() 动作清单对话框—— 让用户选择要执行的动作 uni.showActionSheet( ) 导航跳转、 uni.navigateTo( ) 导航返回跳转、 uni.navigateBack( ) 重定向跳转、 uni.redirectTo( ) 切换页签跳转、 uni.switchTab ( ) 重启跳转、 uni.reLaunch( ) scriptexport default {data(){return {statusBarHeight: 0, //系统状态栏高度hidePwd: true, //是否隐藏密码phone: 13501234567, //用户输入的登录手机号pwd:123456, //用户输入的登录密码}},//生命周期方法 —— 页面挂载完成onLoad(){ //此处此方法类似于mounted()//console.log(login组件挂载完成)//获取系统信息读取其中的“状态栏高度”let {statusBarHeight} uni.getSystemInfoSync()// console.log(屏幕高度, screenHeight);this.statusBarHeight statusBarHeight},methods: {async doLogin(){//console.log(当前输入,this.phone, this.pwd)//1.验证手机号是否合法不合法就弹出提示框退出执行if(!/^1[3-9]\d{9}$/.test(this.phone)){uni.showToast({title: 手机号非法, //提示标题icon: none, //图标duration: 3000 //持续时长 })return}//2.验证密码是否合法不合法就弹出提示框退出执行if(this.pwd.length 6){uni.showToast({title:密码格式非法,icon: none,duration: 3000})return }//3.把手机号/密码提交给服务器端数据API进行登录验证/**********使用uni.request()发起POST请求************/let url https://www.codeboy.com/zhsqapi/user/loginlet [err, res] await uni.request({ url,method: POST,//header: { Content-Type: application/json},header: { }, //请求内容类型默认就是JSON格式//data: {phone:${this.phone}, pwd:${this.pwd}}//JSON系列化把普通的JS对象转换为JSON格式的字符串//data: JSON.stringify( {phone:this.phone, pwd:this.pwd})//uni.request方法会自动根据请求内容类型把数据转换为需要的格式data: {phone:this.phone, pwd:this.pwd}})if(err){console.log(执行失败, err);}else {console.log(异步请求成功, res);}//4.登录成功提示“欢迎回来”跳转到首页//跳转到“首页” —— 切换页签uni.showToast({title: 欢迎回来,icon: none, //图标不要duration: 3000, //持续时间3scomplete(){ //对话框成功关闭//跳转到“首页” —— 切换页签uni.switchTab({url:/pages/index/index})}})},}}
/scriptAjax集中管理 因为ajax访问在应用开发中频繁使用、代码复杂且接口地址、数据结构等可能会发生变化 所以将ajax相关代码提取为方法统一保存管理在外部文件中 创建service/index.js /****对服务器端数据API进行访问二次封装****//*** 服务器端基础地址*/
export let base https://www.codeboy.com/zhsqapi//*** API-1.2、用户登录* 接口地址user/login* 请求方式POST* 请求主体格式application/json * 名称 必填 类型 说明* phone 是 string 手机号* pwd 是 string 密码*/
export let userLogin async (phone, pwd){//1.准备请求URLlet url base user/login//console.log(url)//2.显示“加载中”提示框uni.showLoading({title: 用户登录中})//3.发起异步请求消息let [err, res] await uni.request({url,method: POST,data: {phone, pwd}})//4.隐藏“加载中”提示框uni.hideLoading()//5.返回响应消息主体return res.data
}scriptimport { userLogin } from ../../service/export default {data(){return {statusBarHeight: 0, //系统状态栏高度hidePwd: true, //是否隐藏密码phone: 13501234567, //用户输入的登录手机号pwd:123456, //用户输入的登录密码}},//生命周期方法 —— 页面挂载完成onLoad(){ //此处此方法类似于mounted()//console.log(login组件挂载完成)//获取系统信息读取其中的“状态栏高度”let {statusBarHeight} uni.getSystemInfoSync()// console.log(屏幕高度, screenHeight);this.statusBarHeight statusBarHeight},methods: {async doLogin(){//console.log(当前输入,this.phone, this.pwd)//1.验证手机号是否合法不合法就弹出提示框退出执行if(!/^1[3-9]\d{9}$/.test(this.phone)){uni.showToast({title: 手机号非法, //提示标题icon: none, //图标duration: 3000 //持续时长 })return}//2.验证密码是否合法不合法就弹出提示框退出执行if(this.pwd.length 6){uni.showToast({title:密码格式非法,icon: none,duration: 3000})return }//3.把手机号/密码提交给服务器端数据API进行登录验证let data await userLogin(this.phone, this.pwd)console.log(data)//4.登录成功提示“欢迎回来”跳转到首页if(data.code2000){ //登录成功//弹出一个“吐司”对话框uni.showToast({title: 欢迎回来,icon: none, //图标不要duration: 3000, //持续时间3scomplete(){ //对话框成功关闭//跳转到“首页” —— 切换页签uni.switchTab({url:/pages/index/index})}})}else { //登录失败//弹出一个“模态”对话框uni.showModal({title: 错误,content: 登录失败服务器返回消息data.msg})}},}}
/script处理吐司弹窗 无法实现吐司弹窗结束后页面跳转 所以需要将吐司提示放置到目标页-index.vue中实现 login.vue
scriptimport { userLogin } from ../../service/export default {data(){return {statusBarHeight: 0, //系统状态栏高度hidePwd: true, //是否隐藏密码phone: 13501234567, //用户输入的登录手机号pwd:123456, //用户输入的登录密码}},//生命周期方法 —— 页面挂载完成onLoad(){ //此处此方法类似于mounted()//console.log(login组件挂载完成)//获取系统信息读取其中的“状态栏高度”let {statusBarHeight} uni.getSystemInfoSync()// console.log(屏幕高度, screenHeight);this.statusBarHeight statusBarHeight},methods: {async doLogin(){//console.log(当前输入,this.phone, this.pwd)//1.验证手机号是否合法不合法就弹出提示框退出执行if(!/^1[3-9]\d{9}$/.test(this.phone)){uni.showToast({title: 手机号非法, //提示标题icon: none, //图标duration: 3000 //持续时长 })return}//2.验证密码是否合法不合法就弹出提示框退出执行if(this.pwd.length 6){uni.showToast({title:密码格式非法,icon: none,duration: 3000})return }//3.把手机号/密码提交给服务器端数据API进行登录验证let data await userLogin(this.phone, this.pwd)// console.log(data)//4.登录成功提示“欢迎回来”跳转到首页if(data.code2000){ //登录成功//跳转到“首页” —— 切换页签uni.switchTab({url:/pages/index/index})}}else { //登录失败//弹出一个“模态”对话框uni.showModal({title: 错误,content: 登录失败服务器返回消息data.msg})}},}}
/scriptindex.vue
//生命周期方法组件加载完成
async onLoad() { //弹出“欢迎回来”提示框uni.showToast({title:欢迎回来,icon: none,duration: 3000})
},令牌机制
令牌概念 HTTP协议属于**“无状态协议”**——客户端发起一个HTTP请求服务器返回一个HTTP响应服务器不会记录客户端的任何信息。实际应用中很多场景下需要服务器记录客户端访问信息例如根据访问历史进行后续的推荐、主题选择、购物车… 实现这类效果可用的技术Cookie、SessionStorageLocalStorage、Session、Token Token令牌用于证明客户端身份的机制。 **原理服务器端把客户端的信息保存在一个对象中**加密为一个定长字符串发送给客户端客户端保存起来等到下次请求时客户端可以再把加密字符串返回给服务器服务器可以解密出其中的原始信息从而进一步查询更多信息——类似于银行给客户端的“银行卡”其中存储着客户端的信息加密存储客户端是读不懂的后续有些请求需要客户端出示此“银行卡”有些请求则不需要。 客户端服务器1、客户端发送简单请求包含phone和pwd2、服务器验证登录信息成功后把客户端信息保存在一个对象中形如{ 用户编号123, 用户名yaya 登录时间x年x月x日 xx:xx:xx, 登录过期时间x年x月x日 xx:xx:xx …. }3.服务器将上述对象加密为定长字符串即token随同响应消息一同返回给客户端 { code:2000, msg: ‘login succ’, token: ‘加密后的定长字符串’ }4、接收到响应消息把其中的token保存在客户端 uni.setStorageSync(‘userToken’, data.token)5、从客户端读取之前保存的token let tokenuni.getStorageSync(‘userToken’)6、发送请求消息把token放在请求消息头中与后端协商好的请求头 uni.request({ url, header:{ token: token } }) 生成的请求消息形如 GET /index/data HTTP1.1 token: ‘‘加密后的字符串’’7、服务器接收到请求消息从请求头中读取req.headers.token即token解密令牌得到原始的令牌信息即{ 用户编号123, 用户名yaya 登录时间x年x月x日 xx:xx:xx, 登录过期时间x年x月x日 xx:xx:xx …. }8、服务器根据用户信息查询数据库将用户信息返回给客户端
本地存储 异步操作localStorage uni.setStorage(k, v, success(){}) uni.getStorage(k, success(){}) uni.removeStorage(k, success(){}) uni.clearStorage( success(){} ) 同步操作localStorage uni.setStorageSync(k, v) uni.getStorageSync(k) uni.removeStorageSync(k) uni.clearStorageSync( ) scriptimport { userLogin } from ../../service/export default {data(){return {statusBarHeight: 0, //系统状态栏高度hidePwd: true, //是否隐藏密码phone: 13501234567, //用户输入的登录手机号pwd:123456, //用户输入的登录密码}},//生命周期方法 —— 页面挂载完成onLoad(){ //此处此方法类似于mounted()//console.log(login组件挂载完成)//获取系统信息读取其中的“状态栏高度”let {statusBarHeight} uni.getSystemInfoSync()// console.log(屏幕高度, screenHeight);this.statusBarHeight statusBarHeight},methods: {async doLogin(){//console.log(当前输入,this.phone, this.pwd)//1.验证手机号是否合法不合法就弹出提示框退出执行if(!/^1[3-9]\d{9}$/.test(this.phone)){uni.showToast({title: 手机号非法, //提示标题icon: none, //图标duration: 3000 //持续时长 })return}//2.验证密码是否合法不合法就弹出提示框退出执行if(this.pwd.length 6){uni.showToast({title:密码格式非法,icon: none,duration: 3000})return }//3.把手机号/密码提交给服务器端数据API进行登录验证let data await userLogin(this.phone, this.pwd)// console.log(data)//4.登录成功提示“欢迎回来”跳转到首页if(data.code2000){ //登录成功//在客户端存储服务器返回的token(身份令牌)uni.setStorageSync(userToken, data.token)//跳转到“首页” —— 切换页签uni.switchTab({url:/pages/index/index})}else { //登录失败//弹出一个“模态”对话框uni.showModal({title: 错误,content: 登录失败服务器返回消息data.msg})}},}}
/script获取主页数据 service/index.js中提供后去主页数据方法 传输令牌 获取数据 /*** API-2.1、首页数据* 接口地址index/data* 请求方式GET* 请求头部token - 用户登录后保存在客户端的身份凭证*/
export let indexData async ( ){//1.准备请求URLlet url base index/data//2.显示“加载中”提示框 uni.showLoading({title: 首页数据读取中})//3.发起异步请求消息let [err, res] await uni.request({url, //请求地址header: { //请求头部-token(客户端身份令牌)token: uni.getStorageSync(userToken)}})//4.隐藏“加载中”提示框uni.hideLoading()//5.返回响应消息主体return res.data
}index.vue在onLoad()中获取主页数据 import { indexData, base } from /service//生命周期方法组件加载完成
async onLoad() { //弹出“欢迎回来”提示框uni.showToast({title:欢迎回来,icon: none,duration: 3000})//向服务器请求首页数据let data await indexData()console.log(data)
},生命周期方法
应用程序生命周期方法 整个应用程序的生命周期方法 —— App.vue —— 高仿微信小程序** onLaunch()整个应用程序启动了 onShow()应用程序显示出来例如第一次启动完成、从其它应用切换会当前应用 onHide()应用程序隐藏起来了例如来电话了、用户点击桌面按钮 页面生命周期方法 页面的生命周期方法 —— pages —— 高仿微信小程序** onLoad()当前页面挂载完成功能类似于mounted onShow()页面显示出来了例如第一次挂载完成、导航返回之前的页面 onReady()页面准备就绪了每个页面此方法调用且仅调用一次——第一次调用onShow之后 onHide()页面隐藏起来了例如导航跳转到下一个页面 onUnload()当前页面完成卸载功能类似于destroyed onPageScroll()页面滚动了 onReachBottom()页面滚动到底部了 onPullDownRefresh()页面在顶部下拉刷新了 组件生命周期方法 组件的生命周期方法 —— components —— 高仿Vue.js 创建时期beforeCreate()、created() 挂载时期beforeMount()、mounted() 更新时期beforeUpdate()、updated() 销毁时期beforeDestroy()、destroyed() 主页开发
保存主页数据
script
import { indexData, base } from /serviceexport default {data() {return {base, //把服务器基础地址变量设置为数据属性carousels:[], //轮播广告条目列表menuItems:[], //当前用户选中的功能菜单列表activities:[], //最新的社区活动列表}},//生命周期方法组件加载完成async onLoad() { //弹出“欢迎回来”提示框uni.showToast({title:欢迎回来,icon: none,duration: 3000})//向服务器请求首页数据let data await indexData()this.carousels data.carousels //轮播广告this.menuItems data.menuItems //功能菜单this.activities data.activities //社区活动},methods: {}}
/script轮播图实现
!-- F1: 轮播广告 --
!-- indicator-dots是否显示“小圆饼”指示器 --
!-- autoplay是否自动播放轮播广告 --
!-- interval时间间隔两个广告间停留时间 --
!-- duration持续时长一个广告的过渡动画持续时长 --
swiper :indicator-dotstrue :autoplaytrue :interval2000 :duration500swiper-item v-for(c, i) in carousels :keyiview classswiper-itemimage clickjump(c.href) :srcbase c.pic modewidthFix//view/swiper-item
/swiperscript
import { indexData, base } from /serviceexport default {data() {return {base, //把服务器基础地址变量设置为数据属性carousels:[], //轮播广告条目列表menuItems:[], //当前用户选中的功能菜单列表activities:[], //最新的社区活动列表}},//生命周期方法组件加载完成async onLoad() { //弹出“欢迎回来”提示框uni.showToast({title:欢迎回来,icon: none,duration: 3000})//向服务器请求首页数据let data await indexData()this.carousels data.carousels //轮播广告this.menuItems data.menuItems //功能菜单this.activities data.activities //社区活动},methods: {jump(url){console.log(url)//导航跳转到指定页uni.navigateTo({ url })}}}
/scriptstyle scoped langscss//提示页面中可以使用标签选择器但是组件中不能使用.swiper-item image {width: 750rpx;}
/style宫格图实现 需要安装uni-grid组件 !-- F2: 功能菜单 --
!-- column一行中默认显示几列 --
!-- showBorder是否显示边框 --
!-- square每个宫格项是否显示为方形 --
uni-grid classfunc-menu :column4 :showBorderfalse :squaretrueuni-grid-item v-for(item,i) in menuItems :keyiview classmenu-item clickjump(item.href)image :srcbaseitem.pic modewidthFix/text{{item.title}}/text/view/uni-grid-item
/uni-gridstyle scoped langscss.func-menu {margin-top: $uni-spacing-col-base;background-color: $uni-bg-color;.menu-item {height: 100%;//把弹性容器的主轴方向修改为纵向flex-direction: column;//弹性容器中的子元素在主轴方向上居中对齐justify-content: center;//弹性容器中的子元素交叉轴方向上居中对齐align-items: center; image { width:35%; margin-bottom: $uni-spacing-col-sm; }}}
/style商业服务功实现 需要安装uni-card扩展组件 !-- F3: 商业服务 --
!-- isFull是否显示为“通栏卡片”(左右撑满) --
uni-card classcard title| 商业服务 is-fullview classservice!-- 左侧房屋租售 --view classservice-itemview classtxttext房屋租售/textviewnavigator租房/navigatornavigator短租/navigator/view/view !-- 图片缩放模式1widthFix --!-- 图片缩放模式2scaleToFill不保持原始宽高比缩放图片填满指定宽高 --image classimg modescaleToFill src../../static/img/chuzu.png//view!-- 右侧便民服务 --view classservice-itemview classtxttext便民服务/textviewnavigator便利店/navigatornavigator超市/navigator/view/view image classimg modescaleToFill src../../static/img/bianmin.png//view/view
/uni-card.service {width: 100%;.service-item {//弹性子元素尺寸增长权重为1flex: 1;padding-top: $uni-spacing-col-sm;padding-bottom: $uni-spacing-col-sm;justify-content: space-between; //弹性容器中的子元素在主轴方向上空白在中央align-items: center; //弹性容器中的子元素在交叉轴方向上居中对齐:nth-child(1) {padding-right: $uni-spacing-row-sm;}:nth-child(2) {padding-left: $uni-spacing-row-sm;}.txt { font-size: $uni-font-size-sm; flex-direction: column; flex: 1; //弹性子元素尺寸增长权重1navigator {margin-right: $uni-spacing-row-sm;}}.img { width: 150rpx; height: 120rpx;}}
}
