Node.js+express+MongoDB+socket.io 做的一个即时聊天案例 ...

最新推荐文章于 2021-10-07 11:24:08 发布

weixin_34199405

最新推荐文章于 2021-10-07 11:24:08 发布

阅读量214

点赞数

CC 4.0 BY-SA版权

文章标签：数据库 javascript json ViewUI

原文链接：https://yq.aliyun.com/articles/687209

本文详细介绍了React项目的文件目录结构，包括config、public、scripts等关键目录的作用，以及客户端、服务端文件的组织方式。同时，深入解析了项目中使用的各种技术，如Ant Design组件库的按需加载流程、React Router的路由管理、Node-Sass的支持、Mongoose的MongoDB管理、React-Redux的状态管理、Redux-Thunk的中间件应用等。

说明

目录说明:

config 配置目录
public 公共资源文件目录
scripts 框架自带js文件
server 服务端文件
src 客户端文件
- component 组件文件
- container 页面文件
- redux 常量与redux文件
- APP.js index.jx 入口文件
- reducer.js 包含所有的reducer文件
- store.js 包含store文件，扩展其它插件

演示图片

![Uploading file...]()
演示图片

我是拿某款录屏gif软件录的，导致点击发送消息的时候，发送了两次，实际上只有一次，原因应该是服务端触发了两次广播，懒得改了。。。将就看吧！

项目包说明

antd

蚂蚁金服的react组件

按需加载流程

安装antd

`
npm install antd --save
`

暴露eject

npm run eject

安装babel-plugin-import

`
npm install babel-plugin-import --save
`

修改package.json如下代码

`
"babel": {

"presets": [
  "react-app"
]

}
`

`
"babel": {

"presets": [
  "react-app"
],
"plugins": [
  [
    "import",
    {
      "libraryName": "antd",
      "style": "css"
    }
  ]
]

}
`

react-router-dom

管理react路由

在浏览器使用需要引入

`
import {BrowserRouter, Route} from 'react-router-dom'
`

node-sass

使create-react-app支持sass

`
npm install node-sass --save
`

mongoose

管理MongoDB

react-redux

管理redux

redux-thunk

thunk中间件

utility

js加密库

bodyPaser

bodyPaser

cookiePaser

cookiePaser

brwoser-cookies

管理cookie

socket.io

提供socket服务端

socket.io-client

提供socket客户端

github地址：https://github.com/kavience/react-zhaopin