基于ssm的航空订票系统

基于ssm的航空订票系统

一、技术栈

​ 前端
​ vue全家桶、element-ui组件库、moment.js插件
​ 后端
​ springboot + springmvc+ mybatis

二、功能描述

本系统是基于B/S架构的航空订票系统

系统分为三大用户–乘客、航空公司、后台管理员，本次课程设计主要实现了乘客界面，包括购票、选座、充值、退款、改签等

三、技术框架

1、界面设计

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

上面这段官方解释的意思是，vue提供了一种组件化设计的方式，也就是说，你可以在单个vue对象中构建起实现某些功能compopent，再在下一个vue中将它们组装，最后在一个vue中展示。有过面向对象编程经历的程序员很容易接受这种设计方式，就像手写一个自己的class，然后再别的类中引用类实例和方法一样——就连引入这个行为使用的也是同一个关键字import

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

Element UI 对于新手前端设计师来说是福音，它自带的一系列标签和组件可以帮助那些为JavaScript繁琐而头疼的编程者们开辟一个的新天地。只要基础程度的审美，人人都可以设计出一套简洁好看的界面。

这些组件可以通过Attribute、Event和Methods标签进行个性化的设置，同时也在很大程度上简化了js函数的写法

2、前后端通信

引入axios插件后，在函数中可以通过axios对象向目标端口发送请求并执行回调，例如向8181端口发送一个post请求

this.$axios.post("http://localhost:8181/findAll").then(res => {
   })

后端可以通过设置一个跨域类CrosConfig来接收前端请求

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CrosConfig implements WebMvcConfigurer {
   
   @Override
   public void addCorsMappings(CorsRegistry registry) {
   
      registry.addMapping("/**")//拦截所有请求
            .allowedOrigins("*")
            .allowedMethods("GET","HEAD","POST","PUT","DELETE")//拦截所有类型
            .allowCredentials(true)
            .maxAge(3600)//最大线程数
            .allowedHeaders("*");//允许所有请求头
   }
}

也有在src/resource/mybatis-config.xml中配置跨域的方法，这边不赘述

映射写法

主流有两种方法，一种是REST风格，一种是直接发送json的写法

• 简单来说，REST风格将发送的数据拼接进请求里，通过 “/” 隔开，在后台用 @RequestMapping 注解完成方法映射 @PathVariable注解直接赋值到确定数据类型里

如：前端

this.$axios.post("http://localhost:8181/login/passenger/"+that.loginform.passengername+"/"+that.loginform.password)

后端

@RequestMapping
(value = "/passenger/{passengername}/{password}",
                method = RequestMethod.POST,
                produces = {
   "application/json;charset=UTF-8"})
public String passengerlogin(@PathVariable("passengername") String passengername,
                             @PathVariable("password") String password)

• 另一种向后台直接发送数据的则是要用*@RequestBody*，把json表封装成类实例，再调用get方法取数据

如：前端

this.$axios.post("http://localhost:8181/order/refund", row)

后端

@RequestMapping
(value = "refund", method = RequestMethod.POST, produces = {
   "application/json;charset=UTF-8"})
public String refundOrder(@RequestBody OrderInfo orderInfo)

在数据量较小的情况下，REST风格要更加简洁干练

3、持久层

现在使用最广泛的两种持久层框架是JPA和mybatis，这两者都有各自忠实的使用者，孰优孰劣也不是我这样的技术小白讲得清楚的，不过我的建议是，如果你刚刚接触持久层框架而整纠结于二者的选择，不妨就照着这篇博客试试mybatis，在初级阶段，它绝不比JPA更复杂，同时也能保证完成你的各项设计目标。你可以在下一次实验中尝试JPA，再来体会一下二者的区别

MyBatis 是一款优秀的持久层框架，它支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型、接口和 Java POJO（Plain Old Java Objects，普通老式 Java 对象）为数据库中的记录。

如官方文档所言，持久层框架的价值有二：一是封装JDBC代码，省去繁琐重复的操作，使人的工作能集中到sql代码的书写和数据库设计上来；二是维持POJO，使数据以对象的形式长久稳定地存在于程序运行过程中，提升了数据交互的效率

简单的sql语句可以通过注解直接在方法上书写，复杂查询语句或者大段大段的sql则适合接口 + .xml文档的方式，为了统一形式，对初学者我更加推荐把所有的sql都写在xml文档中的方法

mybatis将数据实体、接口方法和sql实现xml联动的写法可以参照如下代码

数据实体类PassengerInfo

package com.oreki.ptss_rear.domain;

import lombok.Data;