创新实训博客(8)——前端界面设计(基本部分)

初步的界面设计构想,后期可能会根据实际需要进行一定的修改。

复用组件(1)—Tip-Item

创新实训博客(8)——前端界面设计(基本部分)

复用组件(2)—Tag-Item

创新实训博客(8)——前端界面设计(基本部分)

复用组件(3)—Blog-Item

创新实训博客(8)——前端界面设计(基本部分)

复用组件(4)—Blog-Detail-Item

创新实训博客(8)——前端界面设计(基本部分)

复用组件(5)—Author-Detail-Item

创新实训博客(8)——前端界面设计(基本部分)

用户登录界面

这部分比较简单,就是一个用户名输入框和密码输入框

然后登录按钮是向后端发请求,返回对应的信息然后进行处理

这里点击用户名这个列表后,会展示一个下拉列表,记录着曾经使用过的用户名

创新实训博客(8)——前端界面设计(基本部分)

用户注册界面

这里的注册界面就类似于比较基本的注册

仅仅需要提供一些必要的信息,剩下的信息可以在个人信息编辑的时候进行添加和更改

创新实训博客(8)——前端界面设计(基本部分)

用户个人信息界面

首先是显示用户头像、用户名和用户角色的一个界面

然后下面是用户的详细信息,可以编辑,然后点击提交向后端发数据进行修改

右侧侧边栏显示一些简单的数据,比如个人喜欢的标签、个人曾经看过的博客等等

创新实训博客(8)——前端界面设计(基本部分)