# 一个简单的招聘软件 React_Node_MongoDB **Repository Path**: itstusy/chat ## Basic Information - **Project Name**: 一个简单的招聘软件 React_Node_MongoDB - **Description**: 校园招聘APP,是一款手机端的求职网站,招聘者可以注册为BOSS,求职者可以注册为牛人,牛人和BOSS可以聊天,并且可以互相查看到对方的基本信息和简介薪资等方面 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: http://shtodream.cn:9093 - **GVP Project**: No ## Statistics - **Stars**: 11 - **Forks**: 3 - **Created**: 2019-10-24 - **Last Updated**: 2022-12-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 简招 (React+Node+MongoDB) > 开始制作的时间是从 2019-10-10 起至 2019-11-06 自己也发布过几个小型的demo,虽然没人看๑•ૅૄ•๑), 但还是喜欢与大家共同学习进步 测试网址 ---------> [网址](http://shtodream.cn:9093)(目前bug,注册之后请重新登录方可聊天)

### 介绍 校园招聘`APP`,是一款手机端的求职网站,招聘者可以注册为BOSS,求职者可以注册为牛人,牛人和BOSS可以聊天,并且可以互相查看到对方的基本信息和简介薪资等方面 计划制作: - 使用React的`Antd-mobile`支持手机端端制作 √ - `ReactNative`独立开发`App`端和`IOS` × - 有人肯定会很好奇,PC和手机为何要制作两次,主要是本人很萌新,想要学习更多的框架 × > 只有学习更多的框架,并且锻炼更好的自学能力,才能更上一层楼 ### **关于我** 我是一个__热门计算机__并且__对计算机充满兴趣__的程序员 学过`Java`,`.net`,`PHP`,曾经一度认为`PHP`是最牛逼的语言 后来正式的接触前端,学习过 - `ES6` - `Node` - `React` - `Vue` - `ReactNative` - `Angular` - 微信一系列开发 - `jq`,`bootstarp`等一些简单库 发现前端很神奇,比后台和数据方面更加的有意思,想要称为一名前端工程师 ### 项目简述 > 这是一个Reacts项目,你的电脑要具备Node(8.0)以上 #### 所使用的node包技术阐述 ![sh](https://studyit.club/Study/Snipaste_2019-10-24_11-25-04.png) > 前端主要采用了React全家桶，没什么多说的，脚手架构建项目，react-router控制路由，axios进行前后端交互。后端是基于node搭的服务，用的是express。我为什么不用koa呢，纯粹是图方便，因为koa不熟（捂脸）。聊天最重要的当然是通信，项目用[socket.io](https://www.w3cschool.cn/socket/socket-1olq2egc.html)来进行前后端通信。 *=============分割线 下面是每个包的详细解释===============* * **(按需加载问题)** 使用`babel-plugin-import`包 * **(由于跨域问题)** 在`package.json`中使用`proxy`配置 * 需要详细说明一下,安装完这个包,需要在`package.json`文件中配置 * ```js "proxy": "http://localhost:9093" ``` * **(关于密码加密问题)** 使用`utility`包 * **(关于cookie存储方面的问题)** 使用`browser-cookies`包 * **(方面node中获取请求的数据)** 使用`body-parser`包 * **(在React中发送请求)** 使用`axios`包 * **(加强react中组件之间的通信类型)** 使用`prop-types`包 * **(React和Redux之间的数据通信)** 使用`react-redux`包 * **(React中的路由配置)** 使用`react-router`包 * **(React中的动画)** 使用`rc-queue-anim`包 * **(关于Redux的装饰器)**使用`babel-plugin-transform-decorators-legacy`包 * 这里需要详细说明一下,安装完这个包之后,需要在`package.json`文件中中babel上加入 * `"plugins": ["transform-decorators-legacy"]` * ```json "babel": { "presets": [ "react-app" ], "plugins": [ "transform-decorators-legacy" ] }, ``` * **(配置服务端渲染)** 使用`babel-cli`包 * 安装 * ```js npm install babel-cli --save ``` * 配置package.json * ```js "server": "set NODE_ENV=test&&nodemon --exec babel-node -- server/main.js" ``` * 目录结构 ```js // 项目结构 ├─build ├─config ├─data │ ├─MongoDB // 数据库解释 ├─server // 后台 │ ├─model // 数据库原型 │ ├─main // 后台文件入口 │ ├─user // 后台接口api ├─src │ ├─components // 全局组件 │ │ ├─autoRouter │ │ ├─avatar-select │ │ ├─boss │ │ ├─chat │ │ ├─Dashboard │ │ ├─genius │ │ ├─img │ │ ├─logo │ │ ├─msg │ │ ├─navlink │ │ ├─shForm │ │ ├─user │ │ └─chatCard │ ├─router // 路由 │ ├─index // 入口 │ ├─util // 方法 │ ├─config // 请求拦截 │ └─container │ ├─bossinfo // boss │ ├─login // 登录 │ ├─register // 注册 │ └─genuisinfo // 牛人 ``` > 注册时, 进行密码MD5加密 ``` js // md5加密 function md5pwd(pwd){ const salt = 'qwe123~~-!@#$%^&&*()sunhang' return utility.md5(utility.md5(salt+pwd)) } ``` > 进行登录以及cookie的存储 ```js //进行注册 Router.post('/register',(req,res)=>{ const { user,pwd,type } = req.body User.findOne({user},(err,doc)=>{ if(doc){ return res.json({code:1,msg:'用户名存在'}) } const userModel = new User({user,type,pwd:md5pwd(pwd)}) userModel.save(function(e,d){ if(err){ return res.json({code:2,msg:'后端出错了'}) } const {user,type,_id} = d res.cookie('userid',_id) return res.json({code:3,msg:'注册成功',data:{user,type,_id}}) }) }) }) ``` > axios拦截器的制作 ```js import axios from 'axios' import { Toast } from 'antd-mobile' //拦截请求 axios.interceptors.request.use(function(config){ Toast.loading('加载中',0); return config; }) //拦截响应 axios.interceptors.response.use(function(config){ Toast.hide(); return config; }) ``` * 登录和注册效果展示 ![sh](https://studyit.club/Study/register.gif) * 双方聊天展示 ![sh](https://studyit.club/Study/chat.gif) * 消息的更新和排序 ![sh](https://studyit.club/Study/clear.gif) * 手机端表情包展示 ![sh](https://studyit.club/Study/Screenshot_2019-10-24-14-14-39-53_cb819d8fa60af39.jpg) > 手机端的表情包就是可以用的,现在的表情包都可以直接使用了,不同代码了,很神奇 ### 后台方向 - 由于本人主要是面向前端,数据库就是`MongoDB` - 数据库的使用请参照`data`目录下面的`mongodb.md` * 数据库方面使用 **(mongoose)** - 后台主要使用`node`的`express` * 后台文件在`server` # 使用方式 * 需要电脑有 mongo 和 react 还有node环境 * 首先:下载本项目 * ```js // 第一种方式 npm install //安装包依赖 npm run build //打包项目 npm run server //启动 打开浏览器输入localhost:9093 ``` * ```js // 第二种方式 npm install //安装包依赖 cd server //进入后台 node main.js //运行后台 //再打开一个cmd npm run start //启动 打开浏览器输入localhost:3000 ``` 如果还有bug和建议,欢迎告诉我 (͏ ˉ ꈊ ˉ)✧˖° ![sh](https://studyit.club/Study/qq.jpg) > 一开始还是遇到了很多的坑,第一次使用antd-mobile这个库,最主要的坑,还是对于项目的上线运行,毕竟个人不太擅长服务器的使用,在配置Nginx的时候卡了很久,为了性能优化,SSR渲染也是花了很大的心血,感觉里面的坑太多了,总的来说收获还是很大的,后期我还会画时间进行界面上的美化 > > 感觉支持 喜欢的朋友记得给个star