526互联

【电影推荐系统】Spring Boot + Vue3 前后端分离项目

发布时间 2023-12-30 20:30:55作者: vanish丶

【电影推荐系统】Spring Boot + Vue3 前后端分离项目

目录

0 前言

总项目名称：电影推荐系统

项目采用前后端分离：

  1. 前端：
  2. 后端：
  3. 数据爬虫：
    • 简介：爬取项目所需的电影基本信息数据和用户评价数据等并存储。
    • 仓库地址：正在路上...
    • 技术栈：正在路上...

系统功能模块总览：

系统功能模块.png

1 项目前端介绍

项目地址：movie_recommendation_system_vue

1.1 项目启动和编译

1.1.1 项目启动

Compiles and hot-reloads for development:

npm run serve

1.1.2 项目编译

Compiles and minifies for production:

npm run build

1.2 前端技术栈

  • Vue3框架
  • Element Plus组件库（基于 Vue 3，面向设计师和开发者的组件库）
  • Axios库（一个基于 promise 的网络请求库）
  • Echarts库（一个基于 JavaScript 的开源可视化图表库）
  • vue-copper库（基于vue的优雅图片裁剪插件）
  • ...

1.3 功能模块前端界面展示

1.3.1 基础功能模块

主要是游客可以查看的页面信息。

  1. 主页面

系统主页.png
2. 电影分类

电影分类.png

  1. 搜索电影

搜索电影.png

  1. 查看电影详情

查看电影详情.png

1.3.2 用户模块

主要包括用户登录、注册、修改个人信息、账号设置、查看电影评价、进行电影评价等功能。

  1. 用户登录

用户登录.png

  1. 用户注册

用户注册.png

  1. 修改个人信息（包括头像、昵称、性别、电影特征偏好等）

修改个人信息.png

  1. 账号设置（包括密码修改、绑定邮箱等）

账号设置.png

  1. 查看电影评价

    • 用户点赞：点赞功能在前端通过节流，来防止用户恶意点击。
    • 滚动置底加载：当滚轮滚动至底部时，加载新的评论。

查看电影评价.png

  1. 进行电影评价

进行电影评价.png

  1. 用户主页

用户主页.png

1.3.3 特色功能展示

  1. 电影星球

主要展示用户看过电影和系统推荐电影之间的关系，用户可以点击电影结点，查看电影的详情页面。电影星球.png

  1. 评论词云图

将电影评论进行分词后，去除无关符号和词语，通过词云图展示电影的一些关键字信息。

评论词云图.png

1.3.4 界面自适应实现

  1. 手机端展示
手机端自适应_1 手机端自适应_2 手机端自适应_3
  1. 平板端展示
平板端自适应_1 平板端自适应_2
平板端自适应_1 平板端自适应_2

2 项目后端介绍

仓库地址：movie_recommendation_system_server

2.1 项目打包部署

2.1.1 项目打包

IDEA右边栏中选择Maven → 按住Ctrl → 选择Lifecycle下的clean和package → 点击上方的绿色运行按钮 → 等待项目打包成jar包 → 打包好的jar包会在项目的target目录中

项目打包.png

2.1.2 项目部署

  1. 将打包好的项目jar包上传到自己的服务器上。

  2. 通过以下命令时项目在服务器后台运行，并且输出日志到out.txt文件（可修改）：

    nohup java -jar 项目名.jar >out.txt &

2.2 后端功能实现

  1. 用户登录、注册、个人信息修改等接口实现。
  2. 基于内容推荐和基于用户协同过滤推荐等推荐算法实现，整合两种算法实现混合式推荐，并解决冷启动问题。
  3. 查询各种电影信息接口实现（如电影搜索、推荐给用户的电影信息查询等）。
  4. 用户点赞功接口实现（点赞信息暂存，再按时持久化到数据库）。
  5. ...

3 数据爬虫介绍

  • 简介：爬取项目所需的电影基本信息数据和用户评价数据等并存储。
  • 仓库地址：正在路上...
  • 技术栈：正在路上...

转载声明：该博客来源于vanish丶的博客园