9.前端初步设计

前端,初步设计 · 浏览次数 : 73

小编点评

## 后台页面简介 * 登录注册页面:仅包含导航栏和头像,可用于展示个人信息。 * 注册页面:需要输入用户名、密码、邮箱和验证码。 * 注册成功后可登录博客,但默认情况下无法访问功能。 ## 功能概述 * 首页:展示博客目录,包含一个导航栏、logo和头像。 * 个人信息页面:包含个人信息、每日一言、友链设置、发布文章列表和菜单卡片。 ## 调整建议 * 完成页面调整后,可以考虑添加查看功能。 * 可根据个人喜好调整页面外观和样式。 * 对前端开发有基础的可以参考其他前端框架的教程。

正文

空了挺长时间没写了。一些琐事耽误,然后另一方面就是在写前端。因为我不是学前端出身,所以前端相对比较弱,一下子我也搞的不是很全面,最主要的是没法讲的很细致,前端这东西吧,都说简单,但是想做的很好看那还是需要一些深入学习的。上一篇的文章是邮箱发送,意在做注册的时候发送验证码。现在页面基本完成了,毕竟登录注册页面也没啥东西。这个文章就是讲一下前端现有的页面以及功能。


登录注册页面

简单的登陆注册页面,注册的话就需要验证码, 验证码会发送到你输入的邮箱中,有效期10分钟。然后注册成功就可以登录了,原本想做博客+管理系统的,所以暂时没有加权限登录,所以暂时即便不登陆也是可以进入的,只是说一些功能可能没法用。最后我会录个视频可能看着效果比较好点

 首页

首页目前就是以博客目录展示的,一个导航栏,左边logo右边头像,截图好像是遮住了…侧边栏是一个个人信息的展示卡片。一开始也是参考网上的个人网站做的,可能跟我想设计的网站稍微有些差距,但当时觉得好看,加上我也没有确定的目标要做成什么样(前端太需要审美了……如果有建议可以告诉我一下,我现在还是挺头疼的)

不登陆的话,个人卡片上面显示的就不是截图里的FastEasy用户了、当然这个是注册的时候默认的用户名,是可以更改的。不登陆的话默认就是FastEasy。然后用户昵称下面是个每日一言,然后模拟了一个打字输入的效果。最下面有5个链接,可以设置自己的友链啥的,这个也不是非必须的。

个人卡片下面是个菜单卡片,目前也可以看到只有1个发布文章的菜单。发布的文章列表会显示在最右边的文章目录中了。现在写这个文章的 时候还没有做查看的功能。稍后会完善

 发布文章页面

做的有点丑……不过初步咱们注重的是功能,好看的ui就需要打磨css样式了~

一开始使用的是富文本编辑器,但是那个没法在工具栏加自定义按钮,也可能是我没搞明白(TinyMCE),目前没有删除。

然后选择了另一个开源的MarkDown编辑器Vditor。这个还挺符合我的审美的,主要的是可以在工具栏加自定义的按钮,加了一个返回首页和保存发布的按钮。就像我截图里一样……

 初步就这样了。东西不多,但是调整样式太费时间了

视频:https://www.bilibili.com/video/BV17w411A7Qe/


 

文章展示页面

 

与9.前端初步设计相似的内容:

9.前端初步设计

空了挺长时间没写了。一些琐事耽误,然后另一方面就是在写前端。因为我不是学前端出身,所以前端相对比较弱,一下子我也搞的不是很全面,最主要的是没法讲的很细致,前端这东西吧,都说简单,但是想做的很好看那还是需要一些深入学习的。上一篇的文章是邮箱发送,意在做注册的时候发送验证码。现在页面基本完成了,毕竟登录

有点东西,template可以直接使用setup语法糖中的变量原来是因为这个

你知道为什么setup语法糖中的顶层绑定可以在template中直接使用的呢?setup语法糖是如何编译成setup函数的呢?

使用js开发一个快速打开前端项目的alfred插件

使用js开发一个快速打开前端项目的插件 目录 前言 使用的技术栈 步骤 问题发现 待优化 前言 一直以来开发都是先打开vscode,然后选择项目,在项目多的情况下会觉得挺繁琐;如果同时打开了许多vscode窗口,寻找目标窗口也比较麻烦,于是萌生了开发一个alfred的工作流插件的想法,目标是在alf

前端使用 Konva 实现可视化设计器(9)- 另存为SVG

请大家动动小手,给我一个免费的 Star 吧~ 大家如果发现了 Bug,欢迎来提 Issue 哟~ github源码 gitee源码 示例地址 另存为SVG 这一章增强了另存为的能力,实现“另存为SVG”,大概是全网唯一的实例分享了吧。 灵感来源:react-konva-custom-context

记录几十页html生成pdf的历程和坑(已用bookjs-easy解决)(生成、转换、拼接pdf)

懒得看的朋友,先说最终解决办法,主力为 前端依靠插件 bookjs-easy(点击直接跳转官网)并跳转到下面的第三点查看 接下来详细记录下整个试探的方向和历程 项目需求:是生成一个页数达到大几十页的pdf,然后这个pdf包含表格、折线图、图片等,且横竖幅交叉,即竖版页面和横板页面交叉 1.首先我们讨

ChatGPT的原理与前端领域实践

## 一、ChatGPT 简介 ### ChatGPT的火爆 ChatGPT作为一个web应用,自22年12月发布,仅仅不到3个月的时间,月活用户就累积到1亿。在此之前,最快记录的保持者也需要9个月才达到月活1亿。 ![](https://p3-juejin.byteimg.com/tos-cn-i

antd 3.x升4.x踩坑之路~

我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。 兼容性问题 第三方依赖兼容问题 React - 最低 v16.9,部分组件使用 hooks 重构 react升级相关文档 Less - 最低 v3.1.0,建议升级到

前瞻 PHP8.4 的新特性

前瞻 PHP8.4 的新特性 PHP 8.4 将于 2024 年 11 月 21 日发布。它将包括属性钩子、JIT 改进,以及在不需要额外括号的情况下链式调用方法。这是一个大变化! 属性钩子 RFC 现代 PHP 历史上最大的变化之一:定义属性钩子的能力。 class BookViewModel {

C#实现多线程的几种方式

前言 多线程是C#中一个重要的概念,多线程指的是在同一进程中同时运行多个线程的机制。多线程适用于需要提高系统并发性、吞吐量和响应速度的场景,可以充分利用多核处理器和系统资源,提高应用程序的性能和效率。 多线程常用场景 CPU 密集型任务. I/O 密集型任务. 并发请求处理. 大数据处理等. 什么是

实战0-1,Java开发者也能看懂的大模型应用开发实践!!!

前言 在前几天的文章《续写AI技术新篇,融汇工程化实践》中,我分享说在RAG领域,很多都是工程上的实践,做AI大模型应用的开发其实Java也能写,那么本文就一个Java开发者的立场,构建实现一个最基础的大模型应用系统。 而大模型应用系统其实在目前阶段,可能应用最广的还是RAG领域,因此,本文也是通过