【Go web开发之revel+mgo】第2章 Blog的首页与投稿设计
2014-04-24 13:38
525 查看
演示地址 http://gblog-revel.herokuapp.com/
1.首页
好，我用revel new GBlog 建了我们的项目。在设计之前（为什么总是设计，没有结果没有动力啊），我们先来做点东西。将public/css/bootstrap.css删了换成bootstrap3（因为它给我们生成的是2，我喜欢用3，不能说喜欢，而是正在用3，你也可以继续使用2哦！可能样式有点不一样而已。），在public/css/新建一个我们的样式：style.css,，添加内容：
body{
margin: 0 auto;
padding: 0;
background: url('../img/section_bg.png');
font: 14px "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
line-height: 20px;
letter-spacing: 0.02em;
color: #666;
background-attachment:fixed;
}
a{
color: #1abc9c;
text-decoration: none;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
-webkit-backface-visibility: hidden;
}
.main-nav{
margin: 0 auto;
width: 692px;
padding:0;
}
.top-bar{
width:100%;
background: #34495e;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
box-shadow: 0 2px rgba(0,0,0,0.075),0 0 6px #7aba7b;
-webkit-box-shadow:0 2px rgba(0,0,0,0.075),0 0 6px #7aba7b;
-moz-box-shadow:0 2px rgba(0,0,0,0.075),0 0 6px #7aba7b;
margin-bottom:28px;
}
.top-bar-inner{
min-height: 48px;
padding:0 4px;
}
.ul-nav{
position: relative;
left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
list-style: none;
font-size: 18px;
padding:0;
}
.ul-nav>li {
position: relative;
float: left;
line-height: 20px;
}
.ul-nav>li>a{
padding: 14px 24px 17px;
text-decoration: none;
display: block;
color: white;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
}
.ul-nav>li>a:hover,.ul-nav>li>a:focus{
color: #1abc9c;
}
.navbar-news {
background-color: #e74c3c;
border-radius: 30px;
color: white;
display: block;
font-size: 12px;
font-weight: 500;
line-height: 18px;
min-width: 8px;
padding: 0 5px;
position: absolute;
right: -7px;
text-align: center;
text-shadow: none;
top: 8px;
z-index: 10;
}
.ul-nav .active > a, .ul-nav .active > a:hover, .ul-nav .active > a:focus {
background-color: transparent;
color: #1abc9c;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.cell{
background-color:#1bc6a5;
color: #cff3ec;
font-size: 15px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-khtml-border-radius: 4px;
padding: 18px 20px 0px 20px;
margin-bottom: 30px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.cell-subject{
margin: 0;
}
.cell-subject-title{
color: #34495e;
font-size: 24px;
font-weight: 700;
text-decoration: none;
}
a.cell-subject-title:hover{
text-decoration: underline;
}
.subject-infor{
color:#34495e;
line-height: 19px;
padding: 2px 0;
font-size: 13px;
margin:2px 0;
}
.cell-text{
padding: 4px 0;
word-break: break-all;
}
.comment-num{
float:right;
border: 5px solid #d7dce0;
border-radius: 50px;
font-size: 14px;
line-height: 16px;
padding: 0 4px;
-webkit-transition: background 0.2s ease-out, border-color 0s ease-out, color 0.2s ease-out;
-moz-transition: background 0.2s ease-out, border-color 0s ease-out, color 0.2s ease-out;
-o-transition: background 0.2s ease-out, border-color 0s ease-out, color 0.2s ease-out;
transition: background 0.2s ease-out, border-color 0s ease-out, color 0.2s ease-out;
-webkit-backface-visibility: hidden;
background-color: white;
border-color: white;
border-width: 2px;
color: #BBB6B6;
}恩其中的背景图片，太小了，上传上来也看不清除，大家自己找一个或者不用也行。
关于css这种东西，不会写，我们就copy，这种东西，只能说你喜欢就认真去做，不喜欢，就随便高高。
好，打开app/views/header.html，添加进去：
<link rel="stylesheet" type="text/css" href="/public/css/styles.css">
等一下，我们先来看看header.html里面的内容：
<!DOCTYPE html>
<html>
<head>
<title>{{.title}}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/public/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/public/css/styles.css">
<link rel="shortcut icon" type="image/png" href="/public/img/favicon.png">
<script src="/public/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
{{range .moreStyles}}
<link rel="stylesheet" type="text/css" href="/public/{{.}}">
{{end}}
{{range .moreScripts}}
<script src="/public/{{.}}" type="text/javascript" charset="utf-8"></script>
{{end}}
</head>
<body>{{.title}}这是一个变量我们后面会看到，css与js的引入到没什么区别，不过icon这个不错，居然支持png等格式。{{range .moreStyles}}和{{range .moreScripts}}这两个是循环，
也就是说我们如果不同的页面需要不同的css文件或者js文件，我们可以在那个页面上采用
{{append . "moreScripts" "js/jquery-ui-1.7.2.custom.min.js"}}这种凡是把我们需要的东西加载进去。由于，我们目前东西比较少，这两个循环可以去掉。
那么在header.html的body之后加入下面代码：
<div class="container main-nav">
<div class="top-bar">
<div class="top-bar-inner">
<ul class="ul-nav ">
<li class="{{.home}}">
<a href="/" >Home</a>
<span class="navbar-news " title="最近1小时有1个更新">1</span>
</li>
<li class="{{.write}}">
<a href="/write" title="Put up your blogs">投稿</a>
</li>
<li class="{{.mess}}">
<a href="/message" title="Message Boards">留言</a>
</li>
<li class="{{.history}}">
<a href="/history" title="History blogs">归档</a>
</li>
<li class="{{.about}}">
<a href="/about" title="About Me">About Me</a>
</li>
<li class="{{.ema}}">
<a href="/email" title="The emails of the blog's author">Email</a>
</li>
<li>
<a href="#" title="">RSS</a>
</li>
</ul>
</div>
</div>最后不要忘了在footer.html加入</div>，好我们来看一下效果：
恩，看起来还是不错的，虽然有点挫。
好，我们打开views/App/Index.html（话说，大小写很重要的哦，它是根据你方法的名称来加载对于view下的页面），把里面的东西全部替换：
{{set . "title" "Home - GBlog" }}
{{set . "home" "active" }}
{{template "header.html" .}}
<div class="content">
<div class="cell">
<div class="cell-subject">
<div>
<a href="#" class="cell-subject-title" ><strang>Test size=45</strang></a>
<a href="#" class="comment-num" title="Comments">10</a>
</div>
<div class="subject-infor">
<span class="label label-success">Author</span> <span>jov123@163.com</span>
<span class="label label-default">Date</span> 2014-04-15 12:25
<span class="label label-info">Read</span> 0
</div>
</div>
<div class="cell-text">
<pre><code>怎么说呢，稍微有点迷茫，不管是id</code></pre>
</div>
</div>
</div>
{{template "footer.html" .}}恩，看到了吗，set . title这中东西很有作用把，template也不用我多说什么把。再次刷新看一下效果：
呀～～，是不是更挫了。好把。首页就这样完成了设计，下面我们先做投稿的设计，没有投稿哪有数据啊，是不是？
2.投稿
在view/App/下新建WBlog.html，内容如下：{{set . "title" "投稿 - GBlog"}}
{{set . "write" "active" }}
{{template "header.html" .}}
<div class="content">
<div class="write-nav">
<form action="/putblog" method="post" >
<div class="form-group" >
<label style="font-weight: bold;">Title</label>
{{with $field := field "blog.Title" .}}
<input type="text" id="{{$field.Id}}" name="{{$field.Name}}" class="form-control" style="width:98%;min-height:28px;" required value="{{if $field.Flash}}{{$field.Flash}}{{else}}{{$field.Value}}{{end}}">
<span class="help-inline erro">{{$field.Error}}</span>
{{end}}
</div>
<div class="form-group" >
<label style="font-weight: bold;">Author</label>
{{with $field := field "blog.Email" .}}
<input type="email" id="{{$field.Id}}" name="{{$field.Name}}" class="form-control" style="width:98%;min-height:28px;" placeholder="Enter your email" required value="{{if $field.Flash}}{{$field.Flash}}{{else}}{{$field.Value}}{{end}}">
<span class="help-inline erro">{{$field.Error}}</span>
{{end}}
</div>
<div class="form-group" >
<label style="font-weight: bold;">Subject</label>
{{with $field := field "blog.Subject" .}}
<textarea class="form-control" id="{{$field.Id}}" name="{{$field.Name}}" style="width:98%;line-height: 22px;height: 350px;resize: vertical;" required >{{if $field.Flash}}{{$field.Flash}}{{else}}{{$field.Value}}{{end}}</textarea>
<span class="help-inline erro">{{$field.Error}}</span>
{{end}}
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
{{template "footer.html" .}}这里面我先把后面要降到的的东西放了出来，先不用管，后面会讲到。
那么怎么看效果呢，先在app/controllers/app.go 里面加入一个方法：
func (c App) WBlog() revel.Result {
return c.Render()
}来看这个方法，他的接收者是App，就是这个文件上面的struct，它里面放的是revel.Controller对象，这个我们不用管它，而c.Render()，相当与forward跳转。
在conf/routes里面加入一个路由控制：
GET /write App.WBlog
当然我们也是可以通过http://localhost:9000/App/WBlog这样的方式直接 访问的，但是我不喜欢这种大写的名称（在go中你需要时刻注意大小写，因为大写相当于public的是可以被外部访问的），说明一下为什么可以用这种方式访问，看到conf/routes里面的：
* /:controller/:action :controller.:action
它已经给我们配置好了。
ok，我们刷一下页面，点投稿看看效果：
有了这两个基本的东西我们可以来实现它了。
内容比较多，我们在下一章来做实现。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【Go web开发之revel+mgo】第3章 Blog的首页与投稿实现
- 【Go web开发之revel+mgo】第5章 样式与留言板的设计
- 【Go web开发之revel+mgo】第4章 实现评论功能
- 【Go web开发之revel+mgo】第1章 述与环境
- 【Go web开发之revel+mgo】第8章 实现Email墙
- 【Go web开发之revel+mgo】第6章 实现留言板功能
- 【Go web开发之revel+mgo】第7章 实现归档
- 【Go web开发之revel+mgo】第9章 其它和？？
- 【Go web开发之revel+mgo】第10章 总结
- 【Go web开发之revel+mgo】第11章 部署到heroku上
- Go Web开发之Revel - 介绍
- Go Web开发之Revel - 组织结构
- Go Web开发之Revel - 部署
- Go Web开发之Revel - 日志
- Go Web开发之Revel - 概念
- Go Web开发之Revel - Revel运行原理
- Go Web开发之Revel - 参数绑定
- Go Web开发之Revel - 拦截器
- Go Web开发之Revel - 模块
- Go Web开发之Revel - Session/Flash