code-nav-main

编程导航

发现优质编程学习资源

已有功能

资源

主页

资源推荐

根据用户兴趣和资源质量推荐资源

资源大全

分页展示资源，可一键跳转至源站点。

资源搜索

快速从整个站点搜索资源，并记录搜索历史，便于再次检索。

资源筛选

支持按专栏、标签进行灵活筛选。标签分组展示，并支持搜索，提高检索效率。

资源排序

支持按照发布时间、评价、收藏进行排序。

推荐资源

允许用户推荐资源，填写标签、上传资源图等，审核通过后公开可见。

相似检测

提供一层自动过滤，防止推荐重复资源。

资源详情页

支持记录和展示资源浏览量、收藏资源、分享资源、一键聚合搜索等，并提供相似资源推荐。

举报资源

支持用户自主举报违规或过期资源，需要审核。

评论及打分

用户可以对资源进行评论和打分，帮助其他用户判断资源的质量和适用性。

评论列表

分页浏览评论，并支持点赞。

用户

扫码登录

用不起短信，就选择了扫码登录的方式，关注公众号后将自动注册，并得到动态码，可输入动态码登录。登录有效期 30 天，避免重复登录。

个人资料

包括用户基本信息、积分、等级、称号、兴趣等。

设置兴趣

用户可以选择兴趣，从而进入站点时得到更适合自己的资源推荐。

收藏夹

用户可以收藏资源，便于查找。

推荐记录

用户可以查看自己推荐过的资源，并对被审核拒绝的资源进行修改。

消息通知

集中管理系统发送的消息，支持搜索、标为已读、删除，右上角将显示用户未读消息数。

世界

激励榜

包括实时总积分榜、积分周榜、月榜等，可自由选择统计周期。

找伙伴

类似于一个广场，用户可以介绍自己，找到更多学习编程、志同道合的朋友。

伙伴列表

支持搜索、点赞、复制联系方式，帮助找到合适的伙伴。

发布自我介绍

运营中心

管理员或运营同学才有权限操作，用于维护站内秩序、优化资源、发布公告等。

资源审核

左侧列表点选资源，管理员可在右侧执行修改、通过、拒绝等操作。

评论审核

举报审核

标签刷新

一键将旧标签统一合并为新标签。

云图库

集中管理站内图片，方便用户在推荐资源时选择。

上传图片

世界公告

管理员可添加实时公告，当前在线的所有用户都能立刻浏览到。

快速开始

请保证 Node.js 版本 > 10 ⚠️

1. 下载项目到本地

   git clone https:// github.com/liyupi/CodeNav.git

2. 安装依赖

   npm install

3. 本地启动项目

   npm run start

4. 点击右下角 Umi UI 按钮，可快速新建页面，海量模板供选择。访问 localhost:3000 可使用 UMI 控制台。

   

   

   如果模板图标无法加载，请在本地配置 hosts：151.101.64.133 raw.githubusercontent.com

   新建页面后，如果要在菜单列表中显示，要在 config/menu.tsx 中添加配置。

5. 打包构建

   npm run build

   会生成 dist 目录，可以通过 serve 工具 本地启动 server 快速浏览。

6. 部署

   提供多种部署方式：

   1. 容器（推荐）：项目已提供 Dockerfile 可以轻松构建 Docker 镜像，并将容器部署在云托管服务中，实现动态扩缩容。

   2. 目录：直接将 dist 目录放到 Nginx 等 web 服务器上，配置 nginx.conf 即可。

   3. 静态站点托管：可以直接将 dist 目录发布到静态站点托管中，有 CDN 支持

   4. 测试环境一行命令发布：tcb framework deploy --mode test

      测试环境域名：https://test-env.code-nav.cn

技术栈

前端

前端使用 Ant Design Pro V4 后台管理模板，提升了百倍开发效率，但是也踩了不少坑~

1. Umi + React 前端框架
2. Ant Design 组件库 + Ant Design Pro 高级组件
3. Dva 数据状态管理
4. Less CSS 预处理语言
5. TypeScript 静态类型检查

后端

代码目录：cloudfunctions

后端使用 腾讯云云开发，全量上云，充分利用了腾讯云提供的云计算能力。

1. 云数据库：配合 SDK 使用，无需编写重复的增删改查，提高开发效率，自动备份
2. 云存储：配合 SDK 使用，易接入
3. 云函数：开发复杂的函数，Serverless 架构，无需自行管理，可开放 Http 访问服务
4. 云托管：容器技术，弹性伸缩、动态扩缩容
5. 腾讯云 CMS 开箱即用的后台管理

目录结构

.
├── Dockerfile 容器构建文件
├── Dockerfile.build 容器构建文件（包含 npm 打包流程）
├── README.md 项目说明
├── cloudbaserc.json 腾讯云云开发文件，需要用 tcb 根据自己的环境生成
├── cloudfunctions 后端云函数
│   └── helloworld
├── config 配置
│   ├── config.ts 全局配置
│   ├── defaultSettings.ts 框架默认设置
│   ├── menu.tsx 菜单列表
│   ├── proxy.ts 代理
│   └── routes.ts 定义路由
├── docker 容器所需配置文件
│   └── nginx.conf 服务器配置
├── jsconfig.json 编译配置
├── mock 假数据
│   ├── forms.ts
│   ├── resources.ts
│   ├── tags.ts
│   └── user.ts
├── package.json 包管理文件
├── public 公共目录
│   └── logo.png
├── src 前端项目主目录
│   ├── assets 资源文件
│   ├── cardList.less 卡片样式
│   ├── components 组件
│   ├── constant 常量
│   ├── global.less 全局样式
│   ├── global.tsx 全局入口
│   ├── layouts 布局
│   ├── manifest.json
│   ├── models 数据模型
│   ├── pages 页面
│   ├── service-worker.js 缓存
│   ├── services 业务请求
│   ├── tcb.js 腾讯云云开发 SDK
│   ├── typings.d.ts 类型定义
│   └── utils 工具
└── tsconfig.json

技巧

1. 业务 LoadingLayout 实现加载前置条件

技术

1. 全局 LoadingLayout 实现云开发前置加载
2. prerender SEO 优化
3. 域名重定向
4. redis 限流
5. 小程序环境互通
6. 聚合查询
7. 分层架构
8. 数据库索引

登录逻辑

WEB 端登录

1. 公众号关注或点击 “一键登录” 时，请求微信公众号后台服务，获得 unionId \ userInfo 信息
2. 微信公众号后台服务带着 unionId \ userInfo 调用 getCaptcha 接口，生成验证码并返回给用户
3. 用户在 web 端手动输入验证码，调用 login 接口，后端注册自定义登录态，并返回 access_token 给前端，前端显示登录成功
4. 之后的请求，前端带着 access_token 调用云函数，即可在云函数中拿到当前用户登录态

小程序端登录

复用 WEB 端登录逻辑

1. 小程序启动时调用小程序的 login 云函数，拿到 unionId \ miniOpenId
2. 用户点击 “一键登录”，获得 userInfo 信息
3. 小程序前端带着 unionId \ userInfo 调用 getCaptcha 接口，生成验证码并返回给前端（用户不可见）
4. 前端带着验证码，调用 login 接口，后端注册自定义登录态，并返回 access_token 给前端，前端显示登录成功
5. 之后的请求，前端带着 access_token 调用云函数，即可在云函数中拿到当前用户登录态

云函数调用（传参方式）

1. HTTP（接收参数方式不同）
2. 本地
3. 内部
4. SDK 调用