基于Java+SpringBoot+vue前后端分离小徐影城管理系统设计实现

**小徐影城管理系统设计与实现**

**概述**

本文将介绍如何使用 Java + Spring Boot + Vue 构建一个完整的前后端分离的小徐影城管理系统。该系统将包含用户管理、电影管理、场次管理等功能。

**技术栈**

* Java8* Spring Boot2.3.4* Vue.js3.0* MySQL5.7**系统设计**

### **数据库设计**

首先，我们需要设计一个适合小徐影城管理系统的数据库结构。我们将使用 MySQL 来存储数据。

sqlCREATE TABLE `user` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `username` varchar(255) NOT NULL,
 `password` varchar(255) NOT NULL,
 PRIMARY KEY (`id`)
);

CREATE TABLE `movie` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(255) NOT NULL,
 `description` text NOT NULL,
 PRIMARY KEY (`id`)
);

CREATE TABLE `showtime` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `movie_id` int(11) NOT NULL,
 `date` date NOT NULL,
 `time` time NOT NULL,
 PRIMARY KEY (`id`),
 KEY `movie_id` (`movie_id`),
 CONSTRAINT `showtime_ibfk_1` FOREIGN KEY (`movie_id`) REFERENCES `movie` (`id`)
);

java// application.propertiesspring.datasource.url=jdbc:mysql://localhost:3306/xiaoxuspring.datasource.username=rootspring.datasource.password=123456spring.jpa.hibernate.ddl-auto=update

java// User.java@Entitypublic class User {
 @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
 private Long id;
 private String username;
 private String password;

 // getter and setter}

java// MovieController.java@RestController@RequestMapping("/api/movie")
public class MovieController {
 @Autowired private MovieService movieService;

 @GetMapping public List getAllMovies() {
 return movieService.getAllMovies();
 }

 @PostMapping public Movie createMovie(@RequestBody Movie movie) {
 return movieService.createMovie(movie);
 }
}

javascript// main.jsimport Vue from 'vue'
import App from './App.vue'

new Vue({
 render: h => h(App),
}).$mount('#app')

html<!-- App.vue -->

<template>
 <div>
 <h1>小徐影城管理系统</h1>
 <ul>
 <li v-for="movie in movies" :key="movie.id">
 {{ movie.name }}
 </li>
 </ul>
 </div>
</template>

<script>
export default {
 data() {
 return {
 movies: []
 }
 },
 mounted() {
 this.getMovies()
 },
 methods: {
 getMovies() {
 axios.get('/api/movie')
 .then(response => {
 this.movies = response.data })
 .catch(error => {
 console.error(error)
 })
 }
 }
}
</script>