Java项目实战笔记--基于SpringBoot3.0开发仿12306高并发售票系统--(二)项目实现-第二篇-前端模块搭建及单点登录的实现

在这个章节中，我们将继续基于SpringBoot 3.0开发一个仿12306高并发售票系统，并重点讨论前端模块的搭建及单点登录的实现。在高并发场景下，用户体验是至关重要的，而单点登录(SSO)可以帮助我们简化用户的认证过程，提高系统的可用性和安全性。

一、前端模块搭建

前端部分我们可以使用Vue.js作为开发框架，配合Element UI库来快速构建用户界面。首先，确保你已经安装了Node.js和Vue CLI。

1. 创建 Vue 项目

在命令行中运行以下命令以创建一个新的Vue项目：

vue create ticketing-system-frontend

根据提示选择一个适合的模板。创建完成后，进入项目目录：

cd ticketing-system-frontend

2. 安装 Element UI

在项目中安装 Element UI：

npm install element-plus --save

接下来，在src/main.js中引入Element UI并进行全局注册：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

3. 创建基础布局

我们可以在src/components下创建一个名为Header.vue的组件，作为页面的头部：

<template>
  <el-header>
    <div class="logo">12306仿真系统</div>
    <el-menu mode="horizontal" :default-active="activeIndex">
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">购票</el-menu-item>
      <el-menu-item index="3">我的订单</el-menu-item>
    </el-menu>
    <el-button type="primary" @click="logout">登出</el-button>
  </el-header>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    };
  },
  methods: {
    logout() {
      // 执行登出操作
      localStorage.removeItem('token');
      this.$router.push('/login');
    }
  }
};
</script>

<style>
.logo {
  float: left;
  color: white;
  font-size: 20px;
  line-height: 64px;
  margin-left: 20px;
}
</style>

二、单点登录的实现

1. 后端接口

首先，我们需要在Spring Boot中实现一个用于登录的接口。我们可以使用Spring Security来管理用户的认证与授权。以下是一个简单的登录接口代码示例：

@RestController
@RequestMapping("/api/auth")
public class AuthController {

    @Autowired
    private AuthenticationManager authenticationManager;

    @Autowired
    private JwtUtil jwtUtil;

    @PostMapping("/login")
    public ResponseEntity<?> login(@RequestBody LoginRequest loginRequest) {
        try {
            Authentication authentication = authenticationManager.authenticate(
                new UsernamePasswordAuthenticationToken(loginRequest.getUsername(), loginRequest.getPassword()));
            SecurityContextHolder.getContext().setAuthentication(authentication);
            String token = jwtUtil.generateToken(authentication.getName());
            return ResponseEntity.ok(new LoginResponse(token));
        } catch (Exception e) {
            return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("登录失败");
        }
    }
}

2. 前端登录

在前端，我们需要创建一个登录页面，并调用后端接口进行用户认证。可以在src/views目录下创建一个Login.vue组件：

<template>
  <el-form :model="loginForm" ref="loginForm">
    <el-form-item label="用户名" :rules="[{ required: true, message: '请输入用户名' }]">
      <el-input v-model="loginForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" :rules="[{ required: true, message: '请输入密码' }]">
      <el-input type="password" v-model="loginForm.password"></el-input>
    </el-form-item>
    <el-button type="primary" @click="handleLogin">登录</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    handleLogin() {
      this.$http.post('/api/auth/login', this.loginForm).then(response => {
        localStorage.setItem('token', response.data.token);
        this.$router.push('/home');
      }).catch(error => {
        console.error("登录失败", error);
        this.$message.error("登录失败");
      });
    }
  }
}
</script>

结束语

通过上述步骤，我们初步搭建了前端模块，并实现了基本的单点登录功能。这样，用户在登录后即可使用系统中的各种功能，而无需重复输入用户名和密码。接下来，我们可以逐步优化系统的其他模块，提高其可用性和可靠性。