javaWeb開發的放推特項目之推特發佈

今天博主繼續爲大家介紹推特項目的其他內容,今天是推特發佈功能的設計與實現
在這裏插入圖片描述
接下來博主按照頁面佈局的方式爲大家介紹該項目的具體功能代碼
進入main.jsp界面:
在這裏插入圖片描述
頂欄界面佈局代碼:

<div id="loader">
		<div>
			<ul id="daohang">
				<li><span class="glyphicon glyphicon-home"></span><span
					class="bian">主頁</span>
					<div class="tishidian" style="background-color: ${info.ucolor};"></div></li>
				<li><span class="glyphicon glyphicon-bell"></span><span
					class="bian">通知</span>
					<div class="tishidian" id="notification"
						style="background-color: ${info.ucolor};">
						<div id="tongzhigeshu"></div>
					</div></li>
				<li><span class="glyphicon glyphicon-comment"></span><span
					class="bian">私信</span>
					<div class="tishidian" style="background-color: ${info.ucolor};"></div></li>
			</ul>
		</div>
		<div>
			<img id="logo" src="img/index.ico" />
			<div id="search">
				<input type="text" class="search" id="search_two"
					placeholder="搜索Twitter用戶" /><span
					class="glyphicon glyphicon-search sea" id="chaxun"
					style="color:#657786;font-size: 15px;margin-top:1px"></span>
			</div>
			<div class="triangle shang" id="souxianshishang"></div>
			<div id="souxianshi"></div>
			<div class="touxiang" id="touxiang" rel="popover"></div>
			<div id="list">
				<div class="triangle shang ss"></div>
				<div id="listlist">
					<div style="cursor: pointer;" id="self">
						<div id="uname"
							style="font-weight: bold; color:black;margin-top:5px;margin-left:18px;font-size:20px">${user.urealname }</div>
						<div style="color:gray;margin-left:20px;font-size:15px"
							id="aitevalue">@${user.uaite }</div>
					</div>
					<hr>
					<div class="listd" style="margin-top: 10px">
						<div>
							<span class=" glyphicon glyphicon-user"
								style="margin-right: 10px"></span>個人資料
						</div>
					</div>

					<div class="listd">
						<span class="glyphicon glyphicon-list-alt"
							style="margin-right: 10px"></span>列表
					</div>
					<hr>
					<div class="listd">
						<span class="glyphicon glyphicon-share" style="margin-right: 10px"></span>Twitter廣告
					</div>
					<div class="listd">
						<span class=" glyphicon glyphicon-stats"
							style="margin-right: 10px"></span>分析
					</div>
					<hr>
					<div class="listd">設置與隱私</div>
					<div class="listd">幫助中心</div>
					<div class="listd" id="kuaijiejian">鍵盤快捷鍵</div>
					<div class="listd">登出</div>
				</div>
			</div>
			<button id="fatui" class="button btn btn-info">
				<span class="glyphicon glyphicon-send edit"></span><span
					class="bian fa">發推</span>
			</button>
		</div>

推特發佈:

<form action="" method="post" id="mytweettwo"
				enctype="multipart/form-data">
				<div class="cont">
					<div class="tweet ttt" id="tuiwen2"
						style="box-shadow: 0 0 1px rgba(164, 217, 249, 1);">
						<textarea id="tweet2" class="wen xinxian" name="tuiwen"
							placeholder="有什麼新鮮事?" style="max-height:300px;width:540px"
							autofocus="autofocus"></textarea>
						<div class="bq bq2"></div>
					</div>

					<div class="thing add">
						<span class="glyphicon glyphicon-camera addThing addx"
							id="addpictwo"></span> <span
							class="glyphicon glyphicon-picture addThing addx"></span> <span
							class="glyphicon glyphicon-stats addThing addx"></span> <span
							class="glyphicon glyphicon-map-marker addThing addx"></span>
						<button class="button but but_lu  btn btn-info" id="submittwo"
							type="button">
							<span class="glyphicon glyphicon-send edit_lu"></span> <span
								class="bian fa_lu">發推</span>
						</button>
					</div>
					<div class="zishu zishu_lu">140</div>
				</div>
				<!-- <div class="triangle shang  ts" id="ts2"></div>
					<div id="picstwo">
						<img src="" /> <span class="btn btn-info" id="changepictwo">更換圖片</span>
					</div>
					<span id="pichatwo" title="取消預覽">&times;</span> <input type="file"
						id="pictwo" accept="image/png,image/jpg" name="tpic" style="z-index:101"/> -->
			</form>

在TweetServletTwo.java中,完成添加新推特文章,會先獲取用戶信息,如果上傳了圖片會進行圖片下載,即調用Upload.java,進行圖片下載
此外會統計推特文章數目
更新用戶信息,即將文章加載到用戶推特下

private void toNew(HttpServletRequest request, HttpServletResponse response)
			throws IOException, ParseException, ServletException {
		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 tuiwen = map.get("tuiwen");
		String tpic = map.get("tpic");
		Timestamp ttime = Times.getSystemTime();
		if (tpic == "") {
			tweetsDao.addTweet(uid, tuiwen, ttime, 0);
			usersinfoDao.addTweetsNum(uid);
			Usersinfo info = usersinfoDao.getInfos(uid);
			ServletContext application = session.getServletContext();
			Integer newTweetNum = (Integer) application.getAttribute("newTweetNum");
			if (newTweetNum == null) {
				newTweetNum = 1;
			} else {
				newTweetNum += 1;
			}
			application.setAttribute("newTweetNum", newTweetNum);
			session.setAttribute("info", info);
			return;
		}

		tweetsDao.addPicTweet(uid, tuiwen, ttime, tpic);
		usersinfoDao.addTweetsNum(uid);
		ServletContext application = session.getServletContext();
		Integer newTweetNum = (Integer) application.getAttribute("newTweetNum");
		if (newTweetNum == null) {
			newTweetNum = 1;
		} else {
			newTweetNum += 1;
		}
		application.setAttribute("newTweetNum", newTweetNum);
		Usersinfo info = usersinfoDao.getInfos(uid);
		session.setAttribute("info", info);

		toGetTweet(request, response);
	}

更新推特文章數目

public int addTweetsNum(int uid) {
		String sql = "update usersinfo set utweet = (utweet + 1) where uid = ?";
		int n = DBUtil.update(sql, uid);
		return n;
	}

獲取用戶信息

public Usersinfo getInfos(int uid) {
		String sql = "select id, uid, uaddress,  uabout, udate, ubg,ulogo, ufans, utweet,ufollow ,ucolor  from usersinfo where uid=?  limit 1";
		List<Usersinfo> list = DBUtil.query(Usersinfo.class, sql, uid);
		if (list.size() > 0) {
			return list.get(0);
		}
		return null;
	}

獲取用戶的信息,此處採用了一種類似於回捲重寫的方式進行數據更新到main.jsp界面

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));
	}

在這裏插入圖片描述
發推界面,仍爲main.jsp

<form action="tweettwo.do?method=newt" method="post" id="mytweet"
				enctype="multipart/form-data">
				<div id="send">
					<div class="touxiang" id="user_tou"></div>
					<div id="sends">
						<div class="tweet" id="tuiwen1"
							style=" border :5px solid rgb(164, 217, 249)">
							<div id="editor"></div>
							<textarea class="wen" name="tuiwen" id="tweet1"
								placeholder="有什麼新鮮事?"></textarea>
							<div class="bq" id="bq1">
								<!-- <img src="img/Smile.png" width="16px" height="16px" /> -->
							</div>
						</div>
						<div class="thing">
							<span class="glyphicon glyphicon-camera addThing" id="addpic"></span>
							<span class="glyphicon glyphicon-picture addThing"></span> <span
								class="glyphicon glyphicon-stats addThing "></span> <span
								class="glyphicon glyphicon-map-marker addThing "></span>
							<button class="button but btn btn-info" id="submit" type="button">
								<span class="glyphicon glyphicon-send edit_lu"></span><span
									class="bian fa_lu">發推</span>
							</button>
						</div>
						<div class="zishu">140</div>
					</div>
				</div>

歡迎大家關注我的公衆號:

在這裏插入圖片描述

發佈了82 篇原創文章 · 獲贊 194 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章