首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

40、个人中心页面

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

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

    威联通(NAS)搭建个人音乐中心

    就想着自己搭建一个音乐中心。 看了看威联通内置的音乐播放器和功能,感觉很鸡肋,所以就放弃了。...配置音乐中心 登录网站 打开你的 Container 当时设置的静态 IP,我的当时设置的是:192.168.31.130,所以我在浏览器地址栏输入:http://192.168.31.130 就打开了...配置个人设置:点击左侧【My Account】-【Settings】,找到 Subsonic API password,生成密码,用于手机、电脑的客户端连接音乐中心。 ?...以上音乐中心服务已经配置好了,下边配置的是手机客户端的配置。...如果要配置手机客户端,要具备以下几点: 有公网 IP,或者服务搭建在公网服务器上(可以通过内网穿透解决) 有域名解析到对应的 IP 上 确认公网通过域名可以打开音乐中心的网站 前边教程要求开启的 Subsonic

    3.9K40

    个人总结 – JS逆向解析

    解决方法:复制完整的混淆代码js混淆还原网站还原。...注意:很多时候,js代码的生成函数都进行了伪装,核心的东西只有一句,但有一堆混淆视听的js,只需要找到核心代码,进行解析就行 ---- eval加密: eval()方法:js中的eval()方法就是一个...js语言的执行器,它能把其中的参数按照JavaScript语法进行解析并执行,简单来说就是把原本的js代码变成了eval的参数,变成参数后代码就成了字符串,其中的一些字符就会被按照特定格式“编码” 。...js 生成函数的引用,一步步往回推,找到最原始的 js 生成方法 找到以后,把这个function 方法全部代码取出来,另存为一个js文件。...在执行之前,同样要修改js脚本,在js文件末尾调用e方法,添加如下代码,例: var a; var param = e(2,a); return param; 注意:调用方法不要放在任何函数里面,我之前就是因为将这段代码放在函数里头强制执行

    4.8K30

    个人博客系统开发-个人中心功能实现及其他

    今天我们继续开发个人博客系统,昨天我们做了登录功能,今天我们完善一下后台主页,并作出个人资料的修改功能。...一、创建个人主页模板 在admin模块view目录下创建Common文件夹,里面新建公共头文件header.html,在Index中新建index.html文件(后台首页文件),具体代码文件已经同步至码云...二、创建个人中心模板 个人中心包含账户名称、密码及手机号这三者的修改和展示。 ? 三、个人中心功能实现 代码如下: <?php /**  * Created by PhpStorm....function out()     {         session(null, 'thinkBlog');         $this->success('成功退出');     } } 四、退出登录 代码见三中代码

    99630

    九、个人中心功能开发

    九、个人中心功能开发 9.1.drf的api文档自动生成和 (1) url #drf文档,title自定义 path('docs',include_docs_urls(title='仙剑奇侠传...')), 访问:http://127.0.0.1:8000/docs  就可以自动生成 (2)drf文档的优点: 自动生成 文档里可以做交互和测试 可以生成js,shel和python代码段 (3)...代码中注释的格式: ViewSet的格式,更多请看官方文档 class GoodsListViewSet(mixins.ListModelMixin, mixins.RetrieveModelMixin...Description 添加字段的描述有三种方式: model的字段中加 serializer的字段加 filter中也可以加 9.2.动态设置serializer和permission获取用户信息  用户个人信息修改...,因为手机号是验证过的,不能随便改 在会员中心页面,想要获取个人信息,只需在UserViewset中多继承一个类:mixins.RetrieveModelMixin  (1)用户详情的序列化 users

    89110

    Fabric.js 元素中心缩放

    本文简介 点赞 + 关注 + 收藏 = 学会了 使用 fabric.js 创建的图形,默认的缩放原点是元素操作点的对角点。 如下图所示: 如果按住 alt 键 操作会把原点移动到元素中心。...// 省略部分代码. // 方式1 let canvas = new fabric.Canvas('canvasBox', { centeredScaling: true // 全局所有元素都生效...单独设置指定元素 如果只是设置指定元素以中心点为缩放原点,那么被设置的元素会生效,其他元素不会生效。 本例只将矩形设置成以中心点为缩放原点,圆形还是默认的操作。...所以在操作矩形缩放时是以中心点为原点,圆形还是默认值。 同样,也支持在创建元素后再设置。 // 省略部分代码 let rect = new fabric.Rect({...})...rect.centeredScaling = true 代码仓库 ⭐ Fabric.js 中心缩放

    3K10

    个人笔记(js+css篇二)

    在JavaScript中,任务被分为两种,一种宏任务(MacroTask),一种叫微任务(MicroTask) 常见的宏任务: script全部代码、setTimeout、setInterval 常见的微任务...: Promise中then的回调函数、MutationObserver、Process.nextTick 事件循环过程 (1) js代码执行时,先按代码顺序将同步任务压入主执行栈中执行 (2) 遇到异步任务则先将异步任务压入对应的任务队列中...('script结束'); 最后的结果是什么呢: 进入demo函数后会照常执行后面的fun函数,但是发现前面是await,就会阻塞其所在表达式中后续表达式的执行,跳出async函数,执行外面的同步代码...,先执行async外面的同步代码,同步代码执行完,再回到async内部,把这个非promise的东西,作为 await表达式的结果 如果它等到的是一个 promise 对象,await 也会暂停async...后面的代码,先执行async外面的同步代码,等着 Promise 对象 fulfilled,然后把 resolve 的参数作为 await 表达式的运算结果。

    40410

    个人笔记(js+css篇一)

    下面的回答转载自知乎回答:网址:https://zhuanlan.zhihu.com/p/26523836,然后自己修改了一点 Promise是什么: 简单来说,promise就是一个用来编写异步代码的东西...不过它还有另外一个作用:在执行resolve的回调(也就是上面then中的第一个参数)时,如果抛出异常了(代码出错了),那么并不会报错卡死js,而是会进到这个catch方法中。...如果它等到的是一个 Promise 对象,await 就忙起来了,它会阻塞后面的代码,等着 Promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果。...又一个疑问产生了,这两段代码,两种方式对异步调用的处理(实际就是对 Promise 对象的处理)差别并不明显,甚至使用 async/await 还需要多写一些代码,那它的优势到底在哪?...本文由“壹伴编辑器”提供技术支持 原生js操作DOM 获取body元素: document.body 获取html元素: document.documentElement 这个其实用的也不多,那就写几个用的比较多的吧

    53120

    Node.js 微服务如何实现注册中心和配置中心

    微服务架构的系统都会有配置中心和注册中心。 为什么呢? 比如说配置中心: 系统中会有很多微服务,它们会有一些配置信息,比如环境变量、数据库连接信息等。...那么问题来了: 微服务 A 依赖了微服务 B,写代码的时候 B 只有 3 个节点,但跑起来以后,某个节点挂掉了,并且还新增了几个微服务 B 的节点。...可以做配置中心、注册中心的中间件还是挺多的,比如 nacos、apollo、etcd 等。 今天我们来学下 etcd 实现注册中心和配置中心。 它其实是一个 key-value 的存储服务。...全部代码如下: const { Etcd3 } = require('etcd3'); const client = new Etcd3({ hosts: 'http://localhost:2379...在微服务架构的后端系统中,配置中心、注册中心是必不可少的组件,不管是 java、go 还是 Node.js

    45020

    调试JS代码

    记录下近期对JS代码的调试过程 性能分析 启动程序之后,打开google浏览器对应页面,按F12或者Ctrl+Shift+I进入 开发者工具页面 目前主要使用的功能有: Performance....性能评估,比如我想看下页面刷新的性能瓶颈所在,先点击 按钮,然后进行页面操作,当页面刷新完成,再点击 按钮,则会生成性能报告,可以看到资源消耗,JS代码的执行逻辑等 Sources....性能报告页面的 部分,可以通过点击色块查看其所在的js代码文件,如 点击则会跳转到 功能栏,有了源文件就可以进行断点调试;这里注意部分js文件是压缩后的文件,建议手动修改程序替换成可读性更强的原始代码文件...查看程序的打印输出,比如我想知道某个函数的执行时间,可以在js代码中进行修改 当js代码执行之后,可以在console输出中看到foo的执行时间 Network....代码使用for循环进行操作,也就是线性复杂度,计算耗时随数据量的增大而线性增大 通过debug观察发现颜色数组会有不少重复的数值,而同样的输入会导致相同的输出,然后对整个数据的1M个点进行统计分析,发现重复率相当高

    19K10

    js代码规范

    前言 在js代码开发中,我简单的总结出了以下规则,后面会陆续补充并且对规范进行分类。...js代码建议保存到后缀名.js的文件中 js代码不建议放在html中,原因有:不能被缓存,会增大网页文件的大小,可维护性不高,会影响页面的加载。...js吧任何表达式都当一条简单语句,会导致一些隐性的错误。如果自己没加分号,那么js解释器会自动添加分号,按照自己能读懂的断句。 9.2 复合语句 也称为语句块,被包在大括号内部。...比如对象 var obj={} ;var arr=[] eval eval是最容易混乱使用的js函数,他可以执行内部入参的js函数或者表达式,可以直接解析变量。不建议使用 。...尽量使用语法严格模式 消除代码之中的不友好;代码运行更快 ;保证运行的安全 ;为新版本的js做好铺垫。 22.

    8.9K30

    JS代码混淆 | js 逆向系列

    /UglifyJS/ https://github.com/LiPinghai/UglifyJSDocCN/blob/master/README.md 使用方法 npm install uglify-js...-g uglifyjs example.js -c -m --mangle-props -c 代码压缩 -m 代码混淆 --mangle-props 混淆属性名 -b 美化显示 // 原代码 const...JShaman https://www.jshaman.com/ JShaman 是国内公司开发的js代码加密商业产品 免费版可以直接使用 // 原代码 const person = { age...,通过数组、字典等各种形式存储、拼接、替换等,最终进行还原,这里面没有利用到复杂的语法以及js 语言本身的特性,所以我们一点点解开也学不到什么; 这个代码就不一样了,我们一步一步解开它,尝试去学习其中的思路...console.log(c) 这次我们设计三个返回值,分别是函数定义、数值、字符串 看到这,我都蒙了,经过查询资料,我找到了两个维度的复杂的原因 JavaScript 中函数只能有一个返回值,你就说这玩意如果没学过 js

    2.4K10

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

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

    27010

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

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

    4.3K23
    领券