手把手带你搭建推荐系统
黄鸿波
谷歌开发者专家,知名游戏公司技术专家
3434 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 36 讲
手把手带你搭建推荐系统
15
15
1.0x
00:00/00:00
登录|注册

17|推荐系统前端:如何用一个界面展示我们的成果?

你好,我是黄鸿波。
在前面的课程中,我们使用 Flask 搭建了一个非常简单的 HTTP 服务,也提供了推荐列表和注册登录相关的接口。本节课我们将继续沿着这条思路,将它们用前端界面的形式展现出来。
我把本节课分为了以下三个部分。
在服务端代码中增加点赞、收藏等交互信息。
什么是 Vue.js。
如何使用 Vue.js 对接我们的 HTTP 服务进行展示。

在服务端代码中增加点赞、收藏等交互信息

我们前面基于 Flask 已经写了一个简单的分页请求、用户的登录和注册功能,接下来,我们基于服务框架完成点赞、收藏的接口的交互。
先来整体过一遍流程。
首先,用户在进入到推荐列表,或者说任意一个列表的时候,我们都需要请求这个列表的内容然后进行展示。这个请求的接口就是之前写的 /recommendation/get_rec_list。
当用户拿到这个接口之后,就会去请求到每一个标题以及里面的内容。当用户点击内容请求详情页时,我们就需要将点赞数和收藏数展示给前端(这个数据在获取列表时已经获取,不需要单独进行请求)。
当前端点击一个页面进行点赞或收藏的操作时,前端需要通知后端有人进行了这些操作,后端接收到前端的通知后,就需要将数据库中的数字取出来然后再加上 1,并返回用户请求成功的标志。这时,整个操作就完成了。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

文章标题:使用Vue.js对接HTTP服务进行展示 本文介绍了如何通过一个界面展示成果,主要包括在服务端代码中增加点赞、收藏等交互信息,介绍了Vue.js的基本概念和特点。在服务端代码中,通过Flask框架实现了点赞、收藏等交互功能,包括向MongoDB数据库插入用户行为记录和向Redis数据库插入数据。通过编写相应的接口实现了点赞和收藏功能。此外,文章还介绍了Vue.js,强调了其在Web开发中的重要性和优点,包括易学易用、高度可定制、灵活轻便、性能出色等特点。Vue.js被认为是现代Web应用开发中不可或缺的工具之一。文章内容涵盖了前后端交互、数据库操作以及前端框架的应用,对于想要了解如何展示成果并进行技术实践的读者具有一定的参考价值。 在本文中,作者首先介绍了如何通过Flask框架实现了点赞、收藏等交互功能,并向MongoDB数据库插入用户行为记录和向Redis数据库插入数据。接着,文章详细介绍了Vue.js的重要性和优点,包括易学易用、高度可定制、灵活轻便、性能出色等特点。Vue.js在现代Web应用开发中扮演着不可或缺的角色。此外,文章还展示了在Vue.js中进行网络请求的方法,从而实现了对HTTP服务的展示。通过对Vue.js的学习和GitHub上的代码阅读,读者可以进一步学习Vue的整体使用方法,并尝试添加功能和修改界面。整体而言,本文内容涵盖了前后端交互、数据库操作以及前端框架的应用,对于想要了解如何展示成果并进行技术实践的读者具有一定的参考价值。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《手把手带你搭建推荐系统》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(9)

  • 最新
  • 精选
  • alexliu
    收藏新闻的函数名与likes一样,应该改为collections

    作者回复: 是的,感谢指正

    2023-06-05归属地:上海
    1
  • Geek_ccc0fd
    modify_article_detail会报错type object 'datetime.datetime' has no attribute 'datetime',原因是将info eval成字典时,时间字段的内容是datetime.datetime(2023, 5, 6, 0, 5),我们导入的包是from datetime import datetime,修改成 import datetime就正常了,同时insert_log里面也需要修改一下info['date'] = datetime.datetime.utcnow(), 我将代码上传到了GitHub,修改了点赞,收藏,点击都使用同一个接口:https://github.com/jditlee/rec_service

    作者回复: 同学你好,感谢你的代码,可以推广给其他同学。

    2023-05-24归属地:广东
    1
  • peter
    请教老师几个问题: Q1:请问Vue和node是什么关系? Q2:老师的前端代码是用HBuilderX,其工程能用VSCode打开吗? Q3:大公司的日志一般怎么处理的?

    作者回复: 同学你好: A1:Vue和Node.js是两个完全不同的东西。 Vue是一个客户端框架,用于构建Web界面和应用程序。它基于JavaScript和MVVM模式,非常适合开发单页和多页应用,可以与其他库和框架一起使用。 Node.js是一个服务器端运行环境,用于构建高效的网络和服务器应用程序,它基于JavaScript和事件驱动的非阻塞I/O模型,特别适用于高并发的应用和实时应用程序,如聊天应用程序、游戏服务器和数据中心。 尽管Vue和Node.js是两个不同的东西,但它们可以被组合使用,以构建全栈Web应用程序,其中Vue用于客户端界面,Node.js用于服务器端逻辑。例如,您可以使用Vue的组件在服务器端渲染Vue应用程序。 A2:可以使用vscode打开; A3:一般可以使用kafka来收集,然后配合Elasticsearch进行处理。

    2023-05-25归属地:北京
    2
  • 悟尘
    老师,请问前端代码在哪?
    2023-12-13归属地:北京
    1
  • Geek_bc29e8
    老师,请问前端代码在哪?
    2023-11-29归属地:江西
    1
  • 静心
    关于前端知识方面欠缺一点儿专业性,英文专业术语的发音很别扭,比如,Vue.js应该读"v u . js",“ uni.request() ”是什么,引用了哪个库,也没说清楚。
    2023-08-28归属地:北京
    1
  • Geek_645654
    请问前端代码在哪?
    2024-02-27归属地:上海
  • 悟尘
    其实像类似点赞、收藏、评论功能,用 图数据库 存储岂不是更好?为每种关系创建一个顶点类型(Vertex Type)或节点类型,并为它们之间的关系创建边类型(Edge Type)。这样可以更好地表示用户与内容之间的多对多关系。 假设我们有一个名为 User 的顶点类型,代表用户;一个名为 Content 的顶点类型,代表内容。我们可以分别为点赞、收藏和评论创建三个边类型: Like: 用于表示用户喜欢某条内容。 Collection: 用于表示用户收藏了某条内容。 Comment: 用于表示用户在某条内容上发表了评论。 以下是一个可能的数据模型示例: (User)-[:Likes]->(Content) (User)-[:Collections]->(Content) (User)-[:Comments]->(Comment)-[:On]->(Content)
    2023-12-13归属地:北京
  • 悟尘
    collection.insert(info), 你用的哪个版本的MongoDB?为啥我这段代码报错了: "'Collection' object is not callable. If you meant to call the 'insert' method on a 'Collection' object it is failing because no such method exists." 只能换橙insert_one方法
    2023-12-13归属地:北京
收起评论
显示
设置
留言
9
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部