• UNIAPP day_05(9.3) Cookie、WebStorage、Session 和 Token的区别、uni-app最终部署


    列表页”编写公式:
     data —— kw:""、list:[ ]、pno:0、pageCount:99999、isLoading:false
      loadNextPageData(){
    	//1 如果没有更多数据了,或者当前正在加载中,则退出
     	//2 设置“加载中”为真
    	//3 异步请求服务器端数据
     	//4 设置“加载中”为假
      }
      情形1:页面挂载时,调用“加载下一页数据”
      情形2:滚动到页面底部时,调用“加载下一页数据”
      情形3:顶部下拉刷新时,清除已有数据,调用“加载下一页数据”
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    一、极重要面试题:Cookie、WebStorage、Session 和 Token

    HTTP协议是“Stateless(无状态的)”,每个请求都会获得一个响应消息,响应结束后,服务器不会记录任何客户端的过往访问信息。
    但是,实际项目中,用户登录之后,服务器需要一直显示当前用户的信息 —— 实现技术有四种:

    1. Cookie:客户端存储——小点心,九十年代就有的技术;本质是服务器生成的“k=v”对,随着响应消息头(set-cookie)一起发送给客户端;客户端存储在内存或硬盘中。下次再发请求时,浏览器会自动携带之前保存在客户端所有Cookie给服务器(放在请求消息头cookie) —— 类似于“老板给顾客身上贴小标签”。
      提示:浏览器规定,每个服务器在客户端可以保存的Cookie键值对数据量有限制(例如4KB)
    2. WebStorage:客户端存储——2015年HTML5提供的新技术,分为sessionStorage/localStorage两个对象,本质是服务器返回给客户端的数据,客户端自己保存在浏览器内存或磁盘上。下次请求时,客户端自己从WebStorage中读取数据,作为请求数据发送给服务器 —— 类似于“顾客主动拿走老板写的小标签”。
      提示:浏览器规定,每个服务器在客户端可以保存的WebStorage键值对数据量有限制(例如8MB)
    3. Session:服务器端存储——九十年代末,Java和PHP和.NET等服务器端技术厂家提出的技术;本质服务器为客户端开辟了一段存储空间(保存在服务器端内存/文件/数据库中),以Cookie形式返回给客户端一个“会话编号(就是一个数字)”;客户端再次访问时,会自动出示此“会话编号”,服务器据此识别出该用户并找到之前存储的信息—— 类似于“老板给顾客办会员卡(号)”。
      提示:session技术安全性比客户端存储高;但是会增加服务器端处理负担,尤其是大数据/高并发的项目中。
    4. Token:客户端存储——令牌,最新技术;本质是服务器把客户端之前的访问数据都保存在一个对象中(数据大小无限制),使用加密技术加密为一个长度固定的密文字符串(该密文称为令牌),以响应消息头/主体形式发送给客户端;客户端需要存储在WebStorage中,下次请求时,以请求参数/消息头/主体形式发送该令牌给服务器;服务器收到该令牌检查其完整性,解密其中的信息,从而获得该客户端之前的访问数据 —— 类似于“老板用只有自己懂的鸟语把顾客的信息写在纸条上,让顾客带回家”。

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

    客户端服务器
    第一步:登录发送简单请求把客户端信息保存在一个对象中,加密为token字符串;返回响应消息{code:200, msg: 'login succ',token: '加密后的字符串'}
    接收到响应消息,把其中的token保存在客户端uni.setStorageSync(‘ServerToken’, token)
    第二步:获取个人档案从客户端读取之前保存的token let token=uni.getStorageSync('ServerToken')
    发送请求消息,把token放在请求消息头中(与后端协商好的请求头)GET /user/get_basic.php HTTP1.1authorization: ‘‘加密后的字符串’’接收到请求消息,从请求头中读取authorization(即token),解密令牌从中读取客户端信息(如用户编号),查询数据库,返回响应消息

    二、补充:uni-app更多的API

    uni.setStorage() 在客户端存储键值对数据(异步的)
    uni.setStrorageSysnc() 在客户端存储键值对数据(同步的)
    uni.getStorage() 读取保存在客户端的键值对数据(异步的)
    uni.getStrorageSysnc() 读取保存在客户端的键值对数据(同步的)

    三、uni-app项目的最终发布部署

    项目的两种运行模式:
    ①调试模式/开发模式/运行模式(Development Mode) —— npm start
    代码没有经过压缩和优化,所以代码体积比较大 —— 会自动连接开发服务器,自动更新
    ②生产模式/部署模式/发行模式(Production Mode) —— npm run build:
    代码经过优化和压缩,所以代码体积比较小 —— 不能再自动连接开发服务器

    演示1:把uni-app发布为“生产模式”的H5网站
    点击当前项目,点击工具栏 “发行”>“网站-PCWeb或手机H5”
    成功后,编译后的结果保存在 @/unpackage/dist/build/h5 目录下,该目录下的内容复制到任意真实的云服务器上的WEB服务器上即可。

    演示2:把uni-app发布为“生产模式”的微信小程序
    点击当前项目,点击工具栏 “发行”>“小程序-微信”
    输入小程序名称 和 腾讯提供的小程序AppID,点击发布即可。
    由于腾讯的限制,小程序访问的第三方域名(例如:http://www.codeboy.com)必须在“小程序控制台>request合法域名”列表中声明一下,否则小程序是禁止访问第三方域名的。

    演示3:把uni-app发布为“生产模式”的App
    编辑项目清单文件manifest.json,修改应用名称图标 和 App权限配置(勾选);如果想安装到夜神模拟器,还需要勾选 “App常用其它设置>x86”
    点击当前项目,点击工具栏 “发行”>“原生App-云打包”>修改“使用测试证书”>选择 “安心打包”>点击 “开始打包”;项目开始自动编译,完成后自动提交到DCloud服务器进行打包;等待一段时间…
    打包成功后,会提示“APK文件创建成功,保存在@/unpackage/dist/build/apk”目录下;
    可以重命名.apk文件,发布到应用商店 或者 放到自己的网站上供人下载 或者 直接把安装文件拷贝(用数据线或QQ)到自己的手机中,开始安装&启动App…

  • 相关阅读:
    vim配置与使用
    VUE识别访问设备是移动端还是pc端
    Nginx安装搭建之源码方式(Centos7)
    银河麒麟V10系统下软RAID调试,使用两个磁盘组raid0
    Faust勒索病毒数据恢复|金蝶、用友、管家婆、OA、速达、ERP等软件数据库恢复
    【编程题】【Scratch二级】2021.09 画正多边形
    科学计算库—NumPy
    vue之封装一个 table组件 ( 列表之中 渲染其他组件 )
    elasticsearch访问9200端口 提示需要登陆
    java毕业设计软式装修设计网站mp4(附源码、数据库)
  • 原文地址:https://blog.csdn.net/m0_70328115/article/details/126843044