最专业灵活的编程导航站点,帮助大家发现优质编程学习资源。
可以检索自己需要的资源、分享好资源、评价资源。好的资源会被更多人发现,共同感受技术带来的美好。
本项目是『 编程导航 』网站的开源版本,使用这套代码,你也能轻松开发多端适配网站!
已有功能
资源
主页
资源推荐
根据用户兴趣和资源质量推荐资源
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080543785.png/webp95)
资源大全
分页展示资源,可一键跳转至源站点。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图1 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080530271.png/webp95)
资源搜索
快速从整个站点搜索资源,并记录搜索历史,便于再次检索。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图2 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080551924.png/webp95)
资源筛选
支持按专栏、标签进行灵活筛选。标签分组展示,并支持搜索,提高检索效率。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图3 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080558133.png/webp95)
资源排序
支持按照发布时间、评价、收藏进行排序。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图4 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080604485.png/webp95)
推荐资源
允许用户推荐资源,填写标签、上传资源图等,审核通过后公开可见。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图5 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080624339.png/webp95)
相似检测
提供一层自动过滤,防止推荐重复资源。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图6 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080628542.png/webp95)
资源详情页
支持记录和展示资源浏览量、收藏资源、分享资源、一键聚合搜索等,并提供相似资源推荐。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图7 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080633931.png/webp95)
举报资源
支持用户自主举报违规或过期资源,需要审核。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图8 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080638512.png/webp95)
评论及打分
用户可以对资源进行评论和打分,帮助其他用户判断资源的质量和适用性。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图9 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080642920.png/webp95)
评论列表
分页浏览评论,并支持点赞。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图10 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080647593.png/webp95)
用户
扫码登录
用不起短信,就选择了扫码登录的方式,关注公众号后将自动注册,并得到动态码,可输入动态码登录。登录有效期 30 天,避免重复登录。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图11 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080652716.png/webp95)
个人资料
包括用户基本信息、积分、等级、称号、兴趣等。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图12 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080705835.png/webp95)
设置兴趣
用户可以选择兴趣,从而进入站点时得到更适合自己的资源推荐。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图13 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080710893.png/webp95)
收藏夹
用户可以收藏资源,便于查找。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图14 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080715200.png/webp95)
推荐记录
用户可以查看自己推荐过的资源,并对被审核拒绝的资源进行修改。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图15 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080721782.png/webp95)
消息通知
集中管理系统发送的消息,支持搜索、标为已读、删除,右上角将显示用户未读消息数。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图16 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080728951.png/webp95)
世界
激励榜
包括实时总积分榜、积分周榜、月榜等,可自由选择统计周期。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图17 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080734237.png/webp95)
找伙伴
类似于一个广场,用户可以介绍自己,找到更多学习编程、志同道合的朋友。
伙伴列表
支持搜索、点赞、复制联系方式,帮助找到合适的伙伴。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图18 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080740750.png/webp95)
发布自我介绍
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图19 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080747476.png/webp95)
运营中心
管理员或运营同学才有权限操作,用于维护站内秩序、优化资源、发布公告等。
资源审核
左侧列表点选资源,管理员可在右侧执行修改、通过、拒绝等操作。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图20 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080756846.png/webp95)
评论审核
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图21 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080801977.png/webp95)
举报审核
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图22 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080806123.png/webp95)
标签刷新
一键将旧标签统一合并为新标签。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图23 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080813315.png/webp95)
云图库
集中管理站内图片,方便用户在推荐资源时选择。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图24 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080836792.png/webp95)
上传图片
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图25 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080843993.png/webp95)
世界公告
管理员可添加实时公告,当前在线的所有用户都能立刻浏览到。
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图26 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080850770.png/webp95)
快速开始
请保证 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 后台管理模板,提升了百倍开发效率,但是也踩了不少坑~
- Umi + React 前端框架
- Ant Design 组件库 + Ant Design Pro 高级组件
- Dva 数据状态管理
- Less CSS 预处理语言
- TypeScript 静态类型检查
后端
后端使用 腾讯云云开发,全量上云,充分利用了腾讯云提供的云计算能力。
- 云数据库:配合 SDK 使用,无需编写重复的增删改查,提高开发效率,自动备份
- 云存储:配合 SDK 使用,易接入
- 云函数:开发复杂的函数,Serverless 架构,无需自行管理,可开放 Http 访问服务
- 云托管:容器技术,弹性伸缩、动态扩缩容
- 腾讯云 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
测试
- 前端使用 “伪 Mock 数据” 测试,如果使用
UMI UI
新建页面,框架将提供真实 Mock 测试数据。 - 如果使用腾讯云开发,可以在本地通过
tcb
命令测试云函数
tcb fn run --name <functionName> --params <JSON params>
登录逻辑
WEB 端登录
- 公众号关注或点击 “一键登录” 时,请求微信公众号后台服务,获得 unionId \ userInfo 信息
- 微信公众号后台服务带着 unionId \ userInfo 调用 getCaptcha 接口,生成验证码并返回给用户
- 用户在 web 端手动输入验证码,调用 login 接口,后端注册自定义登录态,并返回 access_token 给前端,前端显示登录成功
- 之后的请求,前端带着 access_token 调用云函数,即可在云函数中拿到当前用户登录态
小程序端登录
复用 WEB 端登录逻辑
- 小程序启动时调用小程序的 login 云函数,拿到 unionId \ miniOpenId
- 用户点击 “一键登录”,获得 userInfo 信息
- 小程序前端带着 unionId \ userInfo 调用 getCaptcha 接口,生成验证码并返回给前端(用户不可见)
- 前端带着验证码,调用 login 接口,后端注册自定义登录态,并返回 access_token 给前端,前端显示登录成功
- 之后的请求,前端带着 access_token 调用云函数,即可在云函数中拿到当前用户登录态
思维导图
![编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端插图27 编程导航:免费开源JavaScript网址导航源码,自适应网页端+公众号+小程序端](https://web.cdn.xxmd.com/wp-content/uploads/2022/05/20220521080905673.png/webp95)
目录介绍
项目演示地址和仓库地址以及介绍
本站所有文章,如无特殊说明或标注,均为本站原创发布;任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台;如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
如果下载链接失效的话,请劳烦您在评论区反馈,以便我们及时处理。