推荐系统-Task04前后端基础及交互

Posted 2022-01-18 GoAl的博客

项目流程：

 交互基本流程

  本项目的前端采用基于vue框架的Vant UI组件库，完成用户注册页、用户退出页、用户热门列表页、用户推荐列表页、新闻详情页等功能；后端采用Flask框架，使用mysql、MongoDB和Redis作为数据存储，根据新闻推荐系统的整体功能，提供用户注册、用户登录、用户推荐页列表、用户热门页列表、新闻详情、用户行为等服务请求，完成用户从注册到新闻浏览、点赞和收藏的全流程。

vue介绍：

​

 架构图以及vue的简介 - Dawnzhang - 博客园

架构图以及vue的简介 - Dawnzhang - 博客园

项目前端结构：

Vue-newsinfo
+---src---------------------------------项目主文件夹
|   +---assets--------------------------静态资源文件，包括img、css、js
|   |   +---css-------------------------样式文件
|   |   |   +---sign.css----------------登录注册页的样式
|   |   |   +---test.css----------------顶部导航样式
|   |   +---js--------------------------前端功能
|   |   |   +---cookie.js---------------定义cooki的相关操作，用于用户登录注册、退出时的cookie操作
|   +---components----------------------组件
|   |   +---bottomBar.vue---------------底部导航
|   |   +---hotLists.vue----------------热门页
|   |   +---Myself.vue------------------个人中心“我的”
|   |   +---NewsInfo.vue----------------新闻详情页
|   |   +---recLists.vue----------------推荐页
|   |   +---signIn.vue------------------登录页
|   |   +---signUp.vue------------------注册页
|   +---images--------------------------网站Logo图标，显示在浏览器地址栏或网页标签上
|   |   +---datawhale.png---------------Datawhale头像，用于“我的”页面
|   |   +---dw.png----------------------Datawhale二维码，用于“我的”页面
|   +---App.vue-------------------------根组件
|   +---index.html----------------------项目主页面
|   +---main.js-------------------------主脚本文件，用于定义全局变量、引入插件
|   +---router.js-----------------------路由脚本文件，用于配置路由url链接与页面组件的映射关系
|   +---store.js------------------------状态管理
+---.babelrc----------------------------ES6转码的配置文件
+---favicon.ico-------------------------浏览器小图标
+---package.json------------------------依赖包的配置文件，配置前端项目运行脚本
+---vue.config.js-----------------------vue项目的配置文件
+---webpack.config.js-------------------webpack的配置文件，用于项目打包

本文参考：我的组队学习