1. 首页
  2. 文章

【Go web开发之revel+mgo】第2章 Blog的首页与投稿设计

jov123 · · 1808 次点击 · · 开始浏览    
这是一个创建于 的文章，其中的信息可能已经有所发展或是发生改变。
第一次，站长亲自招 Gopher 了>>>

演示地址   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，我们刷一下页面，点投稿看看效果：



有了这两个基本的东西我们可以来实现它了。

内容比较多，我们在下一章来做实现。


有疑问加站长微信联系（非本文作者）

本文来自：CSDN博客

感谢作者：jov123

查看原文：【Go web开发之revel+mgo】第2章 Blog的首页与投稿设计

入群交流（和以上内容无关）：加入Go大咖交流群，或添加微信：liuxiaoyan-s 备注：入群；或加QQ群：692541889

1808 次点击  
加入收藏 微博
赞
收入我的专栏
上一篇：go项目的一些心得
下一篇：write smart proxy step by step 1 (理论简介)
  • revel
  • http
  • web
  • mgo
    0 回复
    暂无回复
    添加一条新回复 （您需要 登录 后才能回复 没有账号 ？）
    • 请尽量让自己的回复能够对别人有帮助
    • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
    • 支持 @ 本站用户；支持表情（输入 : 提示），见 Emoji cheat sheet
    • 图片支持拖拽、截图粘贴等方式上传

    用户登录

    Go今日面试题

     今日阅读排行

      加载中

     一周阅读排行

      加载中

      关注我

    • 扫码关注领全套学习资料 关注微信公众号
    • 加入 QQ 群：
      • 192706294（已满）
      • 731990104（已满）
      • 798786647（已满）
      • 729884609（已满）
      • 977810755（已满）
      • 815126783（已满）
      • 812540095（已满）
      • 1006366459（已满）
      • 692541889

    • 关注微信公众号
    • 加入微信群：liuxiaoyan-s，备注入群
    • 也欢迎加入知识星球 Go粉丝们（免费）