今天繼續介紹javaweb推特項目的相關功能，其主要是selfdetail.jsp界面
修改背景圖功能
<button class="btn btn-info" id="xiugaibg">點擊修改背景圖</button>
<form action="" method="post" id="updatebg"
enctype="multipart/form-data">
<input id="uppic" type="file" accept="image/*" name="picpath" />
</form>
$("#uppic").bind('input oninput change', function() {
if ($(this).val() != null) {
var srcs = getObjectURL(this.files[0]);
$("#bg img").attr("src", srcs);
var formData = new FormData($("#updatebg")[0]);
$.ajax({
type : "POST",
url : "user.do?method=xiugaibg",
type : 'POST',
data : formData,
async : false,
contentType : false,
cache : false,
processData : false,
error : function(request) {
alert("Connection error");
},
success : function(data) {}
});
}
});
UserServlet.java 的 toUpdateBg 修改背景圖
private void toUpdateBg(HttpServletRequest request, HttpServletResponse response) throws IOException {
HttpSession session = request.getSession();
Users user = (Users) session.getAttribute("user");
int uid = user.getUid();
String path = request.getSession().getServletContext().getRealPath("img/") + user.getUname();
Map<String, String> map = Upload.upload(request, 100 * 1024 * 1024, path);
String picName = map.get("picpath");
int n = usersinfoDao.updateBg(uid, picName);
if (n > 0) {
Usersinfo info = usersinfoDao.getInfos(uid);
session.setAttribute("info", info);
response.getWriter().print("ok");
}
}
UserDao.java 的修改用戶背景圖
public int updateBg(int uid, String picName) {
String sql = "update usersinfo set ubg=? where uid=?";
int n = DBUtil.update(sql, picName, uid);
return n;
}
編輯個人資料
<div>
<div class="big-link" data-reveal-id="gaiziliao"
data-animation="fade">
<button class="btn btn-default" id="editdata">編輯個人資料</button>
</div>
</div>
個人信息展示
<div id="gaiziliao" class="reveal-modal"
style="position:fixed;top:100px;left: 625px;">
<div class="close-reveal-modal" id="close-reveal"></div>
<div
style="background-color: ${info.ucolor};font-size: 18px;
color:white;font-weight: bold;position: relative;
left: -40px;top:-30px;border-top-left-radius:5px;text-align: center;width: 620px;padding-top: 20px;
padding-bottom: 20px;border-top-right-radius: 5px;">修改個人資料</div>
<div style="margin-bottom: 20px;">
<span style="margin-right: 2px;">真實姓名：</span><input class="txt"
type="text" id="name" /><span class="check"></span>
</div>
<div style="margin-bottom: 30px;">
<span>用戶名：</span><span
style="z-index:2;padding:1px 3px;height: 28px;line-height: 28px;font-size: 18px;">@</span><input
class="txt" type="text" style="margin-left: 0px" id="txt" /><span
class="check"></span>
</div>
<div id="date" style="margin-top: 20px;">
<span>出生日期：</span> <select name="year" id="year">
<option value="">年</option>
</select> <select name="month" id="month">
<option value="">月</option>
</select> <select id="days" class="day">
<option value="">日</option>
</select>
</div>
<div style="color:black;padding-top: 30px;">簡介：</div>
<textarea
style="width:540px;margin:10px 0;border-radius: 5px;border:1px solid rgb(164, 217, 249) ;padding:5px"
placeholder="介紹你自己..." id="shangchuanabout"></textarea>
<div style="margin-left: 420px;margin-top: 15px;">
<button class="btn btn-info" id="baocunxiugai"
οnclick="baocunxiugai()">保存</button>
<button class="btn btn-default" id="quxiaoxiugai"
οnclick="guanbixiugai()">取消</button>
</div>
</div>
</div>
<div id="classdetail">
<div id="firstclass">
<div id="rname">${user.urealname }</div>
<div id="aitename">@${user.uaite }</div>
<div id="infos">
<ul>
<c:if test="${info.uabout != null }">
<li class="info">${info.uabout }</li>
<br>
<br>
</c:if>
<li class="info"><span
class="glyphicon glyphicon-map-marker"></span>中華人民共和國</li>
<li class="info" style="margin-left: 1.5px;"><span
class="glyphicon glyphicon-calendar"></span>加入與 <fmt:formatDate
value="${user.utime }" pattern="yyyy年M月" type="both" /></li>
<c:if test="${info.udate != null }">
<li class="info"><span class="glyphicon glyphicon-heart"></span>生於
<fmt:formatDate value="${info.udate }" pattern="yyyy年M月d日"
type="both" /></li>
</c:if>
</ul>
</div>
</div>
推薦關注
<div id="tuijian">
<div class="guanzhu" style="color:black">
推薦關注<span style="font-size:13px;font-weight: normal;"> · <a
style="cursor: pointer;" id="shuaxintj">刷新</a>
</span>
</div>
<div id="addtuijian"></div>
</div>
展示本人的推特文章：通過TweettwoServlet.java的getTweets來獲取該用戶的推特文章
function hasNew() {
$.ajax({
url : '/mytwitter/tweettwo.do?method=gettweets&num=one&pagenum='+page,
type : 'POST',
success : function(response, status) {
var length = response.length;
if(length == 0){
var html ='<div class="tuiwen"><div class="meiyou">啥？一條推文都沒有？</div>'
+'<div class="kongkong">這條空空的時間線不能就這麼擱着。開始關注用戶吧，然後你就會在此看到推文。</div>'
+' <input class=" btn btn-info" id="seluser" type="button" value="尋找值得關注的用戶" οnclick="qucha()"/></div>';
$("#content").append(html);
return;
}else{
var tweets =$.parseJSON( response.substring(response.indexOf("["), response.length) );
var html = addTweet(tweets);
$("#content").append(html);
}
tweetsJs();
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
};
通過獲取用戶信息進行獲取該用戶的推特文章
private void toGetTweet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ParseException {
HttpSession session = request.getSession();
Users user = (Users) session.getAttribute("user");
List<Concern> concernList = new ArrayList<Concern>();
List<Utweets> tweetsList = new ArrayList<Utweets>();
List<Utweets> tList = new ArrayList<Utweets>();
if (tList != null) {
tweetsList = tList;
}
if (user == null) {
response.sendRedirect("index.jsp");
return;
}
int uid = user.getUid();
Usersinfo info = usersinfoDao.getInfos(uid);
session.setAttribute("info", info);
concernList = concernDao.getSuid(uid);
if (concernList == null) {
tweetsList = tweetsDao.getTweet(uid);
if (tweetsList.size() < 1) {
return;
}
response.getWriter().write(roll(tweetsList, uid));
return;
}
List<Integer> uidList = new ArrayList<Integer>();
for (int i = 0; i < concernList.size(); i++) {
uidList.add(concernList.get(i).getS_uid());
}
tweetsList = tweetsDao.getTweet(uid);
response.getWriter().write(roll(tweetsList, uid));
}