四 、前后端基础及交互

四 、前后端基础及交互

1. 本系统整体架构：

• 前端：Vue框架 + mint-ui

  • 目录结构：

    Vue-newsinfo
    +---src---------------------------------项目主文件夹
    |   +---assets--------------------------静态资源文件，包括img、css、js
    |   |   +---css-------------------------样式文件
    |   |   |   +---sign.css----------------登录注册页的样式
    |   |   |   +---test.css----------------顶部导航样式
    |   |   +---js--------------------------前端功能
    |   |   |   +---cookie.js---------------定义cookie的相关操作，用于用户登录注册、退出时的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的配置文件，用于项目打包
    

• 后端： Flask + MySQL + MongoDB + Redis

  • 主要逻辑在“server.py”文件中：

    • 主要包括，用户注册、登录、推荐列表、热门列表、获取新闻详情页以及用户行为

  • 后端目录：

    news_rec_sys
    +---conf----------------------------------------项目配置文件
    +---controller----------------------------------控制层，用于操作数据库接口
    +---dao-----------------------------------------DAO层，定义数据对象以及数据库连接对象
    +---materials-----------------------------------离线物料构建
    |   +---news_scrapy-----------------------------爬取新闻
    |   +---user_proccess---------------------------用户画像处理
    |   +---material_proccess-----------------------物料画像处理
    +---recpocess-----------------------------------推荐流程
    |   +---cold_start------------------------------冷启动生成热门/推荐页列表
    |   +---recall----------------------------------计算热度值
    |   +---online.py-------------------------------在线构建热门/推荐页列表
    |   +---offline.py------------------------------离线构建热门/推荐页列表
    +---scheduler-----------------------------------定时任务脚本
    +--server.py------------------------------------后端项目启动主程序
    

• 前后端采用分离方式，通过json的格式进行数据传递

参考资料

DataWhale开源资料

大佬笔记