开始制作的时间是从 2019-10-10 起至 2019-11-06

自己也发布过几个小型的demo,虽然没人看๑•ૅૄ•๑), 但还是喜欢与大家共同学习进步

测试网址 ---------> 网址(目前bug,注册之后请重新登录方可聊天)

校园招聘APP,是一款手机端的求职网站,招聘者可以注册为BOSS,求职者可以注册为牛人,牛人和BOSS可以聊天,并且可以互相查看到对方的基本信息和简介薪资等方面

计划制作:

• 使用React的Antd-mobile支持手机端端制作 √
• ReactNative独立开发App端和IOS ×
• 有人肯定会很好奇,PC和手机为何要制作两次,主要是本人很萌新,想要学习更多的框架 ×

只有学习更多的框架,并且锻炼更好的自学能力,才能更上一层楼

我是一个热门计算机并且对计算机充满兴趣的程序员

学过Java,.net,PHP,曾经一度认为PHP是最牛逼的语言

后来正式的接触前端,学习过

• ES6
• Node
• React
• Vue
• ReactNative
• Angular
• 微信一系列开发
• jq,bootstarp等一些简单库
• nginx等简单的服务器
• mysql
• mongodb

发现前端很神奇,比后台和数据方面更加的有意思,想要称为一名全栈工程师

这是一个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