终身伴侣（两个人的网站）代码+效果演示（文末源码地址）

大家好，我是讯享网，很高兴认识大家。

趁着七夕，把以前做过的一个情侣类的小网站写一写，虽然很早以前就做了，但一直没用上，咳咳。。。。

演示地址：182.254.213.223/yuanJu/index.jsp

（这里要两人注册，可以直接账号密码登录，否则游客基本什么都看不了。账号：小峰，密码：zhangfeng）

先说说最初设计的构想：

基于“一次注册终生注册”的理念及实现，通过情侣间的互动次数、时间等判断他们的感情是否处于健康状态并对他们进行提醒或平台功能使用限制如：无法进入恋爱社区，无法上传图片和日记等；若双方分了，双方将都不能与其他用户进行匹配除非获取“前任”的平台授权。

后来有点虎头蛇尾了，一些功能没有做，就是这个“若双方分了，双方将都不能与其他用户进行匹配除非获取“前任”的平台授权”。其余功能基本实现了

讯享网

注册分为两个场景：

注册场景一：

注册人是邀请人，获取专属码，系统会随机生成一个独有的专属码，注册人发这个专属码邀请自己的另一半

注册场景二：

注册人是被邀请人，此时该用户已有邀请码，点击匹配，会出现输入框，只要填写正确的邀请码，就可以和邀请人信息绑定

首页全局图片：

这个一次截图不完整，只能把图片比例拉成这个样子，大家可以假装他的比例是正常的，大概就是这个样子了。。。

上图的恋爱日记，恋爱相册，恋爱协议和中间发光的那棵树就是私人空间，只有注册的两人可看。

先点进去那棵树：

这里花花草草，白云啥的，效果都是动态的，点击那个水壶去给树浇水，点击太阳去给树阳光，

这里水壶浇水效果还不错，太阳给阳光效果做的略生硬。

恋爱日记：

恋爱相册：

上传照片：

恋爱协议：

还有一个恩爱社区的模块，前台页面做了，但是想着太麻烦就没写后台，本来计划就是做一个简简单单的个人小情侣网站，结果越做越多。。。

基本的展示完了，我们看看如何实现，这里只说一下可能对想做这个的新手可能有卡壳的地方，因为这个重在创意，实现上基本没有什么特别的地方

对于浇树和给树获取阳关代码

@WebServlet("/TreeUpdateServlet") public class TreeUpdateServlet extends HttpServlet { private static final long serialVersionUID = -L; @Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username = request.getParameter("username"); System.out.println("username:"+username); String sql_only_id = "select only_id from tb_user where username = ?"; ResultSet rs = JdbcHelper.query(sql_only_id, username); String only_id= ""; try { while(rs.next()){ only_id = rs.getString(1); } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } String type = request.getParameter("type"); System.out.println(type); int water_value = Integer.parseInt(request.getParameter("water_value")); int sun_value = Integer.parseInt(request.getParameter("sun_value")); int level = Integer.parseInt(request.getParameter("level")); if("water".equals(type)){ System.out.println("this is water update"); if(water_value == 100 && sun_value == 100){ level++; String sql_water = "UPDATE tb_tree SET tree_level ="+level+" where only_id = ?"; Boolean b = JdbcHelper.execute(sql_water, only_id); }else{ if(water_value < 100){ String sql_water = "UPDATE tb_tree SET water_value =" +water_value+ " where only_id = ?"; Boolean b = JdbcHelper.execute(sql_water, only_id); } } }else{ if("sun".equals(type)){ System.out.println("this is sun update"); if(water_value == 100 && sun_value == 100){ level++; String sql_water = "UPDATE tb_tree SET tree_level ="+level+" where only_id = ?"; Boolean b = JdbcHelper.execute(sql_water, only_id); }else{ if(sun_value < 100){ String sql_water = "UPDATE tb_tree SET sun_value =" +sun_value+ " where only_id = ?"; Boolean b = JdbcHelper.execute(sql_water, only_id); } } } } } }

讯享网
用户注册，要生成专属码，和另一半绑定，这方面的代码：

讯享网<script type="text/javascript"> $(function(){ var compareCodeBtn_click_times = 1; var getCodeBtn_click_times = 1; /*匹配专属码*/ $("#compareCodeBtn").click(function fn_1(){ compareCodeBtn_click_times++; if(compareCodeBtn_click_times % 2 == 0){ $("#compareCodeInput").css({ "width": 200, "height": 30 }); $("#getCode").remove(); $("#compareCodeBtn").after("<input type='text' name='specialCode' id='compareCode'>"); $("#compareCodeGet").css({ "width": 50, "height": 30 }); $("#getCode").css({"display":"none"}); }else{ $("#compareCodeInput").css({ "width": 50, "height": 30 }); $("#getCode").remove(); $("#compareCode").remove(); } }); /*获取专属码*/ $("#getCodeBtn").click(function fn_1(){ getCodeBtn_click_times++; if(getCodeBtn_click_times % 2 == 0){ $("#compareCodeGet").css({ "width": 200, "height": 30 }); $("#getCodeBtn").after("<input type='text' name='specialCode' id='getCode' readonly='readonly'>"); $("#compareCodeInput").css({ "width": 50, "height": 30 }); $("#getCode").val(productCode()); $("#compareCode").remove(); }else{ $("#compareCodeGet").css({ "width": 50, "height": 30 }); $("#getCode").remove(); $("#compareCode").remove(); } }); /*生成专属码*/ function productCode(){ var specialCodeArray = [ '1','2','3','4','5','6','7','8','9','0', 'a','b','c','d','e','f','g','h','i','j', 'k','l','m','n','o','p','q','r','s','t', 'u','v','w','x','y','z', 'A','B','C','D','E','F','G','H','I','J', 'K','L','M','N','O','P','Q','R','S','T', 'U','V','W','X','Y','Z' ]; var specialCode = ""; for(var i = 0 ; i < 9 ; i++){ specialCode = specialCode + specialCodeArray[[Math.floor(Math.random() * 62)]] ; } return specialCode; } }); </script> </head> <body class="bg1"> <% request.setCharacterEncoding("utf-8"); String action = request.getParameter("action"); User user = new User(); UserDao userDao = new UserDao(); if ("reg".equals(action)) { if (userDao.isExistUser(request.getParameter("username"))) { out.println("<script>alert('用户已经存在');location.href=regist.jsp';</script>"); } else { user.setRealname(request.getParameter("realname")); user.setUsername(request.getParameter("username")); user.setPassword(request.getParameter("password")); user.setSex(DataConverter.toInt(request.getParameter("sex"))); user.setPid(DataConverter.toInt(request.getParameter("pid"))); user.setEmail(request.getParameter("email")); user.setTel(DataConverter.toInt(request.getParameter("tel"))); user.setOnly_id((request .getParameter("specialCode"))); user.setOur_time(request .getParameter("jinianri")); if(userDao.insert(user) !=0){ out.println("<script>alert('呵呵'); location.href ='regist.jsp';</script>"); }else{ out.println("<script>alert('注册成功，前往登陆'); location.href ='login.jsp';</script>"); } } } %> <!--网页整体开始--> <div id="all"> <!--左边内容--> <div id="all_left"> <img style="margin-top: 95px;" src="images/y.png" /><!-- 预留位置等作出logo --> </div> <!--左边内容结束--> <!--右边内容开始--> <div id="all_right"> <h1 class="r_h1" style="color:#f3316b;">陪伴是最长情的告白</h1> <div class="r_h1_l"></div> <div class="r_h1_r"></div> <div class="r_tite">一个人一生只能注册一次，您对自己和您的伴侣有信心吗？</div> <div id="form1"> <form action="regist.jsp?action=reg" method="post"> <div class="formline" id="fist_formline"> <div class="formline_font">我是</div> <div class="formline_r"> <input type="radio" name="sex" checked="checked" value="1"/> <p class="seximg1"></p><p>男</p> <input id="radio2" type="radio" name="sex" value="0"/> <p class="seximg2"></p><p>女</p> </div> </div> <div class="formline"> <div class="formline_font">姓名</div> <div class="formline_r"> <input type="text" name="realname" id="textlong"/> </div> </div> <div class="formline"> <div class="formline_font">昵称</div> <div class="formline_r"> <input type="text" name="username" id="textlong" /> </div> </div> <div class="formline"> <div class="formline_font">密码</div> <div class="formline_r"> <input id="textlong" type="password" name="password"/> </div> </div> <div class="formline"> <div class="formline_font">身份证号码</div> <div class="formline_r"> <input type="text" name="pid" id="textlong"/> </div> </div> <div class="formline"> <div class="formline_font">专属码</div> <div class="formline_r"> <div class="compareCodeInput" id="compareCodeInput"> <a class="compareCodeBtn u-btn u-btn-c4" id="compareCodeBtn">匹 配</a> </div> <div class="compareCodeGet" id="compareCodeGet"> <a class="getCodeBtn u-btn u-btn-c4" id="getCodeBtn">获 取</a> </div> </div> </div> <div class="formline"> <hr style="border:1px dashed #DDDDDD; width=100px; margin-left: 50px; margin-top:-10px;"> <a href=""><p id="SmallFont">以下是非必填信息，完善信息可以让我们更好的为您服务！</p></a> </div> <div class="formline"> <div class="formline_font">手机号码</div> <div class="formline_r"> <input type="text" name="tel" id="textlong"/> </div> </div> <div class="formline"> <div class="formline_font">邮箱</div> <div class="formline_r"> <input type="email" name="email" id="textlong" /> </div> </div> <div class="formline"> <div class="formline_font">纪念日</div> <div class="formline_r"> <input type="datetime" name="jinianri" id="date" /> </div> </div> <input type="hidden" name="nowtime"id="nowtime" value="1111-11-11 11:21:11" /> <input id="zhucebut" type="submit" value=""/> </form> </div> <div id="banquan">一生伴侣 &copy; 2003-2016 版权所有</div> </div> </div> <!--网页整体结束--> <script src="js/classie.js"></script> <script src="js/selectFx.js"></script> <script src="js/fullscreenForm.js"></script> <script> $("#date").jeDate({ format:"YYYY-MM-DD", isTime:false, minDate:"1949-10-10 00:00:00" }); </script>

上传图片使用的是一个控件，H5实现图片上传，样子挺好看的，这个在以前博客中有说到，这里直接给链接：http://blog.csdn.net/weixin_/article/details/

其余基本就是简单的增删改查，就不一一啰嗦了，赶快发挥想象，麻溜的为女朋友做一个你们的私人网站吧。

源码地址觉得有用的话记得给颗心啊

终身伴侣（两个人的网站）代码+效果演示（文末源码地址）

相关推荐