当前位置：首页 > article >正文

基于SpringBoot+Vue技术的宇宙动漫网站【前后端分离】

article 2024/11/2 18:03:00

基于SpringBoot+Vue技术的宇宙动漫网站设计与实现

摘要

宇宙动漫网站是一个为动漫爱好者提供观看、讨论和分享的平台，致力于打造一个全面且便捷的动漫资源平台。该网站使用SpringBoot和Vue技术栈，通过后端提供数据接口支持和数据存储，前端实现动态加载和用户友好界面，满足了用户对动漫资源检索、观看、互动的需求。本系统的设计兼具灵活性和可扩展性，为动漫爱好者提供了高质量的用户体验。

研究意义

随着互联网的飞速发展，动漫已成为大众娱乐的重要组成部分，尤其在年轻群体中有着广泛的影响力。传统的动漫网站或应用通常功能单一，缺少个性化推荐、交流互动等功能，难以满足用户多样化的需求。基于SpringBoot和Vue技术的动漫网站通过集成丰富的动漫资源和用户互动功能，可以为动漫迷提供更优质的资源体验和互动空间，为动漫产业的数字化和传播做出贡献。

研究现状

当前，动漫网站主要有以下几类：一类是专注于资源分享和推荐的，如B站等平台提供了大量正版动漫；另一类是小型社区类网站，主要为用户提供交流和讨论的平台。这些网站通常涉及视频播放、资源分类、用户评论等功能。但现有的动漫网站大多功能划分不够清晰、个性化推荐不足、交互体验有限，基于SpringBoot和Vue技术构建的动漫网站可以更好地解决这些问题。SpringBoot提供高效的后台服务，而Vue框架的前端技术让网站具备良好的用户体验与交互性。

功能展示

在这里插入图片描述

代码展示

1. 用户注册与登录功能代码示例

后端代码示例

// UserController.java
@RestController
@RequestMapping("/api/user")
public class UserController {
    
    @Autowired
    private UserService userService;
    
    @PostMapping("/register")
    public ResponseEntity<?> register(@RequestBody UserDto userDto) {
        userService.register(userDto);
        return ResponseEntity.ok("User registered successfully");
    }
    
    @PostMapping("/login")
    public ResponseEntity<?> login(@RequestBody LoginDto loginDto) {
        boolean isAuthenticated = userService.login(loginDto.getUsername(), loginDto.getPassword());
        return isAuthenticated ? ResponseEntity.ok("Login successful") : ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Invalid credentials");
    }
}

前端代码示例

// Login.vue
<template>
  <div class="login">
    <h2>Login</h2>
    <form @submit.prevent="submitLogin">
      <input type="text" v-model="username" placeholder="Username" />
      <input type="password" v-model="password" placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    submitLogin() {
      this.$axios.post('/api/user/login', { username: this.username, password: this.password })
        .then(response => {
          alert(response.data);
          this.$router.push('/home');
        })
        .catch(error => {
          alert("Login failed");
        });
    }
  }
};
</script>

2. 动漫资源检索功能代码示例

// AnimeController.java
@RestController
@RequestMapping("/api/anime")
public class AnimeController {
    
    @Autowired
    private AnimeService animeService;
    
    @GetMapping("/search")
    public List<Anime> searchAnime(@RequestParam String keyword) {
        return animeService.searchAnime(keyword);
    }
}

// AnimeSearch.vue
<template>
  <div class="anime-search">
    <input v-model="searchTerm" placeholder="Search Anime" />
    <button @click="searchAnime">Search</button>
    <ul v-if="results.length">
      <li v-for="anime in results" :key="anime.id">{{ anime.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTerm: '',
      results: []
    };
  },
  methods: {
    searchAnime() {
      this.$axios.get('/api/anime/search', { params: { keyword: this.searchTerm } })
        .then(response => {
          this.results = response.data;
        })
        .catch(error => {
          alert("Failed to fetch results");
        });
    }
  }
};
</script>

数据库展示

1. 数据库表设计

用户表 (User)：
- id：用户唯一标识
- username：用户名
- password：密码
- email：用户邮箱
- role：用户角色（普通用户、管理员）
- avatar：用户头像
动漫资源表 (Anime)：
- id：动漫唯一标识
- title：动漫标题
- description：动漫简介
- category：动漫类别
- release_date：发布日期
- rating：用户评分
评论表 (Comment)：
- id：评论唯一标识
- user_id：评论用户ID
- anime_id：被评论动漫ID
- content：评论内容
- created_at：评论时间

2. 数据库连接配置

# application.yml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/universe_anime
    username: root
    password: password
  jpa:
    hibernate:
      ddl-auto: update
    show-sql: true