nuxt juejin project

представлять

nuxt-juejin-project — это учебный проект, который использует Nuxt.js для имитации Nuggets. В основном он использует: nuxt + koa + vuex + axios + element-ui . Все данные этого проекта синхронизируются с Nuggets, потому что интерфейсы пересылаются через koa как средний уровень (находить интерфейсы действительно утомительно?), маршрутизация интерфейсов переопределяется и некоторые данные интерфейса обрабатываются. Основные данные страницы отображаются на стороне сервера через asyncData . При написании проектов я буду стараться изо всех сил использовать конфигурацию и некоторые технические моменты, предоставленные Nuxt.js (рендеринг на стороне сервера, перенаправление интерфейса, конфигурация маршрутизации, проверка разрешений и т. д.), надеясь узнать больше о процессе серверной обработки. проекты бокового рендеринга.

В этом проекте я впервые использую Nuxt.js , поэтому некоторые детали процесса могут быть недостаточно хороши. Если вы хотите учиться, предложения предназначены только для справки, надеюсь, не введут вас в заблуждение.

Добрые советы

После реструктуризации и обновления Nuggets в августе 2020 года старая версия интерфейса была закрыта. Основная ветка — это старая версия, и я поместил новую версию в ветку apinew. Если вам нужно ее просмотреть, клонируйте ветку apinew. (Состояние пользователя и операции, такие как сообщения пользователя, вход в систему, лайки и т. д., временно недействительны.)

Функция

 - 登录/登出

- 权限验证
  - 登录状态验证
  - 交互验证

- 首页
  - 文章筛选（分类、热门、最新、热榜）
  - 文章触底分页
  - 作者榜模块
  - 推荐小册模块

- 文章详情
  - 正文
  - 目录跳转
  - 文章评论
  - 文章分享
  - 相关推荐
  - 关于作者模块
  - 相关文章模块

- 作者页
  - 作者信息
  - 文章筛选（热门、最新）
  - 文章触底分页
  - 个人成就模块
  - 头像彩蛋?

- 搜索
  - 类型筛选（综合、文章、标签、用户）
  - 时间筛选（全部、一天内、一周内、三月内）

- 沸点
  - 沸点筛选（推荐、热门、关注、分类）
  - 沸点触底分页
  - 沸点评论
  - 沸点分享
  - 大图预览
  - 推荐沸点模块
  - 关注的话题模块

- 话题
  - 关注的话题、全部话题
  - 文章筛选（热门、最新）
  - 文章触底分页
  - 话题详情模块
  - 参与者模块

- 标签
  - 标签详情 
  - 文章筛选（热门、最新、最热）
  - 文章触底分页

- 标签管理
  - 已关注标签、全部标签

- 消息
  - 用户消息

- 小册
  - 小册筛选（分类）

- i18n国际化

- 错误页
  - 404

- 交互相关
  - 点赞（文章、沸点）
  - 关注（作者、标签）

?Использование времени рыбалки для обновления...

Описание структуры файла

Чтобы быстро разобраться в проекте, здесь описана файловая структура проекта.

 ├─assets  // 存放静态资源（如：scss）
│
├─layouts // 页面主要布局、自定义错误页面
│
├─components  // 页面组件
│ ├─business  // 业务组件
│ ├─common    // 公用组件
│
├─middleware  // 应用中间件（如：权限验证）
│
├─mixins      // 公用逻辑抽离（如：触底事件）
│
├─pages       // 页面视图
│
├─plugins     // 插件（如：axios、api）
│
├─server      // 服务端
│ ├─middleware  // 服务端使用的中间件
│ ├─request     // 请求方法封装
│ ├─routes      // 接口转发
│
├─store       // vuex
│
├─utils       // 工具方法
│
│nuxt.config.js   // Nuxt.js应用配置

Скриншот некоторых эффектов

• первая страница

• Подробности

• поиск

• точка кипения

• тема

Старт проекта

 # 克隆项目
git clone -b apinew https://github.com/ChanWahFung/nuxt-juejin-project.git

# 进入项目目录
cd nuxt-juejin-project

# 安装依赖
npm install

# 服务启动
npm run dev

Посетите http://localhost:8000.

Пополнить

• Клонирование GitHub внутри страны будет медленнее. Вы можете выбрать клонирование из облака кода https://gitee.com/ChanWahFung/nuxt-juejin-project.git.

Лицензия

Массачусетский технологический институт