编程导航：免费开源JavaScript网址导航源码，自适应网页端+公众号+小程序端

最专业灵活的编程导航站点，帮助大家发现优质编程学习资源。

可以检索自己需要的资源、分享好资源、评价资源。好的资源会被更多人发现，共同感受技术带来的美好。

本项目是『 编程导航 』网站的开源版本，使用这套代码，你也能轻松开发多端适配网站！

已有功能

资源

主页

资源推荐

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

资源大全

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

资源搜索

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

资源筛选

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

资源排序

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

推荐资源

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

相似检测

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

资源详情页

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

举报资源

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

评论及打分

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

评论列表

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

用户

扫码登录

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

个人资料

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

设置兴趣

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

收藏夹

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

推荐记录

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

消息通知

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

世界

激励榜

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

找伙伴

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

伙伴列表

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

发布自我介绍

运营中心

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

资源审核

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

评论审核

举报审核

标签刷新

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

云图库

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

上传图片

世界公告

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

快速开始

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

下载项目到本地

git clone https://github.com/liyupi/code-nav.git

进入目录，安装依赖

cd code-nav-main
npm install

本地启动项目

npm run start

点击右下角 Umi UI 按钮，可快速新建页面，海量模板供选择。

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

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

打包构建npm run build会生成 dist 目录，可以通过 serve 工具 本地启动 server 快速浏览。

部署提供多种部署方式：

容器（推荐）：项目已提供 Dockerfile 可以轻松构建 Docker 镜像，并将容器部署在云托管服务中，实现动态扩缩容。
目录：直接将 dist 目录放到 Nginx 等 web 服务器上，配置 nginx.conf 即可。
静态站点托管：可以直接将 dist 目录发布到静态站点托管中，有 CDN 支持

技术选型

前端

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

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

后端

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

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. 前端使用 “伪 Mock 数据” 测试，如果使用 UMI UI 新建页面，框架将提供真实 Mock 测试数据。
2. 如果使用腾讯云开发，可以在本地通过 tcb 命令测试云函数

tcb fn run --name <functionName> --params <JSON params>

登录逻辑

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 调用云函数，即可在云函数中拿到当前用户登录态

思维导图

目录介绍

项目演示地址和仓库地址以及介绍