• 关于

    CSS用户界面

    的搜索结果

问题

后盾网CSS3新手系列培训教程

webssss 2019-12-01 20:59:32 8780 浏览量 回答数 0

回答

移动前端开发和 Web 前端开发的区别是: 1、前端是相对比较大的概念,一般是指用户能够看到、直接接触的界面都算是前端,比如iOS界面,安卓界面,网页界面,PC/Mac桌面软件的界面。最常见的是Web前端,也就是针对于网页端开发的工作。 2、Web App即Web application,也就是以浏览器作为客户端的软件。例如,用桌面客户端来收发邮件,但也可以直接用浏览器登陆gmail或者QQ邮箱,直接使用网页版的软件来使用。总之就是使用网页版代替本地软件。 Mobile Web App就是在手机端打开的Web App。例如Gmail的移动端软件 3、目前,移动客户端的开发主要包括三种类型: Native App(原生APP):也就是完全使用移动设备系统语言写的客户端。iOS系统就是使用Objective-C语言来编写本地应用,也可以使用苹果于2014年苹果开发者大会上发布的SWIFT语言;Android平台就是使用Java语言来开发。原生APP就是从界面到交互都是使用官方标准语言来编写,效率和稳定性都是最好的,但欠缺灵活性。 Web App:这个就是在移动浏览器里打开的,使用Web前端开发语言HTML CSS JavaScript来开发的,基本上就是个网页, Hybrid App:主要使用HTML5实现。一般使用Native语言实现一个容器,然后使用HTML CSS JS来实现用户界面和交互。这样方式既克服了Web App容器暴露偏底层的接口这样的问题,同时比起原生的开发灵活性要高。这样就更新可以更方便快捷,也不依赖于市场。例如,豌豆荚其实是个PC端的hybrid app 。 对于以上三种开发方式的比较和分析搜索引擎里面有太多的内容了,这里也就不再赘述了。 4、移动端网页布局方法与pc的差异。 主要是css方面,外加如何做到同一url,不同客户端展现不一致的做法,俗称pc和mobile都兼容。还有会说一下rem的相关用法和一段比较经典的rem.js 最后总结一下: 其实这两者最显著的区别就是,web app是不依赖于具体的设备的,通用性较强,只要手机或PC有相应内核的浏览器就基本OK。而mobile的app则依赖于具体的设备,一旦更换设备,需要重新下载才能继续使用。 移动前端开发 主要来说的是Native Client的开发Android为Java,iOS为Objective-C,然后么HTML5应用号称跨平台其实差异很大。 Web前端开发么基本上就是HTML JavaScript CSS,不过有些人把Servelt/JSP, PHP,Ruby,Python,C#之类的只要关系到页面的也叫做Web前端开发。 app是应用,每个操作系统有专门的开发工具和语言 web是网页,使用html+css+js,有工具可以生成转化为app,不过效果一般 答案来源于网络,仅供参考,希望对您有帮助。

KB小秘书 2019-12-02 03:01:21 0 浏览量 回答数 0

问题

18款在线代码片段测试工具

老毛哈哈 2019-12-01 21:05:05 9388 浏览量 回答数 0

阿里云试用中心,为您提供0门槛上云实践机会!

0元试用32+款产品,最高免费12个月!拨打95187-1,咨询专业上云建议!

回答

单页Web应用(single page web application,SPA),就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 浏览器一开始会加载必需的HTML、CSS和JavaScript,所有的操作都在这张页面上完成,都由JavaScript来控制。因此,对单页应用来说模块化的开发和设计显得相当重要。速度:更好的用户体验,让用户在web app感受native app的速度和流畅,MVC:经典MVC开发模式,前后端各负其责。ajax:重前端,业务逻辑全部在本地操作,数据都需要通过AJAX同步、提交。路由:在URL中采用#号来作为当前视图的地址,改变#号后的参数,页面并不会重载。单页Web应用(single page web application,SPA)是当今网站开发技术的弄潮儿,很多传统网站都在或者已经转型为单页Web应用,新的单页Web应用网站(包括移动平台上的)也如雨后春笋般涌现在人们的面前,如Gmail、Evernote、Trello等。如果你是一名Web开发人员,却还没开发过或者甚至是没有听说过单页应用,那你已经Out很久了。单页Web应用和前端工程师们息息相关,因为主要的变革发生在浏览器端,用到的技术其实还是HTML+CSS+JavaScript,所有的浏览器都原生支持,当然有的浏览器因为具备一些高级特性,从而使得单页Web应用的用户体验更上一层楼。关于单页应用的优点和缺点,网上讲解的文章有很多,这里就不展开论述了。 单页Web应用,顾名思义,就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript,之后所有的操作都在这张页面上完成,这一切都由JavaScript来控制。因此,单页Web应用会包含大量的JavaScript代码,复杂度可想而知,模块化开发和设计的重要性不言而喻。优点:分离前后端关注点,前端负责界面显示,后端负责数据存储和计算,各司其职,不会把前后端的逻辑混杂在一起;减轻服务器压力,服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍;同一套后端程序代码,不用修改就可以用于Web界面、手机、平板等多种客户端;缺点:SEO问题,现在可以通过Prerender等技术解决一部分;前进、后退、地址栏等,需要程序进行管理;书签,需要程序来提供支持;

景凌凯 2019-12-02 01:40:40 0 浏览量 回答数 0

问题

关于网站换皮肤的功能,谁可以告诉下mac.pcbeta.com 它的换肤原理?

落地花开啦 2019-12-01 19:53:36 997 浏览量 回答数 1

问题

版本记录

反向一觉 2019-12-01 20:55:25 991 浏览量 回答数 0

问题

零基础精通PHPMySQL网络编程课程

webssss 2019-12-01 20:58:54 11194 浏览量 回答数 1

回答

问题1  data开头的属性一般是用于控件的数据绑定.避免对dom元素进行自定义属性的数据绑定 造成不必要的阅读障碍,用data-*来进行额外的属性定义. 这样的定义一般是个js使用.这里举一个图片懒加载的例子加以说明 <img src="default.png" data-src="xxxx/xx.png"> 当该元素没有显示在用户界面时采用默认图片,一旦出现在用户视野,就将data-src的地址替换src. 这样是不是很方便? 比用id来标示寻找元素 在来绑定数据更简单? 问题2 role属于html5属性,具体可参考http://www.w3.org/TR/wai-aria/host_languages#host_general_role主要用来 定义 dom元素角色. 从而便于写css时使用选择器进行选择, 也能在一定程度上提升代码可读性 问题3 3.完全自定义属性. 这种属性的定义,在我遇到的情况下 一般是服务于js的.用来针对性进行dom元素修改.最直观的例子就是angualr里面的directive

杨冬芳 2019-12-02 02:50:22 0 浏览量 回答数 0

问题

本地Web应用程序的推荐python库/框架?

祖安文状元 2020-02-22 16:06:09 0 浏览量 回答数 1

回答

MVC框架模式,html模板和后端代码分离,实现各自的操作;来回答你的问题,为什么每个用户在同一个界面所显示的效果(数据)不一样呢?其实也很简单,在数据表中分别是不同的用户存储的信息也就不同,而存储这些信息可能由多个表组成。就像每个人的主页,以我的主页举例:这里多个不同的区块之间的统计和输出就由mysql语句、PHP代码、和前端html文件之间的配合实现。例如:图片左边的统计,举例:我的回答的次数,或许在数据表中就有这样一个字段,我每回答一次问题,这个字段里的数据就会自加1,然后当我进入这个页面的时候,mysql直接读取我这个字段的值就好了(当然,更复杂的数据统计也皆由sql语句实现,而且这些数据皆是在数据表中读取),再由PHP代码在html页面输出;这之间的开始、过程、结束,皆由sql语句、php(或者其他后端语言)、前端代码(html、css、js等)构成。

杨冬芳 2019-12-02 02:56:26 0 浏览量 回答数 0

回答

方式一:Coding JavaScript <!--[if lt IE 9]> <script> (function() { if (! /*@cc_on!@*/ 0) return; var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', '); var i= e.length; while (i--){ document.createElement(e[i]) } })() </script> <![endif]--> 如果是IE9以下的IE浏览器将创建HTML5标签, 这样非IE浏览器就会忽视这段代码,也就不会有无谓的http请求了。 第二种方法:使用Google的html5shiv包(推荐) <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 但是不管使用以上哪种方法,都要初始化新标签的CSS.因为HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局 /*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block} 但是如果ie6/7/8 禁用脚本的用户,那么就变成了无样式的"白板"网页,我们该怎么解决呢? 我们可以参照facebook的做法,即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面,用 html4 标签替换 html5 标签,这要比为了保持兼容性而写大量 hack 的做法更轻便一些。 <!--[if lte IE 8]> <noscript> <style>.html5-wrappers{display:none!important;}</style> <div class="ie-noscript-warning">您的浏览器禁用了脚本,请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>. </div> </noscript> <![endif]--> 这样可以引导用户开启脚本,或者直接跳转到HTML4标签设计的界面。

a123456678 2019-12-02 02:21:18 0 浏览量 回答数 0

问题

KODExplorer基于Web的在线文件管理

梦丫头 2019-12-01 22:05:43 13452 浏览量 回答数 13

回答

介绍:SPA应用就是一个web应用,可理解为:是一种只需要将单个页面加载到服务器之中的web应用程序。当浏览器向服务器发出第一个请求时,服务器会返回一个index.html文件,它所需的js,css等会在显示时统一加载,部分页面需要时加载。 优点: 1.良好的交互式体验。意思是:用户无需刷新页面,获取数据通过异步ajax获取,页面显示流畅 2.良好的前后端分离模式(MVVM),减轻服务端压力。服务器只需要输出数据就可以,不用管逻辑和页面展示,吞吐能力会提高几倍 3.共用同一套后端程序代码,不用修改就可用于web界面,手机和平板等客户端设备 缺点: 1.不利于SEO优化 2.由于单页应用在一个页面中显示,所以不可以使用浏览器自带的前进后退功能,想要实现页面切换需要自己进行管理 3.首屏加载过慢(初次加载耗时多),原因是:为了实现单页web应用功能及展示效果,在页面初始化的时候就会将js,css等统一加载,部分页面在需要时加载。当然也有解决方法。 解决方法:①使用路由懒加载 ②开启Gzip压缩 ③使用webpack的externals属性把不需要的库文件分离出去,减少打包后文件的大小 ④使用vue的服务端渲染(SSR) 问题来源于GitHub,查看更多答案,请查看https://github.com/haizlin/fe-interview/issues/322

游客7iokfgo4yexey 2020-05-24 22:33:53 0 浏览量 回答数 0

回答

HTML5究竟是什么? (注:目前网上介绍HTML5的文章都是千篇一律,譬如某个时间段发布某个版本,这种对于初学者或者从实用性角度来看,没有太多甚至完全不具备学习价值,只能说了解到它的出现时间,但是具体作用是什么呢?基本都是没有详细阐述,不少读者看完估计还是一头雾水的,因此笔者会用更加通俗易懂的话语,让各位能够知道HTML5究竟是什么) 首先HTML是定义了网页的结构,那么HTML5则是其不断更新的一部分。它目前有两个版本, 第一个是万维网联盟的5.2推荐标准(w3c) ,是为网页内容开发者设计的;第二个是浏览器开发者的 HTML 生活标准(HTML Living Standard) ,由微软网页超文本技术工作小组公司(WHATWG)维护。 HTML5引入了一些新的元素和属性,同时也是一个 W3C推荐标准。Web 应用程序以这些 HTML 元素为基础运行,同时包含了 HTML4和 XHTML,但是向后兼容以前的版本。另外,它与 PHP 更加兼容,新的 api 包括拖放、网络消息和网络存储、协议处理程序注册、微数据、画布、文本轨道和定时媒体播放,还有一个标准化的服务器发送事件自动更新和更好的浏览器支持,这些新的 api 为网页设计者提供了更好的控制。对于生活标准版本,新的 API 还包括地理定位、web 音频(Javascript 音频应用程序)、web RTC 和 web 加密 API。 这些元素和属性反映了现代网站的典型用法,其中包括超文本标记语言和对文档对象模型(DOM)脚本的新兴趣。HTML5语法还允许在文档内部使用 MathML,而 indexeddb将存储扩展到本地存储之外。并且从 HTML 4.01中删除了一些不推荐的元素,包括像 font 和 center 这样的纯表示元素,这些元素的效果早已被更强大的层叠样式表所取代。此外,DOM 脚本在 Web 行为中的重要性也得到了重新强调。 HTML5知识点有哪些? 经过前面的一些讲解,相信各位对HTML5已经有初步的认识,那么接下来我们将会正式探讨下,究竟有哪些知识点需要我们学习掌握的呢?(注:由于HTML5涵盖知识点较多,且本文属于入门级别的知识指南,不适宜进行全面深入地讲解,因此笔者筛选出了必须掌握的知识点,希望能够让初学者迅速入门) 知识点一:HTML5主体结构 <!doctype> 声明必须位于 HTML5 文档中首行,声明此为HTML5文档 标签限定了文档的开始点和结束点,内部包含文档头部和主体 标签用于定义文档的头部,内部的元素可以引用脚本或者样式表、提供元信息等等,并且描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等,绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 标签声明使用utf-8编码 标签定义文档标题 定义文档的主体,内部包含文档的所有内容,比如文本、超链接、图像、表格和列表等等,均可展示给用户浏览器显示出来(注释除外) 以上就是HTML5主体结构的讲解,可能有细心地读者就会发现,有的标签是一个的,有的又是两个对称的,那么这是何解呢? 这里就引入一个知识点,通常情况下绝大多数标签都是双标签,也就是需要写成格式,但是也有的单标签也称为自闭合标签是不需要结束符的,如 等,那么这些标签具体用法又是如何呢?下面我们将会进行常用标签的讲解! 知识点二:HTML5常用标签 众所周知,HTML5简单点说就是由一个个标签组成的文档,既然如此我们就需要学习,每一个标签究竟代表着什么含义如何使用呢?(因为标签实在太多,倘若全部阐释一遍,怕初学者们嫌弃篇幅太长感到枯燥,或者是知识点太多很难吸收掌握,因此笔者精选出一些较为常用的标签进行讲解,对于标签可能有多个属性可以选择,笔者同样会挑选出较为常用属性进行讲解) 注:以下标签,笔者没有截效果图,建议初学者自主尝试 注释标签:在我们日常编写代码时候,为了日后方便自己查看或者是别人查阅,我们通常会在某些地方写上注释标签,里面内容不会展示给浏览器用户看到 阿里云开发者社区 链接标签:超链接跳转,把需要跳转的网址写到标签的href里面,然后在开始标签和结束标签之间可以写内容展示出去,当用户点击内容将会发生跳转 换行标签:换行作用,有的小伙伴可能看到这里会说,为什么我写也是有效果的呢?这种写法不能说错误只能说是老版本的规范,按照HTML4.0规范都需要按照XHTML的写法,也就是对于单标签都是采用加斜杠的写法(下同) 按钮 按钮标签:按钮上需要展示什么文字,可在开始标签和结束标签之间写入,现阶段若写静态网站用得较少,后期学JS制作动态网站或者做交互时候比较常用 内容 块级标签:标签本身没有特殊含义,那么在其里面可以写文本内容,或者是加入其它标签均可,凡是加入其内部所有东西都会被其所包裹,形成一个独立的块级区域并且独自占用一行(css可格式化) 标题 标题标签:用于定义标题,从h1至h6均可根据自身需求选择 分隔符标签:起到装饰分隔作用,默认显示为一条黑色的水平线 图片标签:展示图片,src里面放置图片的链接,然后有时候可能出现各种原因导致图片未能加载,那么系统会自动展示alt里面的文字内容 输入框标签:默认是输入框,当然其有多个属性可以选择,然后较为常用的是type属性,该属性又有多个值可供选择,如: password 用户输入任何文本内容均会显示为小圆点 checkbox 选择框 Button按钮 列表 列表标签:通常用于展示一列数据,而且数据所采用的css样式均相同,譬如导航栏、当然还有 有序列表不过较为少用 段落 段落标签:写在内部的一段文字将会被定义为一个段落 脚本标签:现阶段不会用到,等学习到js需要用到,初学者可在标签内部写js代码,随着学习深入可以采用外部写好js文件后导入 文字 脚本标签:通常需要搭配css样式进行使用,对部分内容进行样式修改 样式标签:现阶段不会用到,等学习到css需要用到,样式需要写在标签内部 HTML5入门知识指南 经过前面的一系列学习,相信各位已经初步掌握HTML5的使用,能够制作一些简单的界面了,当然对于学习能力较强或者有一定基础的同学,可以自主深入学习HTML5深层次的知识点,当能够熟练敲出你想要的界面时候,那建议开始学习CSS让界面变得更加美丽,笔者下期将会给各位带来CSS入门知识指南,欢迎大家踊跃参与学习,当然如果有童鞋看完本文,对于某些知识点还是不太明白,或者是对下一期学习有什么建议,欢迎各位在下方评论区留言哦,如果觉得笔者文章写得不错,那么也可以分享给朋友一起学习,咱们下期再见啦!

剑曼红尘 2020-03-03 17:56:06 0 浏览量 回答数 0

问题

全栈测试:平衡单元测试和端到端测试

技术小菜鸟 2019-12-01 21:30:35 3268 浏览量 回答数 1

问题

手机直播APP又在升温,直播开发功能很重要

daimeng1 2019-12-01 22:10:14 3310 浏览量 回答数 2

回答

我采用jquery一套作为UI,布局用jquery-ui-layout,表格使用jqgrid,tree用Ztree。 OA不是大型网站,不用考虑那么多。我觉得直接跳转新页面的做法最省事。维护也方便。如果个别页面加载比较慢的话,完全可以使用freemarker的生成静态html文件的功能就可以了。 ###### ajax接受格式化输出的数据(html代码)并在系统界面中显示。但这样ajax传输内容会增加。 传输内容会增加?好像很多人都是这么做的,你那个系统很庞大?访问量很巨大?对性能要求很苛刻吗?还是杞人忧天? 还有,这样做有点像ExtJS单页模式。这样做效率是高了,至少不用每个页面都加载CSS、JS,但是所有的内容都加载在同一个页面中,因此每个表单输入的name、id就很可能存在重名的现象…… ###### 一般其实直接用ajax去服务器请求数据,然后直接生成Dom节点,插入到HTML就行了。 如果数据较大的话,可以考虑加个loading图片之类的效果,对用户比较友好。 或者,第一次的时候去后台请求,之后就把数据缓存的客户端。也会增加用户体验度。 (这样做个人感觉比较灵活,而且数据是后台提供的,后期修改什么的对前端也有好处。前端只需展示数据,不用进行大量的过滤或者计算) ###### 我第一个网站就是这思路做的,所以感受深刻。 先说负面的。 会有比较高的维护成本和调试成本。 对一般网站而言,这样搞nav不适合seo。对协同系统,后台管理系统来说,这样开发又复杂,且本身这些系统对性能对传输量要求并不高。 这样实现绝对是对自己前端技术的一个锻炼。 参考前端模板,而且,jquery要用大量的bind把新载入的元素绑定事件。

kun坤 2020-06-06 16:19:44 0 浏览量 回答数 0

问题

电商网站报错 

kun坤 2020-06-10 13:22:52 26 浏览量 回答数 2

回答

Vue 相对不于 React 的一个优点是它易于理解和学习,且在国内占大多数。咱们可以在 Vue 的帮助下创建任何 Web 应用程序。 因此,时时了解一些新出现又好用的Vue 开源项目也是挺重要,一方面可以帮助咱们更加高效的开发,另一方面,咱们也可以模范学习其精华部分。 接下来看看新出的有哪些好用的开源项目。 uiGradients 网址: http://uigradients.com/ GitHub: https://github.com/ghosh/uiGradients GitHub Stars: 4.6k 彩色阵列和出色的UX使是这个项目的一个亮点,渐变仍然是网页设计中日益增长的趋势。 咱们可以选择所需的颜色,并可以获得所有可能的渐变,并获取对应的 CSS 代码, 赶紧收藏起来吧。 CSSFX CSS 过度效果的集合 网址: https://cssfx.dev GitHub: https://github.com/jolaleye/cssfx GitHub Stars: 3.5k CSSFX 里面有很多 CSS 过滤效果,咱们可以根据需求选择特定的动画,点击对应的效果即可看到生成的 CSS 代码,动手搞起来吧。 Sing App Vue Dashboard 一个管理模板 网址: https://flatlogic.com/templat... GitHub: https://github.com/flatlogic/sing-app-vue-dashboard GitHub Stars: 254 事例:https://flatlogic.com/templates/sing-app-vue-dashboard/demo 文档:https://demo.flatlogic.com/sing-app/documentation/ 这是基于最新 Vue 和 Bootstrap 免费和开源的管理模板,其实跟咱们国内的 vue-admin-template 差不多。咱们不一定要使用它,但可以研究学习源码,相信可以学到很多实用的技巧,加油少年。 Vue Storefront 网址: https://www.vuestorefront.io GitHub: https://github.com/DivanteLtd/vue-storefront GitHub Stars: 5.8k 这是一个PWA,可以连接到任何后端(或几乎任何后端)。这个项目的主要优点是使用了无头架构。这是一种全面的解决方案,为咱们提供了许多可能性(巨大的支持稳步增长的社区,服务器端渲染,将改善网页SEO,移动优先的方法和离线模式。 Faviator 图标生成的库 网址: https://www.faviator.xyz GitHub: https://www.faviator.xyz/playground GitHub Stars: 94 如果需要创建一个图标增加体验度。 可以使用任何 Google 字体以及任何颜色。只需通过首选的配置,然后选择PNG,SVG或JPG格式即可。 iView Vue UI 组件库 网址: https://iviewui.com/ GitHub: https://github.com/iview/iview GitHub Stars: 22.8k 不断迭代更新使这组UI组件成为具有任何技能水平的开发人员的不错选择。 要使用iView,需要对单一文件组件有充分的了解,该项目具有友好的API和大量文档。 Postwoman API请求构建器 网址: https://postwoman.io/ GitHub: https://github.com/liyasthomas/postwoman GitHub Stars: 10.5k 这个与 Postman 类似。 它是免费的,具有许多参与者,并且具有多平台和多设备支持。 这个工具真的非常快,并且有大量的更新。 该工具的创建者声称在不久的将来会有更多功能。 Vue Virtual Scroller 快速滚动 网址: https://akryum.github.io/vue-virtual-scroller/#/ GitHub: https://github.com/Akryum/vue-virtual-scroller GitHub Stars: 3.4k Vue Virtual Scroller具有四个主要组件。 RecycleScroller可以渲染列表中的可见项。 如果咱们不知道数据具体的数量,最好使用DynamicScroller。 DynamicScrollerItem将所有内容包装在DynamicScroller中(以处理大小更改)。 IdState简化了本地状态管理(在RecycleScroller内部)。 Mint UI 移动端的 UI 库 网址: http://mint-ui.github.io/#!/en GitHub: https://github.com/ElemeFE/mint-ui GitHub Stars: 15.2k 使用现成的CSS和JS组件更快地构建移动应用程序。使用此工具,咱们不必承担文件大小过大的风险,因为可以按需加载。动画由CSS3处理,由此来提高性能。 V Calendar 用于构建日历的无依赖插件 网址: https://vcalendar.io GitHub:https://github.com/nathanreyes/v-calendar GitHub Stars: 1.6k 您可以选择不同的视觉指示器来装饰日历。 V Calendar还为咱们提供了三种日期选择模式: 单选 多选 日期范围 Vue Design System 一组UI工具 网址: https://vueds.com/ GitHub: https://github.com/viljamis/vue-design-system GitHub Stars: 1.7k 这是一种组织良好的工具,对于任何web开发团队来说,它的命名都很容易理解。其中一个很大的优点是使用了更漂亮的代码格式化器,它可以在提交到Git之前自动排列代码。 Proppy UI组件的功能道具组合 网址: https://proppyjs.com GitHub: https://github.com/fahad19/proppy GitHub Stars: 856 ProppyJS 是一个很小的库,用于组合道具,它附带了各种集成包,让您可以自由地使用它流行的渲染库。 我们的想法是首先将Component的行为表达为props,然后使用Proppy的相同API将其连接到您的Component(可以是React,Vue.js或Preact)。 API还允许您访问其他应用程序范围的依赖项(如使用Redux的商店),以方便组件树中的任何位置。 Light Blue Vue Admin vue 后台展示模板 网址: https://flatlogic.com/templates/light-blue-vue-lite GitHub: https://github.com/flatlogic/light-blue-vue-admin GitHub Stars: 79 事例: https://demo.flatlogic.com/light-blue-vue-admin/#/app/dashboard 文档: https://demo.flatlogic.com/light-blue/documentation/ 模板是用Vue CLI和Bootstrap 4构建的。从演示中可以看到,这个模板有一组非常基本的页面:排版、地图、图表、聊天界面等。如果咱们需要一个扩展的模板,可以看看Light Blue Vue Full,它有60多个组件,无 jquery,有两个颜色主题。 Vue API Query 为 REST API 构建请求 GitHub: https://github.com/robsontenorio/vue-api-query GitHub Stars: 1.1k 关于这个项目没什么好说的。它所做的与描述行中所写的完全一样:它帮助咱们构建REST API的请求。 Vue Grid Layout Vue 的网格布局 Website: https://jbaysolutions.github.io/vue-grid-layout/examples/01-basic.html GitHub: https://github.com/jbaysolutions/vue-grid-layout GitHub Stars: 3.1k 所有网格相关问题的简单解决方案。它有静态的、可调整大小的和可拖动的小部件。还是响应和布局可以恢复和序列化。如果还需要再添加一个小部件,则不必重新构建所有网格。 Vue Content Loader 创建一个占位符加载 Website: http://danilowoz.com/create-vue-content-loader GitHub: https://github.com/egoist/vue-content-loader GitHub Stars: 2k 当咱们开发网站或者 APP 时,遇到内容过多加载速度慢时,会导致用户打开页面有大量空白页,vue-content-loader正是解决这个问题的一个组件,使加载内容之前生成一个dom模板,提高用户体验。 Echarts with Vue2.0 数据可视化 Website: https://simonzhangiter.github.io/DataVisualization/#/dashboard GitHub: https://github.com/SimonZhangITer/DataVisualization GitHub Stars: 1.3k 在图片中,咱们可以看到非常漂亮的图表。这个项目使任何数据都更具可读性,更容易理解和解释。它允许咱们在任何数据集中轻松地检测趋势和模式。 Vue.js Modal 高度可定制的模态框 Website: http://vue-js-modal.yev.io/ GitHub: https://github.com/euvl/vue-js-modal GitHub Stars: 2.9k 可以在该网站上查看所有不同类型的模态。 有15个按钮,按任意一个按钮,看到一个模态示例。 Vuesax 框架组件 Website: https://lusaxweb.github.io/vuesax/ GitHub: https://github.com/lusaxweb/vuesax GitHub Stars: 3.7k 这个项目在社区中很受欢迎。 它使咱们可以为每个组件设计不同的风格。 Vuesax的创建者强调,每个Web开发人员在进行Web设计时都应有选择的自由。 Vue2 Animate vue2.0 —使用animate.css 构建项目和创建组件 Website: https://the-allstars.com/vue2-animate/ GitHub: https://github.com/asika32764/vue2-animate GitHub Stars: 1.1k 这个库是跨浏览器的,咱们可以选择从5种类型的动画: rotate,slide,fade,bounce和zoom。在网站上有一个演示。动画的默认持续时间是1秒,但是咱们可以自定义该参数。 Vuetensils Vue.js的工具集 Website: https://vuetensils.stegosource.com/ GitHub: https://github.com/stegosource/vuetensils GitHub Stars: 111 这个UI库有一个标准的功能,但是最酷的是它没有额外的样式。你可以让设计尽可能的个性化,应用所有的需求。只需编写需要的样式,将其添加到项目中,并包含需要的尽可能多的组件。

茶什i 2020-01-09 10:39:02 0 浏览量 回答数 0

回答

找eechen######难道不是POST和GET?######php不是后台语言?######不用php也行...######PHP并不是前端语言,而是后端的,和JSP是一个级别的。###### PHP 里请求java,得到数据? 擦··问哈你老板,php到底是前端还是后端·· ###### 哈哈,这个贴有意思,PHP和Java站到一起了~  同问eechen,他对淘宝的架构非常了解 ######他就是个百度的机器而已,了解淘宝个蛋蛋。######你用PHP来做用户交互接口是可以的,你与后端的Java服务器进行通信,使用JSON格式就好了。比如你在PHP端接收到了表单数据,那么你可以直接请求你的Java后端服务器进行业务操作。或者也可以先过PHP服务器一次,做一些基本数据处理或签名等操作。######回复 @qschenling : 你可以看看SpringMVC的东西。比如你PHP中一个猪类,有体重和性别,你在Java里面也建一个猪类,属性名称和数据类型和PHP保持一致,这样你发送过来的JSON,SpringMVC就能解析出来赋值给你Java里的猪类。######你的意思是如果有数据交互的话,就直接使用json传递? 如果数据量太大,又该如何处理呢? 比如从前端输入的数据想保存到数据库(比如猪的体重,猪的年龄等等这些),java如何拿到呢? 不需要使用网上说的那些soap,quercus,lajp这样的内容吗? 谢谢亲了!######php和java都是后端处理业务逻辑的语言呀,前端web的话肯定是html+css了,前端传递的数据一般就是post和get,php和java都有接收的方法。###### JAVA提供数据服务 PHP使用服务 跟访问远程资源类似 两边通过HTTP交互 JAVA端平时怎么处理请求现在也怎么处理 前后端的区分这里只是相对的 并不是说要用PHP干JS这类「前端脚本」干的活 其实是介于前端界面和后端数据服务中间的一个层

爱吃鱼的程序员 2020-06-04 16:20:33 0 浏览量 回答数 0

问题

搞懂了这几点,你就学会了Web编程

技术小菜鸟 2019-12-01 21:20:38 2373 浏览量 回答数 1

问题

创建定制的jQuery Mobile主题 - jQuery报错

montos 2020-06-04 14:18:42 5 浏览量 回答数 1

问题

耗时半年,终于开发了第一款基于nosqlphp的开源论坛

reign 2019-12-01 21:28:36 8568 浏览量 回答数 5

回答

为什么你的代码是一个单体? 除了已经实现了微前端的应用之外,所有前端应用本质上都是单一的应用。原因是如果您正在使用 React 库进行开发,并且如果您有两个团队,则两个团队都应该使用相同的React 库,并且两个团队应该在部署时保持同步,并且在代码合并期间始终会发生冲突。它们没有完全分离,很可能它们维护着相同的仓库并具有相同的构建系统。单体应用的退出被标志为微服务的出现。但是它适用于后端! 什么是微服务? 对于微服务,一般而言最简单的解释是,它是一种开发技术,允许开发人员为平台的不同部分进行独立部署,而不会损害其他部分。独立部署的能力允许他们构建孤立或松散耦合的服务。为了使这个体系结构更稳定,有一些规则要遵循,可以总结如下:每个服务应该只有一个任务,它应该很小。所以负责这项服务的团队应该很小。关于团队和项目的规模,James Lewis 和 Martin Fowler 在互联网上做出的最酷解释之一如下: 在我们与微服务从业者的对话中,我们看到了一系列服务规模。报道的最大规模遵循亚马逊关于Two Pizza Team的概念(即整个团队可以由两个比萨饼供给),意味着不超过十几个人。在规模较小的规模上,我们已经看到了一个由六人组成的团队支持六项服务的设置。 我画了一个简单的草图,为整体和微服务提供了直观的解释: 从上图可以理解,微服务中的每个服务都是一个独立的应用,除了UI。UI仍然是一体的!当一个团队处理所有服务并且公司正在扩展时,前端团队将开始苦苦挣扎并且无法跟上它,这是这种架构的瓶颈。 除了瓶颈之外,这种架构也会导致一些组织问题。假设公司正在发展并将采用需要 跨职能 小团队的敏捷开发方法。在这个常见的例子中,产品所有者自然会开始将故事定义为前端和后端任务,而 跨职能 团队将永远不会成为真正的 跨职能 部门。这将是一个浅薄的泡沫,看起来像一个敏捷的团队,但它将在内部分开。关于管理这种团队的更多信息将是一项非常重要的工作。在每个计划中,如果有足够的前端任务或者sprint中有足够的后端任务,则会有一个问题。为了解决这里描述的所有问题和许多其他问题,几年前出现了微前端的想法并且开始迅速普及。 解决微服务中的瓶颈问题:Micro Frontends 解决方案实际上非常明显,采用了多年来为后端服务工作的相同原则:将前端整体划分为小的UI片段。但UI与服务并不十分相似,它是最终用户与产品之间的接口,应该是一致且无缝的。更重要的是,在单页面应用时代,整个应用在客户端的浏览器上运行。它们不再是简单的HTML文件,相反,它们是复杂的软件,达到了非常复杂的水平。现在我觉得微型前端的定义是必要的: Micro Frontends背后的想法是将网站或Web应用视为独立团队拥有的功能组合。每个团队都有一个独特的业务或任务领域,做他们关注和专注的事情。团队是跨职能的,从数据库到用户界面开发端到端的功能。(micro-frontends.org) 根据我迄今为止的经验,对于许多公司来说,直接采用上面提出的架构真的很难。许多其他人都有巨大的遗留负担,这使他们无法迁移到新的架构。出于这个原因,更柔软的中间解决方案更加灵活,易于采用和安全迁移至关重要。在更详细地概述了体系结构后,我将尝试提供一些体系结构的洞察,该体系结构确认了上述提议并允许更灵活的方式。在深入了解细节之前,我需要建立一些术语。 整体结构和一些术语 让我们假设我们通过业务功能垂直划分整体应用结构。我们最终会得到几个较小的应用,它们与单体应用具有相同的结构。但是如果我们在所有这些小型单体应用之上添加一个特殊应用,用户将与这个新应用进行通信,它将把每个小应用的旧单体UI组合成一个。这个新图层可以命名为拼接图层,因为它从每个微服务中获取生成的UI部件,并为最终用户组合成一个无缝 UI,这将是微前端的最直接实现朗 为了更好地理解,我将每个小型单体应用称为微应用,因为它们都是独立的应用,而不仅仅是微服务,它们都有UI部件,每个都代表端到端的业务功能。 众所周知,今天的前端生态系统功能多样,而且非常复杂。因此,当实现真正的产品时,这种直接的解决方案还不够。 要解决的问题 虽然这篇文章只是一个想法,但我开始使用Reddit讨论这个想法。感谢社区和他们的回复,我可以列出一些需要解决的问题,我将尝试逐一描述。 当我们拥有一个完全独立的独立微应用时,如何创建无缝且一致的UI体验? 好吧,这个问题没有灵丹妙药的答案,但其中一个想法是创建一个共享的UI库,它也是一个独立的微应用。通过这种方式,所有其他微应用将依赖于共享的UI库微应用。在这种情况下,我们刚刚创建了一个共享依赖项, 我们就杀死了独立微应用的想法。 另一个想法是在根级共享CSS自定义变量( CSS custom variables )。此解决方案的优势在于应用之间的全局可配置主题。 或者我们可以简单地在应用团队之间共享一些SASS变量和混合。这种方法的缺点是UI元素的重复实现,并且应该对所有微应用始终检查和验证类似元素的设计的完整性。 我们如何确保一个团队不会覆盖另一个团队编写的CSS? 一种解决方案是通过CSS选择器名称进行CSS定义,这些名称由微应用名称精心选择。通过将该范围任务放在拼接层上将减少开发开销,但会增加拼接层的责任。 另一种解决方案可以是强制每个微应用成为自定义Web组件(custom web component)。这个解决方案的优点是浏览器完成了范围设计,但需要付出代价:使用shadow DOM进行服务器端渲染几乎是不可能的。此外,自定义元素没有100%的浏览器支持,特别是IE。 我们应该如何在微应用之间共享全局信息? 这个问题指出了关于这个主题的最关注的问题之一,但解决方案非常简单:HTML 5具有相当强大的功能,大多数前端开发人员都不知道。例如,自定义事件(custom events) 就是其中之一,它是在微应用中共享信息的解决方案。 或者,任何共享的pub-sub实现或T39可观察的实现都可以实现。如果我们想要一个更复杂的全局状态处理程序,我们可以实现共享的微型Redux,通过这种方式我们可以实现更多的相应式架构。 如果所有微应用都是独立应用,我们如何进行客户端路由? 这个问题取决于设计的每个实现, 所有主要的现代框架都通过使用浏览器历史状态在客户端提供强大的路由机制, 问题在于哪个应用负责路由以及何时。 我目前的实用方法是创建一个共享客户端路由器,它只负责顶级路由,其余路由器属于相应的微应用。假设我们有 /content/:id 路由定义。共享路由器将解析 /content,已解析的路由将传递到ContentMicroApp。ContentMicroApp是一个独立的服务器,它将仅使用 /:id 进行调用。 我们必须是服务器端渲染,但是有可能使用微前端吗? 服务器端呈现是一个棘手的问题。如果你正在考虑iframes缝合微应用然后忘记服务器端渲染。同样,拼接任务的Web组件也不比iframe强大。但是,如果每个微应用能够在服务器端呈现其内容,那么拼接层将仅负责连接服务器端的HTML片段。 与传统环境集成至关重要!但是怎么样? 为了整合遗留系统,我想描述我自己的策略,我称之为“ 渐进式入侵 ”。 首先,我们必须实现拼接层,它应该具有透明代理的功能。然后我们可以通过声明一个通配符路径将遗留系统定义为微应用:LegacyMicroApp 。因此,所有流量都将到达拼接层,并将透明地代理到旧系统,因为我们还没有任何其他微应用。 下一步将是我们的 第一次逐步入侵 :我们将从LegacyMicroApp中删除主要导航并用依赖项替换它。这种依赖关系将是一个使用闪亮的新技术实现的微应用:NavigationMicroApp 。 现在,拼接层将每个路径解析为 Legacy Micro App ,它将依赖关系解析为 Navigation MicroApp ,并通过连接这两个来为它们提供服务。 然后通过主导航遵循相同的模式来为引导下一步。 然后我们将继续从Legacy MicroApp中获取逐步重复以上操作,直到没有任何遗漏。 如何编排客户端,这样我们每次都不需要重新加载页面? 拼接层解决了服务器端的问题,但没有解决客户端问题。在客户端,在将已粘贴的片段作为无缝HTML加载后,我们不需要每次在URL更改时加载所有部分。因此,我们必须有一些异步加载片段的机制。但问题是,这些片段可能有一些依赖关系,这些依赖关系需要在客户端解决。这意味着微前端解决方案应提供加载微应用的机制,以及依赖注入的一些机制。 根据上述问题和可能的解决方案,我可以总结以下主题下的所有内容: 客户端 编排路由隔离微应用应用之间通信微应用UI之间的一致性 服务端 服务端渲染路由依赖管理 灵活、强大而简单的架构 所以,这篇文章还是很值得期待的!微前端架构的基本要素和要求终于显现! 在这些要求和关注的指导下,我开始开发一种名为microfe的解决方案。在这里,我将通过抽象的方式强调其主要组件来描述该项目的架构目标。 它很容易从客户端开始,它有三个独立的主干结构:AppsManager, Loader, Router 和一个额外的MicroAppStore。 AppsManager AppsManager 是客户端微应用编排的核心。AppsManager的主要功能是创建依赖关系树。当解决了微应用的所有依赖关系时,它会实例化微应用。 Loader 客户端微应用编排的另一个重要部分是Loader。加载器的责任是从服务器端获取未解析的微应用。 Router 为了解决客户端路由问题,我将 Router 引入了 microfe。与常见的客户端路由器不同,microf 的功能有限,它不解析页面而是微应用。假设我们有一个URL /content/detail/13 和一个ContentMicroApp。在这种情况下,microfe 将URL解析为 /content/,它将调用ContentMicroApp /detail/13 URL部分。 MicroAppStore 为了解决微应用到微应用客户端的通信,我将MicroAppStore引入了 microfe。它具有与Redux库类似的功能,区别在于:它对异步数据结构更改和reducer 声明更灵活。 服务器端部分在实现上可能稍微复杂一些,但结构更简单。它只包含两个主要部分 StitchingServer 和许多MicroAppServer。 MicroAppServer MicroAppServer 的最小功能可以概括为 init 和 serve。 虽然 MicroAppServer 首先启动它应该做的是使用 微应用声明 调用 SticthingServer 注册端点,该声明定义了 MicroAppServer 的微应用 依赖关系, 类型 和 URL架构。我认为没有必要提及服务功能,因为没有什么特别之处。 StitchingServer StitchingServer 为 MicroAppServers 提供注册端点。当 MicroAppServer 将自己注册到 StichingServer 时,StichingServer 会记录MicroAppServer 的声明。 稍后,StitchingServer 使用声明从请求的URL解析 MicroAppServers。 解析M icroAppServer 及其所有依赖项后,CSS,JS和HTML中的所有相对路径都将以相关的 MicroAppServer 公共URL为前缀。另外一步是为CSS选择器添加一个唯一的 MicroAppServer 标识符,以防止客户端的微应用之间发生冲突。 然后 StitchingServer 的主要职责就是:从所有收集的部分组成并返回一个无缝的HTML页面。 其他实现一览 甚至在2016年被称为微前端之前,许多大公司都试图通过 BigPipe 来解决Facebook等类似问题。如今这个想法正在获得验证。不同规模的公司对该主题感兴趣并投入时间和金钱。例如,Zalando开源了其名为Project Mosaic的解决方案。我可以说,微型和 Project Mosaic.遵循类似的方法,但有一些重要的区别。虽然microfe采用完全分散的路由定义来增强每个微应用的独立性,但Project Mosaic更喜欢每条路径的集中路由定义和布局定义。通过这种方式,Project Mosaic可以实现轻松的A/B测试和动态布局生成。 对于该主题还有一些其他方法,例如使用iframe作为拼接层,这显然不是在服务器端而是在客户端。这是一个非常简单的解决方案,不需要太多的服务器结构和DevOps参与。这项工作只能由前端团队完成,因此可以减轻公司的组织负担,同时降低成本。 已经有一个框架叫做 single-spa。该项目依赖于每个应用的命名约定来解析和加载微应用。容易掌握想法并遵循模式。因此,在您自己的本地环境中尝试该想法可能是一个很好的初步介绍。但是项目的缺点是你必须以特定的方式构建每个微应用,以便他们可以很好地使用框架。 最后的想法 我相信微前端话题会更频繁地讨论。如果该主题能够引起越来越多公司的关注,它将成为大型团队的事实发展方式。在不久的将来,任何前端开发人员都可以在这个架构上掌握一些见解和经验,这真的很有用。 关于本文 译者:@Vincent.W 译文:https://zhuanlan.zhihu.com/p/82965940 作者:@onerzafer 原文:https://hackernoon.com/understanding-micro-frontends-b1c11585a297 加入阿里云钉钉群享福利:每周技术直播,定期群内有奖活动、大咖问答 阿里云开发者社区

茶什i 2020-01-06 17:57:24 0 浏览量 回答数 0

回答

1.1 认识视图界面 和大多编辑器一样,该有的基本都有。 1.2 文件夹和文件的打开 文件——>打开文件夹/打开文件 1.3 新建文件/文件夹 新建文件: a. 文件——>新建文件; b. 按Ctrl+n; c. 点文件夹名后面的+号图标。 新建文件夹: 点文件夹名后面的+号图标。 1.4 拆分编辑器(分列) 快加键:Ctrl+\ 点击拆分编辑器图标(右上角)进行拆分编辑器。拆分完毕之后,可以通过鼠标点击拖动文件到相应的列。多列同时浏览免去多文件来回切换。 1.5 集成终端 终端对开发者来说不可或缺,Visual Studio code 自然也自带终端视窗。 可按快捷键Ctrl+`快速调出终端,也可以 查看——>集成终端 调出。 需要注意的是:如果当前的文件夹的路径名称包含中文,会出现终端打开失败(待验证)。 1.6 安装/卸载扩展(插件) a. 进入扩展视图界面安装/卸载 a1.快捷键:Ctrl+shift+x; a2.查看——>扩展; a3.点左侧边框的扩展图标按钮进入。 在顶部搜索框输入你需要的扩展插件,找到之后在扩展插件后面的选项中点击【安装】即可,需要卸载扩展只需要点【卸载】即可。 扩展下载安装完毕之后需要点击【启用】才生效,有些扩展需要重启编辑器才生效。 b. 如何选择扩展(插件)呢? 其实也不难,扩展的名称一般都暴露了它的功能,基本如下: 1.带snippets 一般是代码提示类扩展; 2.带viewer 一般是代码运行预览类扩展; 3.带support 一般是代码语言支持; 4.带document 一般是参考文档类扩展; 5.带Formatt 一般是代码格式化整理扩展; 当然有的snippets 也自带support功能,并不是以上面的关键词作为唯一标准。 1.7 文件图标主题设置 之前写的有一篇经验,链接附上。 0Visual Studio Code 怎么设置文件图标主题? END 2.VS code用户设置 2.1 用户设置入口 VS code支持用户自定义设置编辑器,包括快加键修改、代码高亮、以及扩展插件配置等,点击文件——>首选项——>用户设置。 编辑器会拆分为两列,一个文件是【默认设置】,一个是【settings.json】,用户设置是空的【settings.json】这个文件(之前没有设置的话),需要自定义的设置项就在settings.json文件里写入json代码即可。 2.2 自定义的设置方法为: 1、在【默认设置】里找到相关的设置json代码段,复制该设置完整的json块,例如:【"editor.fontSize": 14,】。 2、到【settings.json】粘贴。不过记得加上外层(前后)“{}”符号,不然不是完整的json,会出错或者设置无效。 例如: { "editor.fontSize": 20} 完后按Ctrl+s保存关掉窗口,编辑器的文字的大小就变成20了。 需要注意的是,【settings.json】的代码必须符合json格式,且名称(如上面的editor.fontSize)和值对(如上面的20)是【默认设置】里有的或者是扩展中支持的,不然不会有任何作用。 END 3.插件推荐及使用配置 VS code的扩展还是比较丰富的,具体选择方法在前面的步骤1.6已经教大家了,下面介绍几个对基本web前端编辑比较实用的扩展插件(我个人认为)。 3.1 HTNL Snippets 为HTML文档提供代码提示功能,包含HTML5。 3.2 easyless为less文档提供提示,错误警告,以及把less文档编译为css文件。可自定义设置。开发者给出的配置例子: "less.compile": {"compress": true,"sourceMap": true,"out":false} 可以粘贴到用户设置的【默认设置】里,也可以粘贴到用户设置settings.json里。后面的懂json的同学自动忽略:如果settings.json是空的,应该写成: {"less.compile": {"compress": true,"sourceMap": true,"out":false}} 如果之前已有写入json代码,你应该在前面的名称/值对块后面加上“,”(新手容易多加或者少加","符号,个人觉得是这样的)。 ****提示:**** 在写的时候,代码内最好不要加注释。"sourceMap": true, 这个地方最好设置成false ,因为当你实际使用的时候浏览器找不到sourceMap 可能会报错或者浏览器一直去找,还没遇到过(我碰到jQuery.js因为这个报错的),入门的同学还是设置成false 比较好。 3.3 VS color Picker 为css文档和HTML文档提供颜色选择,当输入“#”后会出现颜色选择器浮窗,点击相应颜色之后会插入文档中,默认用16进制表示。若想用其他格式的颜色,如RGB等则推荐扩展:Color Picker (Color Picker缺点是需要配置,安装nodejs,并且添加node到全局环境变量中。而且在插入时需要使用命令调出提色板,有点麻烦) 3.4 live HTML Previewer 为html文档提供预览功能,需要用命令或者快捷键调出,会在编辑器中新增一列,用于运行html文件。 a. 按F1在命令框中输入:Show side preview 新增一列显示html,能边写边看到效果,实时预览。 b. 可以在html文档中右键选择:Open in browser 在系统默认浏览器中打开,该模式下不能提供实时预览,保存时不自动刷新浏览器。 3.5 SVG Viewer 为SVG 文档在编辑器中提供预览。 a. 按F1在命令框中输入:SVG b. 选择SVG Viewer,新增一列显示SVG运行结果。 END 4.VS code 用户代码片段 4.1 用户代码片段 设置入口及示例 用户代码片段 是用来提示代码提示及快捷插入的,那么怎么做呢? 1.文件——>首选项——>用户代码片段 2.选择代码语言 3.按固定格式写json代码 示例格式: "Print to console": {"prefix": "log", "body": ["console.log('$1');","$2"],"description": "Log output to console"} 4.2 片段json示例写法详解 可变区域(这里用XXXX表示)如下:A. "Print to XXXX": { //仅作为标识和目的用途,区别于其他代码块(有多个相同值时会报错),不会插入。 B."prefix": "XXXX", //触发提示的关键字符,也就是输入什么时弹出提示窗。例如:当希望输入a的时候就弹出,这里就写a。在提示窗显示。 C. "body": ["XXXX $1 XXXX"], //在编辑器中插入的代码块,例如当在提示窗中选择a的时候就插入【<a>a</a>】那么这里就写:<a>a</a> D. "description": "XXXX" // 这里是相关描述,比如说明插入的代码块内容、用途、代码结构、参数等,仅在提示窗显示不会插入} E. 上面示例中的$1和$2是初始定位光标位置,用于插入后需要修改的值、参数等。还是上面的例子: "body":["<a>$1</a>"] 那么在插入<a></a>之后,光标的位置将处于<a>和</a>的中间。再如: "body":["<a>$1</a>", "<span>$2GBK</span>"] 那么在插入 <a></a> <span>GBK</span> 之后,光标首先在a标签内,输入完内容之后,光标跳到<span>和GBK中间。输入或者移动光标之后光标恢复正常 4.3 怎么使插入的代码块符合格式化标准? 代码格式化主要就是缩进和换行了。 1.要缩进的地方按下TAB键即可,例如:[" <a>$1</a>"] 2.怎么在"body":[]中插入带双引号的内容?因为注释带有特殊符号尤其是带有双引号("")的内容会导致json报错,解决方法是用反斜杠“\”对特殊符号进行转义。 例如: 那么"body":[]那里应该这样写: 这里在"description": "XXXX"那里同样适用。 总的来说,碰到json报错的字符或者符号就用反斜杠“\”进行转义。当然你要考虑插入之后会不会影响程序文档报错或者出现异常,也就是要先确定插入的代码块是正确的完整的,这是自定义代码块存在的意义 4.4 下面是我写的一段完整的示例(XXXX都匿了):自定义的json{ "Print to authorInfo": { "prefix": "au", "body": [ "-----By Ray-----", "mail:XXXXXXX", "description:$1", " Step 1:", " Step 2:", "<a href=\"XXXX/\">凯玩网</a>"], "description": "author info" 来源于网络,供您参考

保持可爱mmm 2019-12-02 02:20:23 0 浏览量 回答数 0

回答

详细解答可以参考官方帮助文档与Rails集成在Rails应用中使用OSS Ruby SDK只需要在Gemfile中添加以下依赖: gem 'aliyun-sdk', '~> 0.3.0然后在使用OSS时引入依赖就可以了: require 'aliyun/oss'另外,SDK的rails/目录下提供一些方便用户使用的辅助代码。 下面我们将利用SDK来实现一个简单的OSS文件管理器(oss-manager),最终包含以下功能: 列出用户所有的Bucket列出Bucket下所有的文件,按目录层级列出上传文件下载文件 1. 创建项目先安装Rails,然后创建一个Rails应用,oss-manager: gem install railsrails new oss-manager作为一个好的习惯,使用git管理项目代码: cd oss-managergit initgit add .git commit -m "init project"2. 添加SDK依赖编辑oss-manager/Gemfile,向其中加入SDK的依赖: gem 'aliyun-sdk', '~> 0.3.0'然后在oss-manager/下执行: bundle install保存这一步所做的更改: git add .git commit -m "add aliyun-sdk dependency"3. 初始化OSS Client为了避免在项目中用到OSS Client的地方都要初始化,我们在项目中添加一个初始化文件,方便在项目中使用OSS Client: # oss-manager/config/initializers/aliyun_oss_init.rbrequire 'aliyun/oss'module OSS def self.client unless @client Aliyun::Common::Logging.set_log_file('./log/oss_sdk.log') @client = Aliyun::OSS::Client.new( endpoint: Rails.application.secrets.aliyun_oss['endpoint'], access_key_id: Rails.application.secrets.aliyun_oss['access_key_id'], access_key_secret: Rails.application.secrets.aliyun_oss['access_key_secret'] ) end @client endend 上面的代码在SDK的rails/目录下可以找到。这样初始化后,在项目中使用OSSClient就非常方便: buckets = OSS.client.list_buckets其中endpoint和AccessKeyId/AccessKeySecret保存在oss-manager/conf/secrets.yml中,例如: development: secret_key_base: xxxx aliyun_oss: endpoint: xxxx access_key_id: aaaa access_key_secret: bbbb 保存代码: git add .git commit -m "add aliyun-sdk initializer"4. 实现List buckets功能首先用rails生成管理Buckets的controller: rails g controller buckets index这样会在oss-manager中生成以下文件: app/controller/buckets_controller.rb Buckets相关的逻辑代码app/views/buckets/index.html.erb Buckets相关的展示代码app/helpers/buckets_helper.rb 一些辅助函数 首先编辑buckets_controller.rb,调用OSS Client,将list_buckets的结果存放在@buckets变量中: class BucketsController < ApplicationController def index @buckets = OSS.client.list_buckets endend 然后编辑views/buckets/index.html.erb,将Bucket列表展示出来: <h1>Buckets</h1><table class="table table-striped"> <tr> <th>Name</th> <th>Location</th> <th>CreationTime</th> </tr> <% @buckets.each do |bucket| %> <tr> <td><%= link_to bucket.name, bucket_objects_path(bucket.name) %></td> <td><%= bucket.location %></td> <td><%= bucket.creation_time.localtime.to_s %></td> </tr> <% end %></table> 其中bucket_objects_path是一个辅助函数,在app/helpers/buckets_helper.rb中: module BucketsHelper def bucket_objects_path(bucket_name) "/buckets/#{bucket_name}/objects" endend 这样就完成了列出所有Bucket的功能。在运行之前,我们还需要配置Rails的路由,使得我们在浏览器中输入的地址能够调用正确的逻辑。编辑config/routes.rb,增加一条: resources :buckets do resources :objectsend好了,在oss-manager/下输入rails s以启动rails server,然后在浏览器中输入http://localhost:3000/buckets/就能看到Bucket列表了。 最后保存一下代码: git add .git commit -m "add list buckets feature"5. 实现List objects功能首先生成一个管理Objects的controller: rails g controller objects index然后编辑app/controllers/objects_controller.rb: class ObjectsController < ApplicationController def index @bucket_name = params[:bucket_id] @prefix = params[:prefix] @bucket = OSS.client.get_bucket(@bucket_name) @objects = @bucket.list_objects(:prefix => @prefix, :delimiter => '/') endend 上面的代码首先从URL的参数中获取Bucket名字,为了只按目录层级显示,我们还需要一个前缀。然后调用OSS Client的list_objects接口获取文件列表。注意,这里获取的是指定前缀下,并且以’/‘为分界的文件。这样做是为也按目录层级列出文件。请参考管理文件 接下来编辑app/views/objects/index.html.erb: <h1>Objects in <%= @bucket_name %></h1><p> <%= link_to 'Upload file', new_object_path(@bucket_name, @prefix) %></p><table class="table table-striped"> <tr> <th>Key</th> <th>Type</th> <th>Size</th> <th>LastModified</th> </tr> <tr> <td><%= link_to '../', with_prefix(upper_dir(@prefix)) %></td> <td>Directory</td> <td>N/A</td> <td>N/A</td> </tr> <% @objects.each do |object| %> <tr> <% if object.is_a?(Aliyun::OSS::Object) %> <td><%= link_to remove_prefix(object.key, @prefix), @bucket.object_url(object.key) %></td> <td><%= object.type %></td> <td><%= number_to_human_size(object.size) %></td> <td><%= object.last_modified.localtime.to_s %></td> <% else %> <td><%= link_to remove_prefix(object, @prefix), with_prefix(object) %></td> <td>Directory</td> <td>N/A</td> <td>N/A</td> <% end %> </tr> <% end %></table> 上面的代码将文件按目录结构显示,主要逻辑是: 总是在第一个显示’../‘指向上级目录对于Common prefix,显示为目录对于Object,显示为文件 上面的代码中用到了with_prefix, remove_prefix等一些辅助函数,它们定义在app/helpers/objects_helper.rb中: module ObjectsHelper def with_prefix(prefix) "?prefix=#{prefix}" end def remove_prefix(key, prefix) key.sub(/^#{prefix}/, '') end def upper_dir(dir) dir.sub(/[^\/]+\/$/, '') if dir end def new_object_path(bucket_name, prefix = nil) "/buckets/#{bucket_name}/objects/new/#{with_prefix(prefix)}" end def objects_path(bucket_name, prefix = nil) "/buckets/#{bucket_name}/objects/#{with_prefix(prefix)}" endend 完成之后运行rails s,然后在浏览器中输入地址http://localhost:3000/buckets/my-bucket/objects/就可以查看文件列表了。 惯例保存代码: git add .git commit -m "add list objects feature"6. 下载文件注意到在上一步显示文件列表时,我们为每个文件也添加了一个链接: <td><%= link_to remove_prefix(object.key, @prefix), @bucket.object_url(object.key) %></td> 其中Bucket#object_url是一个为文件生成临时URL的方法,参考下载文件 7. 上传文件在Rails这种服务端应用中,用户上传文件有两种办法: 用户先将文件上传到Rails的服务器上,服务器再将文件上传到OSS。这样做需要Rails服务器作为中转,文件多拷贝了一遍,不是很高效。服务器为用户生成表单和临时凭证,用户直接上传文件到OSS。 第一种方法比较简单,与普通的上传文件一样。下面我们用的是第二种方法: 首先在app/controllers/objects_controller.rb中增加一个#new方法,用于生成上传表单: def new @bucket_name = params[:bucket_id] @prefix = params[:prefix] @bucket = OSS.client.get_bucket(@bucket_name) @options = { :prefix => @prefix, :redirect => 'http://localhost:3000/buckets/' }end 然后编辑app/views/objects/new.html.erb: <h2>Upload object</h2><%= upload_form(@bucket, @options) do %> <table class="table table-striped"> <tr> <td><label>Bucket:</label></td> <td><%= @bucket.name %></td> </tr> <tr> <td><label>Prefix:</label></td> <td><%= @prefix %></td> </tr> <tr> <td><label>Select file:</label></td> <td><input type="file" name="file" style="display:inline" /></td> </tr> <tr> <td colspan="2"> <input type="submit" class="btn btn-default" value="Upload" /> <span>&nbsp;&nbsp</span> <%= link_to 'Back', objects_path(@bucket_name, @prefix) %> </td> </tr> </table><% end %> 其中upload_form是SDK提供的一个方便用户生成上传表单的辅助函数,在SDK的代码rails/aliyun_oss_helper.rb中。用户需要将其拷贝到app/helpers/目录下。完成之后运行rails s,然后访问http://localhost:3000/buckets/my-bucket/objects/new就能够上传文件了。 最后记得保存代码: git add .git commit -m "add upload object feature"8. 添加样式为了让界面更好看一些,我们可以添加一点样式(CSS)。 首先下载bootstrap,解压后将bootstrap.min.css拷贝到app/assets/stylesheets/下。 然后在修改app/views/layouts/application.html.erb,将yield一行改成: <div id="main"> <%= yield %> </div> 这会为每个页面添加一个id为main的<div>,然后修改app/assets/stylesheets/application.css,加入以下内容: body { text-align: center;}div#main { text-align: left; width: 1024px; margin: 0 auto;} 这会让网页的主体内容居中显示。通过添加简单的样式,我们的页面是不是更加赏心悦目了呢? 至此,一个简单的demo就完成了。完整的demo代码请参看 Alibaba Cloud OSS Rails Demo。

2019-12-01 23:14:35 0 浏览量 回答数 0

回答

详细解答可以参考官方帮助文档与Rails集成在Rails应用中使用OSS Ruby SDK只需要在Gemfile中添加以下依赖: gem 'aliyun-sdk', '~> 0.3.0然后在使用OSS时引入依赖就可以了: require 'aliyun/oss'另外,SDK的rails/目录下提供一些方便用户使用的辅助代码。 下面我们将利用SDK来实现一个简单的OSS文件管理器(oss-manager),最终包含以下功能: 列出用户所有的Bucket列出Bucket下所有的文件,按目录层级列出上传文件下载文件 1. 创建项目先安装Rails,然后创建一个Rails应用,oss-manager: gem install railsrails new oss-manager作为一个好的习惯,使用git管理项目代码: cd oss-managergit initgit add .git commit -m "init project"2. 添加SDK依赖编辑oss-manager/Gemfile,向其中加入SDK的依赖: gem 'aliyun-sdk', '~> 0.3.0'然后在oss-manager/下执行: bundle install保存这一步所做的更改: git add .git commit -m "add aliyun-sdk dependency"3. 初始化OSS Client为了避免在项目中用到OSS Client的地方都要初始化,我们在项目中添加一个初始化文件,方便在项目中使用OSS Client: # oss-manager/config/initializers/aliyun_oss_init.rbrequire 'aliyun/oss'module OSS def self.client unless @client Aliyun::Common::Logging.set_log_file('./log/oss_sdk.log') @client = Aliyun::OSS::Client.new( endpoint: Rails.application.secrets.aliyun_oss['endpoint'], access_key_id: Rails.application.secrets.aliyun_oss['access_key_id'], access_key_secret: Rails.application.secrets.aliyun_oss['access_key_secret'] ) end @client endend 上面的代码在SDK的rails/目录下可以找到。这样初始化后,在项目中使用OSSClient就非常方便: buckets = OSS.client.list_buckets其中endpoint和AccessKeyId/AccessKeySecret保存在oss-manager/conf/secrets.yml中,例如: development: secret_key_base: xxxx aliyun_oss: endpoint: xxxx access_key_id: aaaa access_key_secret: bbbb 保存代码: git add .git commit -m "add aliyun-sdk initializer"4. 实现List buckets功能首先用rails生成管理Buckets的controller: rails g controller buckets index这样会在oss-manager中生成以下文件: app/controller/buckets_controller.rb Buckets相关的逻辑代码app/views/buckets/index.html.erb Buckets相关的展示代码app/helpers/buckets_helper.rb 一些辅助函数 首先编辑buckets_controller.rb,调用OSS Client,将list_buckets的结果存放在@buckets变量中: class BucketsController < ApplicationController def index @buckets = OSS.client.list_buckets endend 然后编辑views/buckets/index.html.erb,将Bucket列表展示出来: <h1>Buckets</h1><table class="table table-striped"> <tr> <th>Name</th> <th>Location</th> <th>CreationTime</th> </tr> <% @buckets.each do |bucket| %> <tr> <td><%= link_to bucket.name, bucket_objects_path(bucket.name) %></td> <td><%= bucket.location %></td> <td><%= bucket.creation_time.localtime.to_s %></td> </tr> <% end %></table> 其中bucket_objects_path是一个辅助函数,在app/helpers/buckets_helper.rb中: module BucketsHelper def bucket_objects_path(bucket_name) "/buckets/#{bucket_name}/objects" endend 这样就完成了列出所有Bucket的功能。在运行之前,我们还需要配置Rails的路由,使得我们在浏览器中输入的地址能够调用正确的逻辑。编辑config/routes.rb,增加一条: resources :buckets do resources :objectsend好了,在oss-manager/下输入rails s以启动rails server,然后在浏览器中输入http://localhost:3000/buckets/就能看到Bucket列表了。 最后保存一下代码: git add .git commit -m "add list buckets feature"5. 实现List objects功能首先生成一个管理Objects的controller: rails g controller objects index然后编辑app/controllers/objects_controller.rb: class ObjectsController < ApplicationController def index @bucket_name = params[:bucket_id] @prefix = params[:prefix] @bucket = OSS.client.get_bucket(@bucket_name) @objects = @bucket.list_objects(:prefix => @prefix, :delimiter => '/') endend 上面的代码首先从URL的参数中获取Bucket名字,为了只按目录层级显示,我们还需要一个前缀。然后调用OSS Client的list_objects接口获取文件列表。注意,这里获取的是指定前缀下,并且以’/‘为分界的文件。这样做是为也按目录层级列出文件。请参考管理文件 接下来编辑app/views/objects/index.html.erb: <h1>Objects in <%= @bucket_name %></h1><p> <%= link_to 'Upload file', new_object_path(@bucket_name, @prefix) %></p><table class="table table-striped"> <tr> <th>Key</th> <th>Type</th> <th>Size</th> <th>LastModified</th> </tr> <tr> <td><%= link_to '../', with_prefix(upper_dir(@prefix)) %></td> <td>Directory</td> <td>N/A</td> <td>N/A</td> </tr> <% @objects.each do |object| %> <tr> <% if object.is_a?(Aliyun::OSS::Object) %> <td><%= link_to remove_prefix(object.key, @prefix), @bucket.object_url(object.key) %></td> <td><%= object.type %></td> <td><%= number_to_human_size(object.size) %></td> <td><%= object.last_modified.localtime.to_s %></td> <% else %> <td><%= link_to remove_prefix(object, @prefix), with_prefix(object) %></td> <td>Directory</td> <td>N/A</td> <td>N/A</td> <% end %> </tr> <% end %></table> 上面的代码将文件按目录结构显示,主要逻辑是: 总是在第一个显示’../‘指向上级目录对于Common prefix,显示为目录对于Object,显示为文件 上面的代码中用到了with_prefix, remove_prefix等一些辅助函数,它们定义在app/helpers/objects_helper.rb中: module ObjectsHelper def with_prefix(prefix) "?prefix=#{prefix}" end def remove_prefix(key, prefix) key.sub(/^#{prefix}/, '') end def upper_dir(dir) dir.sub(/[^\/]+\/$/, '') if dir end def new_object_path(bucket_name, prefix = nil) "/buckets/#{bucket_name}/objects/new/#{with_prefix(prefix)}" end def objects_path(bucket_name, prefix = nil) "/buckets/#{bucket_name}/objects/#{with_prefix(prefix)}" endend 完成之后运行rails s,然后在浏览器中输入地址http://localhost:3000/buckets/my-bucket/objects/就可以查看文件列表了。 惯例保存代码: git add .git commit -m "add list objects feature"6. 下载文件注意到在上一步显示文件列表时,我们为每个文件也添加了一个链接: <td><%= link_to remove_prefix(object.key, @prefix), @bucket.object_url(object.key) %></td> 其中Bucket#object_url是一个为文件生成临时URL的方法,参考下载文件 7. 上传文件在Rails这种服务端应用中,用户上传文件有两种办法: 用户先将文件上传到Rails的服务器上,服务器再将文件上传到OSS。这样做需要Rails服务器作为中转,文件多拷贝了一遍,不是很高效。服务器为用户生成表单和临时凭证,用户直接上传文件到OSS。 第一种方法比较简单,与普通的上传文件一样。下面我们用的是第二种方法: 首先在app/controllers/objects_controller.rb中增加一个#new方法,用于生成上传表单: def new @bucket_name = params[:bucket_id] @prefix = params[:prefix] @bucket = OSS.client.get_bucket(@bucket_name) @options = { :prefix => @prefix, :redirect => 'http://localhost:3000/buckets/' }end 然后编辑app/views/objects/new.html.erb: <h2>Upload object</h2><%= upload_form(@bucket, @options) do %> <table class="table table-striped"> <tr> <td><label>Bucket:</label></td> <td><%= @bucket.name %></td> </tr> <tr> <td><label>Prefix:</label></td> <td><%= @prefix %></td> </tr> <tr> <td><label>Select file:</label></td> <td><input type="file" name="file" style="display:inline" /></td> </tr> <tr> <td colspan="2"> <input type="submit" class="btn btn-default" value="Upload" /> <span>&nbsp;&nbsp</span> <%= link_to 'Back', objects_path(@bucket_name, @prefix) %> </td> </tr> </table><% end %> 其中upload_form是SDK提供的一个方便用户生成上传表单的辅助函数,在SDK的代码rails/aliyun_oss_helper.rb中。用户需要将其拷贝到app/helpers/目录下。完成之后运行rails s,然后访问http://localhost:3000/buckets/my-bucket/objects/new就能够上传文件了。 最后记得保存代码: git add .git commit -m "add upload object feature"8. 添加样式为了让界面更好看一些,我们可以添加一点样式(CSS)。 首先下载bootstrap,解压后将bootstrap.min.css拷贝到app/assets/stylesheets/下。 然后在修改app/views/layouts/application.html.erb,将yield一行改成: <div id="main"> <%= yield %> </div> 这会为每个页面添加一个id为main的<div>,然后修改app/assets/stylesheets/application.css,加入以下内容: body { text-align: center;}div#main { text-align: left; width: 1024px; margin: 0 auto;} 这会让网页的主体内容居中显示。通过添加简单的样式,我们的页面是不是更加赏心悦目了呢? 至此,一个简单的demo就完成了。完整的demo代码请参看 Alibaba Cloud OSS Rails Demo。

2019-12-01 23:14:36 0 浏览量 回答数 0

回答

详细解答可以参考官方帮助文档与Rails集成在Rails应用中使用OSS Ruby SDK只需要在Gemfile中添加以下依赖: gem 'aliyun-sdk', '~> 0.3.0然后在使用OSS时引入依赖就可以了: require 'aliyun/oss'另外,SDK的rails/目录下提供一些方便用户使用的辅助代码。 下面我们将利用SDK来实现一个简单的OSS文件管理器(oss-manager),最终包含以下功能: 列出用户所有的Bucket列出Bucket下所有的文件,按目录层级列出上传文件下载文件 1. 创建项目先安装Rails,然后创建一个Rails应用,oss-manager: gem install railsrails new oss-manager作为一个好的习惯,使用git管理项目代码: cd oss-managergit initgit add .git commit -m "init project"2. 添加SDK依赖编辑oss-manager/Gemfile,向其中加入SDK的依赖: gem 'aliyun-sdk', '~> 0.3.0'然后在oss-manager/下执行: bundle install保存这一步所做的更改: git add .git commit -m "add aliyun-sdk dependency"3. 初始化OSS Client为了避免在项目中用到OSS Client的地方都要初始化,我们在项目中添加一个初始化文件,方便在项目中使用OSS Client: # oss-manager/config/initializers/aliyun_oss_init.rbrequire 'aliyun/oss'module OSS def self.client unless @client Aliyun::Common::Logging.set_log_file('./log/oss_sdk.log') @client = Aliyun::OSS::Client.new( endpoint: Rails.application.secrets.aliyun_oss['endpoint'], access_key_id: Rails.application.secrets.aliyun_oss['access_key_id'], access_key_secret: Rails.application.secrets.aliyun_oss['access_key_secret'] ) end @client endend 上面的代码在SDK的rails/目录下可以找到。这样初始化后,在项目中使用OSSClient就非常方便: buckets = OSS.client.list_buckets其中endpoint和AccessKeyId/AccessKeySecret保存在oss-manager/conf/secrets.yml中,例如: development: secret_key_base: xxxx aliyun_oss: endpoint: xxxx access_key_id: aaaa access_key_secret: bbbb 保存代码: git add .git commit -m "add aliyun-sdk initializer"4. 实现List buckets功能首先用rails生成管理Buckets的controller: rails g controller buckets index这样会在oss-manager中生成以下文件: app/controller/buckets_controller.rb Buckets相关的逻辑代码app/views/buckets/index.html.erb Buckets相关的展示代码app/helpers/buckets_helper.rb 一些辅助函数 首先编辑buckets_controller.rb,调用OSS Client,将list_buckets的结果存放在@buckets变量中: class BucketsController < ApplicationController def index @buckets = OSS.client.list_buckets endend 然后编辑views/buckets/index.html.erb,将Bucket列表展示出来: <h1>Buckets</h1><table class="table table-striped"> <tr> <th>Name</th> <th>Location</th> <th>CreationTime</th> </tr> <% @buckets.each do |bucket| %> <tr> <td><%= link_to bucket.name, bucket_objects_path(bucket.name) %></td> <td><%= bucket.location %></td> <td><%= bucket.creation_time.localtime.to_s %></td> </tr> <% end %></table> 其中bucket_objects_path是一个辅助函数,在app/helpers/buckets_helper.rb中: module BucketsHelper def bucket_objects_path(bucket_name) "/buckets/#{bucket_name}/objects" endend 这样就完成了列出所有Bucket的功能。在运行之前,我们还需要配置Rails的路由,使得我们在浏览器中输入的地址能够调用正确的逻辑。编辑config/routes.rb,增加一条: resources :buckets do resources :objectsend好了,在oss-manager/下输入rails s以启动rails server,然后在浏览器中输入http://localhost:3000/buckets/就能看到Bucket列表了。 最后保存一下代码: git add .git commit -m "add list buckets feature"5. 实现List objects功能首先生成一个管理Objects的controller: rails g controller objects index然后编辑app/controllers/objects_controller.rb: class ObjectsController < ApplicationController def index @bucket_name = params[:bucket_id] @prefix = params[:prefix] @bucket = OSS.client.get_bucket(@bucket_name) @objects = @bucket.list_objects(:prefix => @prefix, :delimiter => '/') endend 上面的代码首先从URL的参数中获取Bucket名字,为了只按目录层级显示,我们还需要一个前缀。然后调用OSS Client的list_objects接口获取文件列表。注意,这里获取的是指定前缀下,并且以’/‘为分界的文件。这样做是为也按目录层级列出文件。请参考管理文件 接下来编辑app/views/objects/index.html.erb: <h1>Objects in <%= @bucket_name %></h1><p> <%= link_to 'Upload file', new_object_path(@bucket_name, @prefix) %></p><table class="table table-striped"> <tr> <th>Key</th> <th>Type</th> <th>Size</th> <th>LastModified</th> </tr> <tr> <td><%= link_to '../', with_prefix(upper_dir(@prefix)) %></td> <td>Directory</td> <td>N/A</td> <td>N/A</td> </tr> <% @objects.each do |object| %> <tr> <% if object.is_a?(Aliyun::OSS::Object) %> <td><%= link_to remove_prefix(object.key, @prefix), @bucket.object_url(object.key) %></td> <td><%= object.type %></td> <td><%= number_to_human_size(object.size) %></td> <td><%= object.last_modified.localtime.to_s %></td> <% else %> <td><%= link_to remove_prefix(object, @prefix), with_prefix(object) %></td> <td>Directory</td> <td>N/A</td> <td>N/A</td> <% end %> </tr> <% end %></table> 上面的代码将文件按目录结构显示,主要逻辑是: 总是在第一个显示’../‘指向上级目录对于Common prefix,显示为目录对于Object,显示为文件 上面的代码中用到了with_prefix, remove_prefix等一些辅助函数,它们定义在app/helpers/objects_helper.rb中: module ObjectsHelper def with_prefix(prefix) "?prefix=#{prefix}" end def remove_prefix(key, prefix) key.sub(/^#{prefix}/, '') end def upper_dir(dir) dir.sub(/[^\/]+\/$/, '') if dir end def new_object_path(bucket_name, prefix = nil) "/buckets/#{bucket_name}/objects/new/#{with_prefix(prefix)}" end def objects_path(bucket_name, prefix = nil) "/buckets/#{bucket_name}/objects/#{with_prefix(prefix)}" endend 完成之后运行rails s,然后在浏览器中输入地址http://localhost:3000/buckets/my-bucket/objects/就可以查看文件列表了。 惯例保存代码: git add .git commit -m "add list objects feature"6. 下载文件注意到在上一步显示文件列表时,我们为每个文件也添加了一个链接: <td><%= link_to remove_prefix(object.key, @prefix), @bucket.object_url(object.key) %></td> 其中Bucket#object_url是一个为文件生成临时URL的方法,参考下载文件 7. 上传文件在Rails这种服务端应用中,用户上传文件有两种办法: 用户先将文件上传到Rails的服务器上,服务器再将文件上传到OSS。这样做需要Rails服务器作为中转,文件多拷贝了一遍,不是很高效。服务器为用户生成表单和临时凭证,用户直接上传文件到OSS。 第一种方法比较简单,与普通的上传文件一样。下面我们用的是第二种方法: 首先在app/controllers/objects_controller.rb中增加一个#new方法,用于生成上传表单: def new @bucket_name = params[:bucket_id] @prefix = params[:prefix] @bucket = OSS.client.get_bucket(@bucket_name) @options = { :prefix => @prefix, :redirect => 'http://localhost:3000/buckets/' }end 然后编辑app/views/objects/new.html.erb: <h2>Upload object</h2><%= upload_form(@bucket, @options) do %> <table class="table table-striped"> <tr> <td><label>Bucket:</label></td> <td><%= @bucket.name %></td> </tr> <tr> <td><label>Prefix:</label></td> <td><%= @prefix %></td> </tr> <tr> <td><label>Select file:</label></td> <td><input type="file" name="file" style="display:inline" /></td> </tr> <tr> <td colspan="2"> <input type="submit" class="btn btn-default" value="Upload" /> <span>&nbsp;&nbsp</span> <%= link_to 'Back', objects_path(@bucket_name, @prefix) %> </td> </tr> </table><% end %> 其中upload_form是SDK提供的一个方便用户生成上传表单的辅助函数,在SDK的代码rails/aliyun_oss_helper.rb中。用户需要将其拷贝到app/helpers/目录下。完成之后运行rails s,然后访问http://localhost:3000/buckets/my-bucket/objects/new就能够上传文件了。 最后记得保存代码: git add .git commit -m "add upload object feature"8. 添加样式为了让界面更好看一些,我们可以添加一点样式(CSS)。 首先下载bootstrap,解压后将bootstrap.min.css拷贝到app/assets/stylesheets/下。 然后在修改app/views/layouts/application.html.erb,将yield一行改成: <div id="main"> <%= yield %> </div> 这会为每个页面添加一个id为main的<div>,然后修改app/assets/stylesheets/application.css,加入以下内容: body { text-align: center;}div#main { text-align: left; width: 1024px; margin: 0 auto;} 这会让网页的主体内容居中显示。通过添加简单的样式,我们的页面是不是更加赏心悦目了呢? 至此,一个简单的demo就完成了。完整的demo代码请参看 Alibaba Cloud OSS Rails Demo。

2019-12-01 23:14:34 0 浏览量 回答数 0

回答

详细解答可以参考官方帮助文档与Rails集成在Rails应用中使用OSS Ruby SDK只需要在Gemfile中添加以下依赖: gem 'aliyun-sdk', '~> 0.3.0然后在使用OSS时引入依赖就可以了: require 'aliyun/oss'另外,SDK的rails/目录下提供一些方便用户使用的辅助代码。 下面我们将利用SDK来实现一个简单的OSS文件管理器(oss-manager),最终包含以下功能: 列出用户所有的Bucket列出Bucket下所有的文件,按目录层级列出上传文件下载文件 1. 创建项目先安装Rails,然后创建一个Rails应用,oss-manager: gem install railsrails new oss-manager作为一个好的习惯,使用git管理项目代码: cd oss-managergit initgit add .git commit -m "init project"2. 添加SDK依赖编辑oss-manager/Gemfile,向其中加入SDK的依赖: gem 'aliyun-sdk', '~> 0.3.0'然后在oss-manager/下执行: bundle install保存这一步所做的更改: git add .git commit -m "add aliyun-sdk dependency"3. 初始化OSS Client为了避免在项目中用到OSS Client的地方都要初始化,我们在项目中添加一个初始化文件,方便在项目中使用OSS Client: # oss-manager/config/initializers/aliyun_oss_init.rbrequire 'aliyun/oss'module OSS def self.client unless @client Aliyun::Common::Logging.set_log_file('./log/oss_sdk.log') @client = Aliyun::OSS::Client.new( endpoint: Rails.application.secrets.aliyun_oss['endpoint'], access_key_id: Rails.application.secrets.aliyun_oss['access_key_id'], access_key_secret: Rails.application.secrets.aliyun_oss['access_key_secret'] ) end @client endend 上面的代码在SDK的rails/目录下可以找到。这样初始化后,在项目中使用OSSClient就非常方便: buckets = OSS.client.list_buckets其中endpoint和AccessKeyId/AccessKeySecret保存在oss-manager/conf/secrets.yml中,例如: development: secret_key_base: xxxx aliyun_oss: endpoint: xxxx access_key_id: aaaa access_key_secret: bbbb 保存代码: git add .git commit -m "add aliyun-sdk initializer"4. 实现List buckets功能首先用rails生成管理Buckets的controller: rails g controller buckets index这样会在oss-manager中生成以下文件: app/controller/buckets_controller.rb Buckets相关的逻辑代码app/views/buckets/index.html.erb Buckets相关的展示代码app/helpers/buckets_helper.rb 一些辅助函数 首先编辑buckets_controller.rb,调用OSS Client,将list_buckets的结果存放在@buckets变量中: class BucketsController < ApplicationController def index @buckets = OSS.client.list_buckets endend 然后编辑views/buckets/index.html.erb,将Bucket列表展示出来: <h1>Buckets</h1><table class="table table-striped"> <tr> <th>Name</th> <th>Location</th> <th>CreationTime</th> </tr> <% @buckets.each do |bucket| %> <tr> <td><%= link_to bucket.name, bucket_objects_path(bucket.name) %></td> <td><%= bucket.location %></td> <td><%= bucket.creation_time.localtime.to_s %></td> </tr> <% end %></table> 其中bucket_objects_path是一个辅助函数,在app/helpers/buckets_helper.rb中: module BucketsHelper def bucket_objects_path(bucket_name) "/buckets/#{bucket_name}/objects" endend 这样就完成了列出所有Bucket的功能。在运行之前,我们还需要配置Rails的路由,使得我们在浏览器中输入的地址能够调用正确的逻辑。编辑config/routes.rb,增加一条: resources :buckets do resources :objectsend好了,在oss-manager/下输入rails s以启动rails server,然后在浏览器中输入http://localhost:3000/buckets/就能看到Bucket列表了。 最后保存一下代码: git add .git commit -m "add list buckets feature"5. 实现List objects功能首先生成一个管理Objects的controller: rails g controller objects index然后编辑app/controllers/objects_controller.rb: class ObjectsController < ApplicationController def index @bucket_name = params[:bucket_id] @prefix = params[:prefix] @bucket = OSS.client.get_bucket(@bucket_name) @objects = @bucket.list_objects(:prefix => @prefix, :delimiter => '/') endend 上面的代码首先从URL的参数中获取Bucket名字,为了只按目录层级显示,我们还需要一个前缀。然后调用OSS Client的list_objects接口获取文件列表。注意,这里获取的是指定前缀下,并且以’/‘为分界的文件。这样做是为也按目录层级列出文件。请参考管理文件 接下来编辑app/views/objects/index.html.erb: <h1>Objects in <%= @bucket_name %></h1><p> <%= link_to 'Upload file', new_object_path(@bucket_name, @prefix) %></p><table class="table table-striped"> <tr> <th>Key</th> <th>Type</th> <th>Size</th> <th>LastModified</th> </tr> <tr> <td><%= link_to '../', with_prefix(upper_dir(@prefix)) %></td> <td>Directory</td> <td>N/A</td> <td>N/A</td> </tr> <% @objects.each do |object| %> <tr> <% if object.is_a?(Aliyun::OSS::Object) %> <td><%= link_to remove_prefix(object.key, @prefix), @bucket.object_url(object.key) %></td> <td><%= object.type %></td> <td><%= number_to_human_size(object.size) %></td> <td><%= object.last_modified.localtime.to_s %></td> <% else %> <td><%= link_to remove_prefix(object, @prefix), with_prefix(object) %></td> <td>Directory</td> <td>N/A</td> <td>N/A</td> <% end %> </tr> <% end %></table> 上面的代码将文件按目录结构显示,主要逻辑是: 总是在第一个显示’../‘指向上级目录对于Common prefix,显示为目录对于Object,显示为文件 上面的代码中用到了with_prefix, remove_prefix等一些辅助函数,它们定义在app/helpers/objects_helper.rb中: module ObjectsHelper def with_prefix(prefix) "?prefix=#{prefix}" end def remove_prefix(key, prefix) key.sub(/^#{prefix}/, '') end def upper_dir(dir) dir.sub(/[^\/]+\/$/, '') if dir end def new_object_path(bucket_name, prefix = nil) "/buckets/#{bucket_name}/objects/new/#{with_prefix(prefix)}" end def objects_path(bucket_name, prefix = nil) "/buckets/#{bucket_name}/objects/#{with_prefix(prefix)}" endend 完成之后运行rails s,然后在浏览器中输入地址http://localhost:3000/buckets/my-bucket/objects/就可以查看文件列表了。 惯例保存代码: git add .git commit -m "add list objects feature"6. 下载文件注意到在上一步显示文件列表时,我们为每个文件也添加了一个链接: <td><%= link_to remove_prefix(object.key, @prefix), @bucket.object_url(object.key) %></td> 其中Bucket#object_url是一个为文件生成临时URL的方法,参考下载文件 7. 上传文件在Rails这种服务端应用中,用户上传文件有两种办法: 用户先将文件上传到Rails的服务器上,服务器再将文件上传到OSS。这样做需要Rails服务器作为中转,文件多拷贝了一遍,不是很高效。服务器为用户生成表单和临时凭证,用户直接上传文件到OSS。 第一种方法比较简单,与普通的上传文件一样。下面我们用的是第二种方法: 首先在app/controllers/objects_controller.rb中增加一个#new方法,用于生成上传表单: def new @bucket_name = params[:bucket_id] @prefix = params[:prefix] @bucket = OSS.client.get_bucket(@bucket_name) @options = { :prefix => @prefix, :redirect => 'http://localhost:3000/buckets/' }end 然后编辑app/views/objects/new.html.erb: <h2>Upload object</h2><%= upload_form(@bucket, @options) do %> <table class="table table-striped"> <tr> <td><label>Bucket:</label></td> <td><%= @bucket.name %></td> </tr> <tr> <td><label>Prefix:</label></td> <td><%= @prefix %></td> </tr> <tr> <td><label>Select file:</label></td> <td><input type="file" name="file" style="display:inline" /></td> </tr> <tr> <td colspan="2"> <input type="submit" class="btn btn-default" value="Upload" /> <span>&nbsp;&nbsp</span> <%= link_to 'Back', objects_path(@bucket_name, @prefix) %> </td> </tr> </table><% end %> 其中upload_form是SDK提供的一个方便用户生成上传表单的辅助函数,在SDK的代码rails/aliyun_oss_helper.rb中。用户需要将其拷贝到app/helpers/目录下。完成之后运行rails s,然后访问http://localhost:3000/buckets/my-bucket/objects/new就能够上传文件了。 最后记得保存代码: git add .git commit -m "add upload object feature"8. 添加样式为了让界面更好看一些,我们可以添加一点样式(CSS)。 首先下载bootstrap,解压后将bootstrap.min.css拷贝到app/assets/stylesheets/下。 然后在修改app/views/layouts/application.html.erb,将yield一行改成: <div id="main"> <%= yield %> </div> 这会为每个页面添加一个id为main的<div>,然后修改app/assets/stylesheets/application.css,加入以下内容: body { text-align: center;}div#main { text-align: left; width: 1024px; margin: 0 auto;} 这会让网页的主体内容居中显示。通过添加简单的样式,我们的页面是不是更加赏心悦目了呢? 至此,一个简单的demo就完成了。完整的demo代码请参看 Alibaba Cloud OSS Rails Demo。

2019-12-01 23:14:34 0 浏览量 回答数 0

回答

详细解答可以参考官方帮助文档与Rails集成在Rails应用中使用OSS Ruby SDK只需要在Gemfile中添加以下依赖: gem 'aliyun-sdk', '~> 0.3.0然后在使用OSS时引入依赖就可以了: require 'aliyun/oss'另外,SDK的rails/目录下提供一些方便用户使用的辅助代码。 下面我们将利用SDK来实现一个简单的OSS文件管理器(oss-manager),最终包含以下功能: 列出用户所有的Bucket列出Bucket下所有的文件,按目录层级列出上传文件下载文件 1. 创建项目先安装Rails,然后创建一个Rails应用,oss-manager: gem install railsrails new oss-manager作为一个好的习惯,使用git管理项目代码: cd oss-managergit initgit add .git commit -m "init project"2. 添加SDK依赖编辑oss-manager/Gemfile,向其中加入SDK的依赖: gem 'aliyun-sdk', '~> 0.3.0'然后在oss-manager/下执行: bundle install保存这一步所做的更改: git add .git commit -m "add aliyun-sdk dependency"3. 初始化OSS Client为了避免在项目中用到OSS Client的地方都要初始化,我们在项目中添加一个初始化文件,方便在项目中使用OSS Client: # oss-manager/config/initializers/aliyun_oss_init.rbrequire 'aliyun/oss'module OSS def self.client unless @client Aliyun::Common::Logging.set_log_file('./log/oss_sdk.log') @client = Aliyun::OSS::Client.new( endpoint: Rails.application.secrets.aliyun_oss['endpoint'], access_key_id: Rails.application.secrets.aliyun_oss['access_key_id'], access_key_secret: Rails.application.secrets.aliyun_oss['access_key_secret'] ) end @client endend 上面的代码在SDK的rails/目录下可以找到。这样初始化后,在项目中使用OSSClient就非常方便: buckets = OSS.client.list_buckets其中endpoint和AccessKeyId/AccessKeySecret保存在oss-manager/conf/secrets.yml中,例如: development: secret_key_base: xxxx aliyun_oss: endpoint: xxxx access_key_id: aaaa access_key_secret: bbbb 保存代码: git add .git commit -m "add aliyun-sdk initializer"4. 实现List buckets功能首先用rails生成管理Buckets的controller: rails g controller buckets index这样会在oss-manager中生成以下文件: app/controller/buckets_controller.rb Buckets相关的逻辑代码app/views/buckets/index.html.erb Buckets相关的展示代码app/helpers/buckets_helper.rb 一些辅助函数 首先编辑buckets_controller.rb,调用OSS Client,将list_buckets的结果存放在@buckets变量中: class BucketsController < ApplicationController def index @buckets = OSS.client.list_buckets endend 然后编辑views/buckets/index.html.erb,将Bucket列表展示出来: <h1>Buckets</h1><table class="table table-striped"> <tr> <th>Name</th> <th>Location</th> <th>CreationTime</th> </tr> <% @buckets.each do |bucket| %> <tr> <td><%= link_to bucket.name, bucket_objects_path(bucket.name) %></td> <td><%= bucket.location %></td> <td><%= bucket.creation_time.localtime.to_s %></td> </tr> <% end %></table> 其中bucket_objects_path是一个辅助函数,在app/helpers/buckets_helper.rb中: module BucketsHelper def bucket_objects_path(bucket_name) "/buckets/#{bucket_name}/objects" endend 这样就完成了列出所有Bucket的功能。在运行之前,我们还需要配置Rails的路由,使得我们在浏览器中输入的地址能够调用正确的逻辑。编辑config/routes.rb,增加一条: resources :buckets do resources :objectsend好了,在oss-manager/下输入rails s以启动rails server,然后在浏览器中输入http://localhost:3000/buckets/就能看到Bucket列表了。 最后保存一下代码: git add .git commit -m "add list buckets feature"5. 实现List objects功能首先生成一个管理Objects的controller: rails g controller objects index然后编辑app/controllers/objects_controller.rb: class ObjectsController < ApplicationController def index @bucket_name = params[:bucket_id] @prefix = params[:prefix] @bucket = OSS.client.get_bucket(@bucket_name) @objects = @bucket.list_objects(:prefix => @prefix, :delimiter => '/') endend 上面的代码首先从URL的参数中获取Bucket名字,为了只按目录层级显示,我们还需要一个前缀。然后调用OSS Client的list_objects接口获取文件列表。注意,这里获取的是指定前缀下,并且以’/‘为分界的文件。这样做是为也按目录层级列出文件。请参考管理文件 接下来编辑app/views/objects/index.html.erb: <h1>Objects in <%= @bucket_name %></h1><p> <%= link_to 'Upload file', new_object_path(@bucket_name, @prefix) %></p><table class="table table-striped"> <tr> <th>Key</th> <th>Type</th> <th>Size</th> <th>LastModified</th> </tr> <tr> <td><%= link_to '../', with_prefix(upper_dir(@prefix)) %></td> <td>Directory</td> <td>N/A</td> <td>N/A</td> </tr> <% @objects.each do |object| %> <tr> <% if object.is_a?(Aliyun::OSS::Object) %> <td><%= link_to remove_prefix(object.key, @prefix), @bucket.object_url(object.key) %></td> <td><%= object.type %></td> <td><%= number_to_human_size(object.size) %></td> <td><%= object.last_modified.localtime.to_s %></td> <% else %> <td><%= link_to remove_prefix(object, @prefix), with_prefix(object) %></td> <td>Directory</td> <td>N/A</td> <td>N/A</td> <% end %> </tr> <% end %></table> 上面的代码将文件按目录结构显示,主要逻辑是: 总是在第一个显示’../‘指向上级目录对于Common prefix,显示为目录对于Object,显示为文件 上面的代码中用到了with_prefix, remove_prefix等一些辅助函数,它们定义在app/helpers/objects_helper.rb中: module ObjectsHelper def with_prefix(prefix) "?prefix=#{prefix}" end def remove_prefix(key, prefix) key.sub(/^#{prefix}/, '') end def upper_dir(dir) dir.sub(/[^\/]+\/$/, '') if dir end def new_object_path(bucket_name, prefix = nil) "/buckets/#{bucket_name}/objects/new/#{with_prefix(prefix)}" end def objects_path(bucket_name, prefix = nil) "/buckets/#{bucket_name}/objects/#{with_prefix(prefix)}" endend 完成之后运行rails s,然后在浏览器中输入地址http://localhost:3000/buckets/my-bucket/objects/就可以查看文件列表了。 惯例保存代码: git add .git commit -m "add list objects feature"6. 下载文件注意到在上一步显示文件列表时,我们为每个文件也添加了一个链接: <td><%= link_to remove_prefix(object.key, @prefix), @bucket.object_url(object.key) %></td> 其中Bucket#object_url是一个为文件生成临时URL的方法,参考下载文件 7. 上传文件在Rails这种服务端应用中,用户上传文件有两种办法: 用户先将文件上传到Rails的服务器上,服务器再将文件上传到OSS。这样做需要Rails服务器作为中转,文件多拷贝了一遍,不是很高效。服务器为用户生成表单和临时凭证,用户直接上传文件到OSS。 第一种方法比较简单,与普通的上传文件一样。下面我们用的是第二种方法: 首先在app/controllers/objects_controller.rb中增加一个#new方法,用于生成上传表单: def new @bucket_name = params[:bucket_id] @prefix = params[:prefix] @bucket = OSS.client.get_bucket(@bucket_name) @options = { :prefix => @prefix, :redirect => 'http://localhost:3000/buckets/' }end 然后编辑app/views/objects/new.html.erb: <h2>Upload object</h2><%= upload_form(@bucket, @options) do %> <table class="table table-striped"> <tr> <td><label>Bucket:</label></td> <td><%= @bucket.name %></td> </tr> <tr> <td><label>Prefix:</label></td> <td><%= @prefix %></td> </tr> <tr> <td><label>Select file:</label></td> <td><input type="file" name="file" style="display:inline" /></td> </tr> <tr> <td colspan="2"> <input type="submit" class="btn btn-default" value="Upload" /> <span>&nbsp;&nbsp</span> <%= link_to 'Back', objects_path(@bucket_name, @prefix) %> </td> </tr> </table><% end %> 其中upload_form是SDK提供的一个方便用户生成上传表单的辅助函数,在SDK的代码rails/aliyun_oss_helper.rb中。用户需要将其拷贝到app/helpers/目录下。完成之后运行rails s,然后访问http://localhost:3000/buckets/my-bucket/objects/new就能够上传文件了。 最后记得保存代码: git add .git commit -m "add upload object feature"8. 添加样式为了让界面更好看一些,我们可以添加一点样式(CSS)。 首先下载bootstrap,解压后将bootstrap.min.css拷贝到app/assets/stylesheets/下。 然后在修改app/views/layouts/application.html.erb,将yield一行改成: <div id="main"> <%= yield %> </div> 这会为每个页面添加一个id为main的<div>,然后修改app/assets/stylesheets/application.css,加入以下内容: body { text-align: center;}div#main { text-align: left; width: 1024px; margin: 0 auto;} 这会让网页的主体内容居中显示。通过添加简单的样式,我们的页面是不是更加赏心悦目了呢? 至此,一个简单的demo就完成了。完整的demo代码请参看 Alibaba Cloud OSS Rails Demo。

2019-12-01 23:14:34 0 浏览量 回答数 0
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站