当前位置: 首页 > news >正文

(十一)、用户中心页面【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】

1,个人中心页面

1.1 新建个人中心页面

在这里插入图片描述

1.2 纯净版个人中心页面代码:
<template><view class="user"><view class="top"><view class="group"><view class="userinfo"><!-- 顶部 左侧 头像 --><view class="pic"><image src="../../static/images/user-default.jpg" mode="aspectFill"></image></view><!-- 顶部 左侧 昵称和时间 已登录 --><view class="text" v-if="true"><view class="nickname">匿名</view><view class="year"><uni-dateformat :date="new Date() - 360000" :threshold="[3600,99*365*24*60*60*1000]"></uni-dateformat>注册</view></view><!-- 顶部 左侧 昵称和时间 未登录 --><view class="text" v-else><view class="nickname">点击登录</view></view></view><!-- 顶部 右侧右箭头 --><view class="more"><text class="iconfont icon-a-10-you"></text></view></view><!-- 顶部 背景图 --><view class="bg"><image src="../../static/images/user-default.jpg" mode="aspectFill"></image></view></view><view class="main"><view class="info"><view class="item"><text>33</text>获赞</view><view class="item"><text>11</text>评论</view><view class="item"><text>5</text>发文</view></view><view class="list"><view class="group"><view class="item"><view class="left"><text class="iconfont icon-a-24-bianji"></text><text class="text">我的长文</text></view><view class="right"><text class="iconfont icon-a-10-you"></text></view></view><view class="item"><view class="left"><text class="iconfont icon-a-106-xihuan"></text><text class="text">我的点赞</text></view><view class="right"><text class="iconfont icon-a-10-you"></text></view></view><view class="item"><view class="left"><text class="iconfont icon-a-21-xiugai"></text><text class="text">评论过的</text></view><view class="right"><text class="iconfont icon-a-10-you"></text></view></view></view><view class="group"><view class="item"><view class="left"><text class="iconfont icon-a-32-wenjian"></text><text class="text">关于</text></view><view class="right"><text class="iconfont icon-a-10-you"></text></view></view><view class="item"><view class="left"><text class="iconfont icon-a-5-xinxi"></text><text class="text">意见反馈</text></view><view class="right"><text class="iconfont icon-a-10-you"></text></view></view></view><view class="group"><view class="item"><view class="left"><text class="iconfont icon-a-73-tuichu"></text><text class="text">退出登录</text></view><view class="right"><text class="iconfont icon-a-10-you"></text></view></view></view></view></view></view>
</template><script>export default {data() {return {};}}
</script><style lang="scss">.user {.top {height: 300rpx;background: #bbb;padding: 0 30rpx;padding-top: var(--status-bar-height);position: relative;display: flex;align-items: center;.group {position: relative;z-index: 10;display: flex;align-items: center;justify-content: space-between;width: 100%;color: #fff;.userinfo {display: flex;width: 100%;align-items: center;.pic {width: 120rpx;height: 120rpx;border-radius: 50%;overflow: hidden;border: 2px solid #fff;image {width: 100%;height: 100%;}}.text {padding-left: 20rpx;.nickname {font-size: 44rpx;font-weight: 600;}.year {font-size: 26rpx;opacity: 0.6;padding-top: 5rpx;}}}.more {.iconfont {font-size: 40rpx;}}}.bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;image {width: 100%;height: 100%;filter: blur(20px);transform: scale(2);opacity: 0.5;}}}.main {width: 100%;min-height: 200rpx;background: #fff;border-radius: 30rpx;transform: translateY(-30rpx);padding: 30rpx 0;.info {padding: 10rpx 30rpx;display: flex;font-size: 30rpx;.item {padding-right: 20rpx;color: #888;text {font-weight: 600;color: #333;}}}.list {.group {padding: 15rpx 30rpx;border-bottom: 15rpx solid #f4f4f4;.item {display: flex;justify-content: space-between;align-items: center;padding: 25rpx 0;font-size: 36rpx;color: #555;border-bottom: 1rpx solid #f8f8f8;.left {display: flex;align-items: center;.iconfont {font-size: 38rpx;margin-right: 10rpx;}}.right {.iconfont {font-size: 26rpx;}}}.item:last-child {border: none;}}.group:last-child {border: none;}}}}
</style>
1.3 页面效果

在这里插入图片描述

2,使用uni-id-pages中的vuex状态管理

2.1 self页面中,script中引入store.js:

store.js位置:
在这里插入图片描述

  import {store,mutations} from '@/uni_modules/uni-id-pages/common/store.js'

在计算属性中定义两个方法(在当前页面拿到store中的登录用户信息和登录状态):

    computed: {userInfo() {return store.userInfo},hasLogin() {return store.hasLogin}},

测试一下,在onload中打印输出:

    onLoad() {console.log(this.userInfo)console.log(this.hasLogin)}

结果:
在这里插入图片描述

2.2 渲染顶部self页面
          <!-- 顶部 左侧 头像 --><view class="pic"><image v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" :src="userInfo.avatar_file.url"mode="aspectFill"></image><image v-else src="../../static/images/user-default.jpg" mode="aspectFill"></image></view><!-- 顶部 左侧 昵称和时间 已登录 --><view class="text" v-if="hasLogin"><view class="nickname">{{userInfo.nickname||userInfo.username||userInfo.mobile}}</view><view class="year"><uni-dateformat :date="new Date() - 360000" :threshold="[3600,99*365*24*60*60*1000]"></uni-dateformat>注册</view></view>

3,个人中心页面中的退出功能

3.1 修改一下store.js中的logout方法

三目运算符–修改点击退出是跳转的url页面地址
store.js

	async logout() {// 1. 已经过期就不需要调用服务端的注销接口	2.即使调用注销接口失败,不能阻塞客户端if(uniCloud.getCurrentUserInfo().tokenExpired > Date.now()){try{await uniIdCo.logout()}catch(e){console.error(e);}}uni.removeStorageSync('uni_id_token');uni.setStorageSync('uni_id_token_expired', 0)uni.redirectTo({url: `/${pagesJson.uniIdRouter?.loginPage ?? 'pages/self/self'}`, //uni_modules/uni-id-pages/pages/login/login-withoutpwd});uni.$emit('uni-id-pages-logout')this.setUserInfo({},{cover:true})},
3.2 self个人中心页面中使用退出方法
      //退出登录logout() {if (this.goLoginPage()) return;uni.showModal({title: "是否确认退出?",success: res => {console.log(res);if (res.confirm) {mutations.logout()}}})},//判断是否登录的方法goLoginPage() {if (!this.hasLogin) {uni.showToast({title: "未登录",icon: "none"})return true;}return false}

4,uniidrouter路由配置限制用户登录

uniIdRouter自动路由 参考链接

4.1 在pages.json中配置
  "uniIdRouter": {"loginPage": "uni_modules/uni-id-pages/pages/login/login-withpwd", // 登录页面路径"needLogin": ["pages/edit/edit", // 需要登录才可访问的页面列表,可以使用正则语法"uni_modules/uni-id-pages/pages/userinfo/userinfo"],"resToLogin": true // 自动解析云对象及clientDB的错误码,如果是客户端token不正确或token过期则自动跳转配置的登录页面,配置为false则关闭此行为,默认true}
4.2 跳转到个人资料页面

个人资料页面位置:/uni_modules/uni-id-pages/pages/userinfo/userinfo
修改页面:

<view class="group" @click="toUserInfo">

点击跳转方法:

      //跳转到编辑个人资料toUserInfo() {if (this.hasLogin) {uni.navigateTo({url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'})} else {let route = this.$mp.page.route;uni.navigateTo({url: '/uni_modules/uni-id-pages/pages/login/login-withpwd?uniIdRedirectUrl=/' + route})}},

如果没有登录,就跳转到登录页面,如果登录了,点击跳转到个人资料页面。
个人资料页面:
在这里插入图片描述

4.3 设置头像区域背景
      <!-- 顶部 背景图 --><view class="bg"><image v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" :src="userInfo.avatar_file.url"mode="aspectFill"></image><image v-else src="../../static/images/user-default.jpg" mode="aspectFill"></image></view>

相关文章:

(十一)、用户中心页面【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】

1,个人中心页面 1.1 新建个人中心页面 1.2 纯净版个人中心页面代码&#xff1a; <template><view class"user"><view class"top"><view class"group"><view class"userinfo"><!-- 顶部 左侧 头像 …...

LA@复数和复矩阵@实对称阵相关定理

文章目录复数&#x1f388;复矩阵和复向量共轭矩阵性质定理实对称阵的相关定理复数&#x1f388; 复数 (数学) (wikipedia.org) 加法&#xff1a;(abi)(cdi)(ac)(bd)i)减法&#xff1a;(abi)−(cdi)(a−c)(b−d)i)乘法&#xff1a;(abi)(cdi)acbciadibdi2(ac−bd)(bcad)i除法&…...

cmd set命令笔记

使用 set是cmd最基础的命令&#xff0c;每个人都会用&#xff0c;但其实它还是有些知识的。 set 用来接收入参 set /p var请选择&#xff08;1或2或3&#xff09;: echo %var%可以接收输入的参数。 set /p var请选择&#xff08;1或2或3&#xff09;: echo %var% 语法 he…...

IB学校获得IBO授权究竟有多难?

IB 学校认证之路&#xff0c;道阻且长 The road to IB school accreditation is long and difficult一所学校能获得IB授权必须经过IBO非常严格的审核&#xff0c;在办学使命&教育理念、组织架构、师资力量&授课技能、学校硬件设施和课程体系上完全符合标准才可获得授权…...

火山引擎 DataTester:A/B 测试,让企业摆脱广告投放“乱烧钱”

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 在广告投放的场景下&#xff0c;一线广告优化师通常会创建多个计划&#xff0c;去测试不同的广告素材效果。这套方法看似科学&#xff0c;实际上却存在诸多问题&…...

黑马redis学习记录:缓存

一、介绍 什么是缓存&#xff1f; 缓存(Cache)&#xff0c;就是数据交换的缓冲区&#xff0c;俗称的缓存就是缓冲区内的数据&#xff0c;一般从数据库中获取&#xff0c;存储于本地代码 缓存无处不在 为什么要使用缓存&#xff1f; 因为速度快,好用缓存数据存储于代码中,而…...

CD20靶向药物|适应症|市场销售-上市药品前景分析

CD20是靶向治疗的第一个靶点&#xff0c;是B细胞淋巴瘤的现代治疗药物。CD20作为治疗剂的使用被认为是方便的&#xff0c;原因有二。首先&#xff0c;在 CD20 阳性肿瘤的情况下&#xff0c;这种受体大量存在于 B 淋巴细胞表面——每个细胞大约有十万个分子。其次&#xff0c;干…...

多源 复制

使复制从属服务器能够同时从多个主服务器接收事务至少需要两个主服务器和一个从属服务器设备从属服务器为每个主服务器创建一个 复制通道从属服务器必须使用基于表的资料档案库多源复制与基于文件的资料档案库不兼容不尝试检测或解决冲突如果需要此功能&#xff0c;则由应用程序…...

微服务项目【消息推送(RabbitMQ)】

创建消费者 第1步&#xff1a;基于Spring Initialzr方式创建zmall-rabbitmq消费者模块 第2步&#xff1a;在公共模块中添加rabbitmq相关依赖 <!--rabbitmq--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-bo…...

vr电力刀闸事故应急演练实训系统开发

电力事故是在电力生产和输电过程中可能发生的意外事件&#xff0c;它们可能会对人们的生命财产安全造成严重的威胁。因此&#xff0c;电力事故应急演练显得尤为重要。而VR技术则可以为电力事故应急演练提供一种全新的解决方案。 在虚拟环境中&#xff0c;元宇宙VR会模拟各种触电…...

C++类和对象补充

目录 前言&#xff1a; 1. 构造函数->初始化列表 1.1 初始化列表出现原因 1.2 初始化列表写法 2. explicit关键字 2.1 explict的出现 2.2 explict的写法 3. static成员 4. 友元 4.1 友元函数 4.2 友元类 5. 内部类和匿名对象 5.1 内部类 5.2 匿名对象 前言&a…...

08 SpringCloud 微服务网关Gateway组件

网关简介 大家都都知道在微服务架构中&#xff0c;一个系统会被拆分为很多个微服务。那么作为客户端要如何去调用这么多的微服务呢&#xff1f; 如果没有网关的存在&#xff0c;我们只能在客户端记录每个微服务的地址&#xff0c;然后分别去用。 这样的架构&#xff0c;会存…...

极验3代 加密分析

目标链接 aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby9zbGlkZS1mbG9hdC5odG1s接口分析 极验参数重要信息 gt和challenge&#xff1b;gt是固定的&#xff0c;但是challenge每次请求会产生不同的&#xff0c;这里的请求的并没有什么加密参数。 下一个请求 gettype.php&#xff0c…...

python 数据分析可视化实战 超全 附完整代码数据

代码数据&#xff1a;https://download.csdn.net/download/qq_38735017/873799141.1 数据预处理1.1.1 异常值检测①将支付时间转为标准时间的过程中发生错误&#xff0c;经排查错误数据为‘2017/2/29’,后将其修改为‘2017/2/27’。②经检测发现部分订单应付金额与实付金额都为…...

有趣的HTML实例(十三) 咖啡选择(css+js)

一个人追求目标的路途是孤单的&#xff0c;一个人独品辛酸的时候是寂寥的&#xff0c;一个人马不停蹄的追赶着&#xff0c;狂奔着&#xff0c;相信前方是一片光明&#xff0c;我从不放弃希望&#xff0c;就像我对生活的信念&#xff0c;没有人可以动摇。 ——《北京青年》 目录…...

【力扣-LeetCode】1139. 最大的以 1 为边界的正方形 C++题解

1139. 最大的以 1 为边界的正方形难度中等137收藏分享切换为英文接收动态反馈给你一个由若干 0 和 1 组成的二维网格 grid&#xff0c;请你找出边界全部由 1 组成的最大 正方形 子网格&#xff0c;并返回该子网格中的元素数量。如果不存在&#xff0c;则返回 0。示例 1&#xf…...

【JavaGuide面试总结】Redis篇·下

【JavaGuide面试总结】Redis篇下1.如何使用 Redis 事务&#xff1f;2.如何解决 Redis 事务的缺陷&#xff1f;3.说说Redis bigkey吧4.大量 key 集中过期问题怎么解决的5.如何保证缓存和数据库数据的一致性&#xff1f;6.缓存穿透有哪些解决办法&#xff1f;7.缓存击穿有哪些解决…...

ForkJoinPool原理

1、概述 Fork/Join框架是Java7提供了的一个用于并行执行任务的框架。ForkJoinPool是Java中提供了一个线程池&#xff0c;特点是用来执行分治任务。主题思想是将大任务分解为小任务&#xff0c;然后继续将小任务分解&#xff0c;直至能够直接解决为止&#xff0c;然后再依次将任…...

02 python基本语法和数据类型

基本语法 python脚本可以在python交互式shell或者代码编辑器中编写与运行。python文件的扩展名一般为.py python使用缩进来区分不同的代码块,此特性有利于提高代码可读性。 下面是一个简单的python条件语句代码: 小明=矮穷错 小红=白富美 小华=高富帅 小李=程序员某人 = &quo…...

【办公类-16-09】“2022下学期 大班运动场地分配表-跳过节日循环排序”(python 排班表系列)

样例展示&#xff1a;跳过节日的运动场地循环排序表&#xff08;8个班级8组内容 下学期一共20周&#xff09;背景需求&#xff1a;上学期做过一次大班运动场地安排&#xff0c;跳过节日。2023.2下学期运动场地排班&#xff08;跳过节日&#xff09;又来了。一、场地器械微调二、…...

全网多种方法分析解决HTTP Status 404资源未找到的错误,TCP的3次握手,dns域名解析,发起http请求以及cookie和session的区别

文章目录1. 文章引言2. 简述URL3. http完整请求3.1 DNS域名解析3.2 TCP的3次握手3.3 发起http请求3.4 浏览器解析html代码3.5 浏览器对页面进行渲染呈现给用户4. 解决404错误的方法5. 补充知识点5.1 cookie和session的区别5.2 ChatGPT的介绍1. 文章引言 正赶上最近ChatGPT很火…...

Django图书商场购物系统python毕业设计项目推荐

mysql数据库进行开发&#xff0c;实现了首页、个人中心、用户管理、卖家管理、图书类型管理、图书信息管理、订单管理、系统管理等内容进行管理&#xff0c;本系统具有良好的兼容性和适应性&#xff0c;为用户提供更多的网上图书商城信息&#xff0c;也提供了良好的平台&#x…...

基于模型预测控制(MPC)的悬架系统仿真分析

目录 前言 1.悬架系统 2.基于MPC的悬架系统仿真分析 2.1 simulink模型 2.2仿真结果 2.3 结论 3 总结 前言 模型预测控制是无人驾驶中较为热门的控制算法&#xff0c;但是对于悬架等这类系统的控制同样适用。 我们知道模型预测控制主要可以划分为三个部分&#xff1a; …...

Word处理控件Aspose.Words功能演示:使用 Java 拆分 MS Word 文档

Aspose.Words 是一种高级Word文档处理API&#xff0c;用于执行各种文档管理和操作任务。API支持生成&#xff0c;修改&#xff0c;转换&#xff0c;呈现和打印文档&#xff0c;而无需在跨平台应用程序中直接使用Microsoft Word。此外&#xff0c;API支持所有流行的Word处理文件…...

图扑数字孪生智慧机场,助推民航“四型机场“建设

前言 民航局印发的《智慧民航建设路线图》文件中&#xff0c;明确提出智慧机场是智慧民航的四个核心抓手之一。并从机场全域协同运行、作业与服务智能化、智慧建造与运维方面&#xff0c;为智慧机场的发展绘制了清晰的蓝图。 效果展示 图扑软件应用自主研发核心产品 HT for …...

内网安装管家婆软件如何实现外网访问?内网穿透的几种方案教程

管家婆软件从网络架构上分两种版本&#xff1a;web&#xff08;浏览器http端口&#xff09;访问的版本和客户端&#xff08;211固定端口sqlserver数据库&#xff09;访问的版本。公司库管经常用仓库登录管家婆&#xff0c;一旦需要在公司外部登陆访问管家婆客户端&#xff0c;就…...

CCNP350-401学习笔记(1-50题)

1、Which function does a fabric edge node perform in an SD-Access deployment?A. Connects endpoints to the fabric and forwards their traffic. B. Encapsulates end-user data traffic into LISP. C. Connects the SD-Access fabric to another fabric or external La…...

基于微信小程序的新冠肺炎服务预约小程序

文末联系获取源码 开发语言&#xff1a;Java 框架&#xff1a;ssm JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7/8.0 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.3.9 浏览器…...

网站项目部署在k8s案例与Jenkins自动化发布项目(CI/CD)

在K8s平台部署项目流程 在K8s平台部署Java网站项目 制作镜像流程 第一步&#xff1a;制作镜像 使用镜像仓库&#xff08;私有仓库、公共仓库&#xff09;&#xff1a; 1、配置可信任&#xff08;如果仓库是HTTPS访问不用配置&#xff09; # vi /etc/docker/daemon.json { "…...

网络原理 (1)

网络原理 文章目录1. 前言&#xff1a; 2. 应用层2.1 XML2.2 json2.3 protobuffer3. 传输层3.1 UDP3.1 TCP4. TCP 内部的工作机制 &#xff08;重点&#xff09;1. 确认应答 2.超时重传3. 连接管理3.1 建立联系 &#xff1a;三次握手3.2 断开连接 : 四次挥手4. 滑动窗口5. 流量…...

化妆品网站建设经济可行性分析/营销和销售的区别

有关 Function 的默认值参数&#xff0c;会有一些坑&#xff0c;初学时容易中招和疑惑&#xff0c;所以花点时间研究一下&#xff0c;加深印象。更多 Python 基础系列文章&#xff0c;请参考 Python 基础系列大纲 引用官网内容&#xff0c;主要是强调默认参数只在定义时初始化…...

该网站暂时无法访问404/谷歌官方网站登录入口

因为目前java非常火&#xff0c;应用非常的广泛&#xff0c;是目前最火的行业之一&#xff0c;竞争很大&#xff0c;工资很高&#xff0c;未来发展也极好。 我个人建议&#xff1a; 如条件还可以&#xff0c;负担不是那么大&#xff0c;可以选择培训&#xff0c;培训一定会比你…...

义乌购物网站建设多少钱/杭州seo平台

上一个章节介绍了如何将日志存放到数据库里&#xff0c;可能会觉得这不是多此一举么&#xff0c;非也&#xff0c;既然能够放在数据库里是不是就可以实现LAMP组合起来搭建一个web界面来管理日志呢&#xff0c;这刚好有一个软件帮我们实现了这个功能"loganalyzer"。下…...

哪个网站可以做彩经专家/网络营销与电子商务的区别

引用自&#xff1a;http://www.cnblogs.com/anytao/category/155694.html 作者&#xff1a;Anytao 本文将介绍以下内容&#xff1a; • 类型转换 • is/as操作符小议 1. 引言 类型安全是.NET设计之初重点考虑的内容之一&#xff0c;对于程序设计者来说&#xff0c;完全把握系…...

网站反向代理怎么做/百度公司怎么样

5 种使用 Python 代码轻松实现数据可视化的方法#故事数据可视化PYTHON数据可视化是数据科学家工作中的重要组成部分。在项目的早期阶段&#xff0c;你通常会进行探索性数据分析&#xff08;Exploratory Data Analysis&#xff0c;EDA&#xff09;以获取对数据的一些理解。创建可…...

分析网站做的好坏/网络广告营销案例

建一个表 t_hoteladvertise 有如下字段&#xff1a;ID 自动增长(主要)SortID INT (主要)Title NVARCHAR(50) 代码: CREATE proc sp_ehotel_DownAdvertiseID INTasDECLARE SortID intDECLARE TempSortID INTDECLARE TempID INTBEGIN TRANSELECT SortIDSortID from t_hote…...