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

释放双眼,带上耳机,听听看~!

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

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

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

已有功能

资源

主页

资源推荐

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

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

资源大全

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

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

资源搜索

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

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

资源筛选

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

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

资源排序

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

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

推荐资源

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

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

相似检测

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

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

资源详情页

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

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

举报资源

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

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

评论及打分

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

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

评论列表

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

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

用户

扫码登录

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

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

个人资料

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

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

设置兴趣

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

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

收藏夹

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

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

推荐记录

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

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

消息通知

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

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

世界

激励榜

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

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

找伙伴

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

伙伴列表

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

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

发布自我介绍

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

运营中心

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

资源审核

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

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

评论审核

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

举报审核

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

标签刷新

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

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

云图库

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

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

上传图片

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

世界公告

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

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

快速开始

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

思维导图

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

目录介绍

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

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余

给TA打赏
共{{data.count}}人
人已打赏
JavaScript

skillicons:以图标的方式在GitHub或简历上展示您的专业技能

2022-4-7 17:10:03

JavaScript

Check酱:免费开源的网页内容监控工具,可以监测网页内容变化,并发送到微信

2022-5-31 22:08:38

兴趣领域微信公众号
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
有新私信 私信列表
搜索