请关注我的小站:http://oideas.herokuapp.com/
1.布局之前的准备工作
上一章我们已经搭建好了环境,本站就开始我们的OMinds的开发吧。
在开始之前,先让我们来装点东西,打开cmd,切换到project目录,输入命令:
npm install -g supervisor
效果如下图(由于正在等待安装只截了一部分):
注意:每次我们更新代码后,都需要手动停止并重启应用,使用 supervisor 模块可以解决这个问题,每当我们保存修改的文件时,supervisor 都会自动帮我们重启应用。所以这里安装supervisor ,以便于我们能方便看到自己的布局效果。
在任何你觉得合适的地方,建立一个文本文档,写入内容如下:
@echo off
cd E:\nworks\OMinds
supervisor app.js
其中cd E:\nworks\OMinds 是你的项目目录,保存之后,重命名为server.bat,以后启动server只需点击server.bat即可。
注意:假如你的project在e盘,而bat在桌面上,那么需要在以上代码@echo off后面添加一行代码:
e:
表示切换到e盘。
OK,准备工作已经做好,让我们跑一下server看看吧:
2.开始布局(本站只使用chrome浏览器做效果,如果你自己的网站布局已做好,可以跳过这一章)
首先实现导航栏,在public文件夹下建立p_w_picpaths、js两个目录,加上已经存在的stylesheets目录,共3各目录,打开style.css,清空里面的内容,加入以下css:
body{
margin: 0 auto;
padding: 0;
background: url(../p_w_picpaths/bgnoise_lg.png) repeat left top;
font: bold 12px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
ul {
list-style: none;
}
#navigation {
margin: 20px auto;
text-transform: uppercase;
color: #444;
}
#navigation:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#navigation ul {
margin: 0 auto;
padding:0;
}
#navigation li {
float: left;
border-style: solid;
border-width: 1px;
border-color: #BABABA #BABABA #BABABA #FFF;
box-shadow: 0 1px rgba(255,255,255,1) inset;
-webkit-box-shadow: 0 1px rgba(255,255,255,1) inset;
background: #F7F7F7;
background: -moz-linear-gradient(top, #F7F7F7 0%, #EDEDED 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F7F7F7), color-stop(100%,#EDEDED));
background: -webkit-linear-gradient(top, #F7F7F7 0%,#EDEDED 100%);
background: -o-linear-gradient(top, #F7F7F7 0%,#EDEDED 100%);
background: -ms-linear-gradient(top, #F7F7F7 0%,#EDEDED 100%);
background: linear-gradient(top, #F7F7F7 0%,#EDEDED 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#EDEDED',GradientType=0 );
}
#navigation li:hover, #navigation li.current {
box-shadow: 0 1px rgba(255,255,255,0.2) inset;
-webkit-box-shadow: 0 1px rgba(255,255,255,0.2) inset;
border-color: #262626 !important;
background: #4D4D4D;
background: -moz-linear-gradient(top, #4D4D4D 0%, #262626 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4D4D4D), color-stop(100%,#262626));
background: -webkit-linear-gradient(top, #4D4D4D 0%,#262626 100%);
background: -o-linear-gradient(top, #4D4D4D 0%,#262626 100%);
background: -ms-linear-gradient(top, #4D4D4D 0%,#262626 100%);
background: linear-gradient(top, #4D4D4D 0%,#262626 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4D4D4D', endColorstr='#262626',GradientType=0 );
}
#navigation a {
display: block;
padding: 10px 15px;
color: #444;
text-decoration: none;
text-shadow: 0 1px #FFF;
}
#navigation a:hover, #navigation li.current a {
color: #FFF;
text-shadow: 0 1px #000;
}
#navigation li:first-child {
border-left-color: #BABABA;
border-radius: 100px 0 0 100px;
}
#navigation li:last-child {
border-radius: 0 100px 100px 0;
}
在p_w_picpaths文件夹里把我们的背景图片添加进去:
打开views下的inde.ejs文件,在此之前,先让我们调整一下项目的编码,在eclipse下,右键->properties->resource,text file encoding 选择utf-8,由于目前不支持gbk,index.ejs内容如下(<meta charset="utf-8">是设置编码格式的):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= title %></title>
<!-- begin CSS -->
<link href="/stylesheets/style.css" type="text/css" rel="stylesheet">
<!-- end CSS -->
</head>
<body>
<div id="container" >
<nav id="navigation">
<ul >
<li><a href="#" title="8小时内最新">最新</a></li>
<li><a href="#" title="24小时内评论最多">精华</a></li>
<li><a href="#" title="无需登录快速投稿">投稿</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">搜索</a></li>
</ul>
<ul >
<li><a href="#">登陆</a></li>
<li><a href="#">注册</a></li>
</ul>
</nav>
</div>
</body>
</html>
打开浏览求看一下导航的效果:
可以看到搜索与登录之间有一块留白,这个可以根据自己需要进行调整,我的想法是当点击搜索时向右拉出搜索框,不过暂时不着急。
其次,实现内容布局,再次打开style.css,添加以下css代码:
.content {
max-width: 690px;
margin: 20px auto;
}
.cell {
margin: 0 auto;
background-color: #fff;
clear: both;
padding: 18px 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
border-radius: 4px;
}
.cell_loc{
float:right;
padding:2px 6px;
background:url(../p_w_picpaths/bgnoise_lg.png);
border-radius: 9px;
border-color: #BABABA #BABABA #BABABA #FFF;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset,
0 0 0 1px rgba(0, 0, 0, 0.2) inset;
font-size:6px;
}
.cell_author {
font-size: 14px;
vertical-align: middle;
line-height: 100%;
margin: 0 0 17px;
}
.cell_author img {
border-radius: 20px;
box-shadow: 0 0 6px hsla(0, 27%, 42%, .5);
width: 40px;
height: 40px;
max-width: 100%;
vertical-align: middle;
margin: 0 10px 0 0;
border: 0;
}
.cell_author img:hover{
box-shadow: 0 0 8px hsla(350, 89%, 48%, 0.69);
}
.cell_author a {
color: #9b8878;
}
.cell_author a:hover {
color: #300;
}
.cell_text {
word-break: break-all;
line-height: 160%;
}
.cell_bar {
margin: 15px 0 0 0;
height: 30px;
font-size: 12px;
}
.cell_bar ul li {
float: left;
}
.cell_bar ul li a {
display: block;
height: 28px;
line-height: 30px;
margin-right: 10px;
text-indent: 20px;
color: #BEBEBE;
width: 80px;
font-weight: 500;
}
.cell_bar ul li a:hover {
color: #9e8c7b;
}
.cell_bar_comm {
float: right;
margin: 0;
padding: 0;
}
.cell_bar_comm li {
float: left;
}
.cell_share {
float: right;
}
.share_icon {
display: inline-block;
width: 24px;
height: 24px;
overflow: hidden;
background: url(../p_w_picpaths/share_logo.png) no-repeat;
}
.share_sn {
float: right;
margin-right: 5px;
background-position: -50px 0px;
}
.share_tc {
float: right;
margin-right: 15px;
background-position: -100px 0px;
}
.share_rr {
float: right;
margin-right: 5px;
background-position: -150px 0px;
}
打开index.ejs,在</nav>之后添加代码:
<div class="content">
<div class="cell">
<div class="cell_author" >
<img src="/p_w_picpaths/tem.jpg" title="OMinds">
<a href="/>">OMinds</a>
<span class="cell_loc" title="1楼">1#</span>
</div>
<div class="cell_text" title='' >
OMinds,发表你的心事,你可以不用登录,不用在乎是否会被别人嘲笑,因为在这里大家都是一样的没有谁会嘲笑你。
</div>
<div class="cell_bar">
<ul >
<li><a id="putgoods" name="putgoods" href="#" title="10个赞" >赞[10]</a></li>
<li><a id="putbads" name="putbads" href="j#" title="10个踩">踩[10]</a></li>
</ul>
<ul class="cell_bar_comm">
<li><a href="#" title="10条评论" >评[10]</a></li>
<div class="bshare-custom" ><a title="分享到QQ空间" class="bshare-qzone"></a>
<a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
<a title="分享到人人网" class="bshare-renren"></a>
<a title="分享到腾讯微博" class="bshare-qqmb"></a>
<a title="分享到网易微博" class="bshare-neteasemb"></a>
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=;pophcol=2&lang=zh"></script>
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
<script type="text/javascript" charset="utf-8">
bShare.addEntry({
title:"OMinds分享",
summary:'分享你的心事。' ,
vTag:'OMinds'});
</script>
</ul>
</div>
</div>
</div>
</div>
其中p_w_picpaths/tem.jpg为:
好,刷新浏览器看看效果如何:
好基本上小站原型已成,下面做一下修剪,在views目录下新建header.ejs、footer.ejs文件,将index.ejs中</nav>以上的代码全部拷贝到header.ejs中,并在index.ejs的最顶端添加代码:
<%- include header%>
将index.ejs中最后一个</div>及以后的代码提取到footer.ejs中,并在indes.ejs中添加代码:
<%- include footer%>
那么,最后index.ejs中应该为:
<%- include header%>
<div class="content">
<div class="cell">
<div class="cell_author" >
<img src="/p_w_picpaths/tem.jpg" title="OMinds">
<a href="/>">OMinds</a>
<span class="cell_loc" title="1楼">1#</span>
</div>
<div class="cell_text" title='' >
OMinds,发表你的心事,你可以不用登录,不用在乎是否会被别人嘲笑,因为在这里大家都是一样的没有谁会嘲笑你。
</div>
<div class="cell_bar">
<ul >
<li><a id="putgoods" name="putgoods" href="#" title="10个赞" >赞[10]</a></li>
<li><a id="putbads" name="putbads" href="j#" title="10个踩">踩[10]</a></li>
</ul>
<ul class="cell_bar_comm">
<li><a href="#" title="10条评论" >评[10]</a></li>
<div class="bshare-custom" ><a title="分享到QQ空间" class="bshare-qzone"></a>
<a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
<a title="分享到人人网" class="bshare-renren"></a>
<a title="分享到腾讯微博" class="bshare-qqmb"></a>
<a title="分享到网易微博" class="bshare-neteasemb"></a>
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=;pophcol=2&lang=zh"></script>
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
<script type="text/javascript" charset="utf-8">
bShare.addEntry({
title:"OMinds分享",
summary:'分享你的心事。' ,
vTag:'OMinds'});
</script>
</ul>
</div>
</div>
</div>
</div>
<%- include footer%>
以上的首页是没什么问题了,有了显示,就需要有数据来源,来源就是通过投稿页,那么下面来布局投稿页面,先在header.ejs中把代码:
<li ><a href="#" title="无需登录快速投稿">投稿</a></li>
修改为:
<li ><a href="/upminds" title="无需登录快速投稿">投稿</a></li>
表示我们通过upminds地址访问投稿页面,直接拷贝复制index.ejs文件命名为:upminds.ejs,将header和footer以外的代码删除。再次打开style.css添加css:
.upideas_content {
position: relative;
width: 690px;
margin: 0 auto;
padding: 0 10px 0 10px;
}
.clear_fix {
display: block;
}
.clear_fix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.up_content {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background: #fff;
padding: 20px;
margin-bottom: 20px;
margin-top: 20px;
display: block;
border-radius: 4px;
}
.up_bar {
color: #666;
width: 200px;
float: right;
}
.up_bar h4 {
font-size: 16px;
padding: 0 0 20px 0;
margin: 0;
}
.up_bar ol li {
padding: 15px 0;
border-top: 1px solid #efefef;
list-style-position: inside;
list-style-type: decimal;
line-height: 140%;
}
.up_content_text {
width: 422px;
float: left;
}
.up_idea_text {
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1);
border: 1px solid #ccc;
background: #f9f9f9;
font-size: 14px;
line-height: 18px;
padding: 10px;
resize: none;
width: 400px;
}
.up_idea_err{
float: left;
color:#FF0000;
padding: 10px 0 0 0;
}
.up_idea_btn {
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background: #FF8000;
color: #fff;
font-size: 14px;
line-height: 18px;
padding: 10px 20px 10px 20px;
border: 0 none;
float: right;
}
upminds.ejs中的代码:
<%- include header%>
<div class="main">
<div class="upideas_content clear_fix">
<div class="up_content clear_fix">
<div class="up_bar">
<h4>投稿须知</h4>
<ol >
<li>分享自己或朋友的Minds(心事),不浮夸、有意义,不含政治、×××、广告、诽谤、歧视等内容。</li>
<li>分享的Minds(心事),将在审核之后发布。</li>
<li>转载请注明出处,任何由Minds引发的法律等纠纷,本站概不负责。</li>
<li>不得盗用站内其他会员的Minds。</li>
</ol>
</div>
<div class="up_content_text">
<form method="post" action="putup" >
<textarea id="idea_text" name="idea_text" class="up_idea_text" rows="23" required placeholder="分享你的Minds(心事)..." ></textarea>
<span class="up_idea_err"></span><button type="submit" class="up_idea_btn" id="idea_btn" >投递</button>
</form>
</div>
</div>
</div>
</div>
<%- include footer%>
打开routes/index.js文件,内容最终为:
module.exports = function(app) {
app.get('/', function (req, res) {
res.render('index', { title: 'OMinds' });
});
app.get('/upminds', function (req, res) {
res.render('upminds', { title: 'OMinds' });
});
};
打开浏览器,点击投稿导航,效果:
好了,本站的基本布局以及OK了,有些同学可能会说了,导航里面不是还有很多东西没实现吗,不要紧,当前已经能基本满足需求,别人能投稿,能显示别人的投稿不就ok了吗,其他的慢慢来。
下一章将会链接db,来动态显示内容,不然,一直静态的多没意思啊。
注:有些同学可能回觉得,呀,你做这个教程干嘛啊,直接把源码给我们不久ok了吗,还在这墨迹个什么啊,我写的代码很乱,是之前ideas项目的代码,现在做的是Ominds,完全是从头开始做的,一步一步做的,不过,不用担心,我一定会做完的,也没多少东西,每天一章的话,基本上1周半就完事了。
请关注我的小站http://oideas.herokuapp.com/,最好是能注册一下,当然,由于用的是外机,很卡,不能要求什么了。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
软考中级精品资料免费领
- 历年真题答案解析
- 备考技巧名师总结
- 高频考点精准押题
- 资料下载
- 历年真题
193.9 KB下载数265
191.63 KB下载数245
143.91 KB下载数1148
183.71 KB下载数642
644.84 KB下载数2756
相关文章
发现更多好内容- 如何在 Java 中创建 Maven 项目?(java怎么创建maven项目)
- 如何高效使用Uncomtrade数据库进行查询
- Java 配置环境变量后如何进行使用操作?(java配置环境变量后如何使用)
- Java 中防止接口重复提交的方法有哪些?(java接口防止重复提交的方法是什么)
- 如何提高 Java Office 的性能?(java office 怎样提高性能 )
- Java 抽象工厂模式的优缺点有哪些?(java抽象工厂模式有哪些优缺点)
- 在 Java 中,charsequence 的具体用法究竟是什么?(java中charsequence的用法是什么)
- 如何利用 Java Quarter 进行数据挖掘?(java quarter如何进行数据挖掘)
- Java 中常见的比较操作符有哪些?(Java比较操作符有哪些)
- 在 Java 中,Integer 究竟有哪些作用呢?(java中integer的作用是什么)