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

jov123 · · 1786 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

演示地址   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

1786 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传