用web写一个电影后台管理系统

好的，下面是一个简单的电影后台管理系统的设计和实现思路。

1.数据库设计

首先需要设计数据库，这里我们设定两个表：

- movies：电影信息表，包含电影ID、电影名称、导演、主演、上映时间等字段。
- users：用户信息表，包含用户ID、用户名、密码等字段。

2.功能需求

根据电影后台管理系统的特点，我们可以确定它需要完成以下功能：

- 用户登录：用户输入用户名和密码登录后台管理系统。
- 电影信息管理：管理员可以添加、修改、删除电影信息。
- 用户信息管理：管理员可以查看用户信息，也可以添加、修改、删除用户信息。

3.技术选型

- 前端框架：使用Vue.js来构建前端界面。
- 后端框架：使用Spring Boot来快速搭建后台服务。
- 数据库：使用MySQL作为数据库。

4.实现步骤

- 创建Spring Boot项目，并引入相关依赖。
- 创建数据库表，并编写DAO层代码，实现数据库的增删改查操作。
- 编写Controller层代码，实现前后端数据交互。
- 编写Vue.js代码，实现前端界面的交互和显示。

5.代码示例

这里提供一个简单的代码示例，仅供参考。

（1）数据库设计

CREATE TABLE `movies` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `director` varchar(255) NOT NULL,
  `actors` varchar(255) NOT NULL,
  `release_date` date NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

（2）DAO层代码

@Repository
public interface MovieMapper {
    List<Movie> findAll();

    Movie findById(int id);

    void add(Movie movie);

    void update(Movie movie);

    void delete(int id);
}

@Repository
public interface UserMapper {
    User findByUsername(String username);

    void add(User user);

    void delete(int id);
}

（3）Controller层代码

@RestController
@RequestMapping("/api/movies")
public class MovieController {
    @Autowired
    private MovieMapper movieMapper;

    @GetMapping("")
    public List<Movie> findAll() {
        return movieMapper.findAll();
    }

    @GetMapping("/{id}")
    public Movie findById(@PathVariable("id") int id) {
        return movieMapper.findById(id);
    }

    @PostMapping("")
    public void add(@RequestBody Movie movie) {
        movieMapper.add(movie);
    }

    @PutMapping("/{id}")
    public void update(@PathVariable("id") int id, @RequestBody Movie movie) {
        movie.setId(id);
        movieMapper.update(movie);
    }

    @DeleteMapping("/{id}")
    public void delete(@PathVariable("id") int id) {
        movieMapper.delete(id);
    }
}

@RestController
@RequestMapping("/api/users")
public class UserController {
    @Autowired
    private UserMapper userMapper;

    @PostMapping("/login")
    public User login(@RequestParam("username") String username, @RequestParam("password") String password) {
        User user = userMapper.findByUsername(username);
        if (user != null && user.getPassword().equals(password)) {
            return user;
        }
        return null;
    }

    @GetMapping("")
    public List<User> findAll() {
        return userMapper.findAll();
    }

    @PostMapping("")
    public void add(@RequestBody User user) {
        userMapper.add(user);
    }

    @DeleteMapping("/{id}")
    public void delete(@PathVariable("id") int id) {
        userMapper.delete(id);
    }
}

（4）Vue.js代码

<template>
  <div>
    <h2>电影列表</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>导演</th>
          <th>主演</th>
          <th>上映时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="movie in movies" :key="movie.id">
          <td>{{ movie.id }}</td>
          <td>{{ movie.name }}</td>
          <td>{{ movie.director }}</td>
          <td>{{ movie.actors }}</td>
          <td>{{ movie.release_date }}</td>
          <td>
            <button @click="edit(movie)">编辑</button>
            <button @click="remove(movie)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <h2>添加电影</h2>
    <form @submit.prevent="add">
      <label>名称：</label>
      <input type="text" v-model="newMovie.name"><br>
      <label>导演：</label>
      <input type="text" v-model="newMovie.director"><br>
      <label>主演：</label>
      <input type="text" v-model="newMovie.actors"><br>
      <label>上映时间：</label>
      <input type="date" v-model="newMovie.release_date"><br>
      <button type="submit">添加</button>
    </form>

    <h2>用户列表</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>用户名</th>
          <th>密码</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.username }}</td>
          <td>{{ user.password }}</td>
          <td>
            <button @click="remove(user)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <h2>添加用户</h2>
    <form @submit.prevent="addUser">
      <label>用户名：</label>
      <input type="text" v-model="newUser.username"><br>
      <label>密码：</label>
      <input type="password" v-model="newUser.password"><br>
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movies: [],
      newMovie: {
        name: "",
        director: "",
        actors: "",
        release_date: "",
      },
      users: [],
      newUser: {
        username: "",
        password: "",
      },
    };
  },
  mounted() {
    this.loadMovies();
    this.loadUsers();
  },
  methods: {
    loadMovies() {
      fetch("/api/movies")
        .then((response) => response.json())
        .then((data) => {
          this.movies = data;
        });
    },
    add() {
      fetch("/api/movies", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(this.newMovie),
      }).then(() => {
        this.loadMovies();
        this.newMovie = {
          name: "",
          director: "",
          actors: "",
          release_date: "",
        };
      });
    },
    edit(movie) {
      // TODO: 编辑电影信息
    },
    remove(movie) {
      fetch("/api/movies/" + movie.id, {
        method: "DELETE",
      }).then(() => {
        this.loadMovies();
      });
    },
    loadUsers() {
      fetch("/api/users")
        .then((response) => response.json())
        .then((data) => {
          this.users = data;
        });
    },
    addUser() {
      fetch("/api/users", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(this.newUser),
      }).then(() => {
        this.loadUsers();
        this.newUser = {
          username: "",
          password: "",
        };
      });
    },
    remove(user) {
      fetch("/api/users/" + user.id, {
        method: "DELETE",
      }).then(() => {
        this.loadUsers();
      });
    },
  },
};
</script>

以上是一个简单的电影后台管理系统的设计和实现思路，仅供参考。具体实现过程中可能会出现各种问题，需要根据实际情况进行调整。