来玩Play框架07 静态文件

简介: 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明。谢谢!   Play框架的主要功能是提供动态响应的内容。但一个网络项目中必然有大量的静态内容,比如图片、Javascript文件、CSS文件等。

作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明。谢谢!

 

Play框架的主要功能是提供动态响应的内容。但一个网络项目中必然有大量的静态内容,比如图片、Javascript文件、CSS文件等。我下面介绍如何在Play项目中加入静态文件。

 

默认路径

Play项目的静态文件一般存储在根目录下的public文件夹。新建Play项目时,routes文件会有下面的默认记录:

# Map static resources from the /public folder to the /assets URL path
GET     /assets/*file               controllers.Assets.at(path="/public", file)

该记录将/assets/下的URL,对应到项目的/public文件夹内的文件。比如在项目的/public/images/test.jpg,就可以通过/assests/images/test.jpg这一URL访问:

其它类型的静态文件,也都可以放入/public文件夹中。 

在Play的模板中,也可以利用@routes.Assets.at("images/test.jpg")的方式,来调用静态文件的URL。

 

文件上传

客户有时需要自行上传文件。我可以通过一个表单来让客户上传。表单的模板app/views/upload.scala.html为:

@helper.form(action = routes.Application.upload, 'enctype -> "multipart/form-data") {
    <input type="file" name="picture">
    <p>
        <input type="submit">
    </p>
}

 

增加动作uploadForm(),用于显示该模板:

    public static Result uploadForm() {
        return ok(views.html.upload.render());
    }

 

文件上传的界面如下:

 

对于表单提交,我用动作upload()来处理:

    public static Result upload() {
          MultipartFormData body = request().body().asMultipartFormData();
          FilePart picture = body.getFile("picture");
          if (picture != null) {
            String fileName = picture.getFilename();
            String contentType = picture.getContentType(); 
            File file   = picture.getFile();
            // get the root path of the Play project
            File root = Play.application().path();
            // save file to the disk
            file.renameTo(new File(root, "/public/uploads/" + fileName));
            return ok(fileName + " " + contentType + " uploaded");
          } else {
            return badRequest("not a valid file");    
          }
}

这里通过multipart/form-data的加密方式,来传输静态文件。文件传输成功后,我提取出File类型的文件对象,并利用renameTo()方法,将文件保存到/public/uploads路径下。

 

CoffeeScript和LESS

Play中可以用CoffeeScript编写前端JavaScript。建立app/assets/javascripts文件夹。文件夹中放入.coffee文件,比如test.coffee。Play将自动把.coffee文件编译成.js文件。在模板中,可以通过

@routes.Assets.at("javascripts/test.js")

@routes.Assets.at("javascripts/test.min.js")

来分别调用.js文件或压缩后的.js文件。用于routes中的设置,也可以用/assets/javascripts/test.js直接访问。

 

Play还可以用LESS来编写CSS文件。在app/assets/stylesheets中放入.less文件,Play将自动编译。用

@routes.Assets.at("stylesheets/test.css")

@routes.Assets.at("stylesheets/test.min.css")

在模板中访问。或者用/assets/stylesheets/test.css直接访问。

 

总结

静态文件

文件上传

 

欢迎继续阅读“Java快速教程”系列文章

目录
相关文章
|
前端开发 JavaScript
第三章 webpack5处理图片资源
介绍如何处理图片资源
289 0
|
9月前
|
JSON 前端开发 API
layui框架实战案例(8):web图片裁切插件croppers.js组件实现上传图片的自定义截取(含php后端)
layui框架实战案例(8):web图片裁切插件croppers.js组件实现上传图片的自定义截取(含php后端)
378 0
|
10月前
|
存储 缓存 JavaScript
Qt+QtWebApp开发笔记(六):http服务器html实现静态相对路径调用第三方js文件
为了解决调用一些依赖的如echarts等一些js的代码模块引入的问题,就需要静态文件了。 本篇解说StaticFileController,在返回的html文本中调用外部js文件,类似的,其他文件都是一样了,只是引入的后缀名不一样。
Qt+QtWebApp开发笔记(六):http服务器html实现静态相对路径调用第三方js文件
|
11月前
|
存储 前端开发 测试技术
|
JavaScript 区块链
项目性能优化之用url-loader把小图片转base64,大图片使用image-webpack-loader压缩
项目性能优化之用url-loader把小图片转base64,大图片使用image-webpack-loader压缩
256 0
|
前端开发
前端学习案例5-webpack中使用url-loader打包图片
前端学习案例5-webpack中使用url-loader打包图片
55 0
前端学习案例5-webpack中使用url-loader打包图片
|
移动开发 编解码 weex
weex开发 - 加载index.js崩溃,白屏(may it has been destroyed so method:fireEvent is ignored,Url must be passe)
weex开发 - 加载index.js崩溃,白屏(may it has been destroyed so method:fireEvent is ignored,Url must be passe)
255 0
|
移动开发 weex API
weex在iOS环境加载本地图片的方法
weex在iOS环境加载本地图片的方法
140 0
weex在iOS环境加载本地图片的方法
|
Web App开发 存储 移动开发
Flutter Web项目如何录制wav格式音频
一个小需求,需要在Flutter Web项目中录音,需要通过原生Native(即js或html5)来进行处理。 而且我们的需求必须是wav格式的,经过网上查询发现使用html5自带的MediaRecorder在chrome上录制出来的格式是webm(opus),即 audio/webm;codecs=opus 复制代码 而且只支持这种格式,因为chrome解码(decode)有多种格式,但是编码(encode)只有这一种。 那么我们怎么录制wav格式?
496 0
|
存储 缓存 JavaScript
Web图片资源的加载与渲染时机
Web图片资源的加载与渲染时机
223 0

热门文章

最新文章