2020/03/21 02-导航栏布局和博文发布

最新推荐文章于 2024-06-17 13:43:30 发布
最新推荐文章于 2024-06-17 13:43:30 发布
阅读量397 收藏
点赞数
分类专栏： 61前后端分离博客项目(七)核心业务开发与项目部署
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42227818/article/details/105017642
版权

看看antdesign有没有导航菜单借用，现在的导航栏太丑
在这里插入图片描述
手风琴愿意用就用，不过后端管理用手风琴的样式更多一点

在这里插入图片描述
在这里插入图片描述
每一块有show code照着抄就行
在这里插入图片描述
改变样式，只要把开关调一下就好了

在这里插入图片描述
要用的话大概写法是这样子的

在这里插入图片描述
这些都是属性，菜单项，还有子菜单应该怎么写都很清楚

在这里插入图片描述
要图标就把这两个东西抄一下

在这里插入图片描述
改首页
在这里插入图片描述
当时我们的index并不是很好，这些都是可视化组件，应该放在component里单独建立一个home，about的
在这里插入图片描述
root也应该单独提走，把这个root改成app也行
在这里插入图片描述
应该单独提走导入进来使用
在这里插入图片描述
所以这三个组件都应该搬走，跟之前的login，reg一模一样的
在这里插入图片描述
把antd引入进来
在这里插入图片描述
可以到这里面找
在这里插入图片描述
复制一下

在这里插入图片描述
menu。item是菜单项，菜单项就是上面的
在这里插入图片描述
要求每个item都有个key
在这里插入图片描述
既然是key，就是唯一的
在这里插入图片描述
弄成这样就行了
在这里插入图片描述
现在已经都出现了

在这里插入图片描述
上面的导航就直接删除不要了
在这里插入图片描述
这里是有一些图标的
在这里插入图片描述
看看有没有叫home的图标

在这里插入图片描述
就是一个小房子

在这里插入图片描述
查的话就查icon，常用的图标都有
在这里插入图片描述

在这里插入图片描述
这个login放在link外面，上面的放在link里面

在这里插入图片描述
上面是在link外面的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这一块是发布链接在一起的，发布文章，文章可以用列表来显示

在这里插入图片描述
这两个发布和文章列表做不了路由，因为没有相应的组件类在这里插入图片描述
不配route底下没办法换组件
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
这里有告诉我们如何布局
在这里插入图片描述
布局有几种方式
在这里插入图片描述
一般都是上中下布局在这里插入图片描述
一般菜单导航栏是百分百在这里的
在这里插入图片描述
有很多种风格
在这里插入图片描述
一般后台管理这么做

在这里插入图片描述
一般都是上中下布局

在这里插入图片描述
这分别是一种布局方案

在这里插入图片描述
上中下布局往这里一抄
在这里插入图片描述
这一句一定要，把这里解构了，好几个模块

在这里插入图片描述
sider不要，不要侧边栏
在这里插入图片描述
这部分照抄即可

在这里插入图片描述
如果要复杂，这里还有logo

在这里插入图片描述
这个叫面包屑，下面是正文内容
在这里插入图片描述
名字，layout里面是header，里面是div，div里就是logo，classname名字一定要叫logo
在这里插入图片描述
这一部分是menu，选mode就是水平化

在这里插入图片描述
现在是这三部分

在这里插入图片描述
菜单项现在就应该放在头部，内容项，点不同连接就需要换
在这里插入图片描述
footer部分放点东西

在这里插入图片描述
现在就可以换了

在这里插入图片描述
看看能否控制
在这里插入图片描述
就居中了

在这里插入图片描述
内部内容可以放到div里，控制div的style，在这上面做一些变化
在这里插入图片描述
现在就这么大

在这里插入图片描述
写一下margin=auto
在这里插入图片描述
就居中了

在这里插入图片描述
还可以再加一些
在这里插入图片描述

在这里插入图片描述
其实应该些classname，然后采用美工的样式表来控制，通过外部样式表来控制，写在行内这样不好在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
这里有一个最小的高度

在这里插入图片描述
写一个200看看变成什么样子

在这里插入图片描述
页面没有内容，低下的footer会往上走，非常难看，所以给一个最小高度来把这个页面撑起来

在这里插入图片描述
icon的位置要注意，否则会错位

在这里插入图片描述
现在要解决发布和文章列表
在这里插入图片描述
一般都是上中下结构，然后中间再分左右，还是左中右

在这里插入图片描述
需要写一个发布的组件出来
在这里插入图片描述
service里还有个跟post相关的js
在这里插入图片描述
可以照抄user
在这里插入图片描述
在这里插入图片描述
这就是pub
在这里插入图片描述
下面开始写组件
在这里插入图片描述
组件写完后，下面要注册到index里来
在这里插入图片描述
在这里插入图片描述
现在内容就有了
在这里插入图片描述
主要是提交什么，可以先写service，postservice先写，还有一种就是先写组件。
我们先写后台，先把user的拷贝一下
在这里插入图片描述
放到post里

在这里插入图片描述
发送一个response，现在数据发送了，应该会有一个提交成功与否

在这里插入图片描述
这一块用不上token,提交成功与否要告诉它，成功之后怎么做，也需要考虑
在这里插入图片描述
写成这样差不多了，后台的写法，和pub相关的，因为回来就是postid，postid可以塞入到某个里面去，比如说在表单里加hidden，如果提交成功把里面的值改改，它的值就是对象，{}大括号，如果id有值就是修改，没有值就是新的博客文章
在这里插入图片描述
发布页面其实也需要一个表单

在这里插入图片描述
一般网站安全性较差，一般注册不要填太多信息

在这里插入图片描述
要在服务器端做验证，来判断浏览器端传的数据到底是对的还是错的
在这里插入图片描述
这里资源很丰富，缺什么来这里找就行
在这里插入图片描述
主要看render里怎么写，form里有layout

在这里插入图片描述
看formlayout哪里来的，是通过onclick发生变化，是决定竖向还是横向在这里插入图片描述
formitem里面还可以增加formitem的样式

在这里插入图片描述
formitem的layout是这么写的在这里插入图片描述
照这里抄一下
在这里插入图片描述
这三个加一下

在这里插入图片描述
可以抄一块内容
在这里插入图片描述
抄它
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
表单有了要加表单项formitem，可以写一个input
在这里插入图片描述
title是第一项

在这里插入图片描述
但是内容做不来单行的，要在input输入框里去找
在这里插入图片描述
就是input textarea
在这里插入图片描述
在这里插入图片描述
定义个10行

在这里插入图片描述
就有一些东西了

在这里插入图片描述
在这里插入图片描述
差不多了
在这里插入图片描述
这两个前面应该有东西 在这里插入图片描述
看看form表单这里怎么来的
在这里插入图片描述
这里有label

在这里插入图片描述
加一下formitem，让它受formitem控制，placeholder是在框子里有提示的
在这里插入图片描述
label像标签一样的

在这里插入图片描述
想要跑到前面去
在这里插入图片描述

48N6E
关注
专栏目录
vue3+ant-design-vue - 最新实现“侧边动态导航栏+面包屑导航“功能，vue3+ant后台管理系统左侧动态菜单栏和面包屑菜单实现，面包屑和菜单根据路由动态自动处理（详细示例代码）
高级前端工程师
04-02 2542
vue3，ant-design-vue，antd，el-breadcrumb，a-menu，动态导航栏和面包屑，vue3+ant design vue动态面包屑，动态导航栏，菜单栏，vue3监听路由变化,动态修改面包屑，antd-vue3实现面包屑，vue3中使用antd-vue实现面包屑导航，头部面包屑导航，vue后台管理系统，面包屑头部导航栏，详细示例demo，动态生成面包屑导航教程，新手小白详细示例，面包屑和布局和菜单demo，面包屑和导航菜单的联动，如何跟随路由变化，监听路由变化,动态修改面包屑，v
Android 将App的内容延伸到状态栏/导航栏
热门推荐
Jokerlee的博客
08-12 1万+
看过Android的桌面应用都是介样的： 如何让自己的应用也达到这般效果呢？这里就介绍几种常用的方法以及它们之间的区别。首先展示下此次demo的布局和初始状态：<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xm
修改Worldpress主题的Footer/Header部分
RichardLau_Cx的博客
06-16 1096
修改Worldpress主题的Footer/Header部分 1. 进入wp管理后台自定义界面 - 访问网络地址: [Your Domain]/wp-login.php - 需填写：Username or Email Address/Password 2. 据需修改对应的Footer内容
woocommerce分类页面模板_模板文件早知道，让修改网站不再出错
weixin_39801075的博客
12-06 394
templets/：模板文件default/：系统默认的模板风格images/：默认模板中所用到的图片 js/：默认模板中所用到的JS文件 css/：默认模板中所用到的CSS文件advancedsearch.htm模型自定义搜索页面 ajaxfeedback.htm文档内容页ajax评论模板 article_article1.htm文章模型默认随机内容模板2 article_article2.ht...
ant-design-vue中，如何将固定头部（layout-header）中的menu-item元素移动到右边
weixin_53290210的博客
05-12 859
去ant-design（ant-design-vue算是ant-design的分支）的GitHub讨论群，还有人吐槽到目前为止没有完美这个问题（https://github.com/ant-design/ant-design/issues/10749）。有人建议可以用row和col来解决，也是可以，但是为了保持格式完整性，最好是在menu中去修改，不然，按键和其他按键不一样，很麻烦。下面是官网中的样例代码（a-layout-header），完整代码可以在官网找到，经过了修改，格式是vue。
Ant Design Pro 前端脚手架 配置混合导航
q1ngqingsky的博客
08-17 1227
点击查看阅读混合导航：顶部导航和侧边栏导航实现联动效果，点击不同的顶部导航按钮会显示对应的子菜单项。实现点：1. 路由的配置。
Qt - 导航栏的实现
02-26
这篇博文的作者通过个人的实践，分享了如何在Qt中实现一个导航栏，虽然可能是一份初步的尝试，但仍然包含了一些重要的Qt编程概念。以下是关于Qt导航栏实现的相关知识点： 1. **QToolBar**: Qt中的`QToolBar`类是...
windows风格导航栏
03-05
可以使用媒体查询（Media Queries）来针对不同屏幕尺寸调整导航栏的样式和布局。 5. 源码分析：博主分享的源码可能包含这些组件的具体实现，通过阅读和学习源码，开发者可以理解每个部分的作用，进而将此设计应用到...
经典蓝色横向二级导航栏
04-05
这种导航栏以蓝色为主色调，采用横向布局，通常包括主菜单项和下拉的子菜单项，形成二级结构，以增强用户体验。 【描述】：在提供的博文链接（https://leeqoo.iteye.com/blog/1532950）中，作者分享了一个实现经典...
ios 导航栏放置多个按钮及引申的ivar变量的问题
04-15
本文将详细探讨如何在iOS的导航栏上实现多按钮布局，以及由此引发的ivar（实例变量）管理问题。 首先，我们要知道，在原生的UINavigationController中，导航栏默认只支持左右两个BarButtonItem，即“返回”按钮和一...
antdv & ant-design-vue-jeecg 顶部一级菜单，左侧导航二三级菜单。
a841489295的博客
08-29 3931
antdv & ant-design-vue-jeecg 顶部一级菜单，左侧导航二三级菜单。
Ant Design Pro【面包屑导航】二级路由和三级路由都有component的情况，三级不显示component的页面，怎么解决？
m0_60676278的博客
10-27 533
Ant Design Pro官网当中没有给出二级路由的页面和三级路由的页面同时展示的解决办法，而我们的需求是要加上面包屑导航，展示二级和三级的页面。我的解决办法如下（期待更好的办法）根据路由自动进行匹配。
Ant Design Vue 中的布局实现：构建响应式界面的指南
最新发布
2402_85758349的博客
06-17 980
Ant Design Vue 提供了一系列布局组件，可以帮助开发者快速构建出美观、响应式的页面布局。通过本文的指南，你应该能够掌握如何在 Ant Design Vue 中实现布局，从而提升你的 Vue 应用的界面设计。
千万级项目后台菜单导航设计及react antd实现
蜗牛365
11-28 2087
后台管理系统一般通过菜单进行各个功能点的导航，在面临大量菜单时需要考虑如何设计使客户体验更加便捷。作者在最近几个百万级、千万级项目的开发实施过程中，用户对菜单导航结构提出一些修改意见，经过若干次迭代以优化操作体验，作者将迭代过程总结下做个分享。 整体布局 第一阶段 传统树形菜单导航，根据项目的不同，有的采用横向排列，有的固定在左侧 顶部菜单：从上到下分别为：标题栏、菜单栏、工作区 侧边菜单：导航菜单占据整个左侧，右边从上而下为标题栏、工作区 侧边菜单有个变形，标题栏占据全部，下边左右分别为导航菜单、工作
基于Ant Design of Vue的级联导航菜单组件
q_qman的博客
05-18 1080
1.显示效果如图 2.数据格式 3.组件代码 <template> <!-- 数据菜单 --> <!-- 这里面只写到了第四层， 需要用到多少，按照这个格式 续写下去就行，核心就是如果 下面还有一层，那么他只能是 这个标签a-sub-menu，只有根 节点才能用这个标签a-menu-item! 另外感觉可以优化的地方是可以将 template单独封装成组件，item
ant design导航栏和视图分离
mfxcyh的博客
08-19 244
导航栏：@click事件改变selectedKey的值，然后使用三目运算符控制的type，实现点击改变按钮样式。视图栏：用v-if判断selectedKey的值来匹配导航栏选择的选项，然后呈现相应的结果。
React+Ant Design 4.4.1实现左侧二级导航（可配置路由、所有路由层级可统一、可根据路由高亮菜单项、刷新时可自动展开定位到当前路由）
duansamve的博客
08-20 1404
package.json： { "name": "antd-demo", "version": "0.1.0", "private": true, "dependencies": { "@ant-design/icons": "^4.2.1", "@babel/core": "7.9.0", "@svgr/webpack": "4.3.3", "@testing-library/jest-dom": "^4.2.4", "@testing-libr
获取headerLayout布局的部件
CSDN_Mr_Wang的博客
03-25 1018
我想直接通过findViewById(R.id.textview),却返回null 我们要先获取到 Navigation ,然后通过navigation.getHeaderView(0) 来获取headView 这样就不会报错了。 欢迎大家加入我们的交流群:619298098 ...
NavigationView中获取headerLayout的方法
YXY的记录
08-29 9029
特别简单，总共分三步： 第一步： 获取NavigationView private NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view); 第二步： 获取headerLayoutheaderLayout = navigationView.inflateHeaderView(R.layou
Android分页布局：实现底部翻页导航栏
"该资源提供了一个在Android应用中实现分页导航栏布局的实例代码，展示了如何在页面底部显示翻页导航，以便于用户浏览大量内容时进行分页操作。" 在Android开发中，当一个界面展示的数据量过大时，通常会采用分页的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值