【编程之美13】做一个web版本的留言簿应用

程序员的惊奇之处就是别人用工具学习怎样做的时候，你早已用你的几行代码实现了自己想做的事情~

使用Web 框架，做一个 Web 版本留言簿应用。

“编程之美，让你爱上编程的美。”

挑战下面编程题目，

一起体验编程的乐趣！

本期题目：

使用Web 框架，做一个 Web 版本留言簿应用。

例如，对着笔记本电脑吼一声“百度”，浏览器自动打开百度首页。

关键字：Speech to Text

编程之美独有福利：

这个栏目就是为了培养大家编程动手习惯并且提高编程能力的一个平台，我们现如今给参与这个栏目的提供如下福利：

源码分享

每周评比编程之星（奖励牛客大礼包一份，这回是充满惊喜，每个大礼包里不一定包括什么）

企业实习工作机会

独家名誉及待遇

参与开源项目

定期的分享讲座

等等等等！我们想进行一些不一样的玩法，让学习变得更有趣！无论你找到工作与否，即使是已经工作了，你也要有一个练手交流的平台~

当然啦，重要的是来练习自己的编程能力，分享代码，交流技术的过程，这个过程中，你提升的不只是一点点~

为了让牛友能够更高效，更好的学习，特意为大家建了一个群：牛客编程之美源码群 595665246，只给真正想参与这个栏目和真正想学习的人开放，会在群里定期分享源码，只让真正想学习的人来参加，所以只有参与栏目（在本栏目下发出自己的代码的)才能加，加的时候备注一下牛客昵称~

编程之星

每一期的玩法都不一样！每一期的编程之星的规则也不一样~~重要的是人人都参与进来

本期编程之星评比规则：由评委来评选~

注：因为目前群成员比较多，本着只让真正想参与的人进来的原则，可能后期会整理群啦，对这个没有兴趣的我们就会把位置让给真正有兴趣参加的人啦~

栏目介绍

编程之美，是牛客网推出的新栏目，每周推出一个项目供大家练手讨论交流。

如果你有想实现的项目问题，欢迎私信牛妹~

另外！另外！如果有好玩的项目题目可以私信牛妹，一经采用有奖励哦~~

如果你有写博客或者公众号的习惯，也欢迎加牛妹qq：1037532015私信。

全部评论

推荐最新楼层

治电小白菜

前端工程师

我使用的是野狗的baas平台，开发了简单的留言板预览页面：http://klren.oschina.io/message_board/ html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" /> <title>留言板</title> <link rel="stylesheet" href="css/bootstrap.css"> <style> .inputstyle{ background:#EAEBF1; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: solid; font-size: 20px; } #title{ height:50px; } li{ list-style: none; } </style> <script src = "https://cdn.wilddog.com/js/client/current/wilddog.js" ></script> <script type="text/javascript" src="js/user.js"></script> </head> <body style="background:#26C6DA;">  <nav class="navbar navbar-inverse navbar-fixed-top" > <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <span class="sr-only">导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">留言板</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <ul class="nav navbar-nav"> <li><a href="#">首页<span class="sr-only">(current)</span></a></li> </ul> </div> </div> </nav>   <center style="margin-top:60px;"> <div class="col-md-6 " > <input placeholder="Title" type="text" id="title" class="col-md-12 col-md-offset-6 inputstyle"> <br> <textarea rows="5" placeholder="words" id="word" class="col-md-12 col-md-offset-6 inputstyle" ></textarea> <button id="sendbtn" class="btn btn-info col-md-12 col-md-offset-6 "> 发送留言</button> </div> <br> </center>   <div style="width:600px; margin-top:30px;" class="col-md-12 col-md-offset-3"> <ul id="wordul"> </ul> </div>   <div class="col-md-12 footer" style="color:white;background:#03396D;height:120px;" > <hr> <center style="margin-top:-20px;"> <p>Copyright © Zhizhong Electric Science </p> <p>Friendly Link ： <a href="http://zzesxiao.leanote.com">Zhizhong's Blog </a> </p> </center> </div>  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="js/bootstrap.js"></script> <script src="js/message.js"></script> </body> </html> js代码 var rf = new Wilddog("https://(yourname).wilddogio.com/message"); $("#sendbtn").click(function(){ var childref = rf.push({ "title" : $("#title").val(), "word" : $("#word").val() }); }); function addLi(obj,snap){ var ul = document.getElementById(obj); var li = document.createElement("li"); li.setAttribute("id","newli"); li.innerHTML = ""+snap.val().title+""+snap.val().word+""; ul.appendChild(li); } rf.orderByChild("title").on("child_added", function(snapshot) { console.log(snapshot.key() + " was " + snapshot.val().title+snapshot.val().word+ " meters tall"); addLi("wordul",snapshot); });

送花回复分享

发布于 2017-03-07 19:52

尤汐_Jennica

C++

[multi-user-blog](https://github.com/yogykwan/multi-user-blog) - a multi user blog website allowing users to post, edit, delete, like posts after signup and login. 可以注册登录退出，增删改博客，点赞评论的多人博客系统。还在持续开发中，账户系统和写博客部分已完成，点赞评论将在3月中旬完成。不知道算不算Web留言簿。😳

送花回复分享

发布于 2017-03-07 00:38