开始制作的时间是从 2019-10-10 起至 2019-11-06
自己也发布过几个小型的demo,虽然没人看๑•ૅૄ•๑), 但还是喜欢与大家共同学习进步
测试网址 ---------> 网址(目前bug,注册之后请重新登录方可聊天)
校园招聘APP,是一款手机端的求职网站,招聘者可以注册为BOSS,求职者可以注册为牛人,牛人和BOSS可以聊天,并且可以互相查看到对方的基本信息和简介薪资等方面
计划制作:
- 使用React的
Antd-mobile支持手机端端制作 √ ReactNative独立开发App端和IOS×- 有人肯定会很好奇,PC和手机为何要制作两次,主要是本人很萌新,想要学习更多的框架 ×
只有学习更多的框架,并且锻炼更好的自学能力,才能更上一层楼
我是一个热门计算机并且对计算机充满兴趣的程序员
学过Java,.net,PHP,曾经一度认为PHP是最牛逼的语言
后来正式的接触前端,学习过
ES6NodeReactVueReactNativeAngular- 微信一系列开发
jq,bootstarp等一些简单库nginx等简单的服务器mysqlmongodb
发现前端很神奇,比后台和数据方面更加的有意思,想要称为一名全栈工程师
这是一个Reacts项目,你的电脑要具备Node(8.0)以上
前端主要采用了React全家桶，没什么多说的，脚手架构建项目，react-router控制路由，axios进行前后端交互。后端是基于node搭的服务，用的是express。我为什么不用koa呢，纯粹是图方便，因为koa不熟（捂脸）。聊天最重要的当然是通信，项目用socket.io来进行前后端通信。
=============分割线 下面是每个包的详细解释===============
-
(按需加载问题) 使用
babel-plugin-import包 -
(由于跨域问题) 在
package.json中使用proxy配置-
需要详细说明一下,安装完这个包,需要在
package.json文件中配置 -
"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"] -
"babel": { "presets": [ "react-app" ], "plugins": [ "transform-decorators-legacy" ] },
-
-
(配置服务端渲染) 使用
babel-cli包-
安装
-
npm install babel-cli --save
-
配置package.json
-
"server": "set NODE_ENV=test&&nodemon --exec babel-node -- server/main.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加密
// md5加密
function md5pwd(pwd){
const salt = 'qwe123~~-!@#$%^&&*()sunhang'
return utility.md5(utility.md5(salt+pwd))
}进行登录以及cookie的存储
//进行注册
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拦截器的制作
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;
})- 登录和注册效果展示
- 双方聊天展示
- 消息的更新和排序
- 手机端表情包展示
手机端的表情包就是可以用的,现在的表情包都可以直接使用了,不同代码了,很神奇
- 由于本人主要是面向前端,数据库就是
MongoDB - 数据库的使用请参照
data目录下面的mongodb.md
- 数据库方面使用 (mongoose)
- 后台主要使用
node的express
- 后台文件在
server
-
需要电脑有 mongo 和 react 还有node环境
-
首先:下载本项目
-
// 第一种方式 npm install //安装包依赖 npm run build //打包项目 npm run server //启动 打开浏览器输入localhost:9093
-
// 第二种方式 npm install //安装包依赖 cd server //进入后台 node main.js //运行后台 //再打开一个cmd npm run start //启动 打开浏览器输入localhost:3000
如果还有bug和建议,欢迎告诉我 (͏ ˉ ꈊ ˉ)✧˖°
一开始还是遇到了很多的坑,第一次使用antd-mobile这个库,最主要的坑,还是对于项目的上线运行,毕竟个人不太擅长服务器的使用,在配置Nginx的时候卡了很久,为了性能优化,SSR渲染也是花了很大的心血,感觉里面的坑太多了,总的来说收获还是很大的,后期我还会画时间进行界面上的美化
感觉支持 喜欢的朋友记得给个star