|
1 | | -# 14.1 静态文件支持 |
2 | | -我们在前面已经讲过如何处理静态文件,这小节我们详细的介绍如何在beego里面设置和使用静态文件。通过再介绍一个twitter开源的html、css框架bootstrap,无需任何的设计人员就能够让你快速的建立一个漂亮的站点。 |
3 | | - |
4 | | -## beego静态文件实现和设置 |
5 | | - |
6 | | -## bootstrap集成 |
7 | | -Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。 |
8 | | - |
9 | | -- 组件 |
10 | | - Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件: |
11 | | - 下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等 |
12 | | -- Javascript插件 |
13 | | - Bootstrap自带了13个jQuery插件,这些插件为Bootstrap中的组件赋予了“生命”。其中包括: |
14 | | - 模式对话框、标签页、滚动条、弹出框等。 |
15 | | -- 定制自己的框架代码 |
16 | | - 可以对Bootstrap中所有的CSS变量进行修改,依据自己的需求裁剪代码。 |
17 | | - |
18 | | - |
19 | | - |
20 | | -接下来我们利用bootstrap集成到beego框架里面来,快速的建立一个漂亮的站点 |
21 | | - |
22 | | - |
23 | | -## links |
24 | | - * [目录](<preface.md>) |
25 | | - * 上一节: [扩展Web框架](<14.md>) |
| 1 | +# 14.1 静态文件支持 |
| 2 | +我们在前面已经讲过如何处理静态文件,这小节我们详细的介绍如何在beego里面设置和使用静态文件。通过再介绍一个twitter开源的html、css框架bootstrap,无需任何的设计人员就能够让你快速的建立一个漂亮的站点。 |
| 3 | + |
| 4 | +## beego静态文件实现和设置 |
| 5 | +Go的net/http包中提供了静态文件的服务,`ServeFile`和`FileServer`等函数。beego的静态文件处理就是基于这一层处理的,具体的实现如下所示: |
| 6 | + |
| 7 | +//static file server |
| 8 | +for prefix, staticDir := range StaticDir { |
| 9 | +if strings.HasPrefix(r.URL.Path, prefix) { |
| 10 | +file := staticDir + r.URL.Path[len(prefix):] |
| 11 | +http.ServeFile(w, r, file) |
| 12 | +w.started = true |
| 13 | +return |
| 14 | +} |
| 15 | +} |
| 16 | + |
| 17 | +StaticDir里面保存的是相应的url对应到静态文件所在的目录,因此在处理URL请求的时候只需要判断对应的请求地址是否包含静态处理开头的url,如果是那么就采用http.ServeFile提供服务。 |
| 18 | + |
| 19 | +举例如下: |
| 20 | + |
| 21 | +beego.StaticDir["/asset"] = "/static" |
| 22 | + |
| 23 | +那么请求url如`http://www.beego.me/asset/bootstrap.css`的请求就会请求`/static/bootstrap.css`来提供反馈给客户端。 |
| 24 | + |
| 25 | +## bootstrap集成 |
| 26 | +Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。 |
| 27 | + |
| 28 | +- 组件 |
| 29 | + Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件: |
| 30 | + 下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等 |
| 31 | +- Javascript插件 |
| 32 | + Bootstrap自带了13个jQuery插件,这些插件为Bootstrap中的组件赋予了“生命”。其中包括: |
| 33 | + 模式对话框、标签页、滚动条、弹出框等。 |
| 34 | +- 定制自己的框架代码 |
| 35 | + 可以对Bootstrap中所有的CSS变量进行修改,依据自己的需求裁剪代码。 |
| 36 | + |
| 37 | + |
| 38 | + |
| 39 | +接下来我们利用bootstrap集成到beego框架里面来,快速的建立一个漂亮的站点。 |
| 40 | + |
| 41 | +1. 首先把下载的bootstrap目录放到我们的项目目录,取名为static,如下截图所示 |
| 42 | + |
| 43 | + |
| 44 | + |
| 45 | +2. 因为beego默认设置了StaticDir的值,所以如果你的静态文件目录是static的话就无须再增加了: |
| 46 | + |
| 47 | +StaticDir["/static"] = "static" |
| 48 | + |
| 49 | +3. 模板中使用如下的地址就可以了: |
| 50 | + |
| 51 | +//css文件 |
| 52 | +<link href="/static/css/bootstrap.css" rel="stylesheet"> |
| 53 | +
|
| 54 | +//js文件 |
| 55 | +<script src="/static/js/bootstrap-transition.js"></script> |
| 56 | +
|
| 57 | +//图片文件 |
| 58 | +<img src="/static/img/logo.png"> |
| 59 | + |
| 60 | +上面可以实现把bootstrap集成到beego中来,如下展示的图就是集成进来之后的展现效果图: |
| 61 | + |
| 62 | + |
| 63 | + |
| 64 | +这些模板和格式bootstrap官方都有提供,这边就不在重复贴代码,大家可以上bootstrap官方网站学习如何编写这样的模板。 |
| 65 | + |
| 66 | + |
| 67 | +## links |
| 68 | + * [目录](<preface.md>) |
| 69 | + * 上一节: [扩展Web框架](<14.md>) |
26 | 70 | * 下一节: [Session支持](<14.2.md>) |
0 commit comments