jun-wei-zeng / movie_recommendation_system_vue

电影推荐系统(Movie Recommendation System,前端:Vue3 + Element Plus + axios)前后端分离项目

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

电影推荐系统(前端)

电影推荐系统后端

后端地址:movie_recommendation_system_server

项目启动和编译

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

前端技术

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

系统功能模块

系统功能模块总览:

系统功能模块.png

功能模块前端界面展示

基础功能模块

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

  1. 主页面

系统主页.png

  1. 电影分类

电影分类.png

  1. 搜索电影

搜索电影.png

  1. 查看电影详情

查看电影详情.png

用户模块

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

  1. 用户登录

用户登录.png

  1. 用户注册

用户注册.png

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

修改个人信息.png

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

img.png

  1. 查看电影评价

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

img.png

  1. 进行电影评价

img.png

  1. 用户主页

img.png

特色功能展示

  1. 电影星球

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

img.png

  1. 评论词云图

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

img.png

界面自适应实现

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

About

电影推荐系统(Movie Recommendation System,前端:Vue3 + Element Plus + axios)前后端分离项目

License:MIT License


Languages

Language:Vue 84.5%Language:JavaScript 15.1%Language:HTML 0.3%