{"id":18046729,"url":"https://github.com/2662419405/sh","last_synced_at":"2025-04-10T04:54:28.306Z","repository":{"id":35952862,"uuid":"214122680","full_name":"2662419405/sh","owner":"2662419405","description":":apple: 一个从撸到脚的React项目(React+Node+MongoDB)","archived":false,"fork":false,"pushed_at":"2022-12-10T06:38:47.000Z","size":3709,"stargazers_count":20,"open_issues_count":22,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T06:05:07.049Z","etag":null,"topics":["axios","boss","cookie","mongodb","node","react","react-native","redux"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/2662419405.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-10T08:01:27.000Z","updated_at":"2023-09-08T13:32:49.000Z","dependencies_parsed_at":"2023-01-16T09:45:37.677Z","dependency_job_id":null,"html_url":"https://github.com/2662419405/sh","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2662419405%2Fsh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2662419405%2Fsh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2662419405%2Fsh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2662419405%2Fsh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/2662419405","download_url":"https://codeload.github.com/2662419405/sh/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248161254,"owners_count":21057553,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","boss","cookie","mongodb","node","react","react-native","redux"],"created_at":"2024-10-30T19:08:50.437Z","updated_at":"2025-04-10T04:54:28.285Z","avatar_url":"https://github.com/2662419405.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 简招 (React+Node+MongoDB)\n\n\u003e 开始制作的时间是从 2019-10-10 起至 2019-11-06\n\n\n自己也发布过几个小型的demo,虽然没人看๑•ૅૄ•๑), 但还是喜欢与大家共同学习进步\n\n测试网址 ---------\u003e  [网址](http://shtodream.cn:9093)(目前bug,注册之后请重新登录方可聊天)\n\n\u003cp align=\"center\" style=\"margin:50px 0;\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/language-html%20%7C%20javascript-blue\" /\u003e\n    \u003cimg src=\"https://travis-ci.org/2662419405/sh.svg?branch=master\"  /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/version-v1.0-informational\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/codecov-25-red\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/platform-ios%20%7C%20android%20%7C%20widdow%20%7C%20ipad-inactive\"  /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/weibo-%40SH-blueviolet\"  /\u003e\n\u003c/p\u003e\n\n### 介绍\n\n校园招聘`APP`,是一款手机端的求职网站,招聘者可以注册为BOSS,求职者可以注册为牛人,牛人和BOSS可以聊天,并且可以互相查看到对方的基本信息和简介薪资等方面\n\n计划制作:\n\n- 使用React的`Antd-mobile`支持手机端端制作 √\n- `ReactNative`独立开发`App`端和`IOS` ×\n- 有人肯定会很好奇,PC和手机为何要制作两次,主要是本人很萌新,想要学习更多的框架 ×\n\n\u003e 只有学习更多的框架,并且锻炼更好的自学能力,才能更上一层楼\n\n### **关于我**\n\n我是一个**热门计算**机并且对计算机充满兴趣的程序员\n\n学过`Java`,`.net`,`PHP`,曾经一度认为`PHP`是最牛逼的语言\n\n后来正式的接触前端,学习过\n\n- `ES6`\n- `Node`\n- `React`\n- `Vue`\n- `ReactNative`\n- `Angular`\n- 微信一系列开发\n- `jq`,`bootstarp`等一些简单库\n- `nginx`等简单的服务器\n- `mysql`\n- `mongodb`\n\n发现前端很神奇,比后台和数据方面更加的有意思,想要称为一名全栈工程师\n\n### 项目简述\n\n\u003e 这是一个Reacts项目,你的电脑要具备Node(8.0)以上\n#### 所使用的node包技术阐述\n\n![sh](https://studyit.club/Study/Snipaste_2019-10-24_11-25-04.png)\n\n\u003e 前端主要采用了React全家桶，没什么多说的，脚手架构建项目，react-router控制路由，axios进行前后端交互。后端是基于node搭的服务，用的是express。我为什么不用koa呢，纯粹是图方便，因为koa不熟（捂脸）。聊天最重要的当然是通信，项目用[socket.io](https://www.w3cschool.cn/socket/socket-1olq2egc.html)来进行前后端通信。\n\n\n\n*=============分割线  下面是每个包的详细解释===============*\n\n\n\n* **(按需加载问题)** 使用`babel-plugin-import`包\n\n* **(由于跨域问题)** 在`package.json`中使用`proxy`配置\n\n  * 需要详细说明一下,安装完这个包,需要在`package.json`文件中配置\n\n  * ```js\n    \"proxy\": \"http://localhost:9093\"\n    ```\n\n* **(关于密码加密问题)** 使用`utility`包\n\n* **(关于cookie存储方面的问题)** 使用`browser-cookies`包\n\n* **(方面node中获取请求的数据)** 使用`body-parser`包\n\n* **(在React中发送请求)** 使用`axios`包\n\n* **(加强react中组件之间的通信类型)** 使用`prop-types`包\n\n* **(React和Redux之间的数据通信)** 使用`react-redux`包\n\n* **(React中的路由配置)** 使用`react-router`包\n\n* **(React中的动画)** 使用`rc-queue-anim`包\n\n* **(关于Redux的装饰器)**使用`babel-plugin-transform-decorators-legacy`包\n\n  * 这里需要详细说明一下,安装完这个包之后,需要在`package.json`文件中中babel上加入\n\n  * `\"plugins\": [\"transform-decorators-legacy\"]`\n\n  * ```json\n    \"babel\": {\n        \"presets\": [\n            \"react-app\"\n        ],\n        \"plugins\": [\n            \"transform-decorators-legacy\"\n        ]\n    },\n    ```\n  \n* **(配置服务端渲染)** 使用`babel-cli`包\n\n  * 安装\n\n  * ```js\n    npm install babel-cli --save \n    ```\n\n  * 配置package.json\n\n  * ```js\n    \"server\": \"set NODE_ENV=test\u0026\u0026nodemon --exec babel-node -- server/main.js\"\n    ```\n\n\n\n* 目录结构\n\n```js\n    // 项目结构\n    ├─build\n    ├─config\n    ├─data\n    │  ├─MongoDB            \t\t\t\t  // 数据库解释    \n    ├─server  \t\t\t\t\t\t\t\t  // 后台\n    │  ├─model          \t\t\t\t\t  // 数据库原型     \n    │  ├─main          \t\t\t\t  \t\t  // 后台文件入口  \n    │  ├─user          \t\t\t\t \t\t  // 后台接口api    \n    ├─src\n    │  ├─components                           // 全局组件\n    │  │  ├─autoRouter\n    │  │  ├─avatar-select\n    │  │  ├─boss\n    │  │  ├─chat\n    │  │  ├─Dashboard\n    │  │  ├─genius\n    │  │  ├─img\n    │  │  ├─logo\n    │  │  ├─msg\n    │  │  ├─navlink\n    │  │  ├─shForm\n    │  │  ├─user\n    │  │  └─chatCard\n    │  ├─router                                // 路由\n    │  ├─index                                 // 入口\t\n    │  ├─util                                  // 方法\n    │  ├─config                                // 请求拦截\n    │  └─container\n    │      ├─bossinfo   \t\t\t\t\t   // boss\n    │      ├─login          \t\t\t\t   // 登录\n    │      ├─register                          // 注册\n    │      └─genuisinfo                        // 牛人\n\n```\n\n\n\n\u003e 注册时, 进行密码MD5加密\n\n\n\n``` js\n// md5加密\nfunction md5pwd(pwd){\n    const salt = 'qwe123~~-!@#$%^\u0026\u0026*()sunhang'\n    return utility.md5(utility.md5(salt+pwd))\n}\n```\n\n\n\n\u003e 进行登录以及cookie的存储\n\n\n\n```js\n//进行注册\nRouter.post('/register',(req,res)=\u003e{\n    const { user,pwd,type } = req.body\n    User.findOne({user},(err,doc)=\u003e{\n        if(doc){\n            return res.json({code:1,msg:'用户名存在'})\n        }\n        const userModel = new User({user,type,pwd:md5pwd(pwd)})\n        userModel.save(function(e,d){\n            if(err){\n                return res.json({code:2,msg:'后端出错了'})\n            }\n            const {user,type,_id} = d\n            res.cookie('userid',_id)\n            return res.json({code:3,msg:'注册成功',data:{user,type,_id}})\n        })\n    })\n})\n```\n\n\n\n\u003e axios拦截器的制作\n\n\n\n```js\nimport axios from 'axios'\nimport { Toast } from 'antd-mobile'\n\n//拦截请求\naxios.interceptors.request.use(function(config){\n    Toast.loading('加载中',0);\n    return config;\n})\n\n//拦截响应\naxios.interceptors.response.use(function(config){\n    Toast.hide();\n    return config;\n})\n```\n\n\n\n* 登录和注册效果展示\n\n![sh](https://studyit.club/Study/register.gif)\n\n* 双方聊天展示\n\n![sh](https://studyit.club/Study/chat.gif)\n\n\n\n* 消息的更新和排序\n\n![sh](https://studyit.club/Study/clear.gif)\n\n\n\n* 手机端表情包展示\n\n![sh](https://studyit.club/Study/Screenshot_2019-10-24-14-14-39-53_cb819d8fa60af39.jpg)\n\n\u003e 手机端的表情包就是可以用的,现在的表情包都可以直接使用了,不同代码了,很神奇\n\n\n\n### 后台方向\n\n- 由于本人主要是面向前端,数据库就是`MongoDB`\n- 数据库的使用请参照`data`目录下面的`mongodb.md`\n* 数据库方面使用 **(mongoose)**\n\n- 后台主要使用`node`的`express`\n\n* 后台文件在`server`\n\n\n\n# 使用方式\n\n* 需要电脑有 mongo 和 react 还有node环境\n\n* 首先:下载本项目\n\n* ```js\n  // 第一种方式\n  npm install //安装包依赖\n  npm run build //打包项目\n  npm run server //启动  打开浏览器输入localhost:9093\n  ```\n\n* ```js\n  // 第二种方式\n  npm install //安装包依赖\n  cd server  //进入后台\n  node main.js  //运行后台\n  //再打开一个cmd\n  npm run start //启动  打开浏览器输入localhost:3000\n  ```\n\n\n如果还有bug和建议,欢迎告诉我  (͏ ˉ ꈊ ˉ)✧˖°\n\n![sh](https://studyit.club/Study/qq.jpg)\n\n\n\n\u003e  一开始还是遇到了很多的坑,第一次使用antd-mobile这个库,最主要的坑,还是对于项目的上线运行,毕竟个人不太擅长服务器的使用,在配置Nginx的时候卡了很久,为了性能优化,SSR渲染也是花了很大的心血,感觉里面的坑太多了,总的来说收获还是很大的,后期我还会画时间进行界面上的美化\n\u003e\n\u003e 感觉支持  喜欢的朋友记得给个star  ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F2662419405%2Fsh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F2662419405%2Fsh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F2662419405%2Fsh/lists"}