测试网址: https://github.com/2662419405/sh

实现目标: 双向聊天

简述原理: socketio全双工通信

目前bug: 注册之后再次登录才可以聊天

简招 (React+Node+MongoDB)

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

sh

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

测试网址 ———> 网址

介绍

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

计划制作:

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

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

关于我

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

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

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

  • ES6
  • Node
  • React
  • Vue
  • ReactNative
  • Angular
  • 微信一系列开发
  • jq,bootstarp等一些简单库

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

项目简述

这是一个React项目,你的电脑要具备Node(8.0)以上

所使用的node包技术阐述

前端主要采用了React全家桶,没什么多说的,脚手架构建项目,react-router控制路由,axios进行前后端交互。后端是基于node搭的服务,用的是express。我为什么不用koa呢,纯粹是图方便,因为koa不熟(捂脸)。聊天最重要的当然是通信,项目用socket.io来进行前后端通信。

=============分割线 下面是每个包的详细解释===============

  • (按需加载问题) 使用babel-plugin-import

  • (由于跨域问题)package.json中使用proxy配置

    • 需要详细说明一下,安装完这个包,需要在package.json文件中配置

    • "proxy": "localhost:9093"
      <!--0-->
  • (配置服务端渲染) 使用babel-cli

    • 安装

    • npm install babel-cli --save 
      <!--1-->
      
      
      
  • 目录结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 项目结构
├─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加密

1
2
3
4
5
// md5加密
function md5pwd(pwd){
const salt = 'qwe123~~-!@#$%^&&*()sunhang'
return utility.md5(utility.md5(salt+pwd))
}

进行登录以及cookie的存储

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//进行注册
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拦截器的制作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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)
  • 后台主要使用nodeexpress
  • 后台文件在server

使用方式

  • 需要电脑有 mongo 和 react 还有node环境

  • 首先:下载本项目

  • // 第一种方式
    npm install //安装包依赖
    npm run build //打包项目
    npm run server //启动  打开浏览器输入localhost:9093
    <!--6-->
    
    

如果还有bug和建议,欢迎告诉我 (͏ ˉ ꈊ ˉ)✧˖°

一开始还是遇到了很多的坑,第一次使用antd-mobile这个库,最主要的坑,还是对于项目的上线运行,毕竟个人不太擅长服务器的使用,在配置Nginx的时候卡了很久,为了性能优化,SSR渲染也是花了很大的心血,感觉里面的坑太多了,总的来说收获还是很大的,后期我还会画时间进行界面上的美化

感觉支持 喜欢的朋友记得给个star


 评论


Copyright @ 2019 SH'S BLOG   |   冀ICP备19013084号-1   |   载入天数...载入时分秒...   |   站长统计   |  
commit168
WordCount67.3k