当前位置:首页 » 网页前端 » 前端控制按钮显示的条件特别多
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端控制按钮显示的条件特别多

发布时间: 2023-07-23 14:50:21

❶ 为什么有些前端一直用div当按钮,而不是用button

w3c标准其实有时候挺坑的,为了这个标准,这不能用,那不能用。

还有就是各种标签眼花缭乱,反正多而砸,很多标签可以相互替代。在一定程度上对开发者不友好,增加学习成本。

虽然标准统一是好事,但是太标准也,有时也是一件麻烦事。

比如button,就是按钮,绑定事件的。可是呢现在看来样式太丑,你要美化它,还得去边框等等。还有就是button,你嵌套一张图进去,然后添加事件。先不说是否符合标准,一看就觉得别扭,不是button该干的事。

所以使用button在当下不方便,反正事件大多元素都可以加,而且比button好用。

所以用p模拟也是可以的

因为button按钮的样式一般不符合ui需求。需要重写或覆盖原有样式比较麻烦。

其实按正常来说是应该用button来写按钮,但实际开发过程中每个人的喜好不同,再加上在代码规范上也没有那么多的条条框框,所以就用p来写按钮也是ok的。

在很多人的开发习惯中,块级元素都可用p来实现,行内元素都可用span来实现,毕竟除了特定的标签之外通过css+js都可以实现同样的功能。

其实开发人员不用纠结是用那些标签去实现功能,包括在定义class名的时候也是千奇百怪,我们做不到让每个人都共用一套模式,对于自己而言不管是怎么写的,最后保证不报错并且兼容主流浏览器这就够了。

现在越来越多的前端框架层出不穷,来我公司面试的前端人员甚至只会通过框架去做项目,连最基本的html+css+js基础都不牢固,在实现一些网页特效上显得一头雾水,不是我说掌握更多的主流框架不好,而是在不断学习框架的前提下应该把基本功掌握牢固,当然这也是和当前的培训机构有关系,很多的培训机构都是为了让学员能够最快的去找到工作而忽略了基础知识。

当下前端也在不断地扩宽自己的行业领域,除了vue、小程序之外,有的还要去了解mysql以及php等等,这也是为了在面试中能够找到一个更好的工作。

综上所述按钮用不用button都无伤大雅,主要的是功能的实现以及浏览器的兼容性。

以上是我的一些看法,感谢大家的观看。

Button适合在表单内自动触发比如type="submit",有时候前端需要更多的控制,所以可以使用p,span,a都行。

不过我们现在还是尽量用button表达按钮,type设置为button,仍然用js监听触发或者有的地方直接用onclick。

因为发展到了H5的地步,button的功能完全能用p覆盖了。

1.现在都用自定义样式,button的样式需要写css覆盖。

2.button如果在form元素下的的话,不加type="button",会直接提交表单,这样每次都加很麻烦。

样式容易控制,行为容易控制。直接用原生button,可能会出现想不到的样式行为问题[机智]。

主要因为两点:

其实从语义化思想来看,按钮不该使用,而应该使用 或 。p 虽然具备 onclick 事件响应,但本意是 html 用来布局的;而 和 本身就是 html 按钮。试一下:在一个纯 html 文档(无任何css和js内容和引用)写上 p 和 button 标签,浏览器都会有默认的渲染效果和交互方式。




主要还是 方便。

button是自带 样式 事件 的。

比如默认的巨 按钮和在表单中点击会submit 提交 表单。

而p就是一个块元素,干干净净不用重写,想怎么定义就怎么定义。

对比之下,有什么理由不用p呢?[奸笑]




个人感觉最重要的p可以直接自定义样式,button要消除原有样式很烦。




这个问题不应该问前端开发 应该问一下那些制度W3C为什么这么坑 这么反人类 但凡他们规范制定合理一点好用一点 也不至于前端用p来代替 我们也想好好用button啊

❷ 前端权限控制

前端权限控制分为四个方面的控制

第一点界面控制:用户还未登入就能通过url访问到系统页面,该问题比较好解决通过路由守卫即可判断。

如果用户登入以后用url访问不是属于自己的菜单页,如我没有系统管理这个界面,我去地址栏输入系统管理这个页面的url,前端因该阻止它访问页面。输入url能访问到页面的原因是你的路由配置了这个地址,所以控制界面的方式就是从路由入手,前期我们配置大家都有的路由,其他的路由根据登入系统时后台返回的权限列表数据,动态添加路由。

在登入时我们把权限数据存入vuex中并本地化,通过路由对象可以获取到路由的配置,把那个用户的路由单独添加到路由列表中,使用addroutes添加更改后到路由配置,添加动态路由的方法调用在app.vue的created中,因为每次加载页面都会调用该方法。

第二菜单控制:

根据用户的不同菜单栏也不同,该问题跟动态路由类似登入时拿到数据存入vuex中并本地化,之后在菜单组件列表循环遍历出对应的菜单栏,过于简单就不截图了。

第三按钮控制:

这个控制可以采用自定义组件的方式,例如这个用户没有添加人员的按钮,他只有查看这个人员菜单的权限。在页面上按钮都添加上,但是是否能显示则根据后端传过来的权限数据,该数据在动态路由作为meta数据添加在路由上了,也就是用路由的meta的数据去判断这个按钮是否显示或者禁用或是可用,在页面我们添加按钮我们就加一个action属于为add,我们或者add去比较如果没有add这个权限如果处理。上图

第四请求拦截

请求拦截并不简单的做一个token,而是每个用户对应可以操作的请求放行,不是他可以操作的拦截,如他没有添加的请求则要拦截,前面不是做了按钮的控制吗,为啥还要做这个拦截,按钮控制并不安全,其实他可以通过浏览器直接修改按钮的属性,有人又说有token了不是可以拦截了吗,对,可以拦截不过那时后台拦截,你请求还是发过去了,请求影响系统性能,所以做这个还是有必要的。

请求拦截,根据名字就知道他是在请求拦截器里设置的,在拦截器中可以获取请求方式,根据请求方式与路由中的mate权限对比有就发送请求,如果没有则不发请求

❸ 关于后台控制前端div显示的问题

//看见runat,你应该就是用C#,asp.net了吧。
//实现这种其实还有有方法的,给你提供几个方法,你衡量一下选择着用吧。
//1、最简单的,直接在aspx页面上,使用代码完成
<%stringu="show";
if(u=="show"){
%>
<label>我是show,我被显示了</label>
<%}%>
//2、使用ajax提交到后台去判断是否要展示,引用jquery
$.post("你进行判断并且返回数据的一般处理程序.ashx",function(data){
//这里的data就是.ashx中的输出数据
if(data=="show"){
//如果返回是show,则把id=conid的控件show()出来
$("#conid").show();
}else{
//否则隐藏
$("#conid").hide();
}
});
//3、在aspx的后台页面,可以直接输出<script></script>代码,对控件进行隐藏
Response.Write("<script>document.getElementById('conid').style.display='none;';</script>")