技术解析

后端程序员兼职 JS 前端,有什么提高 js 前端开发速度的方式?
0
2021-08-18 06:50:02
idczone

如题,在没有前端开发人员的情况下,不考虑定制化美化页面,后端开发人员要如何根据提供的请求接口,快速开发一个好看可用的 html 页面?信息管理,内容管理,简单的表单提交,还有博客,等一些简单页面了。

我不想自己写 css 样式,能用别人就用别人写的,我自己写 css 我就头疼,写 js 去美化 ui 我也头疼。即便使用了 vue-element,我还得写一套前端状态管理的代码与后端接口对接。如果能把写状态管理的时间能省下来,那更好了。

这里的后端不考虑是哪种语言开发,就根据提供的请求接口来。


找项目模板,改数据绑定,照葫芦画瓢

我么省事的开发方式我能想到的只有一个-----外包

信息管理,内容管理,简单的表单提交,这些是可以不用状态管理的,vuex 我们就拿来共享全局变量

状态管理应该是业务层面的把,除非你想省略掉数据的管理。有些东西不能省的,全都能省,要开发来干嘛呢

找写好的模板呗,改一改上线完事

看你的核心诉求就是:不写前端代码。也没有复杂 UI 的需求。那我感觉用传统的服务端模板渲染的方式就可以了,自己去网上买套模板,用你熟悉的模板引擎往里面塞变量。

找个模板照葫芦画瓢,样式什么的就用通用的,bootstrap,antd 之类的直接拿来用

模版引擎

无内鬼,JQuery 一把梭

vue-element-admin

问题是,怎么把页面模板抽取出来,快速套用

有哪些好的模板网站呢?

有人想 xss 攻击怎么办

vue-element-admin 或者 adminlte 都可以啊

如果是依据后端模板引擎的话,,套用模板页面和请求接口对接,有哪些思路策略呢?

看到你说 XSS 突然反应过来你是那个问 XSS 免疫方法的人 = =
「怎么把页面模板抽取出来」
没明白你的「抽取」是什么意思。想快速套用,直接复制文件就得了。

状态管理可以参考三楼 一般共享变量就行了

就像面向对象一样,把需求抽象成实体类,这里的抽取,我指的是,把模板页面和参数抽象成类,这个确切的说,是有抽象功能的代码生成器把

这边写 router 然后用组件写数据绑定就完事了,css 比较难

你是在做后端渲染?那还是用 Bootstrap 吧,一个组件看成一坨 HTML 字符串,几坨 HTML 字符串拼出一个页面的 HTML 。

是的,可以这么说,一个组件看成一坨 HTML 字符串,几坨 HTML 字符串拼出一个页面的 HTML 。想要找一个快速拼接 html 组件的思路或者工具。但不一定是后端渲染,也可能是代码生成器拼接,然后复制到页面文件里

我觉得你想要的是一套拖拉拽式的自定义前端模板

当然我说的不是纯粹指页面快速生成,而是指“根据所填写的参数而快速生成页面“,参数可能包含是网络请求接口,标签名称,如果是 cms,可能还包括列名,内容管理名称<br/><br/>拖拉拽式这种前端开发方式,其实还不如根据 Json 字符串,拖拉拽式弄出稍微复杂的页面,就比较困难。<br/><br/>看来你要的是「站点生成器」……那我的知识无法解答你的问题了 = =<br/><br/>是不是这样的:<br />[jsonschema 生成表单页面,支持模板 HTML 源码二次编辑开发]( https://www.v2ex.com/t/518387)<br /><https://github.com/giscafer/ngx-form-builder><br /><http://form.giscafer.com/#/zorro><br/><br/>算是把,根据模板字符串,根据给出的模板参数所需的参数,生成页面,这个参数蕾西,可以是 json 串,也可以是 xml,toml 都行。<br/><br/>可以让用户自己定义模板和模板参数,并保存,以后复用。<br/><br/>avue<br/><br/>这个感觉不错,Json 串驱动页面<br/><br/>不是的...只是把 vue 和 elementui 封装在一起 弄了一些 CRUD 的封装<br/><br/>百度 “json 驱动 ui” 第一个就是“Avue: Avue 是基于 JSON 驱动 UI 的思想……”<br/><br/>看来你确实不懂前端 作者的意思是数据驱动视图 只不过现在数据传输都是 JSON 格式的<br/><br/>后端程序员 angular 一把梭<br/><br/>随便找个后端 UI 框架+vue 一把梭不就完了<br/><br/>angular 一把梭,就像 springboot 一样畅快,开箱即用<br/><br/>vue 不适合后端,json 驱动 ui 不适合任何端<br/><br/>json 驱动 ui 是什么时髦词<br/><br/>通俗点说是数据驱动 ui,比如生成图表,有些图表框架的 api 生成图表,html 只需凭借一个 div,js 凭借 Json 或 xml 等数据就能生成一个图表。那么这里指的是用数据驱动表单,数据是什么样子表单就是什么样子。<br/><br/>vue-cli 一键初始化,请<br/><br/>“json 驱动 ui”这东西企业开发用的非常爽,看别人用过,直接需求人员驻场,一边分析需求一边配模块,啥,你说并发你说优化,别闹了,人家一个单位才几百人,并发算起来估计都是 0.几都没有,就那么几号人几十号人用。。。<br/><br/>meteorjs 这类前后端的数据自动同步的<br/><br/>有时间找模板什么的, 还不如花点时间学下前端,这个又不难。1-2 个月就能上手了。根据自己的需求自己写一套模板不就可以了,后续修改升级都方便。 技多不压身。<br/><br/>用 ui 库不就好了<br/><br/>好奇你们说 JSON 驱动 UI 的是怎么实现客户定制需求的<br/><br/>Typescript,最后端语言的前端语言,写完后再 tsc 到 JS 即可,效率超高<br/><br/> </div> <div class="xgyd"> <div class="d1">相关阅读</div> <div class="d2"> <ul> <li><a href="https://www.idczone.net/news/1014.html" title="【放假通知】致客户--数据地带2022年元旦节放假通知">【放假通知】致客户--数据地带2022年元旦节放假通知</a></li> <li><a href="https://www.idczone.net/news/1013.html" title="【放假通知】致客户--数据地带2021年国庆节放假通知">【放假通知】致客户--数据地带2021年国庆节放假通知</a></li> <li><a href="https://www.idczone.net/news/1012.html" title="【放假通知】致客户--数据地带2021年中秋节放假通知">【放假通知】致客户--数据地带2021年中秋节放假通知</a></li> <li><a href="https://www.idczone.net/news/11099.html" title="请教大佬 new Set([1,2,3].push(1))为什么会报 TypeError: 4 is not iterable">请教大佬 new Set([1,2,3].push(1))为什么会报 TypeError: 4 is not iterable</a></li> <li><a href="https://www.idczone.net/news/11113.html" title="关于面试大文本正则匹配的问题,求教正则大佬">关于面试大文本正则匹配的问题,求教正则大佬</a></li> <li><a href="https://www.idczone.net/news/11095.html" title="“JavaScript 的成员字段提案”或“TC39 委员会在搞什么鬼?”">“JavaScript 的成员字段提案”或“TC39 委员会在搞什么鬼?”</a></li> <li><a href="https://www.idczone.net/news/11107.html" title="有没有什么办法可以获取到一个 JSON 对象所有的 Value 值?">有没有什么办法可以获取到一个 JSON 对象所有的 Value 值?</a></li> <li><a href="https://www.idczone.net/news/11097.html" title="请教一下, Tampermonkey 我想屏蔽一个原素应该如何编写?">请教一下, Tampermonkey 我想屏蔽一个原素应该如何编写?</a></li> </ul> </div> </div> </div> </div> </div> <!--news_zhunr结束--> <!--后来添加层开始--> <div class="hkweb_hl"> <div class="title">数据地带为您的网站提供全球顶级IDC资源</div> <div class="zxzx"><a rel="nofollow" href="https://wpa.qq.com/msgrd?v=3&uin=712734846&site=qq&menu=yes" target="_blank">在线咨询</a></div> </div> <!--后来添加层结束--> <!--footer开始--> <div class="footer"> <div class="div1"> <ul> <li class="bg1"> <p>7x24</p> <span>全年不间断在线</span></li> <li class="bg2"> <p>100%</p> <span>数据安全保障</span></li> <li class="bg3"> <p>0元</p> <span>贴心用户服务</span></li> <li class="bg4"> <p>3分钟</p> <span>极速响应</span></li> <li class="bg5"> <p>免备案</p> <span>全球线路精选</span></li> <li class="bg6"> <p>VIP级</p> <span>金牌用户服务</span></li> </ul> </div> <!-- <div class="htj"> <div class="juzhong"> <div class="pro_lb"> <dl> <dt>服务器租用</dt> <dd><a href="/server/USA.html" target="_blank">美国服务器</a></dd> <dd><a href="https://www.idczone.net/server/hk.html" target="_blank">中国香港服务器</a></dd> <dd><a href="https://www.idczone.net/server/tw.html" target="_blank">中国台湾服务器</a></dd> <dd><a href="https://www.idczone.net/server/Korea.html" target="_blank">韩国服务器</a></dd> <dd><a href="https://www.idczone.net/server/Japan.html" target="_blank">日本服务器</a></dd> <dd><a href="https://www.idczone.net/server/flb.html" target="_blank">菲律宾服务器</a></dd> <dd><a href="https://www.idczone.net/server/mlxy.html" target="_blank">马来西亚服务器</a></dd> <dd><a href="https://www.idczone.net/server/Singapore.html" target="_blank">新加坡服务器</a></dd> <dd><a href="https://www.idczone.net/server/Netherlands.html" target="_blank">荷兰服务器</a></dd> <dd><a href="https://www.idczone.net/server/England.html" target="_blank">英国服务器</a></dd> <dd><a href="https://www.idczone.net/server/France.html" target="_blank">法国服务器</a></dd> <dd><a href="https://www.idczone.net/server/Germany.html" target="_blank">德国服务器</a></dd> <dd><a href="https://www.idczone.net/server/Spain.html" target="_blank">西班牙服务器</a></dd> <dd><a href="https://www.idczone.net/server/Finland.html" target="_blank">芬兰服务器</a></dd> <dd><a href="https://www.idczone.net/server/Ukraine.html" target="_blank">乌克兰服务器</a></dd> <dd><a href="https://www.idczone.net/server/xini.html" target="_blank">悉尼服务器</a></dd> <dd><a href="https://www.idczone.net/server/nanfei.html" target="_blank">南非服务器</a></dd> <dd><a href="https://www.idczone.net/server/Brazil.html" target="_blank">巴西服务器</a></dd> </dl> </div> <div class="pro_lb gffwq"> <dl> <dt>高防服务器</dt> <dd class="wushi"><a href="/server/hk.html" target="_blank">中国香港高防</a></dd> <dd class="wushi"><a href="/server/USA.html" target="_blank">美国高防</a></dd> </dl> </div> <div class="pro_lb qt"> <dl> <dt>亚洲服务器</dt> <dd class="bai"><a href="/server/hk.html" target="_blank">中国香港服务器</a></dd> <dd class="bai"><a href="/server/Korea.html" target="_blank">韩国服务器</a></dd> <dd class="bai"><a href="/server/Japan.html" target="_blank">日本服务器</a></dd> <dd class="bai"><a href="/server/flb.html" target="_blank">菲律宾服务器</a></dd> </dl> </div> <div class="pro_lb qt"> <dl> <dt>服务器托管</dt> <dd class="bai"><a href="/server/hk.html" target="_blank">中国香港机房</a></dd> <dd class="bai"><a href="/server/USA.html" target="_blank">美国服务器机房</a></dd> <dd class="bai"><a href="/server/Korea.html" target="_blank">韩国机房</a></dd> <dd class="bai"><a href="/server/Japan.html" target="_blank">日本机房</a></dd> </dl> </div> <div class="pro_lb qt"> <dl> <dt>全球服务器</dt> <dd class="bai"><a href="/server/jiazhou.html" target="_blank">加州服务器</a></dd> <dd class="bai"><a href="/server/England.html" target="_blank">英国服务器</a></dd> <dd class="bai"><a href="/server/France.html" target="_blank">法国服务器</a></dd> <dd class="bai"><a href="/server/Germany.html" target="_blank">德国服务器</a></dd> </dl> </div> </div> </div> --> <div class="div2"> <div class="zhunr"> <div class="left1"> <div class="foot_logo"></div><br> <div class="wz"><span id="hdjj">· 网络安全第一</span><br> <span id="hdjj">· 专业客服实时在线</span><br> <span id="hdjj">· 成熟解决方案</span><br> · 服务体验至上</div> </div> <div class="zhong1"> <div class="pro_lb"> <dl> <dt>解决方案</dt> <dd><a href="/web.html" target="_blank">网站建设</a></dd> <dd><a href="/game.html" target="_blank">游戏运营</a></dd> <dd><a href="/vedio.html" target="_blank">视频娱乐</a></dd> <dd><a href="/finence.html" target="_blank">企业上云</a></dd> <dd><a href="/smarthome.html" target="_blank">智能家居</a></dd> <dd><a href="/manufacture.html" target="_blank">制造业升级</a></dd> <dd><a href="/bigdata.html" target="_blank">大数据营销</a></dd> <dd><a href="/trade.html" target="_blank">外贸电商</a></dd> </dl> </div> <div class="gywm"> <dl> <dt>关于我们</dt> <dd><a href="/about.html" target="_blank">关于我们</a></dd> </dl> </div> </div> <div class="right1"> <div class="bt">联系方式</div> <div class="xxnr">技术QQ:<span><a rel="nofollow" target="_blank" href="https://wpa.qq.com/msgrd?v=3&uin=153063505&site=qq&menu=yes">153063505</a></span><br> 联系地址:<span>重庆渝北金山商业中心A座6F</span><br> 邮箱:<span>support@idczone.net</span><br> 邮编:<span>401120</span></div> </div> </div> </div> <!--友情链接--> <div class="beian">Copyright © 2008-2021 数据地带 版权所有 <a rel="nofollow" target="_blank" href="https://beian.miit.gov.cn/">渝ICP备09005130号</a> </div> </div> <!--在线客服--> <div class="cndns-right"> <!--<div class="cndns-right-meau meau-swt"><a rel="nofollow" target="_blank" href="https://live.easyliao.com/live/chat.do?c=12897&g=22984&config=32485&tag=0" class="cndns-right-btn"></a> </div>--> <div class="cndns-right-meau meau-sev"> <a href="javascript:" class="cndns-right-btn">专属客服</a> <div class="cndns-right-box"> <div class="box-border"> <div class="sev-b"> <h4>免费电话:<br> <i>023-63086558</i></h4> <ul id="zixunUl"> <li style="width:100%; padding-left:15px; padding-top:10px; padding-bottom:5px;">24小时在线QQ</li> <li><a rel="nofollow"target="_blank"href="https://wpa.qq.com/msgrd?v=3&uin=712734848&site=qq&menu=yes">售前咨询-小秋</a></li> <li><a rel="nofollow"target="_blank"href="https://wpa.qq.com/msgrd?v=3&uin=1637618084&site=qq&menu=yes">售前咨询-红豆</a></li> <li><a rel="nofollow"target="_blank"href="https://wpa.qq.com/msgrd?v=3&uin=712734849&site=qq&menu=yes">售前咨询-叶子</a></li> <li><a rel="nofollow"target="_blank"href="https://wpa.qq.com/msgrd?v=3&uin=712734847&site=qq&menu=yes">售前咨询-小邓</a></li> <li><a rel="nofollow"target="_blank"href="https://wpa.qq.com/msgrd?v=3&uin=712734846&site=qq&menu=yes">售前咨询-格桑</a></li> <li><a rel="nofollow"target="_blank"href="https://wpa.qq.com/msgrd?v=3&uin=932571711&site=qq&menu=yes">投诉建议</a></li> <li><a rel="nofollow"target="_blank"href="https://wpa.qq.com/msgrd?v=3&uin=978923368&site=qq&menu=yes">售后01</a></li> <li><a rel="nofollow"target="_blank"href="https://wpa.qq.com/msgrd?v=3&uin=153063505&site=qq&menu=yes">售后02</a></li> <div class="clear"></div> </ul> <p></p> </div> <span class="arrow-right"></span> </div> </div> </div> <div class="cndns-right-meau meau-top" id="top-back"> <a href="#top" class="cndns-right-btn"> </a> </div> </div> <!--footer结束--> </script> <link href="https://www.idczone.net/static/idc/css/x1.css" rel="stylesheet" type="text/css"> <!-- <div class="component"> <button class="cn-button" id="cn-button">+</button> <div class="cn-wrapper" id="cn-wrapper"> <ul> <li><a href="#"><i class="fa fa-home"></i></a></li> <li><a href="#"><i class="fa fa-gift"></i></a></li> <li><a href="#"><i class="fa fa-download"></i></a></li> <li><a href="https://wpa.qq.com/msgrd?v=3&uin=712734846&site=qq&menu=yes"><i class="fa fa-qq"></i></a></li> <li><a href="#"><i class="fa fa-phone-square"></i></a></li> </ul> </div> <div id="cn-overlay" class="cn-overlay"></div> </div> <link rel="stylesheet" type="text/css" href="https://www.idczone.net/static/cn/css/normalize.css" /> <link rel="stylesheet" type="text/css" href="https://www.idczone.net/static/cn/css/demo.css" /> <link rel="stylesheet" type="text/css" href="https://www.idczone.net/static/cn/css/component1.css" /> <script src="https://www.idczone.net/static/cn/js/modernizr-2.6.2.min.js"></script> <script src="https://www.idczone.net/static/cn/js/polyfills.js"></script> <script src="https://www.idczone.net/static/cn/js/demo1.js"></script> --> <!-- <link rel="stylesheet" type="text/css" href="https://www.idczone.net/static/qq/css/index.css" /> <div class="OnlineService_Bg"> <div class="OnlineService_Box"> <div class="OnlineService_Phone"><a href="#" target="_blank">在线咨询</a></div> <div class="OnlineService_Top"><a href="#">返回顶部</a></div> </div> </div> --> </body> </html>