个人博客

来源：互联网发布：韩国网络剧推荐编辑：程序博客网时间：2024/06/07 06:18

本地搭建个人博客详解：

参考了很多大神的博客，涉及的主要技术与框架：jQuery+bootstrap+nodejs+mongodb：

github地址：https://github.com/lqdreaming/myblog点击打开链接

启动博客方法：开启博客的方法
1.建立本地数据库
怎么样MongoDB搭建环境-
下面主要是在Windows上（WinXP）安装、运行、安装Windows服务的笔记，以作备忘。
1、下载
下载地址：http://www.mongodb.org/downloads
从其下载页面就可以看出MongoDB还真的是不赖，支持各个操作系统，其驱动也有好多，其中就有我喜欢的Java和Python驱动，看样子我真的应该学习下了。
我下载的是Windows321.7.1版本的【http://fastdl.mongodb.org/win32/mongodb-win32-i386-1.7.1.zip】（正在开发中，不稳定，不过学习可以了），它的说明中有个限制，数据最大只能2GB，不过对于学习来说，已经足够了。
2、安装
安装非常简单，解压就行了，我解压后，放在D:/MongoDB目录下。
为了命令行的方便，我把D:/MongoDB/bin加到系统环境变量的path中了。
3、运行
D:\>mongod –dbpath D:/MongoDB/data
SunOct2415:07:05MongoDBstarting:pid=2472 port=3000 dbpath=D:/MongoDB/data64-bit
**NOTE:Thisisadevelopmentversion(1.7.1)ofMongoDB.
**Notrecommendedforproduction.
**NOTE:whenusingMongoDB32bit,youarelimitedtoabout2gigabytesofdata
**seehttp://blog.mongodb.org/post/137788967/32-bit-limitations
SunOct2415:07:05dbversionv1.7.1,pdfileversion4.5
SunOct2415:07:05gitversion:cee2d0d6816a704126c283401db24c949d5f52a3
SunOct2415:07:05sysinfo:windows(5,1,2600,2,'ServicePack3')BOOST_LIB_VERSION=1_35
SunOct2415:07:05[initandlisten]waitingforconnectionsonport27017
SunOct2415:07:05[websvr]webadmininterfacelisteningonport28017
由于是开发版，上面就有个警告，没关系，忽略它。(data目录自己手动创建)
最后两行说明的数据库端口和Web端口，分别是27017和28017，在浏览器中打开http://localhost:28017，可以看到其相关的一些信息。
4、安装Windows服务
每次运行mongod –dbpath D:/MongoDB/data命令行来启动MongoDB实在是不方便，就像我免安装的MySQL一样，我想把它作为Windows服务，这样就方便多了。
D:\MongoDB\bin>mongod --logpath D:\MongoDB\logs\MongoDB.log --logappend --dbpath D:\MongoDB\data --directoryperdb --serviceName MongoDB --install

alloutputgoingto:D:\MongoDB\logs\MongoDB.log
CreatingserviceMongoDB.
Servicecreationsuccessful.
Servicecanbestartedfromthecommandlinevia'netstart"MongoDB"'.
注意：这条命令要到MongoDB的bin目录下运行，刚开始的时候，我就直接在D:\下运行，结果服务的可执行目录为【"D:\mongod"--logpath"D:\MongoDB\logs\MongoDB.log"--logappend--dbpath"D:\MongoDB\data"--di

进入到你当前MongoDB所在的目录地址
例如我的是放在D盘：cd/d D:\MongoDB\bin
-mongo命令进入数据库
至于怎么建立数据库网上很多
-use simpleBlog 进入数据库我建立的名称为simpleBlog
这样本地的数据库就搭建完成

2.搭建本地服务器环境
下载nodejs
把项目放在node里面
我也放在D盘：进入到项目所在路径
-node bin/www
这样就开启了服务器的环境
在浏览器中输入http://localhost:3000/index

主要几个页面：

1.数据库的主要数据：第一块是用户名、评论内容、时间（评论信息）；第二块是用户名+密码（注册登录）。

建立database文件夹-数据库

models.js：

module.exports = {

// 评论content:{name:{type:String},comment:{type:String},date:{type:String}},

// 登录注册user:{ name:{type:String,required:true},password:{type:String,required:true},}};

dbHandel.js

var mongoose = require('mongoose'); // 引入mongoose模块var Schema = mongoose.Schema;   //  创建模型var models = require("./models");  // 引入模型for(var m in models){ mongoose.model(m,new Schema(models[m]));}//生成方法getModel给予调用，返回对应的模型 module.exports = { getModel: function(type){ return _getModel(type);}};var _getModel = function(type){ return mongoose.model(type);};

2.相应的视图文件的创建-view文件夹
主页面index.html

<!DOCTYPE html><html><head><meta charset="utf-8"><title>欢迎访问xx博客</title><!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>--><link rel="stylesheet" href="stylesheets/bootstrap.min.css" media="screen"><link rel="stylesheet" href="javascripts/sharejs/share.css"><script src="./jQuery/jquery-3.1.1.min.js"></script><script src="javascripts/bootstrap.min.js"></script><script src="javascripts/sharejs/share.js"></script><script src="javascripts/jquery.min.js"></script></head><body><div class="container"><div class="contain"><div class="barone"><div class="team-inf border-group">            <div class="team-name">Welcome to my blog!</div>        </div>        <div class="logo-group border-group">        <ul id="barone-imfor-switch"><li><a href="/login">登陆</a></li><li><a href="/register">注册</a></li><li>当前访问人数：<span id="acess-num"></span></li></ul>        </div>        <div class="team-intro border-group">           <form action="http://baidu.com" rol="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="请输入关键词" /> <button type="submit" class="btn btn-default">搜索</button> </div></form>     </div>    </div> <nav class = "navbar navbar-default" role = "navigation">          <ul class="nav navbar-nav">              <li class="active"><a href="#">网站首页</a></li>                <li><a href="/brandInternet">网站开发</a></li>                <li class="dropdown">                  <a href="/brandbogHome" class="dropdown-toggle" data-toggle = "dropdown">博客家园 <span class="caret"></span></a>                    <ul class="dropdown-menu">                      <li><a href="http://my.csdn.net/xiaobai_dreamWeaver">我的CSDN</a></li>                      <li><a href="https://github.com/lqdreaming">我的github</a></li>                      <li class="divider"></li>                      <li><a href="http://www.qdfuns.com/">W3c前端网</a></li>                      <li><a href="http://www.imooc.com/">慕课网</a></li>                  </ul>              </li>             <li><a href="/aboutMe">关于我</a></li>              <li><a href="/leaveMessage">留言板</a></li>          </ul>      </nav>  </div><div id="myCarousel" class="carousel slide">    <!-- 轮播（Carousel）指标 -->    <ol class="carousel-indicators">        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>        <li data-target="#myCarousel" data-slide-to="1"></li>        <li data-target="#myCarousel" data-slide-to="2"></li>    </ol>       <!-- 轮播（Carousel）项目 -->    <div class="carousel-inner">        <div class="item active">            <img src="./image/myCarouselImg.jpg" alt="First slide">            <div class="carousel-caption">标题 1</div>        </div>        <div class="item">            <img src="./image/myCarouselImg.jpg" alt="Second slide">            <div class="carousel-caption">标题 2</div>        </div>        <div class="item">            <img src="./image/myCarouselImg.jpg" alt="Third slide">            <div class="carousel-caption">标题 3</div>        </div>    </div>    <!-- 轮播（Carousel）导航 -->    <a class="carousel-control left" href="#myCarousel"         data-slide="prev">‹    </a>    <a class="carousel-control right" href="#myCarousel"         data-slide="next">›    </a></div><div class="content-ariticle"><!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" id="model-box" data-toggle="modal" data-target="#myModal">博客好文推荐</button><div class="article-main"><img class="pull-left" src="./image/myCarouselImg.jpg"><div class="pull-left" class="article-right"><div class="article-right-sort"><h3><a href="#">程序视界——聚焦程序员的职业规划与成长</a></h3><span class="glyphicon glyphicon-pencil pull-left article-right-sort-log"></span><p>做开发时间长了，遇见好多好玩儿的程序员。看看你躺枪了没。</p></div><div class="article-right-sort"><h3 ><a href="#">程序视界——聚焦程序员的职业规划与成长</a></h3><span class="glyphicon glyphicon-pencil pull-left  article-right-sort-log"></span><p>干开发时间长了，遇见好多好玩儿的程序员。看看你躺枪了没。</p></div><div class="article-right-sort"><h3><a href="#">程序视界——聚焦程序员的职业规划与成长</a></h3><span class="glyphicon glyphicon-pencil pull-left  article-right-sort-log"></span><p>干开发时间长了，遇见好多好玩儿的程序员。看看你躺枪了没。</p></div></div></div><!-- 模态框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel">博客好文 <a href="#">查看更多</a></h4></div><div class="modal-body">按下 ESC 按钮退出。</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog --></div><!-- /.modal --></div><div class="clearfix"></div><div class="journey-study"><div class="journey-btn"><button class="btn btn-success btn-lg" id="model-box" data-toggle="modal" data-target="#myModal-journey">学在旅途</button></div><div class="journey"><div class="journey-extra pull-left"><div class="journey-extra-guide"><div class="pull-left" style="background:#33FFFF";><a href="#">网站开发</a></div><div class="pull-left" style="background:#BDB76B ";><a href="#">博客好文</a></div><div class="pull-left" style="background:#F4A460";><a href="#">源码下载</a></div><div class="pull-left" style="background:green";><a href="#">学在路上</a></div><div class="pull-left" style="background:#D8BFD8";><a href="#">网站开发</a></div><div class="pull-left" style="background:#FFB6C1";><a href="#">网站开发</a></div></div><div class="journey-extra-word"><img src="./image/dailyWord.jpg"><p>从来不羡慕别人的优秀，因为自己也可以很优秀，保存一颗虚怀若谷的心！</p></div><div class="journey-extra-introuduce"><img class="pull-left" src="./image/blogtemplate.jpg"><span class="pull-left"><p>姓名：xx</p><p>职业：学生</p><p>爱好：前端开发</p><p>主页：www.xx.cn</p><p>学校：xx大学</p></span></div><div class="clearfix"></div><p class="journey-extra-commuication">前端交流QQ：xxxxxxx</p><div class="sns-share">    <div><a href="" class="qzone"><i class="icon iconfont icon-qzone"></i></a></div>    <div><a href="" class="qq"><i class="icon iconfont icon-qq"></i></a></div>    <div><a href="" class="weibo"><i class="icon iconfont icon-weibo"></i></a></div>    <div><a href="" class="wechat"><i class="icon iconfont icon-wechat"></i></a></div>    <div><a href="" class="douban"><i class="icon iconfont icon-douban"></i></a></div>    <div>    <a class="shareCount" href="#" title="累计分享1次">    <span class="glyphicon glyphicon-plus"></span>1</a>    </div></div><div class="journey-extra-post"><h5>技术交流</h5><p><span class="journey-extra-post-highlight">1</span><a href="#">如何在网页设计中留用空白</a></p><p><span class="journey-extra-post-highlight">2</span><a href="#">如何在网页设计中留用空白</a></p><p><span class="journey-extra-post-highlight">3</span><a href="#">如何在网页设计中留用空白</a></p><p><span class="journey-extra-post-lowlight">4</span><a href="#">如何在网页设计中留用空白</a></p><p><span class="journey-extra-post-lowlight">5</span><a href="#">如何在网页设计中留用空白</a></p><p><span class="journey-extra-post-lowlight">6</span><a href="#">如何在网页设计中留用空白</a></p><p><span class="journey-extra-post-lowlight">7</span><a href="#">如何在网页设计中留用空白</a></p><p><span class="journey-extra-post-lowlight">8</span><a href="#">如何在网页设计中留用空白</a></p><p><span class="journey-extra-post-lowlight">9</span><a href="#">如何在网页设计中留用空白</a></p><p><span class="journey-extra-post-lowlight">10</span><a href="#">如何在网页设计中留用空白</a></p></div><div class="journey-extra-post"><h5>点击排行</h5><p><span class="journey-extra-post-highlight">1</span><a href="#">如何在网页设计中留用空白</a></p><p><span class="journey-extra-post-highlight">2</span><a href="#">如何在网页设计中留用空白</a></p><p><span class="journey-extra-post-highlight">3</span><a href="#">如何在网页设计中留用空白</a></p><p><span class="journey-extra-post-lowlight">4</span><a href="#">如何在网页设计中留用空白</a></p><p><span class="journey-extra-post-lowlight">5</span><a href="#">如何在网页设计中留用空白</a></p><p><span class="journey-extra-post-lowlight">6</span><a href="#">如何在网页设计中留用空白</a></p><p><span class="journey-extra-post-lowlight">7</span><a href="#">如何在网页设计中留用空白</a></p><p><span class="journey-extra-post-lowlight">8</span><a href="#">如何在网页设计中留用空白</a></p><p><span class="journey-extra-post-lowlight">9</span><a href="#">如何在网页设计中留用空白</a></p><p><span class="journey-extra-post-lowlight">10</span><a href="#">如何在网页设计中留用空白</a></p></div></div><div class="journey-content pull-left"><div class="journey-content-one"><img class="pull-left" src="./image/journeyImage.jpg"><div class="journey-content-right"><p class="journey-content-title"><span class="glyphicon glyphicon-hand-right"></span><span class="journey-content-title-word">我的前端学习：个人心得</span></p><p class="journey-content-section">dedecms 5.7版本的后台登陆界面加入了织梦推广的广告，相信大部分使用dedecms程序的站长都不乐意自己的网站登陆页面出现别人的广告（见下图），去掉是必须。信大部分使用dedecms程序的站长都不乐意自己的网站登陆页面出现别人的广告（见下图），去掉是必须。信大部分使用dedecms程序的站长都不乐意自己的网站登陆页面出现别人的广告（见下图），去掉是必须。那么......</p><p><a href="#">阅读全文>></a></p><p class="journey-content-last"><i class="glyphicon glyphicon-bookmark" style="font-size:10px;"></i><span>时间：17-3-15</span><span>作者：某某</span><span class="pull-right">来源：<a class="journey-content-last-original" href="">某某某某</a></span></p></div></div><div class="journey-content-one"><img class="pull-left" src="./image/journeyImage.jpg"><div class="journey-content-right"><p class="journey-content-title"><span class="glyphicon glyphicon-hand-right"></span><span class="journey-content-title-word">我的前端学习：个人心得</span></p><p class="journey-content-section">dedecms 5.7版本的后台登陆界面加入了织梦推广的广告，相信大部分使用dedecms程序的站长都不乐意自己的网站登陆页面出现别人的广告（见下图），去掉是必须。信大部分使用dedecms程序的站长都不乐意自己的网站登陆页面出现别人的广告（见下图），去掉是必须。信大部分使用dedecms程序的站长都不乐意自己的网站登陆页面出现别人的广告（见下图），去掉是必须。那么......</p><p><a href="#">阅读全文>></a></p><p class="journey-content-last"><i class="glyphicon glyphicon-bookmark" style="font-size:10px;"></i><span>时间：17-3-15</span><span>作者：某某</span><span class="pull-right">来源：<a class="journey-content-last-original" href="">某某某某</a></span></p></div></div><div class="journey-content-one"><img class="pull-left" src="./image/journeyImage.jpg"><div class="journey-content-right"><p class="journey-content-title"><span class="glyphicon glyphicon-hand-right"></span><span class="journey-content-title-word">我的前端学习：个人心得</span></p><p class="journey-content-section">dedecms 5.7版本的后台登陆界面加入了织梦推广的广告，相信大部分使用dedecms程序的站长都不乐意自己的网站登陆页面出现别人的广告（见下图），去掉是必须。信大部分使用dedecms程序的站长都不乐意自己的网站登陆页面出现别人的广告（见下图），去掉是必须。信大部分使用dedecms程序的站长都不乐意自己的网站登陆页面出现别人的广告（见下图），去掉是必须。那么......</p><p><a href="#">阅读全文>></a></p><p class="journey-content-last"><i class="glyphicon glyphicon-bookmark" style="font-size:10px;"></i><span>时间：17-3-15</span><span>作者：某某</span><span class="pull-right">来源：<a class="journey-content-last-original" href="">某某某某</a></span></p></div></div><div class="journey-content-one"><img class="pull-left" src="./image/journeyImage.jpg"><div class="journey-content-right"><p class="journey-content-title"><span class="glyphicon glyphicon-hand-right"></span><span class="journey-content-title-word">我的前端学习：个人心得</span></p><p class="journey-content-section">dedecms 5.7版本的后台登陆界面加入了织梦推广的广告，相信大部分使用dedecms程序的站长都不乐意自己的网站登陆页面出现别人的广告（见下图），去掉是必须。信大部分使用dedecms程序的站长都不乐意自己的网站登陆页面出现别人的广告（见下图），去掉是必须。信大部分使用dedecms程序的站长都不乐意自己的网站登陆页面出现别人的广告（见下图），去掉是必须。那么......</p><p><a href="#">阅读全文>></a></p><p class="journey-content-last"><i class="glyphicon glyphicon-bookmark" style="font-size:10px;"></i><span>时间：17-3-15</span><span>作者：某某</span><span class="pull-right">来源：<a class="journey-content-last-original" href="">某某某某</a></span></p></div></div></div><div class="modal fade" id="myModal-journey" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel">旅途分享 <a href="#">查看更多</a></h4></div><div class="modal-body">按下 ESC 按钮退出。</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog --></div><!-- /.modal --></div></div><div class="clearfix"></div><div class="footer"><div class="foot-sepreate"></div><div class="foot-content"><div class="foot-content-left pull-left"><h5>关于我</h5><ul><li><a href="#">个人博客</a></li><li><a href="#">自我告白</a></li><li><a href="#">给我留言</a></li></ul></div><div class="foot-content-main pull-left"><h5>友情链接</h5><ul><li><a href="#">W3c前端网</a></li><li><a href="#">百度技术学院</a></li><li><a href="#">慕课网</a></li><li><a href="#">CSDN博客</a></li><li><a href="#">站长之家</a></li><li><a href="#">网站模板</a></li><li><a href="#">万维网</a></li><li><a href="#">牛客网</a></li><li><a href="#">前端俱乐部</a></li><li><a href="#">小松博客</a></li></ul></div><div class="foot-content-right pull-left"><h5>我们在路上</h5><p>17年某月某日 搭建第一个网站</p><p>17年3月14日 开始做个人博客</p><p>16年6月6日 开始接触前端</p></div></div><div class="footer-band"><p>本站采用创作共用版权 CC BY-NC-ND/2.5/CN 许可协议 鄂ICP备00000000号-0</p></div></div></div><script>$(function(){var caution = false;function setCookie(name, value, expires, path, domain, secure) {        var curCookie = name + "=" + escape(value) +                ((expires) ? "; expires=" + expires.toGMTString() : "") +                ((path) ? "; path=" + path : "") +                ((domain) ? "; domain=" + domain : "") +                ((secure) ? "; secure" : "")        if (!caution || (name + "=" + escape(value)).length <= 4000)                document.cookie = curCookie        else                if (confirm("Cookie exceeds 4KB and will be cut!"))                        document.cookie = curCookie}function getCookie(name) {        var prefix = name + "="        var cookieStartIndex = document.cookie.indexOf(prefix)        if (cookieStartIndex == -1)                return null        var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length)        if (cookieEndIndex == -1)                cookieEndIndex = document.cookie.length        return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex))}function deleteCookie(name, path, domain) {        if (getCookie(name)) {                document.cookie = name + "=" +                 ((path) ? "; path=" + path : "") +                ((domain) ? "; domain=" + domain : "") +                "; expires=Thu, 01-Jan-70 00:00:01 GMT"        }}function fixDate(date) {        var base = new Date(0)        var skew = base.getTime()        if (skew > 0)                date.setTime(date.getTime() - skew)}var now = new Date()fixDate(now)now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000)var visits = getCookie("counter")if (!visits)        visits = 1else        visits = parseInt(visits) + 1setCookie("counter", visits, now)console.log(visits);        $('#acess-num').html(visits);    });$('.sns-share').share();</script></body></html>

注册register.html

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>个人注册</title><!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>--><link rel="stylesheet" href="stylesheets/bootstrap.min.css" media="screen"></head><body><div class="container"><h4>注册新用户</h4><h5>新用户请在这里注册<small class="pull-right"><strong>返回到</strong><span class="label"><a href="/index">首页</a></span></small></h5><form role="form" method="post" class="form-horizonta" onsubmit="return false"><div class="form-group has-feedback"><label class="control-label" for="username">用户名</label><input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required></div><div class="form-group has-feedback"><label class="control-label" for="password">密 码</label><input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required></div><div class="form-group has-feedback"><label class="col--md-1 control-label" for="password">确认密码</label><input type="password" class="form-control" id="password1" name="password1" placeholder="请确认您的密码"  required></div><input type="submit" id="register1" class="btn btn-success btn-sm" value="完成"><span><button type="submit" class="btn btn-primary btn-xs pull-right" id="login1"><strong>登陆</strong></button><strong class="pull-right">已有账号</strong></span></form></div><script type="text/javascript" src="javascripts/jquery.min.js"></script><script type="text/javascript" src="javascripts/bootstrap.min.js"></script><script type="text/javascript">$(function(){ $("#login1").click(function(){ location.href = 'login'; //登录});$("#register1").click(function(){ var username = $("#username").val();var password = $("#password").val();var password1 = $("#password1").val();if(password !== password1){   //密码错误$("#password").css("border","1px solid red");$("#password1").css("border","1px solid red");}else if(password === password1){var data = {"uname":username,"upwd":password}; //数据-用户名与密码

//注册-请求-存储data$.ajax({ url: '/register',type: 'post',data: data,success: function(data,status){ if(status == 'success'){ location.href = 'login'; //注册成功}},error: function(data,err){ location.href = 'register';  //注册失败}}); }});});</script></body></html>

登录login.html

<!DOCTYPE html></head><body><div class="container"><div class="containblock"><form  class="well" role="form" method="post" onsubmit="return false"><h2>Login</h2><div class="form-group has-feedback"><label class="col-md-1 control-label" for="username">用户名</label><div class="col-md-6"><span class="glyphicon glyphicon-user form-control-feedback"></span><input type="text" class="form-control" id="username" name="username" placeholder="用户名" required></div></div><div class="form-group has-feedback"><label class="col-md-1 control-label" for="password">密　码</label><div class="col-md-6"><span class="glyphicon glyphicon-lock form-control-feedback"></span><input type="password" class="form-control" id="password" name="password" placeholder="密码" required></div></div><div class="form-group has-feedback"><button type="submit" id="login0" class="btn btn-info"><strong>login</strong></button><button type="button" class="btn btn-link" id="register0"><strong>register</strong></button></div><span id="qq_login_btn"></span> </form><div class="loader">      <span></span>      <span></span>      <span></span>      <span></span>      <span></span>  </div> </div></div><script type="text/javascript">    $(function(){         $("#register0").click(function(){             location.href = 'register';  // 注册        });        $("#login0").click(function(){             var username = $("#username").val();            var password = $("#password").val();            var data = {"uname":username,"upwd":password};            // console.log(data);
// 登录请求-服务端进行验证            $.ajax({                 url:'/login',                type:'post',                data: data,                success: function(data,status){                     if(status == 'success'){                         location.href = 'home1';  // 成功                    }                },                error: function(data,status){                     if(status == 'error'){                     console.log(error);                        location.href = 'login';  // 失败                    }                }            });        });    });</script> <script type="text/javascript">  　QC.Login({             // 按默认样式插入QQ登录按钮  btnId:"qq_login_btn"    // 插入按钮的节点id  　});  </script> </body></html>
留言板messageBoard
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width,initial-scale=1.0">    <title>留言板</title>    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>-->    <link rel="stylesheet" href="stylesheets/bootstrap.min.css" media="screen">     <link rel="stylesheet" href="javascripts/sharejs/share.css"></head><body><div class="container">    <div class="contain">        <div class="barone">            <div class="team-inf border-group">                <div class="team-name">Welcome to my blog!</div>            </div>            <div class="logo-group border-group">                <ul>                    <li>Your name:<a href="/login" name="username" id="username" required><%-user.name%></a></li>                    <li><a href="/index">注销登陆</a></li>                    <li><a href="/register">注册</a></li>                    <li>当前访问人数：<span>0</span></li>                </ul>            </div>         </div>        <nav class = "navbar navbar-default" role = "navigation">              <ul class="nav navbar-nav">                  <li><a href="/index">网站首页</a></li>                  <li><a href="/brandInternet">网站开发</a></li>                    <li class="dropdown">                      <a href="/brandbogHome" class="dropdown-toggle" data-toggle = "dropdown">博客家园 <span class="caret"></span></a>                            <ul class="dropdown-menu">                          <li><a href="http://my.csdn.net/xiaobai_dreamWeaver">我的CSDN</a></li>                          <li><a href="https://github.com/lqdreaming">我的github</a></li>                          <li class="divider"></li>                          <li><a href="http://www.qdfuns.com/">W3c前端网</a></li>                          <li><a href="http://www.imooc.com/">慕课网</a></li>                      </ul>                  </li>                 <li><a href="/aboutMe">关于我</a></li>                  <li class="active"><a href="#">留言板</a></li>             </ul>          </nav>      </div>    <div class="clearfix"></div>    <div class="brand-head">            <p>            <span class="pull-left">您当前的位置：<a href="/index">首页</a><a href="#">>留言板</a></span>                    <form action="http://baidu.com" rol="search" class="team-intro border-group pull-right">                        <input type="text" class="form-control-inline pull-left" placeholder="请输入关键词" />                        <button type="submit" class="btn btn-default pull-left">搜索</button>                </form>                  </p>        <div class="clearfix"></div>              <h3 class="t_nav">你，并不是我生命中匆匆而逝的过客，留下一片足迹，我们永远都在。</h3>            <h4><a href="/messageBoard" class="n2">留言版</a></h4>        <div class="ui minimal comments">          <form class="ui reply form" method="post" onsubmit="return false">            <div class="field">              <textarea name="content" id="content" style="width:900px;height:150px;" required></textarea>            </div>            <input style="margin-top:5px; " type="submit" id="mes" class="btn btn-sm btn-info" value="留言" />          </form>        </div>        <div id="mesage">            <div id="mess">                <p id="mess-con"></p>                <p id="mess-extra"><span id="mess-date"></span><span id="mess-name"></span></p>            </div>        </div>    </div>    <div class="footer-band">        <p>博客已稳定运行 <span></span> | <a href="/sitemap.html" target="_blank">网站地图</a></p>        <p>Design 2017-2019 @ <a title="刘琦欢迎您的来访,希望您再次光临！" href="/index" target="_blank">刘琦个人博客</a> 保留所有权利 蜀ICP备15036389号            <!--<script src="https://s4.cnzz.com/z_stat.php?id=1259183793&web_id=1259183793" language="JavaScript"></script>-->        </p>    </div></div>    <script type="text/javascript" src="javascripts/jquery.min.js"></script>    <script type="text/javascript" src="javascripts/bootstrap.min.js"></script>    <script src="javascripts/sharejs/share.js"></script><script>$(function(){ 
// 留言    $("#mes").click(function(){         var content = $("#content").val();        var username = $("#username").html();        var date=CurentTime();        // console.log(date);
// 留言的三个数据        var data = {"uname":username,"ucon":content,"udate":date};        $.ajax({             url: '/messageBoard',            type: 'post',            data: data,            success: function(data,status){                 if(status == 'success'){                     //location.href = 'messageBoard';                    $('#mes-con').innerHTML=content;                     $('#mes-date').innerHTML=date;                      $('#mes-name').innerHTML=username;                }            }            error: function(data,err){                    alert(err);            }        });     });    function CurentTime(){         var now = new Date();        var year = now.getFullYear();       //年        var month = now.getMonth() + 1;     //月        var day = now.getDate();            //日        var hh = now.getHours();            //时        var mm = now.getMinutes();          //分        var clock = year + "-";        if(month < 10)            clock += "0";        clock += month + "-";        if(day < 10)            clock += "0";          clock += day + " ";        if(hh < 10)            clock += "0";          clock += hh + ":";        if (mm < 10) clock += '0';         clock += mm;         return(clock);     }     });</script></body></html>
3.服务端nodejs+express-app.js
var express = require('express');  // express模块引入var path = require('path');var favicon = require('serve-favicon');var logger = require('morgan');var cookieParser = require('cookie-parser');var bodyParser = require('body-parser');var multer = require('multer');var mongoose = require('mongoose'); //数据库引入var session = require('express-session');var routes = require('./routes/index');var users = require('./routes/users');global.dbHandel = require('./database/dbHandel');  //数据库文件引入global.db = mongoose.connect("mongodb://localhost:27017/simpleBlog");  //链接数据库var app = express();
//存储的信息app.use(session({ secret: 'secret',cookie:{ maxAge: 1000*60*30}}));// view engine setup-更换了模板引擎，才可以使用.htmlapp.set('views', path.join(__dirname, 'views'));app.engine("html",require("ejs").__express); // or   app.engine("html",require("ejs").renderFile);//app.set("view engine","ejs");app.set('view engine', 'html');// uncomment after placing your favicon in /public//app.use(favicon(__dirname + '/public/favicon.ico'));app.use(logger('dev'));app.use(bodyParser.json());app.use(bodyParser.urlencoded({ extended: true }));app.use(multer());app.use(cookieParser());app.use(express.static(path.join(__dirname, 'public')));app.use(function(req,res,next){ res.locals.user = req.session.user;var err = req.session.error;delete req.session.error;res.locals.message = "";if(err){ res.locals.message = '<div class="alert alert-danger" style="margin-bottom:20px;color:red;">'+err+'</div>';}next();});app.use('/', routes);  // 设置路由app.use('/users', users); // 即为为路径 /users 设置路由app.use('/login',routes); // 即为为路径 /login 设置路由app.use('/register',routes); // 即为为路径 /register 设置路由app.use('/home1',routes); // 即为为路径 /home 设置路由app.use("/logout",routes); // 即为为路径 /logout 设置路由app.use("/messageBoard1",routes); // 即为为路径 /logout 设置路由app.use("/index",routes); // 即为为路径 /logout 设置路由// catch 404 and forward to error handlerapp.use(function(req, res, next) {  var err = new Error('Not Found');  err.status = 404;  next(err);});// error handlers// development error handler// will print stacktraceif (app.get('env') === 'development') {  app.use(function(err, req, res, next) {    res.status(err.status || 500);    res.render('error', {      message: err.message,      error: err    });  });}// production error handler// no stacktraces leaked to userapp.use(function(err, req, res, next) {  res.status(err.status || 500);  res.render('error', {    message: err.message,    error: {}  });});module.exports = app;

routes文件夹
index.js
var express = require('express');var router = express.Router();/* GET index page. */router.get('/index', function(req, res,next) {  res.render('index', { title: 'Express' });    // 到达此路径则渲染index文件，并传出title值供 index.html使用});/* GET login page. */router.route("/login").get(function(req,res){    // 到达此路径则渲染login文件，并传出title值供 login.html使用res.render("login",{title:'login'});}).post(function(req,res){    // 从此路径检测到post方式则进行post数据的处理操作//get User info //这里的User就是从model中获取user对象，通过global.dbHandel全局方法（这个方法在app.js中已经实现)var User = global.dbHandel.getModel('user');  var uname = req.body.uname;var upwd = req.body.upwd;//获取post上来的 data数据中 uname的值User.findOne({name:uname},function(err,doc){   //通过此model以用户名的条件 查询数据库中的匹配信息if(err){ //错误就返回给原post处（login.html) 状态码为500的错误res.send(500);console.log(err);}else if(!doc){ //查询不到用户名匹配信息，则用户名不存在req.session.error = '用户名不存在';res.send(404);//状态码返回404console.log( '用户名不存在');//res.redirect("/login");}else{ console.log(doc);if(req.body.upwd != doc.password){ //查询到匹配用户名的信息，但相应的password属性不匹配req.session.error = "密码错误";res.send(404);//res.redirect("/login");}else{ //信息匹配成功，则将此对象（匹配到的user) 赋给session.user  并返回成功req.session.user = doc;res.send(200);//res.redirect("/home");}}});});router.route("/aboutMe").get(function(req,res){    // 到达此路径则渲染register文件，并传出title值供 register.html使用res.render("aboutMe",{title:'aboutMe'});});router.route("/brandInternet").get(function(req,res){    // 到达此路径则渲染register文件，并传出title值供 register.html使用res.render("brandInternet",{title:'brandInternet'});});router.route("/brandbogHome").get(function(req,res){    // 到达此路径则渲染register文件，并传出title值供 register.html使用res.render("brandbogHome",{title:'brandbogHome'});});router.route("/leaveMessage").get(function(req,res){  var contents = global.dbHandel.getModel('content'); contents.find({},function(err,data){ res.render('leaveMessage',{title:'leaveMessage',data:data});});        //已登录则渲染leaveMessage页面}).post(function(req,res){  //这里的User就是从model中获取user对象，通过global.dbHandel全局方法（这个方法在app.js中已经实现)var contents = global.dbHandel.getModel('content');var User = global.dbHandel.getModel('user');var uname = req.body.uname;var ucon = req.body.ucon;var udate = req.body.udate;User.findOne({name:uname},function(err,doc){   // 同理 /login 路径的处理方式if(err){ res.send(500);req.session.error =  '网络异常错误！';console.log(err);}else if(!doc){ req.session.error = '请先登录！';res.send(500);console.log('请先登录');}else{ contents.create({ // 创建一组user对象置入modelname: uname,comment:ucon,date:udate},function(err,doc){  if (err) {                        res.send(500);                        console.log(err);                    } else {                        req.session.error = '评论成功！';                        res.send(JSON.stringify(doc));                    }                  });}})});/* GET home page. */router.get("/home1",function(req,res){ if(!req.session.user){ //到达/home路径首先判断是否已经登录req.session.error = "请先登录"res.redirect("/login");//未登录则重定向到 /login 路径}res.render("home1",{title:'Home'});         //已登录则渲染home页面});router.route("/register").get(function(req,res){    // 到达此路径则渲染register文件，并传出title值供 register.html使用res.render("register",{title:'register'});}).post(function(req,res){  //这里的User就是从model中获取user对象，通过global.dbHandel全局方法（这个方法在app.js中已经实现)var User = global.dbHandel.getModel('user');var uname = req.body.uname;var upwd = req.body.upwd;User.findOne({name: uname},function(err,doc){   // 同理 /login 路径的处理方式if(err){ res.send(500);req.session.error =  '网络异常错误！';console.log(err);}else if(doc){ req.session.error = '用户名已存在！';res.send(500);}else{ User.create({ // 创建一组user对象置入modelname: uname,password: upwd},function(err,doc){  if (err) {                        res.send(500);                        console.log(err);                    } else {                        req.session.error = '用户名创建成功！';                        res.send(200);                    }                  });}});});/* GET logout page. */router.get("/logout",function(req,res){    // 到达 /logout 路径则登出， session中user,error对象置空，并重定向到根路径req.session.user = null;req.session.error = null;res.redirect("/index");});module.exports = router;
users.js
var express = require('express');var router = express.Router();/* GET users listing. */router.get('/', function(req, res, next) {  res.send('respond with a resource');});module.exports = router;

阅读全文

1 0