基於web的機票管理系統設計與實現（二）

阿新 • • 發佈：2020-10-25

- - -》關注博主公眾號【C you again】，獲取更多IT資源（IT技術文章，畢業設計、課程設計系統原始碼，經典遊戲原始碼，HTML網頁模板，PPT、簡歷模板，！！還可以投稿賺錢！！，點選檢視- - - >>>>>

歡迎訪問博主個人網站，記得收藏哦，點選檢視 - - - >>>>

基於web的機票管理系統

如果你還沒有閱讀基於web的機票管理系統設計與實現（一），請點選檢視，獲取詳細資料請關注公眾號：C you again

5 系統詳細設計及實現

5.1 新增航班資訊

系統管理員登入後臺系統後，點選側邊欄的航班資訊管理按鈕會出現下拉列表選單，繼續點選新增航班資訊按鈕可以進行新增航班資訊操作。新增航班時輸入航班號、起點、終點、始發機場、到達機場等資訊，如下圖所示。

新增航班資訊的過程如下：後臺系統管理員進入新增航班資訊頁面後，填寫航班號、起點、終點、始發機場、到達機場等相關資訊後點擊儲存按鈕，這是會隨機生成flightId並與資料庫中已經存在的flightId進行比較，保證航班Id唯一，之後繼續判斷輸入的機票價格，航班座位數等資料是否有效，核對資訊的有效性和完整性，最後存入資料庫。具體流程如下圖所示。

主要程式碼：

@RequestMapping("addFlight")
	public Result addFlight(@RequestBody Flight flight ) {
		//設定日期格式
		SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
		// new Date()為獲取當前系統時間
        flight.setFlightId("F"+df.format(new Date()));  
        try {
        	flightManageService.addFlight(flight);
        	return new Result(true,"新增成功");
		} catch (Exception e) {
			e.printStackTrace();
			return new Result(false,"新增失敗");
		}
}

5.2 航班資訊列表

系統管理員登入系統後有檢視航班列表的許可權，航班列表介面有新增航班，刪除航班，搜尋航班資訊，航班資訊詳情，航班資訊修改等功能，具體見下圖，各個功能詳細說明如表5.1所示。

主要程式碼這裡以航班查詢功能service層程式碼為例：

public PageResult search(int pageNum, int pageSize, String searchEntity) {
		PageHelper.startPage(pageNum,pageSize);
		List<Flight> flightsList=flightManageMapper.select(searchEntity);
		Page<Flight> page=(Page<Flight>) flightsList;
		return new PageResult(page.getTotal(), page.getResult());
	}

5.3 訂單資訊列表

訂單資訊列表是訂單資訊管理模組的一個子功能，展示的是前臺所有使用者的機票訂單資訊，如下圖所示。系統管理員可以對訂單進行查詢，刪除操作，各個功能詳細說明如表5.2所示。

主要程式碼這裡以訂單刪除功能dao層的mapper程式碼為例：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.cafuc.mapper.IOrderManageMapper">
  <delete id="delete" parameterType="String">
    delete from `order` where order_id in
    <foreach collection="selectIds" item="ids" open="(" close=")" separator=",">
      #{ids}
    </foreach>
  </delete>
</mapper>

5.4 使用者資訊列表

使用者資訊列表是使用者資訊管理模組的子功能，它是指把前臺系統所有註冊使用者資訊以列表的形式展示給後臺系統管理員，方便系統管理員精確定位到每一個機票預訂系統的使用者，對其進行管理，使用者資訊列表的介面如下圖所示。系統管理員有查詢系統使用使用者和刪除違反平臺規定使用者的權利，各個功能詳細說明如表5.3所示。

主要程式碼以使用者搜尋功能dao層的mapper程式碼為例：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.cafuc.mapper.IUserManageMapper">
  <select id="select" resultType="com.cafuc.pojo.User">
     select DISTINCT * from `user` as u where 
		u.user_name like concat('%',#{searchEntity},'%')
  </select>
</mapper>

5.5 留言評論列表

留言評論是前臺系統使用者完成註冊後具有的功能，使用者可以通過留言評論功能對所購班次機票進行全方位的評價，也可以對其在使用過程中遇到的問題進行反饋，等待工作員處理。後臺系統管理員對使用者留言具有管理的許可權，見下圖。各功能詳情見表5.4。

主要程式碼以後臺系統留言評論模組controller層DiscussManageController.java類例：

package com.cafuc.controller;
import javax.annotation.Resource;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.cafuc.pojo.PageResult;
import com.cafuc.pojo.Result;
import com.cafuc.service.IDiscussManageService;
import com.cafuc.service.IOrderManageService;

@RestController
@RequestMapping("discussManage")
public class DiscussManageController {
	@Resource
	private IDiscussManageService discussManageService;
	@RequestMapping("search")
	public PageResult search(int pageNum ,int pageSize,String searchEntity){
		System.out.println(pageNum+" "+pageSize+" "+searchEntity);
		PageResult pageResult=discussManageService.search(pageNum, pageSize, searchEntity);
		return pageResult;
	}
	@RequestMapping("deleteBySelectIds")
	public Result deleteBySelectIds(String []selectIds) {
        try {
        	discussManageService.deleteBySelectIds(selectIds);
        	return new Result(true,"刪除成功");
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
			return new Result(false,"刪除失敗");
		}
	}
}

5.6 新增廣告資訊

廣告作為網站的必要元素，在機票系統的前臺頁面也有廣告展示的功能，後臺增加了相應的管理模組，介面如下圖所示。

後臺系統新增廣告的步驟：管理員登入後臺系統後點擊廣告管理按鈕，在出現的下拉列表選項中選擇新增廣告資訊並點選進入廣告新增頁面，在頁面輸入廣告圖片、廣告連結，廣告說明等資訊，點選儲存按鈕，進行資料校驗，檢查資料的有效性和完整性，保證資料無誤之後將資料資訊持久化到mysql資料庫。流程圖如下圖所示。

主要程式碼以後臺系統controller層ContentManageController.java類例：

@RequestMapping("addContent")
	public void addContent(@RequestParam("file") MultipartFile file,HttpServletRequest request,HttpServletResponse response) 
	throws IOException {
		String describe="";
		String url="";
		String picture="";
		if(request.getParameter("describe")!=null) {
			describe=request.getParameter("describe");
		}
		if(request.getParameter("url")!=null) {
			url=request.getParameter("url");
		}
		// 判斷檔案是否為空，空則返回失敗頁面
		if (!file.isEmpty()) {
			try {
				// 獲取檔案儲存路徑（絕對路徑）
				String path = request.getServletContext().getRealPath("/WEB-INF/file");
				// 獲取原檔名
				String fileName = file.getOriginalFilename();
				// 建立檔案例項
				File filePath = new File(path, fileName);
				// 如果檔案目錄不存在，建立目錄
				if (!filePath.getParentFile().exists()) {
					filePath.getParentFile().mkdirs();
					System.out.println("建立目錄" + filePath);
				}
				picture=filePath+"";
				// 寫入檔案
				file.transferTo(filePath);
				Content content=new Content();
				//設定日期格式
				SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
				// new Date()為獲取當前系統時間
				content.setContentId("C"+df.format(new Date()));
				content.setDescribe(describe);
				content.setPicture(picture);
				content.setUrl(url);
			    contentManageServiceImpl.addContent(content);
			    response.sendRedirect(request.getContextPath()+"/admin/list_content.html");
			} catch (Exception e) {
				e.printStackTrace();
				response.sendRedirect(request.getContextPath()+"/admin/add_content.html");
			}
		}
		else {
			response.sendRedirect(request.getContextPath()+"/admin/add_content.html");
		}
		
	}

5.7 廣告資訊列表

後臺系統管理員完成新增廣告以後跳轉到廣告資訊列表頁面，本頁面展示的是新增到資料庫的所有廣告資訊，如下圖所示，系統管理員可以通過查詢，刪除等操作來管理廣告資訊，詳情見表5.5。

5.8 檢視個人資訊

後臺系統管理員可以檢視個人的使用者名稱，密碼，郵箱，手機號等資訊，由於時間有限，這裡以只實現了檢視使用者名稱，密碼的功能，見下圖所示，其他功能後期新增。

由於系統管理員在登陸系統後把個人資訊存到redis資料庫中，在頁面初始化時從redis資料庫中查詢處個人資訊從到cookie中，檢視個人資訊就是從cookie中提取資料並設定到頁面中，具體程式碼如下：

//初始化
$scope.adminEntity={};
$scope.init=function () {
	console.log($.cookie('key'));
	adminManageService.init($.cookie('key')).success(function (res) {
	      console.log(res) 
	      $scope.adminEntity=res;
	    });
}

5.9 修改個人資訊

後臺系統管理員也對使用者名稱，密碼，郵箱，手機號等資訊進行修改，點選個人資訊修改按鈕進入頁面修改個人資訊，修改後點選儲存等檢查填寫的資訊無誤後提示完成修改，為了確保使用者名稱欄位的唯一性，使用者名稱一項無法修改。主要程式碼以controller層為例:

@RequestMapping("editAdmin")
	public Result editAdmin(@RequestBody AdminUser adminUser){
		
		try {
			adminManageServiceImpl.editAdmin(adminUser);
			redisTemplate.boundValueOps(adminUser.getUser()).set(adminUser);
			return new Result(true, "修改成功");
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
			return new Result(false, "修改失敗");
		}
	}

5.10 使用者登入

使用者在進行機票預定，留言評論等功能時需要登入前臺系統後才能進行，在瀏覽器位址列輸入http://localhost:8081/flyTicket-portal-web/default/login.html回車進入如下圖所示介面。

使用者進行到登入介面，輸入正確的使用者名稱和密碼就可以登入到前臺系統，登入順序圖如下圖所示。

主要程式碼以controller層程式碼為例：

app.controller('portalLoginManageController',function($scope,$controller,portalLoginManageService){
	$controller('baseController',{$scope:$scope});
	//初始化
	 $scope.userEntity={userName:null,userPwd:null};
	 $scope.login=function(){
		 if($scope.userEntity.userName==null || $scope.userEntity.userName.trim()==""){
			 alert("使用者名稱為空");
		 }
		 else{
			 if($scope.userEntity.userPwd==null || $scope.userEntity.userPwd.trim()==""){
				 alert("密碼為空");
			 }
			 else{			 portalLoginManageService.login($scope.userEntity).success(function(res){
					 if(res.result==false){
						 alert(res.message)
					 }
					 else{
						 window.location.href="index.html#?key="+$scope.userEntity.userName; 
					 }
				 }); 
			 }
		 };
	 }
});

5.11 航班資訊展示

在瀏覽器位址列輸入http://localhost:8081/flyTicket-portal-web/default/index.html出現如下圖所示介面，首頁面展示所有航班資訊。每一條資訊包含出發城市、到達城市、出發機場、到達機場，出發時間、到達時間、機票價格等資訊。

5.12 航班資訊查詢

使用者可以通過航班查詢功能精確查詢到所需資訊，節省時間簡化操作。通過輸入航班型別、出發時間、出發城市、到達城市等搜尋條件實現航班查詢。比圖以成都為到達城市為例，搜尋結果如下圖所示。

程式碼以dao層PortalManageMapper.xml類例：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.cafuc.mapper.IPortalManageMapper">
  <select id="select" resultType="com.cafuc.pojo.Flight">
     select * from flight as f 
      <where>
        <if test="flightStartTime1 !=null and flightStartTime1 !=''">
          and f.flight_start_time like concat('%',#{flightStartTime1},'%')
        </if>
        <if test="flightStartPlace !=null and flightStartPlace !=''">
          and f.flight_start_place like concat('%',#{flightStartPlace},'%')
        </if>
        <if test="flightEndPlace !=null and flightEndPlace !=''">
          and f.flight_end_place like concat('%',#{flightEndPlace},'%')
        </if>
     </where>
  </select>
</mapper>

5.13 航班資訊詳情

航班資訊詳情是對某一航班資訊的詳細情況進行展示，如下圖所示。使用者點選選定航班，航班詳細資訊以下拉列表的形式展現給使用者。

主要程式碼如下：

//保留n位小數
	$scope.weishu=function(price,n){
		return new Number(price).toFixed(n);
	}
	//下拉詳情
	$scope.lists=function(flightNumber){
		//收縮狀態
		if($("#F_"+flightNumber).is(":visible")){
			$scope.reloadList();
		}
		$("#F_"+flightNumber).animate({
		      height:'toggle'
		    });
	}
	//判斷最低價
	$scope.minPrice=function(flightHighPrice,flightMiddlePrice,flightBasePrice){
		return (flightHighPrice<=flightMiddlePrice?flightHighPrice:flightMiddlePrice)<=flightBasePrice?(flightHighPrice<=flightMiddlePrice?flightHighPrice:flightMiddlePrice):flightBasePrice
	}
	//判斷是否有票
	$scope.isKickets=function(kicketsNumber,flightNumber,temp){
		/*console.log(flightNumber)*/
		if(kicketsNumber>0){
			$("#"+temp+"_"+flightNumber).css({
				color:"green"
			});
			return "有票";
		}
		else{
			$("#"+temp+"_"+flightNumber).css({
				color:"red"
			});
			return "無票";
		}
	}

5.14 登入使用者資訊展示

遊客訪問前臺系統時，在頁面頭部顯示“請登入”字樣，如下圖所示資訊，而網站使用者登入後則顯示“您好，XXX”字樣，如下圖所示。

5.15 留言板

點選前臺系統右上角“留言板”按鈕進入都留言頁面如下圖所示。留言評論是前臺系統使用者完成註冊後具有的功能，使用者可以通過留言評論功能對所購班次機票進行全方位的評價，也可以對其在使用過程中遇到的問題進行反饋。

主要程式碼以前臺系統controller層DiscussManageController.java類例：

package com.cafuc.controller;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.List;
import javax.annotation.Resource;
import org.apache.commons.collections.FastArrayList;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.cafuc.pojo.Discuss;
import com.cafuc.pojo.Flight;
import com.cafuc.pojo.PageResult;
import com.cafuc.pojo.Result;
import com.cafuc.service.IDiscussManageService;
import com.cafuc.service.IPortalManageService;
@RestController
@RequestMapping("discussManage")
public class DiscussManageController {
	@Resource
	private IDiscussManageService discussManageService;
	@RequestMapping("addDiscuss")
	public Result addDiscuss(@RequestBody Discuss discuss){
		try {
			System.out.println(discuss);
			discussManageService.addDiscuss(discuss);
			return new Result(true, "評論成功");
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
			return new Result(false, "評論失敗");
		}
	}
	@RequestMapping("init")
	public List<Discuss> init(){
		return discussManageService.init();
	}
}

5.16 訂單填寫

訂單填寫是機票預定中不可缺少的步驟之一，使用者找到自己所需班次後點選訂票按鈕進入訂單資訊填寫頁面，使用者所填寫的資訊包括乘機人資訊和聯絡人資訊量大模組，如下圖所示。填寫完資訊後點擊提交訂單按鈕，等待驗證資料的有效性，確定填寫無誤後完成提交，填寫訂單的前提是使用者已經登入系統。

5.17 訂單詳情

填寫訂單資訊完成訂單提交後彈出訂單詳情頁面提示使用者檢查航班資訊和填寫的使用者資訊，如下圖所示。確保資訊無誤後點擊確認付款按鈕跳轉到訂單支付頁面。

訂單確認功能主要程式碼如下：

@RequestMapping("/ack")
	public void ack(Order order,HttpServletRequest request,HttpServletResponse response) throws IOException {
		try {
			if(order.getOrderDate() ==null) {
				order.setOrderDate(new Date());
			}
			HttpSession httpSession=request.getSession();
			httpSession.setAttribute("order", order);
			System.out.println(request.getSession().getAttribute("order"));
			response.sendRedirect(request.getContextPath()+"/pay/index.jsp");
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}
	}

5.18 訂單支付

機票預訂系統的訂單支付功能使用的是支付寶沙箱環境支付，螞蟻沙箱環境 (Beta) 是協助開發者進行介面功能開發及主要功能聯調的輔助環境。登入支付寶沙箱平臺依次完成生成買家和賣家賬號資訊、生成RSA祕鑰、設定公鑰資訊、設定應用閘道器等應用環境配置。完成配置後下載官方測試程式碼，本系統選擇的是電腦應用java版本，然後將下載的專案匯入到eclipse工作空間。最後設定核心配置檔案資訊，開啟flyTicket-portal-web專案下com.alipay.config包中的AlipayConfig.java檔案配置如下資訊：
//沙箱APPID
public static final String app_id = "這裡需要自己申請";
//沙箱私鑰
public static final String merchant_private_key = "這裡需要自己申請";
//支付寶公鑰
public static final String alipay_public_key = "這裡需要自己申請";
//沙箱閘道器地址
public static final String gatewayUrl = "https://openapi.alipaydev.com/gateway.do";

//伺服器非同步通知頁面路徑需http://格式的完整路徑，不能加?id=123這類自定義引數，必須外網可以正常訪問
public static String notify_url = "http://localhost:8081/flyTicket-portal-web/pay/notify_url.jsp";

//頁面跳轉同步通知頁面路徑需http://格式的完整路徑，不能加?id=123這類自定義引數，必須外網可以正常訪問
public static String return_url = "http://localhost:8081/flyTicket-portal-web/orderManage/complete";
完成以上配置後就可以實現訂單支付功能了。點選確認付款後跳轉到如下圖所示介面。

點選付款按鈕後如下圖所示，可以登入賬戶付款，也可以使用手機端沙箱支付寶完成付款。

完成付款後如下圖所示

主要程式碼如下：

//支付完成後
@RequestMapping("complete")
public void complete(HttpServletRequest request,HttpServletResponse response) throws IOException {
	System.out.println(request.getSession().getAttribute("order"));
	Order order=(Order)request.getSession().getAttribute("order");
	try {
		//將資料插入到訂單表中
		orderManageService.insertOrder(order);
		//更改庫存
		Flight flight=orderManageService.findOneByFlightNumber(order.getFlightNumber());
		if(order.getGrade().equals("f")) {
			flight.setFlightHighNumber(flight.getFlightHighNumber()-1);
		}
		else if(order.getGrade().equals("b")) {
			flight.setFlightMiddleNumber(flight.getFlightMiddleNumber()-1);
		}
		else {
			flight.setFlightBaseNumber(flight.getFlightBaseNumber()-1);
		}
		orderManageService.updatesNum(flight);
		} catch (Exception e) {
			e.printStackTrace();
		}
		response.sendRedirect(request.getContextPath()+"/default/index.html");
	}

獲取原始碼請關注公眾號：C you again，回覆“基於web的機票管理系統”或者“機票管理系統”