Spring Boot、MongoDB、Vue 2和Nginx实现一个小说网站

在本篇文章中，我们将带你逐步实现一个完备的小说网站项目，技术栈包括Spring Boot、MongoDB、Vue 2和Nginx。

如果仅仅只是想下载完整代码,直接去gitee上下载即可：

小说网站: vue2+springboot+mongodb实现一个小说网站

额外附加：

2024年6月14日10:53:47

• 增加了搜索页面
• 小说的详细页面
• 章节内容页面

当你遇到问题可以尝试来这里解决问题

package.json

如果你的 “dependencies”和我的不一样，说明你vue并没有按照我的勾选router，自己去其他地方安装router

{
  "name": "vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^1.7.2",
    "core-js": "^3.8.3",
    "echarts": "^5.5.0",
    "element-ui": "^2.15.14",
    "vue": "^2.6.14",
    "vue-echarts": "^6.7.3",
    "vue-router": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "vue-template-compiler": "^2.6.14"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

1. 项目概述

我们将实现一个基本的小说网站，包含以下主要部分：

• 后端API：使用Spring Boot实现，负责处理数据和业务逻辑。
• 数据库：使用MongoDB存储小说数据。
• 前端页面：使用Vue 2实现，负责展示数据和用户交互。
• 反向代理：使用Nginx进行前后端分离。

2. 环境和依赖

2.1 后端 - Spring Boot

• Spring Boot 3.x
• Spring Data MongoDB
• Spring Web

2.2 数据库 - MongoDB

• 安装MongoDB社区版

2.3 前端 - Vue 2

• Vue CLI
• Axios（用于HTTP请求）

3. 项目结构

在这一步，我们将创建项目的基本目录结构：

novel-website
├── novel(Spring Boot项目)
├── frontend (Vue项目)
└── nginx (Nginx配置)

4. 后端开发

数据准备：可以去 https://blog.youkuaiyun.com/iku_n/article/details/139509931 这里有爬虫的代码，我使用的是改版，并且是直接把数据导入到mongodb里面

首先，我们创建Spring Boot项目，并添加相关依赖。

4.1 创建Spring Boot项目

使用Spring Initializr创建项目

注意选择Java和Maven

4.2 引入pom文件

这里直接复制粘贴我的就行 (高手无视即可)

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.2.4</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>springboot</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot</name>
    <description>springboot</description>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.7.20</version>
        </dependency>
        <!-- poi依赖 -->
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>5.2.5</version>
        </dependency>
        <!-- 引入mongodb-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-mongodb</artifactId>
        </dependency>
        <!--swagger-->
        <dependency>
            <groupId>org.springdoc</groupId>
            <artifactId>springdoc-openapi-starter-webmvc-ui</artifactId>
            <version>2.1.0</version>
        </dependency>
        <dependency>
            <groupId>org.springdoc</groupId>
            <artifactId>springdoc-openapi-starter-webmvc-api</artifactId>
            <version>2.1.0</version>
        </dependency>
        <!--web-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--json依赖-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.76</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

4.3 写yml文件

先在这个位置创建一个yml文件

server:
  port: 9099
spring:
  data:
    mongodb:
      host: localhost
      port: 27017
      database: novel_database
      

4.4 编写实体类、仓库和服务

首先在Java下面创建一个com.sqm.model的文件包

构建启动类

启动类: NovelApplication

package com.sqm;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * 功能: 启动类
 * 作者: 沙琪马
 * 日期: 2024/6/7 12:13
 */

@SpringBootApplication
public class NovelApplication {
    public static void main(String[] args) {
        SpringApplication.run(NovelApplication.class, args);
    }
}

创建一个小说实体类：

实体类: Novel

package com.sqm.model;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.Document;
import org.springframework.data.mongodb.core.mapping.Field;

import java.util.List;
import java.util.Map;

/**
 * 功能: 小说模型
 * 作者: 沙琪马
 * 日期: 2024/6/7 12:10
 */

@Data
@NoArgsConstructor
@AllArgsCon