1 引言 4
1.1 课题背景 4
1.2课题意义 4
2相关技术简介 6
2.1 html技术 6
2.2 css技术 6
2.3 JavaScript 6
2.4 JQuery 6
2.5 Vue 7
2.6 MySQL技术 7
2.7 node.js技术 7
3需求分析 8
3.1 系统功能 8
3.2 系统开发环境 8
3.3功能性需求分析 8
3.3.1用户系统 8
3.3.2 文章系统 8
3.3.3 评论系统 8
4 系统设计 9
4.1 用户登录注册 9
4.2 用户评论 10
4.3 数据库设计 11
5 系统实现 14
5.1 首页 14
5.2 梦感觉 15
5.3 梦探索 16
5.4梦思想 17
5.5梦画板 17
6 结论 18
7 致谢 19
3需求分析
3.1 系统功能
该项目主要是为用户提供一个平台，用于向其展示文章。
（1）用户注册登录功能
（2）首页模块，简单呈现网站所有模块
（3）梦感觉模块，展示各类文章
（4）梦探索模块，展示各类离奇事件
（5）梦思想模块，以标签的方式呈现给用户优质思想
（6）梦画板模块，提供绘画功能
3.2 系统开发环境
（1） 开发工具 ： webstorm，photoshop
（2） 前台开发语言 ： html，css，JavaScript
（3） 后台开发语言 ： node 6.7.0
（4） 数据库 ： Apache环境下MySQL
（5） 项目演示 ： chrome浏览器
3.3功能性需求分析
3.3.1用户系统
用户的注册登录功能，注册设置限制条件，如用户名和密码长度
3.3.2 文章系统
录入各类文章，不同文章不同处理，梦感觉界面文章保存其文章名称、图片、作者以及内容，梦思想界面保存用户名称和用户思想短句。
3.3.3 评论系统
根据用户的id和文章的id保存评论，再在页面加以显示。
4 系统设计
4.1 用户登录注册
注册功能，用户名不能为空，不能少于3位，长度不能超过12位，密码不能为空，只能由数字和字母组成，本文转载自http://www.biyezuopin.vip/onews.asp?id=15070长度不能少于8位，不能超过15位。确认密码必须和密码 一致。每条判断均有对应的错误提示。
登录功能，用户名不能为空，数据库应有相应的用户，密码不能为空，不能填写错误。登录成功后页面自动显示用户登录状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>晨星梦语</title>
<link rel="stylesheet" href="lib/animate.min.css">
<link rel="stylesheet" href="lib/swiper-3.4.1.min.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/home.css">
<link rel="stylesheet" href="lib/sweet-alert.css">
<!--[if IE]>
<script src="lib/html5.js"></script>
<![endif]-->
<script src="lib/jquery-3.1.0.js"></script>
<!--<script src="lib/swiper-3.4.1.jquery.min.js"></script>-->
<script src="lib/md5.min.js"></script>
<script src="lib/sweet-alert.js"></script>
</head>
<body>
<header>
<div class="logo"><a href="/page/index"><img src="images/logo.png" alt="晨星梦语"></a></div>
<div class="nav">
<ul>
<li><a href="/page/index">首页</a></li>
<li><a href="/page/feel">梦感觉</a></li>
<li><a href="/page/explore">梦探索</a></li>
<li><a href="/page/idea">梦思想</a></li>
<li><a href="/page/drawBoard">梦画板</a></li>
</ul>
</div>
</header>
<main>
<div class="container-left">
<div class="img-title">
<img src="images/index-title.gif" alt="">
</div>
<div class="image-switch">
<div class="image-switch-frame"></div>
<div class="pre-image">
<ul>
<li title="你那里下雨了吗。">
<a target="_blank" href="/page/feel/article?39">
<img src="images/switch1.jpg" alt="">
<div class="img-content">
<div class="img-content-title fontBolder">你那里下雨了吗。</div>
<div class="img-content-contents ellipsis"></div>
</div>
</a>
</li>
<li title="山风">
<a target="_blank" href="/page/feel/article?40">
<img src="images/switch2.jpg" alt="">
<div class="img-content">
<div class="img-content-title fontBolder">山风</div>
<div class="img-content-contents ellipsis">山风无归处，缥缈山峦间。初时没有形状，没有方向想看长江、大河想看所谓人间世事无常
</div>
</div>
</a>
</li>
<li title="达岸各自归">
<a target="_blank" href="/page/feel/article?41">
<img src="images/switch3.jpg" alt="">
<div class="img-content">
<div class="img-content-title fontBolder">达岸各自归</div>
<div class="img-content-contents ellipsis">
最近在微博上看到这样一句话，与君同舟渡，达岸各自归。在一张白纸上用带着锋利笔锋的字体书写着。
</div>
</div>
</a>
</li>
<li title="岁月的味道">
<a target="_blank" href="/page/feel/article?42">
<img src="images/switch4.jpg" alt="">
<div class="img-content">
<div class="img-content-title fontBolder">岁月的味道</div>
<div class="img-content-contents ellipsis">下过雨的天空 你是否看到了彩虹 岁月走的匆匆
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="list-title">
<span class="fontBolder">梦感觉·探索</span>(<a target="_blank" href="/page/feel">更多</a>)
</div>
<div class="list-article">
<ul class="clearfix">
<li>
<a target="_blank" href="/page/feel/article?43">
<img class="reduce-opacity" src="images/article/articleImage1.jpg" alt="">
</a>
<a target="_blank" href="/page/feel/article?43">
<p class="title fontBolder">《孤独的林荫》</p>
</a>
<p class="content">
我的心，是一片荒芜。居住着一个没有领土的国王，安静的时候，羸弱的风一同呼吸着，瘦小的鸦一同陪伴着。他苍老的脸上，没有失落，也没有忧愁。像一个经历沧桑的老树一般屹立。</p>
</li>
<li>
<a target="_blank" href="/page/feel/article?44">
<img class="reduce-opacity" src="images/article/articleImage2.jpg" alt="">
</a>
<a target="_blank" href="/page/feel/article?44">
<p class="title fontBolder">它的名字叫大海</p>
</a>
<p class="content">
莫非/于壹叁年十贰月十肆日每个人，将相同。都有一个家，无边无际。且，他不爱你，你不爱他。天将降大雨，阴冷冷灰霾霾，苍茫如你，黑影交加。我提灯而行，你款款而来。灰白苍穹，如你五彩的脸。染</p>
</li>
<li>
<a target="_blank" href="/page/feel/article?45">
<img class="reduce-opacity" src="images/article/articleImage3.jpg" alt="">
</a>
<a target="_blank" href="/page/feel/article?45">
<p class="title fontBolder">岁月静好</p>
</a>
<p class="content">
岁月静好回顾往事的一幕幕,生命好像一场漫长的电影,只是不停的更换主角.夜,很静,月,很冷。以前的我总是好胜，喜欢去争取那些不属于我或者说不会长久的属于我的东西，付出很多努力，很多精力，最后也只</p>
</li>
<li>
<a target="_blank" href="/page/feel/article?46">
<img class="reduce-opacity" src="images/article/articleImage4.jpg" alt="">
</a>
<a target="_blank" href="/page/feel/article?46">
<p class="title fontBolder">纯粹的东西</p>
</a>
<p class="content">
如果在山顶，我可以清楚地看到那璀璨的黑夜是如何对着成蓝到透明发亮的白昼，清晰的感觉到太阳从西半球的那一端渐渐将光芒扑向子午线外的东半球，如同那泛黄的日历，翻开了新的一页。但我在市区</p>
</li>
<li>
<a target="_blank" href="/page/feel/article?47">
<img class="reduce-opacity" src="images/article/articleImage5.jpg" alt="">
</a>
<a target="_blank" href="/page/feel/article?47">
<p class="title fontBolder">人在囧途</p>
</a>
<p class="content">
前些日子回家，恰巧碰上了暴风雪。下午在火车站附近的肯德基吃些东西消磨时间，对面坐过来一个女孩，笑着同我打招呼，聊着聊着才知道是同校的学妹，她说她来接站，从下午四点一直等到现在，她说马路上的公</p>
</li>
<li>
<a target="_blank" href="/page/feel/article?48">
<img class="reduce-opacity" src="images/article/articleImage6.jpg" alt="">
</a>
<a target="_blank" href="/page/feel/article?48">
<p class="title fontBolder">中文VS英文</p>
</a>
<p class="content">
同样站在超市门口拍一张照，若背景是“超市”两个大字，一定觉得十分城乡结合部，气质瞬间屌丝了是不是？若背景是“supermarket”，是不是立马觉得高端了？人也洋气了？中文，只要不是文盲，所</p>
</li>
<li>
<a target="_blank" href="/page/feel/article?49">
<img class="reduce-opacity" src="images/article/articleImage7.jpg" alt="">
</a>
<a target="_blank" href="/page/feel/article?49">
<p class="title fontBolder">60后母亲</p>
</a>
<p class="content">
90后的我们，母亲大多是60后。60后的母亲是伟大的，艰辛的，90初的我们，出生在浩浩荡荡的计划生育大扫荡中。那一天，和伙伴们讨论关于出生的那点事。A说，我妈自己骑自行车去的医</p>
</li>
<li>
<a target="_blank" href="/page/feel/article?50">
<img class="reduce-opacity" src="images/article/articleImage8.jpg" alt="">
</a>
<a target="_blank" href="/page/feel/article?50">
<p class="title fontBolder">送礼初体验</p>
</a>
<p class="content">
一件事情，如果不做并不会给自己造成大碍，做了也不会给自己带来多大的好处。但是心里明白，从礼节上、道义上、人情上、哪怕是为了表现一下自己愉悦一下别人，这件事还是应该做的。那，就不要含糊，果断地去做吧</p>
</li>
</ul>
</div>
<div class="list-title">
<span class="fontBolder">梦探索</span>(<a target="_blank" href="/page/explore">更多</a>)
</div>
<div class="list-group ">
<ul>
<li>
<a target="_blank" href="/page/explore/article?1"><img class="reduce-opacity" src="images/explore/11-160216140G21Q.jpg" alt=""></a>
<div class="group-content">
<a target="_blank" href="/page/explore/article?1"><p class="title ellipsis">真有起死回生吗？</p></a>
<p class="content ellipsis">死亡对大多数人来说通常是一个恐怖的话题</p>
</div>
</li>
<li>
<a target="_blank" href="/page/explore/article?2"><img class="reduce-opacity" src="images/explore/11-16021013055N59.png" alt=""></a>
<div class="group-content">
<a target="_blank" href="/page/explore/article?2"><p class="title ellipsis">日本最美的五官！都在哪些女人身上 </p></a>
<p class="content ellipsis">最近，日本ORICON网站发起了一次全民票选</p>
</div>
</li>
<li class="swiper-slide">
<a target="_blank" href="/page/explore/article?3"><img class="reduce-opacity" src="images/explore/14-16020G31P95B.jpg" alt=""></a>
<div class="group-content">
<a target="_blank" href="/page/explore/article?3"><p class="title ellipsis">人们为何会信灵魂存在？真相信不信由你</p></a>
<p class="content ellipsis">各种文化背景下的许多人都相信，灵魂是以这种或那种形式存在。</p>
</div>
</li>
<li>
<a target="_blank" href="/page/explore/article?4"><img class="reduce-opacity" src="images/explore/14-16022214242H21.jpg" alt=""></a>
<div class="group-content">
<a target="_blank" href="/page/explore/article?4"><p class="title ellipsis">深入解密“鬼压床”为何传说女鬼颇多？</p></a>
<p class="content ellipsis">世上本无鬼，人不可能见到鬼</p>
</div>
</li>
<li>
<a target="_blank" href="/page/explore/article?5"><img class="reduce-opacity" src="images/explore/14-160305153345618.jpg" alt=""></a>
<div class="group-content">
<a target="_blank" href="/page/explore/article?5"><p class="title ellipsis">人类祖先竟是外星来客？</p></a>
<p class="content ellipsis">人类是通过猿类进化而来，还是根本就是外星来客?</p>
</div>
</li>
</ul>
<img src="images/group.jpg" alt="" class="img-group">
</div>
<div class="list-title">
<span class="fontBolder">梦语成书</span>(<a href="#">更多</a>)
</div>
<div class="list-book">
<div class="left">
<div class="title"><p>梦书一角</p></div>
<ul>
<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>
<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>
<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>
<li><a href="#">《我时尚的日子》</a></li>
<li><a href="#">《杂忆录》</a></li>
</ul>
</div>
<div class="right">
<img src="images/mengBook.jpg" alt="">
</div>
</div>
</div>
<div class="container-right">
<div class="join-us-title"><a href="javascript:;">加入晨梦>>注册</a></div>
<div class="signIn-box">
<div class="signIn-temp">
<h4>登录：</h4>
<ul>
<li><label><span>账号：</span><input type="text" id="account" placeholder="请输入账号"></label></li>
<li><label><span>密码：</span><input type="password" id="password" placeholder="请输入密码"></label></li>
</ul>
<div class="remember-and-login">
<div class="remember">
<!--<i class="checked"></i><span>记住密码</span>-->
<a href="javascript:;">登录</a>
</div>
</div>
<div class="other-mode-login">
<span>其他账号登录：</span>
<i class="fenxiang-icon fenxiang-xinlang"></i>
<i class="fenxiang-icon fenxiang-qq"></i>
<i class="fenxiang-icon fenxiang-renren"></i>
</div>
</div>
<div class="show-user-info">
<div class="avatar"></div>
<p class="user-info">用户名:<span class="user-name ellipsis"></span></p>
<a class="exit-login" href="javascript:;">退出登录</a>
</div>
</div>
<div class="list-title">
<span class="fontBolder">思想</span>(<a href="/page/idea">更多</a>)
</div>
<div class="comments">
<ul>
<li class="clearfix">
<div class="avatar"><img src="images/avatar/feel/s_14223253837551.jpg" alt="" class="reduce-opacity"></div>
<div class="details">
<span class="use-name">稔</span>:
<span class="user-comment">人生舞台的大幕随时都可能拉开，关键是你愿意表演，还是选择躲避。
</span>
<p class="comment-time">7月4日 04:10</p>
</div>
</li>
<li class="clearfix">
<div class="avatar"><img src="images/avatar/feel/s_13465695254135.jpg" alt="" class="reduce-opacity"></div>
<div class="details">
<span class="use-name">LAINKAIOVE</span>:
<span class="user-comment">能把在面前行走的机会抓住的人，十有八九都会成功。</span>
<p class="comment-time">2月6日 01:25</p>
</div>
</li>
<li class="clearfix">
<div class="avatar"><img src="images/avatar/feel/s_13900541404147.jpg" alt="" class="reduce-opacity"></div>
<div class="details">
<span class="use-name">Honey.</span>:
<span class="user-comment">人生没有什么不可能，有的只是自身的懦弱</span>
<p class="comment-time">9月6日 03:10</p>
</div>
</li>
<li class="clearfix">
<div class="avatar"><img src="images/avatar/feel/s_14223253837551.jpg" alt="" class="reduce-opacity"></div>
<div class="details">
<span class="use-name">稔</span>:
<span class="user-comment">有志者自有千计万计，无志者只感千难万难。</span>
<p class="comment-time">5月4日 16:10</p>
</div>
</li>
<li class="clearfix">
<div class="avatar"><img src="images/avatar/feel/s_13922926404565.jpg" alt="" class="reduce-opacity"></div>
<div class="details">
<span class="use-name">Eva&</span>:
<span class="user-comment">千万人的失败，都有是失败在做事不彻底，往往做到离成功尚差一步就终止不做了。</span>
<p class="comment-time">10月1日 12:12</p>
</div>
</li>
<li class="clearfix">
<div class="avatar"><img src="images/avatar/feel/s_13460302186669.jpg" alt="" class="reduce-opacity"></div>
<div class="details">
<span class="use-name">灰色毛衣</span>:
<span class="user-comment">再长的路，一步步也能走完，再短的路，不迈开双脚也无法到达。</span>
<p class="comment-time">3月16日 11:10</p>
</div>
</li>
<li class="clearfix">
<div class="avatar"><img src="images/avatar/feel/s_14223253837551.jpg" alt="" class="reduce-opacity"></div>
<div class="details">
<span class="use-name">稔</span>:
<span class="user-comment">人生舞台的大幕随时都可能拉开，关键是你愿意表演，还是选择躲避。</span>
<p class="comment-time">12月6日 01:10</p>
</div>
</li>
</ul>
</div>
<div class="list-title">
<span class="fontBolder">电影</span>(<a href="#">更多</a>)
</div>
<div class="film clearfix">
<ul>
<li>
<a href="#">
<img class="reduce-opacity" src="images/film/film1.jpg" alt="">
<p>啊，男孩！ Oh Boy (2012)</p>
</a>
</li>
<li>
<a href="#">
<img class="reduce-opacity" src="images/film/film2.jpg" alt="">
<p>圣诞传说 En julberättelse (2007)</p>
</a>
</li>
<li>
<a href="#">
<img class="reduce-opacity" src="images/film/film3.jpg" alt="">
<p>蒂凡尼的早餐 Breakfast at Tiffany's </p>
</a>
</li>
<li>
<a href="#">
<img class="reduce-opacity" src="images/film/film4.jpg" alt="">
<p>鲸的鱼跃 クジラの跳躍 (1998)</p>
</a>
</li>
<li>
<a href="#">
<img class="reduce-opacity" src="images/film/film5.jpg" alt="">
<p>我家买了动物园 We Bought a Zoo (2011)</p>
</a>
</li>
<li>
<a href="#">
<img class="reduce-opacity" src="images/film/film6.jpg" alt="">
<p>小红帽 Red Riding Hood (2011)</p>
</a>
</li>
</ul>
</div>
<div class="list-title" style="margin-bottom: 32px">
<span class="fontBolder">音乐</span>(<a href="#">更多</a>)
</div>
<div class="music">
<ul>
<li>
<img class="reduce-opacity" src="images/music/music1.jpg" alt="">
<div class="music-info">
<a href="#">
<p class="singer-name">Stay</p>
<p class="music-name">Miley Cyrus</p>
</a>
</div>
</li>
<li>
<img class="reduce-opacity" src="images/music/music2.jpg" alt="">
<div class="music-info">
<a href="#">
<p class="singer-name">觉醒</p>
<p class="music-name">地下婴儿</p>
</a>
</div>
</li>
<li>
<img class="reduce-opacity" src="images/music/music3.jpg" alt="">
<div class="music-info">
<a href="#">
<p class="singer-name">Young In America</p>
<p class="music-name">Miley Cyrus</p>
</a>
</div>
</li>
<li>
<img class="reduce-opacity" src="images/music/music4.jpg" alt="">
<div class="music-info">
<a href="#">
<p class="singer-name">Stay</p>
<p class="music-name">Miley Cyrus</p>
</a>
</div>
</li>
<li>
<img class="reduce-opacity" src="images/music/music5.jpg" alt="">
<div class="music-info">
<a href="#">
<p class="singer-name">Stay</p>
<p class="music-name">Miley Cyrus</p>
</a>
</div>
</li>
</ul>
</div>
</div>
</main>
<footer>
<div class="container footer-top">
<ul class="footer-link">
<li><a href="#">关于晨梦</a></li>
<li><a href="/page/feel">梦感觉</a></li>
<li><a href="/page/explore">梦探索</a></li>
<li><a href="/page/idea">梦思想</a></li>
<li><a href="/page/drawBoard">梦画板</a></li>
</ul>
<ul class="footer-link">
<li><a href="#">关于我</a></li>
<li><a href="#">晨梦在成长</a></li>
<li><a href="#">联系方式</a></li>
</ul>
<ul class="footer-link">
<li><a href="#">更多</a></li>
<li><a href="#">使用帮助</a></li>
<li><a href="#">服务条款</a></li>
</ul>
<div class="qrcode">
<p class="animated infinite ani swing">扫我！扫我！扫我</p>
<img src="images/qrcode.png" alt="">
</div>
</div>
<div class="container footer-bottom">
<p>关注晨梦</p>
<i class="fenxiang-icon fenxiang-xinlang"></i>
<i class="fenxiang-icon fenxiang-baidu"></i>
</div>
</footer>
<!--注册弹窗-->
<div class="alert-register">
<div class="register-box ">
<img class="close" src="images/close.png" alt="">
<div class="title">欢迎注册</div>
<div class="register-info animated bounce"></div>
<input type="text" class="register-account" placeholder="账号">
<input type="password" class="register-password" placeholder="密码">
<input type="password" class="register-confirm-password" placeholder="确认密码">
<div class="register-btn">注册</div>
<div class="register-footer">欢迎注册晨梦网</div>
</div>
</div>
<!--返回顶部按钮-->
<a class="backToTop" href="javascript;:"><img src="images/toTop.gif" alt=""></a>
<script src="js/controlHtmlDOM.js"></script>
</body>
</html>
