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

時間 2020-07-10

標籤基於 web 機票管理系統設計實現欄目 HTML 简体版

原文原文鏈接

基於web的機票管理系統

若是你尚未閱讀基於web的機票管理系統設計與實現（一），請點擊查看，獲取詳細資料請關注公衆號：C you againcss

5 系統詳細設計及實現

5.1 添加航班信息

系統管理員登陸後臺系統後，點擊側邊欄的航班信息管理按鈕會出現下拉列表菜單，繼續點擊添加航班信息按鈕能夠進行添加航班信息操做。添加航班時輸入航班號、起點、終點、始發機場、到達機場等信息，以下圖所示。

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

主要代碼：html

@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所示。
java

主要代碼這裏以航班查詢功能service層代碼爲例：mysql

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代碼爲例：web

<?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所示。

redis

主要代碼以用戶搜索功能dao層的mapper代碼爲例：spring

<?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。

sql

主要代碼之後臺系統留言評論模塊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 添加廣告信息

廣告做爲網站的必要元素，在機票系統的前臺頁面也有廣告展現的功能，後臺增長了相應的管理模塊，界面以下圖所示。
apache

後臺系統添加廣告的步驟：管理員登陸後臺系統後點擊廣告管理按鈕，在出現的下拉列表選項中選擇添加廣告信息並點擊進入廣告添加頁面，在頁面輸入廣告圖片、廣告連接，廣告說明等信息，點擊保存按鈕，進行數據校驗，檢查數據的有效性和完整性，保證數據無誤以後將數據信息持久化到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的機票管理系統」或者「機票管理系統」