首页
学习
活动
专区
圈层
工具
发布

40、个人中心页面

前言:本章把个人中心页面写完,基本上这个项目的前端页面制作方面的工作大体就完成了,其它不足的我们在前后端交互的时候继续完善。...GitHub:https://github.com/Ewall1106/mall 1、新建 老规矩,我们还是复制一份test.vue文件并重命名为me,作为个人中心的页面。 路由注册 ?...新建个人中心页面 这样我们个人中心的页面就算是建立完成了。 2、基本结构及样式 (1)顶部栏 因为顶部栏这一块经常使用,所以我还是把它抽离成了一个组件,结构和样式都从以前的页面复制粘贴而来。...昵称头部、历史及其它模块 3、小结 我们先来看看个人中心页面的基本完成效果: ? 个人中心页面的基本完成效果 至此,我们这个项目的前端主要页面就写完了,一共啰嗦了40章,其中的知识点还是挺多的。

2.3K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    九、个人中心功能开发

    九、个人中心功能开发 9.1.drf的api文档自动生成和 (1) url #drf文档,title自定义 path('docs',include_docs_urls(title='仙剑奇侠传...Description 添加字段的描述有三种方式: model的字段中加 serializer的字段加 filter中也可以加 9.2.动态设置serializer和permission获取用户信息  用户个人信息修改...,因为手机号是验证过的,不能随便改 在会员中心页面,想要获取个人信息,只需在UserViewset中多继承一个类:mixins.RetrieveModelMixin  (1)用户详情的序列化 users...return [] return [] #这里需要动态选择用哪个序列化方式 #1.UserRegSerializer(用户注册),只返回username和mobile,会员中心页面需要显示更多字段...                           -->>动态权限分配 get_serializer_class                     -->>动态序列化分配 现在就可以从数据库获取用户的信息了 用户个人信息修改

    1.2K10

    Harmony 个人中心(页面交互、跳转、导航、容器组件)

    首先我们在DevEco Studio中创建一个名为MyCenter的功能,如下图所示: 点击Finish创建项目,项目创建好之后,通过预览就能看到Hello World,下面来说明一下这次开发的个人中心...App包含的内容,首先是一个登录页面,登录进去之后可以通过底部导航切换页面内容,分别是首页和个人的内容,下面我们首先来写登录页面。...五、我的 首先我们看一下我的页面的图 内容同样是呈纵向摆放的,上面是个人信息,中间这里是一个功能列表,最下面是退出按钮,下面我们首先提供列表的数据,在IndexViewModel中写一个函数,代码如下所示...left: 12 }) } .width('100%') .alignItems(HorizontalAlign.Start) // 个人信息...pages/Login' }) }) } .height('100%') } } } 这个代码乍一看很多,下面我们来分析一下,从上往下来,首先是标题和个人信息

    8.7K23

    制作一个简洁优雅的个人中心页面

    在开发现代应用时,个人中心页面是用户与应用互动的重要界面。设计良好的个人中心页面不仅能提升用户体验,还能提高用户的留存率。本文将通过示例,详细讲解如何设计和开发一个简洁而功能丰富的个人中心页面。1....项目结构我们使用 Vue.js 作为前端框架,结合灵活的 CSS 样式,打造简约但功能齐全的个人中心页面。主要功能包括:会员管理、安全设置、协议查看等。...UI设计在设计个人中心页面时,保持简洁美观尤为重要。我们使用了柔和的颜色和简洁的布局,使整个页面显得干净利落,用户可以轻松浏览和操作。...总结个人中心页面的设计应该以用户为中心,简洁易用。通过合理的布局、交互设计和样式应用,我们不仅提升了页面的视觉效果,还增强了用户体验。...如果你正在设计个人中心页面,不妨参考以上示例,结合你自己的应用需求,打造一个高效、简洁的页面。

    2.1K10

    《仿盒马》app开发技术分享-- 个人中心页面(19)

    ## 技术栈Appgallery connect## 开发准备上一节我们实现了分类页面的所有联动效果,这一节我们要开始完成一个新的页面,这个页面是我们主界面的第四个板块,就是个人中心页面。...在这个模块,我们可以显示一些用户信息,以及用户相关的各类功能的入口## 功能分析要实现个人中心页面,首先我们要规划好整体的布局,我们选择从上到下实现,分为三块,一块显示用户信息,一块显示关键信息,一块用来展示用户相关的各种入口列表...backgroundColor("#f7f7f7") .justifyContent(FlexAlign.Start) .alignItems(HorizontalAlign.Start) }}到这里我们就实现了个人中心的静态页面了

    24200
    领券