• 关于

    HTML表单的创建

    的搜索结果

问题

HTML的TextArea的Android版本是什么?

Android中的view元素是什么,其效果类似于HTML textarea输入小部件? 我想创建一个发送电子邮件的表单,对于body字段,我想在表单中创建textarea类型的UI...
LiuWH 2020-01-24 16:59:53 0 浏览量 回答数 1

问题

web前端动态加载大量元素的方式最好是怎么实现

有一个页面有一些动态加载的过程一个是动态加载一个表单,用户点击增加既可以增加一个表单;另一个是动态加载查询结果表格,用户点击查询后,接受后端返回的数据然后动态增加到前端表格现在的问题是,我知道可以用jQuery创建元素然后append进去,...
小旋风柴进 2019-12-01 19:28:59 964 浏览量 回答数 1

回答

详细解答可以参考官方帮助文档 PostObject使用HTML表单上传文件到指定bucket。 Post作为Put的替代品,使得基于浏览器上传文件到bucket成为可能。Post Object的消息实体通过多重表单格式(multipart/form-data)编码,在Put Object操作中参数通过HTTP请求头传递,在Post操作中参数则作为消息实体中的表单域传递。 Post object 请求语法 POST / HTTP/1.1 Host: BucketName.oss-cn-hangzhou.aliyuncs.com User-Agent: browser_data Content-Length:ContentLength Content-Type: multipart/form-data; boundary=9431149156168 --9431149156168 Content-Disposition: form-data; name="key" key --9431149156168 Content-Disposition: form-data; name="success_action_redirect" success_redirect --9431149156168 Content-Disposition: form-data; name="Content-Disposition" attachment;filename=oss_download.jpg --9431149156168 Content-Disposition: form-data; name="x-oss-meta-uuid" myuuid --9431149156168 Content-Disposition: form-data; name="x-oss-meta-tag" mytag --9431149156168 Content-Disposition: form-data; name="OSSAccessKeyId" access-key-id --9431149156168 Content-Disposition: form-data; name="policy" encoded_policy --9431149156168 Content-Disposition: form-data; name="Signature" signature --9431149156168 Content-Disposition: form-data; name="file"; filename="MyFilename.jpg" Content-Type: image/jpeg file_content --9431149156168 Content-Disposition: form-data; name="submit" Upload to OSS --9431149156168-- 表单域 名称 类型 描述 必须 OSSAccessKeyId 字符串 Bucket 拥有者的Access Key Id。 默认值:无 限制:当bucket非public-read-write或者提供了policy(或Signature)表单域时,必须提供该表单域。 有条件的 policy 字符串 policy规定了请求的表单域的合法性。不包含policy表单域的请求被认为是匿名请求,并且只能访问public-read-write的bucket。更详细描述请参考下文 Post Policy。 默认值:无 限制:当bucket非public-read-write或者提供了OSSAccessKeyId(或Signature)表单域时,必须提供该表单域。 有条件的 Signature 字符串 根据Access Key Secret和policy计算的签名信息,OSS验证该签名信息从而验证该Post请求的合法性。更详细描述请参考下文 Post Signature。 默认值:无 限制:当bucket非public-read-write或者提供了OSSAccessKeyId(或policy)表单域时,必须提供该表单域。 有条件的 Cache-Control, Content-Type, Content-Disposition, Content-Encoding, Expires 字符串 REST请求头,更多的信息见Put Object。 默认值:无 可选 file 字符串 文件或文本内容,必须是表单中的最后一个域。浏览器会自动根据文件类型来设置Content-Type,会覆盖用户的设置。 OSS一次只能上传一个文件。 默认值:无 必须 key 字符串 上传文件的object名称。 如果名称包含路径,如a/b/c/b.jpg, 则OSS会自动创建相应的文件夹。 默认值:无 必须 success_action_redirect 字符串 上传成功后客户端跳转到的URL,如果未指定该表单域,返回结果由success_action_status表单域指定。如果上传失败,OSS返回错误码,并不进行跳转。 默认值:无 可选 success_action_status 字符串 未指定success_action_redirect表单域时,该表单域指定了上传成功后返回给客户端的状态码。 接受值为200, 201, 204(默认)。 如果该域的值为200或者204,OSS返回一个空文档和相应的状态码。 如果该域的值设置为201,OSS返回一个XML文件和201状态码。 如果其值未设置或者设置成一个非法值,OSS返回一个空文档和204状态码。 默认值:无 x-oss-meta-* 字符串 用户指定的user meta值。 OSS不会检查或者使用该值。 默认值:无 可选 x-oss-server-side-encryption 字符串 指定OSS创建object时的服务器端加密编码算法。 合法值:AES256 可选 x-oss-object-acl 字符串 指定oss创建object时的访问权限。 合法值:public-read,private,public-read-write 可选 x-oss-security-token 字符串 若本次访问是使用STS临时授权方式,则需要指定该项为SecurityToken的值,同时OSSAccessKeyId需要使用与之配对的临时AccessKeyId,计算签名时,与使用普通AccessKeyId签名方式一致。 默认值:无 可选 响应Header 名称 类型 描述 x-oss-server-side-encryption 字符串 如果请求指定了x-oss-server-side-encryption熵编码,则响应Header中包含了该头部,指明了所使用的加密算法。 响应元素(Response Elements) 名称 类型 描述 PostResponse 容器 保持Post请求结果的容器。 子节点:Bucket, ETag, Key, Location Bucket 字符串 Bucket名称。 父节点:PostResponse ETag 字符串 ETag (entity tag) 在每个Object生成的时候被创建,Post请求创建的Object,ETag值是该Object内容的uuid,可以用于检查该Object内容是否发生变化。 父节点:PostResponse Location 字符串 新创建Object的URL。 父节点:PostResponse 细节分析 进行Post操作要求对bucket有写权限,如果bucket为public-read-write,可以不上传签名信息,否则要求对该操作进行签名验证。与Put操作不同,Post操作使用AccessKeySecret对policy进行签名计算出签名字符串作为Signature表单域的值,OSS会验证该值从而判断签名的合法性。 无论bucket是否为public-read-write,一旦上传OSSAccessKeyId, policy, Signature表单域中的任意一个,则另两个表单域为必选项,缺失时OSS会返回错误码:InvalidArgument。 post操作提交表单编码必须为“multipart/form-data”,即header中Content-Type为multipart/form-data;boundary=xxxxxx 这样的形式,boundary为边界字符串。 提交表单的URL为bucket域名即可,不需要在URL中指定object。即请求行是POST / HTTP/1.1,不能写成POST /ObjectName HTTP/1.1。 policy规定了该次Post请求中表单域的合法值,OSS会根据policy判断请求的合法性,如果不合法会返回错误码:AccessDenied。在检查policy合法性时,policy中不涉及的表单域不进行检查。 表单和policy必须使用UTF-8编码,policy为经过UTF-8编码和base64编码的JSON。 Post请求中可以包含额外的表单域,OSS会根据policy对这些表单域检查合法性。 如果用户上传了Content-MD5请求头,OSS会计算body的Content-MD5并检查一致性,如果不一致,将返回InvalidDigest错误码。 如果POST请求中包含Header签名信息或URL签名信息,OSS不会对它们做检查。 如果请求中携带以x-oss-meta-为前缀的表单域,则视为user meta,比如x-oss-meta-location。一个Object可以有多个类似的参数,但所有的user meta总大小不能超过8k。 Post请求的body总长度不允许超过5G。若文件长度过大,会返回错误码:EntityTooLarge。 如果上传指定了x-oss-server-side-encryption Header请求域,则必须设置其值为AES256,否则会返回400和错误码:InvalidEncryptionAlgorithmError。指定该Header后,在响应头中也会返回该Header,OSS会对上传的Object进行加密编码存储,当这个Object被下载时,响应头中会包含x-oss-server-side-encryption,值被设置成该Object的加密算法。 表单域为大小写不敏感的,但是表单域的值为大小写敏感的。 示例 请求示例:POST / HTTP/1.1 Host: oss-example.oss-cn-hangzhou.aliyuncs.com Content-Length: 344606 Content-Type: multipart/form-data; boundary=9431149156168 --9431149156168 Content-Disposition: form-data; name="key" /user/a/objectName.txt --9431149156168 Content-Disposition: form-data; name="success_action_status" 200 --9431149156168 Content-Disposition: form-data; name="Content-Disposition" content_disposition --9431149156168 Content-Disposition: form-data; name="x-oss-meta-uuid" uuid --9431149156168 Content-Disposition: form-data; name="x-oss-meta-tag" metadata --9431149156168 Content-Disposition: form-data; name="OSSAccessKeyId" 44CF9590006BF252F707 --9431149156168 Content-Disposition: form-data; name="policy" eyJleHBpcmF0aW9uIjoiMjAxMy0xMi0wMVQxMjowMDowMFoiLCJjb25kaXRpb25zIjpbWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsIDAsIDEwNDg1NzYwXSx7ImJ1Y2tldCI6ImFoYWhhIn0sIHsiQSI6ICJhIn0seyJrZXkiOiAiQUJDIn1dfQ== --9431149156168 Content-Disposition: form-data; name="Signature" kZoYNv66bsmc10+dcGKw5x2PRrk= --9431149156168 Content-Disposition: form-data; name="file"; filename="MyFilename.txt" Content-Type: text/plain abcdefg --9431149156168 Content-Disposition: form-data; name="submit" Upload to OSS --9431149156168-- 返回示例:HTTP/1.1 200 OK x-oss-request-id: 61d2042d-1b68-6708-5906-33d81921362e Date: Fri, 24 Feb 2014 06:03:28 GMT ETag: 5B3C1A2E053D763E1B002CC607C5A0FE Connection: keep-alive Content-Length: 0 Server: AliyunOSS Post Policy Post请求的policy表单域用于验证请求的合法性。 policy为一段经过UTF-8和base64编码的JSON文本,声明了Post请求必须满足的条件。虽然对于public-read-write的bucket上传时,post表单域为可选项,我们强烈建议使用该域来限制Post请求。 policy示例 { "expiration": "2014-12-01T12:00:00.000Z", "conditions": [ {"bucket": "johnsmith" }, ["starts-with", "$key", "user/eric/"] ] } Post policy中必须包含expiration和condtions。 Expiration Expiration项指定了policy的过期时间,以ISO8601 GMT时间表示。例如”2014-12-01T12:00:00.000Z”指定了Post请求必须发生在2014年12月1日12点之前。 Conditions Conditions是一个列表,可以用于指定Post请求的表单域的合法值。注意:表单域对应的值在检查policy之后进行扩展,因此,policy中设置的表单域的合法值应当对应于扩展之前的表单域的值。Policy中支持的conditions项见下表: 名称 描述 content-length-range 上传文件的最小和最大允许大小。 该condition支持contion-length-range匹配方式。 Cache-Control, Content-Type, Content-Disposition, Content-Encoding, Expires HTTP请求头。 该condition支持精确匹配和starts-with匹配方式。 key 上传文件的object名称。 该condition支持精确匹配和starts-with匹配方式。 success_action_redirect 上传成功后的跳转URL地址。 该condition支持精确匹配和starts-with匹配方式。 success_action_status 未指定success_action_redirect时,上传成功后的返回状态码。 该condition支持精确匹配和starts-with匹配方式。 x-oss-meta-* 用户指定的user meta。 该condition支持精确匹配和starts-with匹配方式。 如果Post请求中包含其他的表单域,可以将这些额外的表单域加入到policy的conditions中,conditions不涉及的表单域将不会进行合法性检查。 Conditions匹配方式 Conditions匹配方式 描述 精确匹配 表单域的值必须精确匹配conditions中声明的值。如指定key表单域的值必须为a: {“key”: “a”} 同样可以写为: [“eq”, “$key”, “a”] Starts With 表单域的值必须以指定值开始。例如指定key的值必须以/user/user1开始: [“starts-with”, “$key”, “/user/user1”] 指定文件大小 指定所允许上传的文件最大大小和最小大小,例如允许的文件大小为1到10字节: [“content-length-range”, 1, 10] 转义字符 于在 Post policy 中 $ 表示变量,所以如果要描述 $,需要使用转义字符\$。除此之外,JSON 将对一些字符进行转义。下图描述了 Post policy 的 JSON 中需要进行转义的字符。 转义字符 描述 \/ 斜杠 \ 反斜杠 \” 双引号 \$ 美元符 \b 空格 \f 换页 \n 换行 \r 回车 \t 水平制表符 \uxxxx Unicode 字符 Post Signature 对于验证的Post请求,HTML表单中必须包含policy和Signature信息。policy控制请求中那些值是允许的。计算Signature的具体流程为: 创建一个 UTF-8 编码的 policy。 将 policy 进行 base64 编码,其值即为 policy 表单域该填入的值,将该值作为将要签名的字符串。 使用 AccessKeySecret 对要签名的字符串进行签名,签名方法与Head中签名的计算方法相同(将要签名的字符串替换为 policy 即可),请参见在Header中包含签名。 示例 Demo Web 端表单直传 OSS 示例 Demo,请参见JavaScript客户端签名直传。
2019-12-01 23:13:50 0 浏览量 回答数 0

万券齐发助力企业上云,爆款产品低至2.2折起!

限量神券最高减1000,抢完即止!云服务器ECS新用户首购低至0.95折!

问题

关于Object操作之如何实现PostObject?

Post Object Post Object使用HTML表单上传文件到指定bucket。Post作为Put的替代品,使得基于浏览器上传文件到bucket成为可能。Post Object的消息实体通过多重表单格式ÿ...
青衫无名 2019-12-01 21:50:18 2821 浏览量 回答数 0

问题

接入图片服务之如何实现快速开始?

基于控制台快速开始: 登录OSS控制台,开通OSS。创建一个Bucket。上传和下载图片。 具体见 控制台快速开始文档。 快速了解图片的上传下载 开始使用SDK之前,请先参考开发人员指南...
青衫无名 2019-12-01 21:57:20 1142 浏览量 回答数 0

问题

XForms – 新的 Web 表单标准:报错

XForms 肯定是下一代的基于 Web 的数据处理技术规范,XForms 可替换传统的 HTML 表单,使用 XML 数据模型和呈现元素。 在某些情况下,XForms 就等同于 HTML 表单&...
kun坤 2020-06-07 13:33:13 0 浏览量 回答数 1

回答

如果您的html表单的输入字段带有空方括号,则它们将被转换为控制器中params内的数组。 Eg multiple input fields all with the same name: <input type="textbox" name="course[track_codes][]" ...> will become the Array params["course"]["track_codes"] with an element for each of the input fields with the same name 添加: 需要注意的是导轨佣工都没有设置做阵列伎俩自动神奇。因此,您可能必须手动创建名称属性。同样,如果使用rails助手,则复选框也有其自身的问题,因为复选框助手会创建其他隐藏字段来处理未选中的情况。
保持可爱mmm 2020-02-14 11:55:32 0 浏览量 回答数 0

问题

SpringMVC中关于ModelAttribute的问题

方法头部是这样的:@RequestMapping(params="id", method = RequestMethod.PUT, produces = "text/html")public String update( @Valid Ba...
a123456678 2019-12-01 20:20:39 891 浏览量 回答数 1

问题

jquery获取动态添加的表单元素

有一个页面,在页面载入的时候,使用ajax动态创建一个input元素,如下 success: function(file, response){ response = JSON.parse(response); im...
小旋风柴进 2019-12-01 19:31:28 1315 浏览量 回答数 2

问题

PHP MySQL Insert Into

INSERT INTO 语句用于向数据库表中插入新记录。 向数据库表插入数据 INSERT INTO 语句用于向数据库表添加新记录。 语法 INSERT INTO table_nameVALUES (value1, v...
ethnicity 2019-12-01 22:08:29 7684 浏览量 回答数 0

问题

Linux网页管理工具webmin的使用教程

图片挂了,大家去这里学习webmin的使用教程吧: http://www.zhztk.com/a/xitongjiagou/Linuxxitong/2011/0217/637.html Linux系统因其...
rcshi 2019-12-01 20:04:41 14695 浏览量 回答数 4

回答

Re读写权限设置 引用第1楼deadbeef于2016-10-31 10:56发表的  : 参考一下下面的文档:    https://promotion.aliyun.com/ntms/act/ossdoclist.html 里"直传"部分。 简单来说就是客户端先从服务器获取上传的临时凭证(可以是表单上传的表单,或是STS临时凭证)。 ....... [url=https://bbs.aliyun.com/job.php?action=topost&tid=298262&pid=841958][/url] 直传JS签名测试的时候accessid,accesskey 是通过令牌工具生成的 ,不能上传,报错You have no right to access this object because of bucket acl 是哪里的问题 ------------------------- 回 5楼(deadbeef) 的帖子 是官方的JS SDK,用令牌工具生成的策略就不行,自己创建的就可以,真是奇怪 ------------------------- 回 5楼(deadbeef) 的帖子 另外一个问题,官方的JS SDK Web直传,在手机上选择文件的时候,若文件路径有中文就不能选文件
ceadelta 2019-12-02 02:28:50 0 浏览量 回答数 0

问题

如何实现PostObject错误及排查?

PostObject简介 PostObject使用表单上传文件到OSS。PostObject的消息实体通过 [backcolor=transparent]多重表单格式multipart/form-data 编码,详...
青衫无名 2019-12-01 22:00:48 2503 浏览量 回答数 0

回答

前端Web开发人员 - 这项工作的重点是HTML,CSS,JavaScript和后端。 Web应用程序开发人员 - 使用Javascript创建基于Web的软件应用程序,包括交互式在线表单,购物车,文字处理,电子邮件软件和文件转换。 Javascript开发人员 - 为各种平台设计和开发新的前端应用程序。 UX / UI设计器 - 根据用户或客户设计产品功能。并找到解决用户体验问题的创新方法,并与UI设计师合作执行有吸引力的设计。 全栈开发人员 - 设计Web应用程序的体系结构。 DevOps工程师 - 这项工作是IT和开发人员之间的链接,如测试服务器,部署,版本控制,构建过程和服务器软件。
问问小秘 2019-12-02 02:11:42 0 浏览量 回答数 0

问题

如何在ModelForm中删除此错误消息?

我正在尝试创建一种方法来更新具有CharField和ForeignKey字段的数据库项。我想传递原始值,这样就不必每次都为每个字段手动输入它们,但这给了我一个“选择一个有效的选择。这个选择不是可用的选择之一。” 对该group领域的警告。如...
一码平川MACHEL 2019-12-01 19:31:48 462 浏览量 回答数 1

回答

  创建add.jsp[code]<%@ page language="java" contentType="text/html; charset=gb2312";pageEncoding="gb2312"%><%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %><%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %><%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>新增页面</title></head>  <body>    <html:form action="/cc.do">      业务编号:<html:text property="uuid"></html:text><br>      用户编号:<html:text property="userId"></html:text><br>      用户姓名:<html:text property="name"></html:text><br>      用户年龄:<html:text property="age"></html:text><br>      <html:submit value="提交"></html:submit>    </html:form>  </body></html>[/code]   说明:     * 添加一个表单,action为cc.do,这个cc.do的意思,将会告诉struts的ActionServlet,它将需要调用哪个Action来处理这个表单的请求     * 添加输入域name,这个name的表单字段,必须跟UserActionForm中的属性一致   运行流程:     * 当你从浏览器输入地址:http://localhost:8088/web/pages/add.jsp,Tomcat将按通常情况来处理这个JSP并返回浏览器     * 当你提交表单,实际上是提交到了这样一个URL地址:http://localhost:8088/web/cc.do,Tomcat将会根据web.xml的配置,将这个请求发送给相应的Servlet,在我们的应用中,Tomcat将会把这个请求发送给org.apache.struts.action.ActionServlet这个类(请参看web.xml的配置)     * 然后ActionServlet根据struts-config.xml的配置信息,调用UserAction对象去处理这个请求,在此之前,它会将页面表单的请求数据封装到UserForm对象中,并传递给LoginAction      * UserAction返回一个ActionForward对象,包含了将要转向的路径信息     * ActionServlet根据这个ActionForward对象所包含的路径信息,调用相应的页面去执行响应 Struts1和Struts2的区别和对比:   * Action 类:        ·Struts1要求Action类继承一个抽象基类。Struts1的一个普遍问题是使用抽象类编程而不是接口。       ·Struts 2 Action类可以实现一个Action接口,也可实现其他接口,使可选和定制的服务成为可能。Struts2提供一个ActionSupport基类去 实现 常用的接口。Action接口不是必须的,任何有execute标识的POJO对象都可以用作Struts2的Action对象。   * 线程模式:       ·Struts1 Action是单例模式并且必须是线程安全的,因为仅有Action的一个实例来处理所有的请求。单例策略限制了Struts1 Action能作的事,并且要在开发时特别小心。Action资源必须是线程安全的或同步的。       ·Struts2 Action对象为每一个请求产生一个实例,因此没有线程安全问题。(实际上,servlet容器给每个请求产生许多可丢弃的对象,并且不会导致性能和垃圾回收问题)   * Servlet 依赖:        ·Struts1 Action 依赖于Servlet API ,因为当一个Action被调用时HttpServletRequest 和 HttpServletResponse 被传递给execute方法。       ·Struts 2 Action不依赖于容器,允许Action脱离容器单独被测试。如果需要,Struts2 Action仍然可以访问初始的request和response。但是,其他的元素减少或者消除了直接访问HttpServetRequest 和 HttpServletResponse的必要性。   * 可测性:        ·测试Struts1 Action的一个主要问题是execute方法暴露了servlet API(这使得测试要依赖于容器)。一个第三方扩展--Struts TestCase--提供了一套Struts1的模拟对象(来进行测试)。        ·Struts 2 Action可以通过初始化、设置属性、调用方法来测试,“依赖注入”支持也使测试更容易。    * 捕获输入:        ·Struts1 使用ActionForm对象捕获输入。所有的ActionForm必须继承一个基类。因为其他JavaBean不能用作ActionForm,开发者经 常创建多余的类捕获输入。动态Bean(DynaBeans)可以作为创建传统ActionForm的选择,但是,开发者可能是在重新描述(创建)已经存 在的JavaBean(仍然会导致有冗余的javabean)。       ·Struts 2直接使用Action属性作为输入属性,消除了对第二个输入对象的需求。输入属性可能是有自己(子)属性的rich对象类型。Action属性能够通过 web页面上的taglibs访问。Struts2也支持ActionForm模式。rich对象类型,包括业务对象,能够用作输入/输出对象。这种 ModelDriven 特性简化了taglib对POJO输入对象的引用。   * 表达式语言:        ·Struts1 整合了JSTL,因此使用JSTL EL。这种EL有基本对象图遍历,但是对集合和索引属性的支持很弱。        ·Struts2可以使用JSTL,但是也支持一个更强大和灵活的表达式语言--"Object Graph Notation Language" (OGNL).    * 绑定值到页面(view):        ·Struts 1使用标准JSP机制把对象绑定到页面中来访问。       ·Struts 2 使用 "ValueStack"技术,使taglib能够访问值而不需要把你的页面(view)和对象绑定起来。ValueStack策略允许通过一系列名称相同但类型不同的属性重用页面(view)。   * 类型转换:       ·Struts 1 ActionForm 属性通常都是String类型。Struts1使用Commons-Beanutils进行类型转换。每个类一个转换器,对每一个实例来说是不可配置的。       ·Struts2 使用OGNL进行类型转换。提供基本和常用对象的转换器。   * 校验:        ·Struts 1支持在ActionForm的validate方法中手动校验,或者通过Commons Validator的扩展来校验。同一个类可以有不同的校验内容,但不能校验子对象。       ·Struts2支持通过validate方法和XWork校验框架来进行校验。XWork校验框架使用为属性类类型定义的校验和内容校验,来支持chain校验子属性   * Action执行的控制:       ·Struts1支持每一个模块有单独的Request Processors(生命周期),但是模块中的所有Action必须共享相同的生命周期。       ·Struts2支持通过拦截器堆栈(Interceptor Stacks)为每一个Action创建不同的生命周期。堆栈能够根据需要和不同的Action一起使用。   * MyEclipse支持struts1,不支持struts2.
kun坤 2020-06-08 11:16:01 0 浏览量 回答数 0

问题

【精品问答】前端实战100例之JavaScript篇

前端实战100例之JavaScript篇 前端JavaScript部分入门的例题为大家总结了100个,每个例题都附有代码解析,方便入门学习或做基础巩固。 1.用JavaScript输出文本 2.用JavaS...
珍宝珠 2020-02-14 15:10:56 1456 浏览量 回答数 1

回答

您可以使用webapp2将文件上传到blobstore。调度到您的上传表单时,您首先必须创建上传网址: self.render('upload-ui.html', { ... 'form_url': blobstore.create_upload_url('/upload_form'), }) 然后在上传表单中使用 form_url <form method="post" action="{{ form_url }}" name="formular" class="ui form" accept-charset="UTF-8" enctype="multipart/form-data"> 可以从self.get_uploads代码的post方法中获取上载的文件: for upload in self.get_uploads(): try: content_type = blobstore.blobstore.BlobInfo(upload.key()).content_type if 'video' in content_type: vid = Video(reference=user) vid.content = upload.key() vid.title = blobstore.blobstore.BlobInfo(upload.key()).filename vid.size = blobstore.blobstore.BlobInfo(upload.key()).size vid.put() except Exception, e: logging.error('There was an exception:%s' % str(e.message)) pass
祖安文状元 2020-02-22 15:52:07 0 浏览量 回答数 0

回答

$ 我们经常使用向 $ 内传入一个字符串的方式来选择或生成 DOM 元素,但如果这个字符串是来自用户输入的话,那么这种方式就是有风险的。 先看一个 DEMO: http://jsbin.com/duwuzonife/1/edit?html,js,output $("<img src='' onerror='alert();'>"); 当用户输入的字符串是像这样的时,虽然这个 <img> 元素不会马上被插入到网页的 DOM 中,但这个 DOM 元素已经被创建了,并且暂存在内存里。而对于 <img> 元素,只要设置了它的 src 属性,浏览器就会马上请求 src 属性所指向的资源。我们也可以利用这个特性做图片的预加载。在上面的示例代码中,创建元素的同时,也设置了它的属性,包括 src 属性和 onerror 事件监听器,所以浏览器会马上请求图片资源,显然请求不到,随机触发 onerror 的回调函数,也就执行了 JavaScript 代码。 推荐阅读 $ 的官方文档: http://api.jquery.com/jQuery/ 类似的其他方法 .after() .append() .appendTo() .before() .html() .insertAfter() .insertBefore() .prepend() .prependTo() .replaceAll() .replaceWith() .unwrap() .wrap() .wrapAll() .wrapInner() .prepend() 以上这些方法不仅创建 DOM 元素,并且会马上插入到页面的 DOM 树中。如果使用 <script> 标签插入了内联 JS 会立即执行。 不安全的输入来源 document.URL * document.location.pathname * document.location.href * document.location.search * document.location.hash document.referrer * window.name document.cookie document 的大多数属性都可以通过全局的 window 对象访问到。加 * 的属性返回的时编码 (urlencode) 后的字符串,需要解码才可能造成威胁。 不安全的操作 把可以被用户编辑的字符串,用在以下场景中,都是有隐患的。总体来说,任何把字符串作为可执行的代码的操作,都是不安全的。 1.通过字符串创建函数 (1)eval (2)new Function (3)setTimeout/setInterval 2.跳转页面 location.replace/location.assign 修改 <script> 标签的 src 属性 修改事件监听器 总结 如果发生在用 jQuery 时被 DOM-XSS 攻击的情况,大多是因为忽视了两个东西: 1. 在给$传参数时,对参数来源的把控。 2. 用户的输入途径不只有表单,还有地址栏,还可以通过开发者工具直接修改 DOM ,或者直接在控制台执行 JS 代码。 答案来源网络,供参考,希望对您有帮助
问问小秘 2019-12-02 03:05:01 0 浏览量 回答数 0

问题

设置跨域资源共享CORS并使用JS表单PostObject直接上传到OSS

CORS是什么?其实OSS一直官方文档也没有说清楚。PostObject怎么用官方也一直没有代码示例。 发现有两篇文章解释了下: 一篇是英文的,来自于: http://www.nc...
wood23 2019-12-01 21:36:11 35602 浏览量 回答数 5

回答

简介: 导包 commons-fileupload-1.3.1.jar commons-io-2.2.jar import java.io.File; import java.io.FileOutputStream; import java. 导包 commons-fileupload-1.3.1.jar commons-io-2.2.jar import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.FileUploadException; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; public class UploadHandleServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String savePath=this.getServletContext().getRealPath("/WEB-INF/upload/"); File file=new File(savePath); if(!file.exists()&&!file.isDirectory()){ System.out.println(savePath+"目录不存在,需要创建"); //创建目录 file.mkdirs(); } //消息提示 String message=""; //创建DiskFileItemFactory工厂 DiskFileItemFactory factory=new DiskFileItemFactory(); //创建一个文件上传解析器 ServletFileUpload upload=new ServletFileUpload(factory); //解决文件上传乱码问题 upload.setHeaderEncoding("UTF-8"); if(!ServletFileUpload.isMultipartContent(request)){ //按照传统方面获取数据 return; } try { //使用ServletFileUpload解析器解析数据,返回来的是一个List<FileItem>集合,每一个FileItem对应一个表单输出 List<FileItem> list=upload.parseRequest(request); for (FileItem item : list) { if(item.isFormField()){ String name=item.getFieldName(); String value=item.getString("UTF-8"); System.out.println(name+"="+value); }else{ String filename=item.getName(); System.out.println(filename); if(filename==null||filename.trim().equals("")){ continue; } //处理获取到的上传文件的文件名的路径部分,只保留文件名部分 filename=filename.substring(filename.lastIndexOf("\\")+1); //获取item文件上传输入流 InputStream in=item.getInputStream(); //创建一个文件输出流 FileOutputStream out=new FileOutputStream(savePath+"\\"+filename); byte[] buffer=new byte[1024]; int len=0; while((len=in.read(buffer))>0){ out.write(buffer,0,len); } in.close(); out.close(); item.delete(); message="文件上传成功"; } } } catch (FileUploadException e) { // TODO Auto-generated catch block e.printStackTrace(); } request.setAttribute("message", message); request.getRequestDispatcher("/message.jsp").forward(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }                                             jsp页面      <%@ page language="java" pageEncoding="UTF-8"%> 上传用户: 上传文件1:   <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> ${message}
游客2q7uranxketok 2021-02-24 11:15:56 0 浏览量 回答数 0

回答

假设我们将使用公共资源多部分解析器,它使用 Apache 公共资源上载库以窗体处理文件上载。因此,您需要添加公域文件上载.jar和commons-io.jar依赖项。 commons-fileupload commons-fileupload 1.2.2 commons-io commons-io 1.3.2 需要在应用程序上下文文件中进行以下声明,以启用多部分解析器(以及在应用程序中包括必要的 jar 文件): 现在创建模型类FileUploadForm,该模型将保存从 HTML 表单提交的多部分数据。 import org.springframework.web.multipart.MultipartFile; public class FileUploadForm { private MultipartFile file; public MultipartFile getFile() { return file; } public void setFile(MultipartFile file) { this.file = file; } } 现在创建实际处理上载逻辑的类。FileUploadController import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.multipart.MultipartFile; import com.howtodoinjava.form.FileUploadForm; @Controller public class FileUploadController { @RequestMapping(value = "/upload", method = RequestMethod.POST) public String save(@ModelAttribute("uploadForm") FileUploadForm uploadForm, Model map) { MultipartFile multipartFile = uploadForm.getFile(); String fileName = "default.txt"; if (multipartFile != null) { fileName = multipartFile.getOriginalFilename(); } //read and store the file as you like map.addAttribute("files", fileName); return "file_upload_success"; } } 上传的 JSP 文件如下所示: <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> Spring MVC file upload example <form:form method="post" action="save.html" modelAttribute="uploadForm" enctype="multipart/form-data"> Please select a file to upload : <form:errors path="file" cssClass="error" /> </form:form>
YDYK 2020-04-25 21:34:46 0 浏览量 回答数 0

问题

flask+python如何获取input标签的用户输入

新手自学 Python + flask 在做自己的博客。如下图,在做一个用户的档案编辑页面,利用 ajax 来删除和创建 标签和 标签(后来发现 display 隐藏显示更加简单,但写了就算了)。第一图为默认状态,第二图为点击编辑后出现...
杨冬芳 2019-12-01 20:09:50 1425 浏览量 回答数 1

回答

“企业报销流程”实践案例 需求说明 报销是一个企业的典型场景,本案例着重讲述一个典型的财务报销流程的搭建, 已介绍宜搭流程相关的核心功能。报销由员工发起申请,填写报销项以及对应的详情 信息,发起审批流程。审批流程计划设置为:当前提交人主管,审批人所在部门对应 的财务接口人,财务总监(如果金额大于 10000 元,则需要加入该角色)。 搭建说明 接下来,我们来搭建这个场景。首先,我们先创建一个应用。访问:https:// www.aliwork.com/myApp.html,点击左上角的创建应用按钮,新建一个应用,我 们命名为“报销流程功能演示”。 进入应用的管理页面,我们点击“新建流程页面”,创建一个新的流程,命名为 “报销流程”。 表单搭建 我们页面上拖入多行输入框组件,修改标题为“报销说明”,用来记录报销的描 述信息。拖入明细组件,修改标题为“报销明细”。向明细组件中拖入下拉选择、日 期、数字、多行输入框,上传附件组件,依次修改名称为“报销类型”、“费用发生时 间”、“金额”、“详细说明”、“附件”,并将明细组件右侧对应属性的排列方式改为表 格方式,设计器中得到的效果。 我们点击“报销类型”组件,将右侧的选项设置为差旅、培训、办公、招待、会 议、探亲这六个选项。 随后,我们在页面底部拖入一个数字组件,修改标题为“报销总额”。点击该数 字组件,将右侧的默认状态改为只读,默认值选择为“公式编辑”,点击编辑公式按 钮配置公式如下: 我们将“报销类型”、“费用发生时间”、“金额”、“报销总额”这三个组件,右侧 的必填勾选上。 流程搭建 接下来,我们重点来配置一下该页面对应的流程。关闭页面设计器,点击流程的 标签页。 目前展示的是系统预置的审批流程,默认为企业管理员进行审批,而我们期望的 流程为:当前提交人主管,审批人所在部门对应的财务接口人,财务总监(如果金额 大于 10000 元,则需要加入该角色)。在配置之前,我们需要新建接口人“财务接口 人”以及角色“财务总监”。 访问 https://www.aliwork.com/resourceManager.html#/liaison,我们新增接 口人“财务接口人”,随后添加部门以及其对应的财务接口人。本示例中,我们添加 了宜搭体验和设计部两个部门,并且制定了对应的接口人,此外我们还添加了宜搭平 台总接口人,接口人规则遵循最精确匹配的原则,当宜搭体验部门的人进行提交后, 将选择对应接口人小剑,而当非宜搭体验和设计部两个部门的人员进行提交后,会选 择总接口人小弘。 我们新增角色,角色名称为“财务总监”,角色成员选择对应的财务总监人员, 点击确定。 接下来开始进行配置,点击“添加审批节点”按钮,我们删除默认的企业管理 员,在角色的标签页中选择主管,我们在接口人的标签页中搜索添加刚刚创建的财务 接口人。 而后在环节的标签页中,新加入一个环节,点击保存。 点击环节,我们进入了环节的编辑页面。点击审批条件的设置按钮,勾选“报销 总额”,设置条件为 10000,点击确定。 环节内部出现了两个分支,我们在第二个分支上,添加“财务总监” 这个角色。点击左上角的铅笔编辑名称为财务终审,而后点击左边的箭头返回。 而后打开第三个节点的设置页面,将审批人为空勾成允许并保存。 最后在优化一下审批节点的名称,修改为“直接主管”、“财务初审”、“财务终审”。 至此,一个报销的审批流程便配置完成了。点击右上角的保存并发布即可。
1358896759097293 2021-03-10 20:22:02 0 浏览量 回答数 0

问题

ASP无组件上传的原理上传图片,视频,工具包等

无组件上传一直是困扰大家的一个问题。其实原理非常简单,核心就是分析字符串。不过,实际操作时,却困难重重。其中的关键问题还是大家往往对原理的剖析不够深入,或是因为过程过于繁琐。   客...
服务器插件 2019-12-01 21:51:20 5405 浏览量 回答数 1

问题

前端小白入门JQuery基础 【新手百问合集】

关于jquery基础教程中关于内部函数问https://yq.aliyun.com/ask/20218jquery这段代码如何只用一个Css函数来写?https://yq.aliyun.com/ask/34385jquery怎么多值运算 ...
马铭芳 2019-12-01 20:09:05 6738 浏览量 回答数 5

问题

前端小白入门JQuery基础【新手百问合集】

快来看看小编为大家整理出来的一些关于JQuery基础问答,看看是否能帮到你呢?关于jquery基础教程中关于内部函数问题https://yq.aliyun.com/ask/20218jquery这段代码如何只用一个Css函数来写?https...
游客886 2019-12-01 20:09:03 1237 浏览量 回答数 1

问题

Java web网站含图片的表单上传问题

一个jsp网站,jsp页面表单同时含有普通字段,和图片,上传的时候不能用一个servlet处理,后来想想,图片是以二进制流传到servlet然后接收处理的吧,而文字的普通字段应该不是这种方式,那么用servlet一个函数接收处理时的问题是不...
蛮大人123 2019-12-01 20:00:59 1572 浏览量 回答数 3

回答

打开cmd ,输入 curl --help,显示入下,就代表成功了。 常用curl命令: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 -a/--append 上传文件时,附加到目标文件 -A/--user-agent 设置用户代理发送给服务器 - anyauth 可以使用“任何”身份验证方法 -b/--cookie <name=string/file> cookie字符串或文件读取位置 - basic 使用HTTP基本验证 -B/--use-ascii 使用ASCII /文本传输 -c/--cookie-jar 操作结束后把cookie写入到这个文件中 -C/--continue-at 断点续转 -d/--data HTTP POST方式传送数据 --data-ascii 以ascii的方式post数据 --data-binary 以二进制的方式post数据 --negotiate 使用HTTP身份验证 --digest 使用数字身份验证 --disable-eprt 禁止使用EPRT或LPRT --disable-epsv 禁止使用EPSV -D/--dump-header 把header信息写入到该文件中 --egd-file 为随机数据(SSL)设置EGD socket路径 --tcp-nodelay 使用TCP_NODELAY选项 -e/--referer 来源网址 -E/--cert <cert[:passwd]> 客户端证书文件和密码 (SSL) --cert-type 证书文件类型 (DER/PEM/ENG) (SSL) --key 私钥文件名 (SSL) --key-type 私钥文件类型 (DER/PEM/ENG) (SSL) --pass 私钥密码 (SSL) --engine 加密引擎使用 (SSL). "--engine list" for list --cacert CA证书 (SSL) --capath CA目录 (made using c_rehash) to verify peer against (SSL) --ciphers SSL密码 --compressed 要求返回是压缩的形势 (using deflate or gzip) --connect-timeout 设置最大请求时间 --create-dirs 建立本地目录的目录层次结构 --crlf 上传是把LF转变成CRLF -f/--fail 连接失败时不显示http错误 --ftp-create-dirs 如果远程目录不存在,创建远程目录 --ftp-method [multicwd/nocwd/singlecwd] 控制CWD的使用 --ftp-pasv 使用 PASV/EPSV 代替端口 --ftp-skip-pasv-ip 使用PASV的时候,忽略该IP地址 --ftp-ssl 尝试用 SSL/TLS 来进行ftp数据传输 --ftp-ssl-reqd 要求用 SSL/TLS 来进行ftp数据传输 -F/--form <name=content> 模拟http表单提交数据 -form-string <name=string> 模拟http表单提交数据 -g/--globoff 禁用网址序列和范围使用{}和[] -G/--get 以get的方式来发送数据 -h/--help 帮助 -H/--header 自定义头信息传递给服务器 --ignore-content-length 忽略的HTTP头信息的长度 -i/--include 输出时包括protocol头信息 -I/--head 只显示文档信息 从文件中读取-j/--junk-session-cookies忽略会话Cookie - 界面 指定网络接口/地址使用 - krb4 <级别>启用与指定的安全级别krb4 -j/--junk-session-cookies 读取文件进忽略session cookie --interface 使用指定网络接口/地址 --krb4 使用指定安全级别的krb4 -k/--insecure 允许不使用证书到SSL站点 -K/--config 指定的配置文件读取 -l/--list-only 列出ftp目录下的文件名称 --limit-rate 设置传输速度 --local-port 强制使用本地端口号 -m/--max-time 设置最大传输时间 --max-redirs 设置最大读取的目录数 --max-filesize 设置最大下载的文件总量 -M/--manual 显示全手动 -n/--netrc 从netrc文件中读取用户名和密码 --netrc-optional 使用 .netrc 或者 URL来覆盖-n --ntlm 使用 HTTP NTLM 身份验证 -N/--no-buffer 禁用缓冲输出 -o/--output 把输出写到该文件中 -O/--remote-name 把输出写到该文件中,保留远程文件的文件名 -p/--proxytunnel 使用HTTP代理 --proxy-anyauth 选择任一代理身份验证方法 --proxy-basic 在代理上使用基本身份验证 --proxy-digest 在代理上使用数字身份验证 --proxy-ntlm 在代理上使用ntlm身份验证 -P/--ftp-port 使用端口地址,而不是使用PASV -Q/--quote 文件传输前,发送命令到服务器 -r/--range 检索来自HTTP/1.1或FTP服务器字节范围 --range-file 读取(SSL)的随机文件 -R/--remote-time 在本地生成文件时,保留远程文件时间 --retry 传输出现问题时,重试的次数 --retry-delay 传输出现问题时,设置重试间隔时间 --retry-max-time 传输出现问题时,设置最大重试时间 -s/--silent静音模式。不输出任何东西 -S/--show-error 显示错误 --socks4 <host[:port]> 用socks4代理给定主机和端口 --socks5 <host[:port]> 用socks5代理给定主机和端口 --stderr -t/--telnet-option <OPT=val> Telnet选项设置 --trace 对指定文件进行debug --trace-ascii Like --跟踪但没有hex输出 --trace-time 跟踪/详细输出时,添加时间戳 -T/--upload-file 上传文件 --url Spet URL to work with -u/--user <user[:password]>设置服务器的用户和密码 -U/--proxy-user <user[:password]>设置代理用户名和密码 -v/--verbose -V/--version 显示版本信息 -w/--write-out [format]什么输出完成后 -x/--proxy <host[:port]>在给定的端口上使用HTTP代理 -X/--request 指定什么命令 -y/--speed-time 放弃限速所要的时间。默认为30 -Y/--speed-limit 停止传输速度的限制,速度时间'秒 -z/--time-cond 传送时间设置 -0/--http1.0 使用HTTP 1.0 -1/--tlsv1 使用TLSv1(SSL) -2/--sslv2 使用SSLv2的(SSL) -3/--sslv3 使用的SSLv3(SSL) --3p-quote like -Q for the source URL for 3rd party transfer --3p-url 使用url,进行第三方传送 --3p-user 使用用户名和密码,进行第三方传送 -4/--ipv4 使用IP4 -6/--ipv6 使用IP6 -#/--progress-bar 用进度条显示当前的传送状态    例子: 1 curl http://item.taobao.com/item.html?id=1264 获得页面的HTML数据,如图所示。 1 curl http://item.taobao.com/item.html?id=1264 -i    除了获取页面HTML数据外,还可以查看这次访问的HTTP头的信息,如图所示。 1 curl http://item.taobao.com/item.html?id=1264 -I 仅获取HTTP头的 1 curl http://item.taobao.com/item.html?id=1264 -v    获取更详细的信息,可以看到包括解析ip的过程都有。 1 curl http://item.taobao.com/item.html?id=1264 实际上就是在模拟form表单,该表单使用的是get方法,去掉获取数据同上。 1 curl -I -m 10 -o /dev/null -s -w %{http_code} www.baidu.com HTTP返回状态码意义:请查看此处http状态码大全
游客2q7uranxketok 2021-02-03 18:21:19 0 浏览量 回答数 0

回答

创建一个包含模板间共享布局的模板,通常这样的模板包含: 页面头部、导航栏、脚部、内容展示区域。 Layout.html <!DOCTYPE html> <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <title>Layout page</title> <script src="common-script.js"></script> </head> <body> <header> <h1>My website</h1> </header> <section layout:fragment="content"> <p>Page content goes here</p> </section> <footer> <p>My footer</p> <p layout:fragment="custom-footer">Custom footer here</p> </footer> </body> </html> 注意事项: 1. html标签上附上命名空间 2. section与脚部p标签上使用layout:fragment属性 这些是布局中的插入候选槽点,通过匹配内容模板中片段进行替换。 创建一些内容模板: Content1.html <!DOCTYPE html> <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{Layout}"> <head> <title>Content page 1</title> <script src="content-script.js"></script> </head> <body> <section layout:fragment="content"> <p>This is a paragraph from content page 1</p> </section> <footer> <p layout:fragment="custom-footer">This is some footer content from content page 1</p> </footer> </body> </html> html标签中的layout:decorate说明哪一个布局模板使用这个内容模板进行装饰。内容模板定义自身标题与脚本、content与custom-footer片段。custom-footer片段处于footer元素内部,这其实是不必要的,但是可能会是很方便的,如果想要做内容模板的静态模板,这是一开始使用Thymeleaf的原因之一。 在一个模板内片段名称必须唯一,否则可能会出现片段不匹配,各种各样的可笑事情会接踵而至。 不管如何,一旦告知Thymeleaf处理Content1.html,最终的页面会是这样子: <!DOCTYPE html> <html> <head> <title>Content page 1</title> <script src="common-script.js"></script> <script src="content-script.js"></script> </head> <body> <header> <h1>My website</h1> </header> <section> <p>This is a paragraph from content page 1</p> </section> <footer> <p>My footer</p> <p>This is some footer content from content page 1</p> </footer> </body> </html> 内容模板装饰Layout.html,结果是布局的组合,加上内容模板的片段(两个模板的<head>元素,来自内容模板的<title>元素替换布局文件内的,所有的元素来自布局文件,但是由所有指定的内容模板进行替换) 想了解更多可以如何控制<head>元素合并,参看<head>元素合并一小节。 装饰进程重定向处理从内容模板至布局,将layout:fragment部分从内容模板中挑选出来,因为布局需要它们。正因如此,任何在layout:fragment之外的东西实际从未得到执行,这说明在内容模板中不能这样做: <div th:if="${user.admin}"> <div layout:fragment="content"> ... </div> </div> 如果布局模板想要’内容’片段,那么会得到那个片段,不顾任何所在条件,因为那些条件不会执行。 如果说只想用绝对最小HTML代码量替换装饰器脚部: Content2.html <p layout:decorate="~{Layout}" layout:fragment="custom-footer"> This is some footer text from content page 2. </p> 这就是全部所需的东西!<p>标签同时用作根元素与片段定义,生成一个像这样的页面: <!DOCTYPE html> <html> <head> <title>Layout page</title> <script src="common-script.js"></script> </head> <body> <header> <h1>My website</h1> </header> <section> <p>Page content goes here</p> </section> <footer> <p>My footer</p> <p> This is some footer text from content page 2. </p> </footer> </body> </html> 可以把布局看作母版,会得以填充或者被内容(子模板)覆盖,仅当内容会填充/覆盖父类。以这种方式,布局充当某种’默认’,内容充当这种默认之上的实现。 给布局传送数据 子模板向上给母版布局传送数据,在涉及到布局/装饰过程的任意元素上使用th:with/ data-th-with属性处理器,可以在任何地方layout:decorate/ data-layout-decorate 或者可以发现 layout:fragment/data-layout-fragment, 例如: 孩子/内容模板: <html layout:decorate="your-layout.html" th:with="greeting='Hello!'"> 1 父类/布局模板: <html> ... <p th:text="${greeting}"></p> <!-- You'll end up with "Hello!" in here --> 将来,或许会增加支持使用分片局部变量,很像Thymeleaf用于创建片段签名。 配置标题 鉴于布局方言自动用内容模板中所发现的重载布局<title>,可能会发现自己重复布局中发现的标题部分,尤其是想要创建面包屑或者在页面标题中保留页面名称。layout:title-pattern处理器可以免除重复布局标题的问题,通过使用一些特殊标记以想要标题如何出现的模式。 这是一个例子: Layout.html <!DOCTYPE html> <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">My website</title> </head> ... </html> layout:title-pattern处理器采取简单字符串,识别两种特殊标记:$LAYOUT_TITLE与$CONTENT_TITLE。每种标记在结果页中会被各自相应的标题替换。所以,如果有下面的内容模板: Content.html <!DOCTYPE html> <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="Layout"> <head> <title>My blog</title> </head> ... </html> 结果页会是这样: <!DOCTYPE html> <html> <head> <title>My website - My blog</title> </head> ... </html> 这对<title>元素内的静态/内联文本或者<title>元素上发现使用th:text的动态文本均有效。 上述例子中的模式在布局中指定,所以对所有使用布局的内容模板均适用。如果在内容模板中指定另一种标题模式,那么会覆盖布局中发现的那个,允许细粒度的控制标题的展现形式。 可重用模板 假如发现有一些HTML或者结构经常性地重复,想要做成自己的模板从不同地方插入以便减少代码重复。(模块化Thymeleaf?)这个的例子可能会是一个模态面板,由几个HTML元素与CSS类构成,在网页应用中产生一个新窗口的效果: Modal.html <!DOCTYPE html> <html> <body> <div id="modal-container" class="modal-container" style="display:none;"> <section id="modal" class="modal"> <header> <h1>My Modal</h1> <div id="close-modal" class="modal-close"> <a href="#close">Close</a> </div> </header> <div id="modal-content" class="modal-content"> <p>My modal content</p> </div> </section> </div> </body> </html> 会发现可以将一些东西转换成像头部、ID的变量,以便包含Modal.html的页面可以设定它们自己的名称/ID。继续尽可能泛型化编写模态代码,然而会遇到填充自己的模态框内容的问题,那是开始接触一些限制的地方。 一些页面使用单一消息的模态框,其他想要使用模态框容纳一些更复杂的东西比如接受用户输入的表单。模态框可能性变得无休无止,但是未支持想象,发现自己得不得将这段模态框代码拷贝到每一个模板中,每一次使用场合变化相应内容,重复同样的HTML代码维持同样的外观感受,打破了过程中的DRY原则。 主要妨碍适当重用的事情是无法将HTML元素传递至插入模板中。这正是layout:insert有用的地方。它运作起来完全像th:insert,但是通过指定与实现片段很像内容/布局实例,可以创建一个公共的结构,对插入它的模板使用场合作出响应。 这是一个更新的模态框模板,使用Thymeleaf与layout:fragment属性定义一个可替换的模态框内容部分以变得更加泛型化: Modal2.html Modal2.html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <body layout:fragment="modal(modalId, modalHeader)"> <div th:id="${modalId} + '-container'" class="modal-container" style="display:none;"> <section th:id="${modalId}" class="modal"> <header> <h1 th:text="${modalHeader}">My Modal</h1> <div th:id="'close-' + ${modalId}" class="modal-close"> <a href="#close">Close</a> </div> </header> <div th:id="${modalId} + '-content'" class="modal-content"> <div layout:fragment="modal-content"> <p>My modal content</p> </div> </div> </section> </div> </body> </html> 现在可以插入这个模板,使用layout:insert处理器与无论怎样需要实现modal-content片段,通过在调用模板插入元素内创建同样名称的片段: Content.html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> ... <div layout:insert="Modal2 :: modal(modalId='message', modalHeader='Message')" th:remove="tag"> <p layout:fragment="modal-content">Message goes here!</p> </div> ... </html> 就像内容/布局实例,插入模板layout:fragment会被匹配片段名称的元素替换掉。在这种场合下,Modal2.html的整个modal-content部分会被上述自定义段落替换掉。这是结果: <!DOCTYPE html> <html> ... <div id="message-container" class="modal-container" style="display:none;"> <section id="message" class="modal"> <header> <h1>Message</h1> <div id="close-message" class="modal-close"> <a href="#close">Close</a> </div> </header> <div id="message-content" class="modal-content"> <p>Message goes here!</p> </div> </section> </div> ... </html> 定义在模板内包含Modal2.html的自定义消息作为模态框内容的一部分。在插入模板上下文环境中的片段与用于内容/布局过程中的片段一样工作:如果片段未在模板中定义,那么它不会覆盖插入模板中的内容,使得在可重用版本中创建默认。
景凌凯 2020-04-29 21:11:25 0 浏览量 回答数 0

云产品推荐

上海奇点人才服务相关的云产品 小程序定制 上海微企信息技术相关的云产品 国内短信套餐包 ECS云服务器安全配置相关的云产品 开发者问答 阿里云建站 自然场景识别相关的云产品 万网 小程序开发制作 视频内容分析 视频集锦 代理记账服务 阿里云AIoT