終身伴侶（兩個人的網站）程式碼+效果演示（文末原始碼地址）
阿新 • • 發佈：2019-01-27
趁著七夕，把以前做過的一個情侶類的小網站寫一寫，雖然很早以前就做了，但一直沒用上，咳咳。。。。
演示地址：182.254.213.223/yuanJu/index.jsp
（這裡要兩人註冊，可以直接賬號密碼登入，否則遊客基本什麼都看不了。賬號：小峰，密碼：zhangfeng）
先說說最初設計的構想：
基於“一次註冊終生註冊”的理念及實現，通過情侶間的互動次數、時間等判斷他們的感情是否處於健康狀態並對他們進行提醒或平臺功能使用限制如：無法進入戀愛社群，無法上傳圖片和日記等；若雙方分了，雙方將都不能與其他使用者進行匹配除非獲取“前任”的平臺授權。
後來有點虎頭蛇尾了，一些功能沒有做，就是這個“若雙方分了，雙方將都不能與其他使用者進行匹配除非獲取“前任”的平臺授權”。其餘功能基本實現了
註冊：
註冊分為兩個場景：
註冊場景一：
註冊人是邀請人，獲取專屬碼，系統會隨機生成一個獨有的專屬碼，註冊人發這個專屬碼邀請自己的另一半
註冊場景二：
註冊人是被邀請人，此時該使用者已有邀請碼，點選匹配，會出現輸入框，只要填寫正確的邀請碼，就可以和邀請人資訊繫結
首頁全域性圖片：
這個一次截圖不完整，只能把圖片比例拉成這個樣子，大家可以假裝他的比例是正常的，大概就是這個樣子了。。。
上圖的戀愛日記，戀愛相簿，戀愛協議和中間發光的那棵樹就是私人空間，只有註冊的兩人可看。
先點進去那棵樹：
這裡花花草草，白雲啥的，效果都是動態的，點選那個水壺去給樹澆水，點選太陽去給樹陽光，
這裡水壺澆水效果還不錯，太陽給陽光效果做的略生硬。
戀愛日記：
戀愛相簿：
上傳照片：
戀愛協議：
還有一個恩愛社群的模組，前臺頁面做了，但是想著太麻煩就沒寫後臺，本來計劃就是做一個簡簡單單的個人小情侶網站，結果越做越多。。。
基本的展示完了，我們看看如何實現，這裡只說一下可能對想做這個的新手可能有卡殼的地方，因為這個重在創意，實現上基本沒有什麼特別的地方
對於澆樹和給樹獲取陽關程式碼
@WebServlet("/TreeUpdateServlet") public class TreeUpdateServlet extends HttpServlet { private static final long serialVersionUID = -527406294804079343L; @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">一生伴侶 © 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_36380516/article/details/58594664
其餘基本就是簡單的增刪改查，就不一一囉嗦了，趕快發揮想象，麻溜的為女朋友做一個你們的私人網站吧。
原始碼地址 覺得有用的話記得給顆心啊