lipengzhou / toutiao-m

基于 Vue.js 开发的移动端项目——今日头条（页面下方扫码体验）

Vue.js 移动端项目——黑马头条

扫码体验

相关资源

• GitHub 仓库：https://github.com/lipengzhou/topline-m
• 学习笔记：https://www.yuque.com/lipengzhou/toutiao-mobile-vue/
• 接口文档：http://toutiao.m.lipengzhou.com/api.html
• 在线预览：http://toutiao.m.lipengzhou.com/

功能列表

• 登录注册

• 首页

  • 频道列表
  • 文章列表
  • 频道编辑

• 搜索

  • 联想建议
  • 搜索历史记录
  • 搜索结果

• 文章详情

  • 关注用户
  • 文章收藏
  • 文章点赞
  • 文章分享

• 文章评论

  • 文章评论
  • 评论回复
  • 发布文章评论
  • 发布评论回复
  • 评论点赞

• 我的

  • 我的收藏
  • 我的历史
  • 我的作品

• 个人中心

  • 展示当前登录用户信息
  • 退出登录

• 用户页面

  • 展示用户信息
  • 关注用户
  • 用户文章列表

• 用户关注/粉丝

  • 用户关注列表
  • 用户粉丝列表
  • 关注/取消关注用户/粉丝

• 小智同学

  • 展示聊天消息列表
  • 发送/接收消息

• 消息通知

  • 点赞通知
  • 评论通知
  • 关注通知

一些计划

• 动画交互
• 黑暗模式
• 发布 Android App
• 发布 iOS App
• 小程序 App
• Flutter App
• 重写后端接口

本地开发

# 下载源码
git clone https://github.com/lipengzhou/topline-m.git

# 安装依赖
# 或者 npm install
yarn install

# 启动开发服务
# 或者 npm run serve
yarn serve

# 打包构建
# 或者 npm run build
yarn build

# 代码格式校验
# 或者 npm run lint
yarn lint

toutiao-m's Issues

接口挂了

该项目的接口挂了，还有后台项目的接口也挂了emm

B站视频没有了

B站上的视频源都删除了，能否提供一个能看或者下载的地址吗？

关于本项目的后台接口500错误的问题

接口：获取用户自己信息：http://ttapi.research.itcast.cn/app/v1_0/user，
这个接口，我按接口文档要求发起请求，结果前端报500错误，后台返回message：Internal Server Error，我添加的token在其他需要token的接口测试过，可以正常获取信息，比如：http://ttapi.research.itcast.cn/app/v1_0/user/followings这个接口，希望大佬看到反馈一下

接口

接口是用什么写的呢，可以分享吗

Vant疑问

Vant是怎么做到，比如nav-bar，你可以通过prop或插槽插入左侧文字，如果你不插入，那么左侧这个标签就不会展示。
老师自己可以试一下，根本做不到这样封装

请问学习笔记是不是失效了

首页文章的导航样式，关于深度选择/deep/的疑惑（b站视频 Vue.js 移动端项目实战（今日头条） P57）

在修改.van-nav-bar__title 的时候需要深度选择器/deep/才生效 ，后面搜索按钮中的 van-icon、van-button__text 不使用也能生效

1

接口请求的数据为什么浏览器预览是空的？

浏览器访问接口
http://localhost:8080/api/app/v1_1/articles?channel_id=0&timestamp=1626170232354&with_top=1
可以正常显示results里面的数据，但是在浏览器控制台看preview或response 栏目空的：
{message: "OK", data: {pre_timestamp: null, results: [], page: 12}} data: {pre_timestamp: null, results: [], page: 12} page: 12 pre_timestamp: null results: [] message: "OK"

项目接口地址由原来的 http://ttapi.research.itcast.cn/ 变更为 http://api-toutiao-web.itheima.net

项目接口地址由原来的 http://ttapi.research.itcast.cn/ 变更为 http://api-toutiao-web.itheima.net

获取用户信息的时候报401错误

老师，在“我的”模块要拿用户的基本信息，通过网络请求报了401错误

是接口的问题吗？我试了几次都不行

网站进不去

李老师,网站貌似进不去,是关闭了吗还是 想跟着学习一下

接口请求的数据为什么浏览器预览是空的？

头条channel-edit 中 有问题

我数据持久化的时候 刷新页面没有保存，但是在请求里 也有,就是页面上保存不了.

    async deleteChannel(channel, index) {
      //如果删除激活频道前面的频道
      if (index <= this.active) {
        this.$emit("updata-active", this.active - 1);
      }
      this.userChannels.splice(index, 1);
      //数据持久化
      if (this.user) {
        await deleteUserChannel(channel.id);
      } else {
        setItem("user-channel", this.userChannels);
      }
    },
    //切换频道
    switchChannel(index) {
      this.$emit("update-active", index);
      //关闭弹出层
      this.$emit("close");
    },
  },```
![image](https://user-images.githubusercontent.com/84443293/125442821-3d57adc5-5471-4881-b829-a3ff8b796ee9.png)

老师, B站上一个视频是否讲解有误, 和您核实一下

我一直在学习老师的视频,老师的的视频对我的帮助很大,感谢老师~~

在看视频的过程中有一个疑问, 想跟老师核实一下:
下面视频:
https://www.bilibili.com/video/BV1tN411f7tV?p=141

讲解了对评论的点赞和取消点赞, 但在中,comment属于props , 直接在中操作props属性是否是错误的, 是不是应该在父组件中操作comment, 此处是否采用自定义事件更合适.

辛苦老师核查~~

有谁知道新地址？

websocket 报错

Access to XMLHttpRequest at 'http://ttapi.research.itcast.cn/socket.io/?EIO=4&transport=polling&t=NeiIwF6' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET http://ttapi.research.itcast.cn/socket.io/?EIO=4&transport=polling&t=NeiItdF net::ERR_FAILED

一直在报错

项目出现：找不到babel模块的错误解决办法

 ERROR  Failed to compile with 1 errors                                                                                                   2:38:42 ├F10: PM┤

 error  in ./src/main.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] C:\Users\zzz\Desktop\topline-m\src\main.js: Cannot find module '@babel/compat-data/corejs3-shipped-proposals'
Require stack:
- C:\Users\zzz\Desktop\topline-m\node_modules\@babel\preset-env\lib\polyfills\corejs3\usage-plugin.js
- C:\Users\zzz\Desktop\topline-m\node_modules\@babel\preset-env\lib\index.js
- C:\Users\zzz\Desktop\topline-m\node_modules\@vue\babel-preset-app\index.js
- C:\Users\zzz\Desktop\topline-m\node_modules\@vue\cli-plugin-babel\preset.js
- C:\Users\zzz\Desktop\topline-m\node_modules\@babel\core\lib\config\files\plugins.js
- C:\Users\zzz\Desktop\topline-m\node_modules\@babel\core\lib\config\files\index.js
- C:\Users\zzz\Desktop\topline-m\node_modules\@babel\core\lib\index.js
- C:\Users\zzz\Desktop\topline-m\node_modules\@vue\cli-plugin-babel\index.js

我的电脑没有安装babel, clone下来运行报错，在stack overflow找到了解决方法

https://stackoverflow.com/questions/52087421/module-build-failed-from-node-modules-babel-loader-lib-index-js-typeerror

希望可以对你有帮助

vue_devtools报错：Uncaught TypeError: Cannot read property ‘type‘ of undefined

在vue devtools 中输入articlelist的时候，点击这个组件，会出现这个错误，即不能在vue devtools中查询到props传过来的channel数据。上网搜索并没有找到什么解决办法

接口

那个接口可以使用吗