├── .gitignore
├── README.md
├── config
    ├── env.js
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── paths.js
    ├── webpack.config.js
    └── webpackDevServer.config.js
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── manifest.json
├── scripts
    ├── build.js
    ├── start.js
    └── test.js
├── server
    ├── model.js
    ├── server.js
    └── user.js
├── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── component
    │   ├── authroute
    │   │   └── authroute.js
    │   ├── avatar-selector
    │   │   └── avatar-selector.js
    │   ├── boss
    │   │   └── boss.js
    │   ├── chat
    │   │   └── chat.js
    │   ├── dashboard
    │   │   └── dashboard.js
    │   ├── genius
    │   │   └── genius.js
    │   ├── img
    │   │   ├── boy.png
    │   │   ├── bull.png
    │   │   ├── chick.png
    │   │   ├── crab.png
    │   │   ├── default_avatar.png
    │   │   ├── girl.png
    │   │   ├── hedgehog.png
    │   │   ├── hippopotamus.png
    │   │   ├── koala.png
    │   │   ├── lemur.png
    │   │   ├── man.png
    │   │   ├── pig.png
    │   │   ├── tiger.png
    │   │   ├── whale.png
    │   │   ├── woman.png
    │   │   └── zebra.png
    │   ├── imooc-form
    │   │   └── imooc-form.js
    │   ├── logo
    │   │   ├── job.png
    │   │   ├── logo.css
    │   │   └── logo.js
    │   ├── msg
    │   │   └── msg.js
    │   ├── navlink
    │   │   ├── img
    │   │   │   ├── boss-active.png
    │   │   │   ├── boss.png
    │   │   │   ├── job-active.png
    │   │   │   ├── job.png
    │   │   │   ├── msg-active.png
    │   │   │   ├── msg.png
    │   │   │   ├── user-active.png
    │   │   │   └── user.png
    │   │   └── navlink.js
    │   ├── user
    │   │   └── user.js
    │   └── usercard
    │   │   └── usercard.js
    ├── config.js
    ├── container
    │   ├── bossinfo
    │   │   └── bossinfo.js
    │   ├── geniusinfo
    │   │   └── geniusinfo.js
    │   ├── login
    │   │   └── login.js
    │   └── register
    │   │   └── register.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reducer.js
    ├── redux
    │   ├── chat.redux.js
    │   ├── chatuser.redux.js
    │   └── user.redux.js
    ├── serviceWorker.js
    └── utils.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 2 | 
 3 | 
 4 | ## 项目介绍
 5 | 
 6 | - 项目是一个招聘类webapp，后端使用express，mongodb完成接口开发；前端使用react全家桶及系列中间件处理数据，UI主要使用Antd-Mobile。
 7 | 
 8 | - 项目主体功能：注册->登录-完善信息->牛人与BOss列表->聊天列表->聊天->个人中心
 9 | 
10 | ## 使用技术栈
11 | - 前端
12 |   creact-react-app
13 |   react16
14 |   redux
15 |   react-redux
16 |   redux-thunk
17 |   react-router4
18 |   prop-types
19 |   axios
20 |   browser-cookies
21 |   antd-mobile
22 | - 后端
23 |   node
24 |   express
25 |   mongoose
26 |   utility
27 |   cookie-parser
28 |   body-parser
29 |   
30 | ## 项目目录
31 |     .
32 |     ├── README.md
33 |     ├── config               // 开发环境的配置
34 |     ├── public
35 |     │   ├── index.html       // 项目页面入口文件
36 |     ├── package.json         // 项目配置文件
37 |     ├── scripts              // npm scrips 命令配置
38 |     ├── server               // 后端配置
39 |     │   ├── server.js        // 服务启动文件
40 |     │   ├── model.js         // 数据库配置
41 |     │   ├── user.js          // 接口配置    
42 |     ├── src
43 |     │   ├── static           // 公用资源
44 |     │   ├── components       // 所有组件
45 |     │   ├── container        // 所有页面
46 |     │   ├── redux            // redux管理
47 |     │   ├── http.js	         // axios配置
48 |     │   ├── index.js         // 入口文件
49 |     │   ├── util.js          // 功能函数封装
50 |     │   └── reducer.js       // 所有reducer合并
51 | ## 运行项目
52 | - 环境依赖
53 |   项目运行前须要安装NodeJs&MongoDB，Mongo端口为27017，express服务器端口9093，访问地址为：localhost
54 | - 运行项目
55 |   首先需要使用命令行工具CD到根目录，按顺序执行如下命令
56 | 
57 |   第一个窗口用于拉取依赖&启动服务器
58 |   npm install //拉取依赖
59 |   node server/server.js //启动服务
60 | 
61 |   第二个窗口用于启动MongoDB
62 |   全局直接执行命令 Mongo
63 | 
64 |   第三个窗口用于启动项目
65 |   npm run start
66 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.  Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach(dotenvFile => {
34 |   if (fs.existsSync(dotenvFile)) {
35 |     require('dotenv-expand')(
36 |       require('dotenv').config({
37 |         path: dotenvFile,
38 |       })
39 |     );
40 |   }
41 | });
42 | 
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebook/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
50 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 |   .split(path.delimiter)
55 |   .filter(folder => folder && !path.isAbsolute(folder))
56 |   .map(folder => path.resolve(appDirectory, folder))
57 |   .join(path.delimiter);
58 | 
59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60 | // injected into the application via DefinePlugin in Webpack configuration.
61 | const REACT_APP = /^REACT_APP_/i;
62 | 
63 | function getClientEnvironment(publicUrl) {
64 |   const raw = Object.keys(process.env)
65 |     .filter(key => REACT_APP.test(key))
66 |     .reduce(
67 |       (env, key) => {
68 |         env[key] = process.env[key];
69 |         return env;
70 |       },
71 |       {
72 |         // Useful for determining whether we’re running in production mode.
73 |         // Most importantly, it switches React into the correct mode.
74 |         NODE_ENV: process.env.NODE_ENV || 'development',
75 |         // Useful for resolving the correct path to static assets in `public`.
76 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
77 |         // This should only be used as an escape hatch. Normally you would put
78 |         // images into the `src` and `import` them in code to get their paths.
79 |         PUBLIC_URL: publicUrl,
80 |       }
81 |     );
82 |   // Stringify all values so we can feed into Webpack DefinePlugin
83 |   const stringified = {
84 |     'process.env': Object.keys(raw).reduce((env, key) => {
85 |       env[key] = JSON.stringify(raw[key]);
86 |       return env;
87 |     }, {}),
88 |   };
89 | 
90 |   return { raw, stringified };
91 | }
92 | 
93 | module.exports = getClientEnvironment;
94 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/en/webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/en/webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     const assetFilename = JSON.stringify(path.basename(filename));
11 | 
12 |     if (filename.match(/\.svg$/)) {
13 |       return `module.exports = {
14 |         __esModule: true,
15 |         default: ${assetFilename},
16 |         ReactComponent: (props) => ({
17 |           $$typeof: Symbol.for('react.element'),
18 |           type: 'svg',
19 |           ref: null,
20 |           key: null,
21 |           props: Object.assign({}, props, {
22 |             children: ${assetFilename}
23 |           })
24 |         }),
25 |       };`;
26 |     }
27 | 
28 |     return `module.exports = ${assetFilename};`;
29 |   },
30 | };
31 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebook/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(inputPath, needsSlash) {
15 |   const hasSlash = inputPath.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return inputPath.substr(0, inputPath.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${inputPath}/`;
20 |   } else {
21 |     return inputPath;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | const moduleFileExtensions = [
42 |   'web.mjs',
43 |   'mjs',
44 |   'web.js',
45 |   'js',
46 |   'web.ts',
47 |   'ts',
48 |   'web.tsx',
49 |   'tsx',
50 |   'json',
51 |   'web.jsx',
52 |   'jsx',
53 | ];
54 | 
55 | // Resolve file paths in the same order as webpack
56 | const resolveModule = (resolveFn, filePath) => {
57 |   const extension = moduleFileExtensions.find(extension =>
58 |     fs.existsSync(resolveFn(`${filePath}.${extension}`))
59 |   );
60 | 
61 |   if (extension) {
62 |     return resolveFn(`${filePath}.${extension}`);
63 |   }
64 | 
65 |   return resolveFn(`${filePath}.js`);
66 | };
67 | 
68 | // config after eject: we're in ./config/
69 | module.exports = {
70 |   dotenv: resolveApp('.env'),
71 |   appPath: resolveApp('.'),
72 |   appBuild: resolveApp('build'),
73 |   appPublic: resolveApp('public'),
74 |   appHtml: resolveApp('public/index.html'),
75 |   appIndexJs: resolveModule(resolveApp, 'src/index'),
76 |   appPackageJson: resolveApp('package.json'),
77 |   appSrc: resolveApp('src'),
78 |   appTsConfig: resolveApp('tsconfig.json'),
79 |   yarnLockFile: resolveApp('yarn.lock'),
80 |   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
81 |   proxySetup: resolveApp('src/setupProxy.js'),
82 |   appNodeModules: resolveApp('node_modules'),
83 |   publicUrl: getPublicUrl(resolveApp('package.json')),
84 |   servedPath: getServedPath(resolveApp('package.json')),
85 | };
86 | 
87 | 
88 | 
89 | module.exports.moduleFileExtensions = moduleFileExtensions;
90 | 


--------------------------------------------------------------------------------
/config/webpack.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const resolve = require('resolve');
  7 | const PnpWebpackPlugin = require('pnp-webpack-plugin');
  8 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  9 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 10 | const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 11 | const TerserPlugin = require('terser-webpack-plugin');
 12 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 13 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 14 | const safePostCssParser = require('postcss-safe-parser');
 15 | const ManifestPlugin = require('webpack-manifest-plugin');
 16 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 17 | const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 18 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 19 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 20 | const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 21 | const paths = require('./paths');
 22 | const getClientEnvironment = require('./env');
 23 | const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 24 | const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
 25 | const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 26 | 
 27 | 
 28 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 29 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 30 | // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 31 | // makes for a smoother build process.
 32 | const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 33 | 
 34 | // Check if TypeScript is setup
 35 | const useTypeScript = fs.existsSync(paths.appTsConfig);
 36 | 
 37 | // style files regexes
 38 | const cssRegex = /\.css$/;
 39 | const cssModuleRegex = /\.module\.css$/;
 40 | const sassRegex = /\.(scss|sass)$/;
 41 | const sassModuleRegex = /\.module\.(scss|sass)$/;
 42 | 
 43 | // This is the production and development configuration.
 44 | // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 45 | module.exports = function(webpackEnv) {
 46 |   const isEnvDevelopment = webpackEnv === 'development';
 47 |   const isEnvProduction = webpackEnv === 'production';
 48 | 
 49 |   // Webpack uses `publicPath` to determine where the app is being served from.
 50 |   // It requires a trailing slash, or the file assets will get an incorrect path.
 51 |   // In development, we always serve from the root. This makes config easier.
 52 |   const publicPath = isEnvProduction
 53 |     ? paths.servedPath
 54 |     : isEnvDevelopment && '/';
 55 |   // Some apps do not use client-side routing with pushState.
 56 |   // For these, "homepage" can be set to "." to enable relative asset paths.
 57 |   const shouldUseRelativeAssetPaths = publicPath === './';
 58 | 
 59 |   // `publicUrl` is just like `publicPath`, but we will provide it to our app
 60 |   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 61 |   // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 62 |   const publicUrl = isEnvProduction
 63 |     ? publicPath.slice(0, -1)
 64 |     : isEnvDevelopment && '';
 65 |   // Get environment variables to inject into our app.
 66 |   const env = getClientEnvironment(publicUrl);
 67 | 
 68 |   // common function to get style loaders
 69 |   const getStyleLoaders = (cssOptions, preProcessor) => {
 70 |     const loaders = [
 71 |       isEnvDevelopment && require.resolve('style-loader'),
 72 |       isEnvProduction && {
 73 |         loader: MiniCssExtractPlugin.loader,
 74 |         options: Object.assign(
 75 |           {},
 76 |           shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
 77 |         ),
 78 |       },
 79 |       {
 80 |         loader: require.resolve('css-loader'),
 81 |         options: cssOptions,
 82 |       },
 83 |       {
 84 |         // Options for PostCSS as we reference these options twice
 85 |         // Adds vendor prefixing based on your specified browser support in
 86 |         // package.json
 87 |         loader: require.resolve('postcss-loader'),
 88 |         options: {
 89 |           // Necessary for external CSS imports to work
 90 |           // https://github.com/facebook/create-react-app/issues/2677
 91 |           ident: 'postcss',
 92 |           plugins: () => [
 93 |             require('postcss-flexbugs-fixes'),
 94 |             require('postcss-preset-env')({
 95 |               autoprefixer: {
 96 |                 flexbox: 'no-2009',
 97 |               },
 98 |               stage: 3,
 99 |             }),
100 |           ],
101 |           sourceMap: isEnvProduction && shouldUseSourceMap,
102 |         },
103 |       },
104 |     ].filter(Boolean);
105 |     if (preProcessor) {
106 |       loaders.push({
107 |         loader: require.resolve(preProcessor),
108 |         options: {
109 |           sourceMap: isEnvProduction && shouldUseSourceMap,
110 |         },
111 |       });
112 |     }
113 |     return loaders;
114 |   };
115 | 
116 |   return {
117 |     mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
118 |     // Stop compilation early in production
119 |     bail: isEnvProduction,
120 |     devtool: isEnvProduction
121 |       ? shouldUseSourceMap
122 |         ? 'source-map'
123 |         : false
124 |       : isEnvDevelopment && 'cheap-module-source-map',
125 |     // These are the "entry points" to our application.
126 |     // This means they will be the "root" imports that are included in JS bundle.
127 |     entry: [
128 |       // Include an alternative client for WebpackDevServer. A client's job is to
129 |       // connect to WebpackDevServer by a socket and get notified about changes.
130 |       // When you save a file, the client will either apply hot updates (in case
131 |       // of CSS changes), or refresh the page (in case of JS changes). When you
132 |       // make a syntax error, this client will display a syntax error overlay.
133 |       // Note: instead of the default WebpackDevServer client, we use a custom one
134 |       // to bring better experience for Create React App users. You can replace
135 |       // the line below with these two lines if you prefer the stock client:
136 |       // require.resolve('webpack-dev-server/client') + '?/',
137 |       // require.resolve('webpack/hot/dev-server'),
138 |       isEnvDevelopment &&
139 |         require.resolve('react-dev-utils/webpackHotDevClient'),
140 |       // Finally, this is your app's code:
141 |       paths.appIndexJs,
142 |       // We include the app code last so that if there is a runtime error during
143 |       // initialization, it doesn't blow up the WebpackDevServer client, and
144 |       // changing JS code would still trigger a refresh.
145 |     ].filter(Boolean),
146 |     output: {
147 |       // The build folder.
148 |       path: isEnvProduction ? paths.appBuild : undefined,
149 |       // Add /* filename */ comments to generated require()s in the output.
150 |       pathinfo: isEnvDevelopment,
151 |       // There will be one main bundle, and one file per asynchronous chunk.
152 |       // In development, it does not produce real files.
153 |       filename: isEnvProduction
154 |         ? 'static/js/[name].[chunkhash:8].js'
155 |         : isEnvDevelopment && 'static/js/bundle.js',
156 |       // There are also additional JS chunk files if you use code splitting.
157 |       chunkFilename: isEnvProduction
158 |         ? 'static/js/[name].[chunkhash:8].chunk.js'
159 |         : isEnvDevelopment && 'static/js/[name].chunk.js',
160 |       // We inferred the "public path" (such as / or /my-project) from homepage.
161 |       // We use "/" in development.
162 |       publicPath: publicPath,
163 |       // Point sourcemap entries to original disk location (format as URL on Windows)
164 |       devtoolModuleFilenameTemplate: isEnvProduction
165 |         ? info =>
166 |             path
167 |               .relative(paths.appSrc, info.absoluteResourcePath)
168 |               .replace(/\\/g, '/')
169 |         : isEnvDevelopment &&
170 |           (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
171 |     },
172 |     optimization: {
173 |       minimize: isEnvProduction,
174 |       minimizer: [
175 |         // This is only used in production mode
176 |         new TerserPlugin({
177 |           terserOptions: {
178 |             parse: {
179 |               // we want terser to parse ecma 8 code. However, we don't want it
180 |               // to apply any minfication steps that turns valid ecma 5 code
181 |               // into invalid ecma 5 code. This is why the 'compress' and 'output'
182 |               // sections only apply transformations that are ecma 5 safe
183 |               // https://github.com/facebook/create-react-app/pull/4234
184 |               ecma: 8,
185 |             },
186 |             compress: {
187 |               ecma: 5,
188 |               warnings: false,
189 |               // Disabled because of an issue with Uglify breaking seemingly valid code:
190 |               // https://github.com/facebook/create-react-app/issues/2376
191 |               // Pending further investigation:
192 |               // https://github.com/mishoo/UglifyJS2/issues/2011
193 |               comparisons: false,
194 |               // Disabled because of an issue with Terser breaking valid code:
195 |               // https://github.com/facebook/create-react-app/issues/5250
196 |               // Pending futher investigation:
197 |               // https://github.com/terser-js/terser/issues/120
198 |               inline: 2,
199 |             },
200 |             mangle: {
201 |               safari10: true,
202 |             },
203 |             output: {
204 |               ecma: 5,
205 |               comments: false,
206 |               // Turned on because emoji and regex is not minified properly using default
207 |               // https://github.com/facebook/create-react-app/issues/2488
208 |               ascii_only: true,
209 |             },
210 |           },
211 |           // Use multi-process parallel running to improve the build speed
212 |           // Default number of concurrent runs: os.cpus().length - 1
213 |           parallel: true,
214 |           // Enable file caching
215 |           cache: true,
216 |           sourceMap: shouldUseSourceMap,
217 |         }),
218 |         // This is only used in production mode
219 |         new OptimizeCSSAssetsPlugin({
220 |           cssProcessorOptions: {
221 |             parser: safePostCssParser,
222 |             map: shouldUseSourceMap
223 |               ? {
224 |                   // `inline: false` forces the sourcemap to be output into a
225 |                   // separate file
226 |                   inline: false,
227 |                   // `annotation: true` appends the sourceMappingURL to the end of
228 |                   // the css file, helping the browser find the sourcemap
229 |                   annotation: true,
230 |                 }
231 |               : false,
232 |           },
233 |         }),
234 |       ],
235 |       // Automatically split vendor and commons
236 |       // https://twitter.com/wSokra/status/969633336732905474
237 |       // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
238 |       splitChunks: {
239 |         chunks: 'all',
240 |         name: false,
241 |       },
242 |       // Keep the runtime chunk separated to enable long term caching
243 |       // https://twitter.com/wSokra/status/969679223278505985
244 |       runtimeChunk: true,
245 |     },
246 |     resolve: {
247 |       // This allows you to set a fallback for where Webpack should look for modules.
248 |       // We placed these paths second because we want `node_modules` to "win"
249 |       // if there are any conflicts. This matches Node resolution mechanism.
250 |       // https://github.com/facebook/create-react-app/issues/253
251 |       modules: ['node_modules'].concat(
252 |         // It is guaranteed to exist because we tweak it in `env.js`
253 |         process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
254 |       ),
255 |       // These are the reasonable defaults supported by the Node ecosystem.
256 |       // We also include JSX as a common component filename extension to support
257 |       // some tools, although we do not recommend using it, see:
258 |       // https://github.com/facebook/create-react-app/issues/290
259 |       // `web` extension prefixes have been added for better support
260 |       // for React Native Web.
261 |       extensions: paths.moduleFileExtensions
262 |         .map(ext => `.${ext}`)
263 |         .filter(ext => useTypeScript || !ext.includes('ts')),
264 |       alias: {
265 |         // Support React Native Web
266 |         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
267 |         'react-native': 'react-native-web',
268 |       },
269 |       plugins: [
270 |         // Adds support for installing with Plug'n'Play, leading to faster installs and adding
271 |         // guards against forgotten dependencies and such.
272 |         PnpWebpackPlugin,
273 |         // Prevents users from importing files from outside of src/ (or node_modules/).
274 |         // This often causes confusion because we only process files within src/ with babel.
275 |         // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
276 |         // please link the files into your node_modules/ and let module-resolution kick in.
277 |         // Make sure your source files are compiled, as they will not be processed in any way.
278 |         new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
279 |       ],
280 |     },
281 |     resolveLoader: {
282 |       plugins: [
283 |         // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
284 |         // from the current package.
285 |         PnpWebpackPlugin.moduleLoader(module),
286 |       ],
287 |     },
288 |     module: {
289 |       strictExportPresence: true,
290 |       rules: [
291 |         // Disable require.ensure as it's not a standard language feature.
292 |         { parser: { requireEnsure: false } },
293 | 
294 |         // First, run the linter.
295 |         // It's important to do this before Babel processes the JS.
296 |         {
297 |           test: /\.(js|mjs|jsx)$/,
298 |           enforce: 'pre',
299 |           use: [
300 |             {
301 |               options: {
302 |                 formatter: require.resolve('react-dev-utils/eslintFormatter'),
303 |                 eslintPath: require.resolve('eslint'),
304 |                 
305 |               },
306 |               loader: require.resolve('eslint-loader'),
307 |             },
308 |           ],
309 |           include: paths.appSrc,
310 |         },
311 |         {
312 |           // "oneOf" will traverse all following loaders until one will
313 |           // match the requirements. When no loader matches it will fall
314 |           // back to the "file" loader at the end of the loader list.
315 |           oneOf: [
316 |             // "url" loader works like "file" loader except that it embeds assets
317 |             // smaller than specified limit in bytes as data URLs to avoid requests.
318 |             // A missing `test` is equivalent to a match.
319 |             {
320 |               test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
321 |               loader: require.resolve('url-loader'),
322 |               options: {
323 |                 limit: 10000,
324 |                 name: 'static/media/[name].[hash:8].[ext]',
325 |               },
326 |             },
327 |             // Process application JS with Babel.
328 |             // The preset includes JSX, Flow, TypeScript, and some ESnext features.
329 |             {
330 |               test: /\.(js|mjs|jsx|ts|tsx)$/,
331 |               include: paths.appSrc,
332 |               loader: require.resolve('babel-loader'),
333 |               options: {
334 |                 customize: require.resolve(
335 |                   'babel-preset-react-app/webpack-overrides'
336 |                 ),
337 |                 
338 |                 plugins: [
339 |                   [
340 |                     require.resolve('babel-plugin-named-asset-import'),
341 |                     {
342 |                       loaderMap: {
343 |                         svg: {
344 |                           ReactComponent:
345 |                             '@svgr/webpack?-prettier,-svgo![path]',
346 |                         },
347 |                       },
348 |                     },
349 |                   ],
350 |                 ],
351 |                 // This is a feature of `babel-loader` for webpack (not Babel itself).
352 |                 // It enables caching results in ./node_modules/.cache/babel-loader/
353 |                 // directory for faster rebuilds.
354 |                 cacheDirectory: true,
355 |                 cacheCompression: isEnvProduction,
356 |                 compact: isEnvProduction,
357 |               },
358 |             },
359 |             // Process any JS outside of the app with Babel.
360 |             // Unlike the application JS, we only compile the standard ES features.
361 |             {
362 |               test: /\.(js|mjs)$/,
363 |               exclude: /@babel(?:\/|\\{1,2})runtime/,
364 |               loader: require.resolve('babel-loader'),
365 |               options: {
366 |                 babelrc: false,
367 |                 configFile: false,
368 |                 compact: false,
369 |                 presets: [
370 |                   [
371 |                     require.resolve('babel-preset-react-app/dependencies'),
372 |                     { helpers: true },
373 |                   ],
374 |                 ],
375 |                 cacheDirectory: true,
376 |                 cacheCompression: isEnvProduction,
377 |                 
378 |                 // If an error happens in a package, it's possible to be
379 |                 // because it was compiled. Thus, we don't want the browser
380 |                 // debugger to show the original code. Instead, the code
381 |                 // being evaluated would be much more helpful.
382 |                 sourceMaps: false,
383 |               },
384 |             },
385 |             // "postcss" loader applies autoprefixer to our CSS.
386 |             // "css" loader resolves paths in CSS and adds assets as dependencies.
387 |             // "style" loader turns CSS into JS modules that inject <style> tags.
388 |             // In production, we use MiniCSSExtractPlugin to extract that CSS
389 |             // to a file, but in development "style" loader enables hot editing
390 |             // of CSS.
391 |             // By default we support CSS Modules with the extension .module.css
392 |             {
393 |               test: cssRegex,
394 |               exclude: cssModuleRegex,
395 |               use: getStyleLoaders({
396 |                 importLoaders: 1,
397 |                 sourceMap: isEnvProduction && shouldUseSourceMap,
398 |               }),
399 |               // Don't consider CSS imports dead code even if the
400 |               // containing package claims to have no side effects.
401 |               // Remove this when webpack adds a warning or an error for this.
402 |               // See https://github.com/webpack/webpack/issues/6571
403 |               sideEffects: true,
404 |             },
405 |             // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
406 |             // using the extension .module.css
407 |             {
408 |               test: cssModuleRegex,
409 |               use: getStyleLoaders({
410 |                 importLoaders: 1,
411 |                 sourceMap: isEnvProduction && shouldUseSourceMap,
412 |                 modules: true,
413 |                 getLocalIdent: getCSSModuleLocalIdent,
414 |               }),
415 |             },
416 |             // Opt-in support for SASS (using .scss or .sass extensions).
417 |             // By default we support SASS Modules with the
418 |             // extensions .module.scss or .module.sass
419 |             {
420 |               test: sassRegex,
421 |               exclude: sassModuleRegex,
422 |               use: getStyleLoaders(
423 |                 {
424 |                   importLoaders: 2,
425 |                   sourceMap: isEnvProduction && shouldUseSourceMap,
426 |                 },
427 |                 'sass-loader'
428 |               ),
429 |               // Don't consider CSS imports dead code even if the
430 |               // containing package claims to have no side effects.
431 |               // Remove this when webpack adds a warning or an error for this.
432 |               // See https://github.com/webpack/webpack/issues/6571
433 |               sideEffects: true,
434 |             },
435 |             // Adds support for CSS Modules, but using SASS
436 |             // using the extension .module.scss or .module.sass
437 |             {
438 |               test: sassModuleRegex,
439 |               use: getStyleLoaders(
440 |                 {
441 |                   importLoaders: 2,
442 |                   sourceMap: isEnvProduction && shouldUseSourceMap,
443 |                   modules: true,
444 |                   getLocalIdent: getCSSModuleLocalIdent,
445 |                 },
446 |                 'sass-loader'
447 |               ),
448 |             },
449 |             // "file" loader makes sure those assets get served by WebpackDevServer.
450 |             // When you `import` an asset, you get its (virtual) filename.
451 |             // In production, they would get copied to the `build` folder.
452 |             // This loader doesn't use a "test" so it will catch all modules
453 |             // that fall through the other loaders.
454 |             {
455 |               loader: require.resolve('file-loader'),
456 |               // Exclude `js` files to keep "css" loader working as it injects
457 |               // its runtime that would otherwise be processed through "file" loader.
458 |               // Also exclude `html` and `json` extensions so they get processed
459 |               // by webpacks internal loaders.
460 |               exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
461 |               options: {
462 |                 name: 'static/media/[name].[hash:8].[ext]',
463 |               },
464 |             },
465 |             // ** STOP ** Are you adding a new loader?
466 |             // Make sure to add the new loader(s) before the "file" loader.
467 |           ],
468 |         },
469 |       ],
470 |     },
471 |     plugins: [
472 |       // Generates an `index.html` file with the <script> injected.
473 |       new HtmlWebpackPlugin(
474 |         Object.assign(
475 |           {},
476 |           {
477 |             inject: true,
478 |             template: paths.appHtml,
479 |           },
480 |           isEnvProduction
481 |             ? {
482 |                 minify: {
483 |                   removeComments: true,
484 |                   collapseWhitespace: true,
485 |                   removeRedundantAttributes: true,
486 |                   useShortDoctype: true,
487 |                   removeEmptyAttributes: true,
488 |                   removeStyleLinkTypeAttributes: true,
489 |                   keepClosingSlash: true,
490 |                   minifyJS: true,
491 |                   minifyCSS: true,
492 |                   minifyURLs: true,
493 |                 },
494 |               }
495 |             : undefined
496 |         )
497 |       ),
498 |       // Inlines the webpack runtime script. This script is too small to warrant
499 |       // a network request.
500 |       isEnvProduction &&
501 |         shouldInlineRuntimeChunk &&
502 |         new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
503 |       // Makes some environment variables available in index.html.
504 |       // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
505 |       // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
506 |       // In production, it will be an empty string unless you specify "homepage"
507 |       // in `package.json`, in which case it will be the pathname of that URL.
508 |       // In development, this will be an empty string.
509 |       new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
510 |       // This gives some necessary context to module not found errors, such as
511 |       // the requesting resource.
512 |       new ModuleNotFoundPlugin(paths.appPath),
513 |       // Makes some environment variables available to the JS code, for example:
514 |       // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
515 |       // It is absolutely essential that NODE_ENV is set to production
516 |       // during a production build.
517 |       // Otherwise React will be compiled in the very slow development mode.
518 |       new webpack.DefinePlugin(env.stringified),
519 |       // This is necessary to emit hot updates (currently CSS only):
520 |       isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
521 |       // Watcher doesn't work well if you mistype casing in a path so we use
522 |       // a plugin that prints an error when you attempt to do this.
523 |       // See https://github.com/facebook/create-react-app/issues/240
524 |       isEnvDevelopment && new CaseSensitivePathsPlugin(),
525 |       // If you require a missing module and then `npm install` it, you still have
526 |       // to restart the development server for Webpack to discover it. This plugin
527 |       // makes the discovery automatic so you don't have to restart.
528 |       // See https://github.com/facebook/create-react-app/issues/186
529 |       isEnvDevelopment &&
530 |         new WatchMissingNodeModulesPlugin(paths.appNodeModules),
531 |       isEnvProduction &&
532 |         new MiniCssExtractPlugin({
533 |           // Options similar to the same options in webpackOptions.output
534 |           // both options are optional
535 |           filename: 'static/css/[name].[contenthash:8].css',
536 |           chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
537 |         }),
538 |       // Generate a manifest file which contains a mapping of all asset filenames
539 |       // to their corresponding output file so that tools can pick it up without
540 |       // having to parse `index.html`.
541 |       new ManifestPlugin({
542 |         fileName: 'asset-manifest.json',
543 |         publicPath: publicPath,
544 |       }),
545 |       // Moment.js is an extremely popular library that bundles large locale files
546 |       // by default due to how Webpack interprets its code. This is a practical
547 |       // solution that requires the user to opt into importing specific locales.
548 |       // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
549 |       // You can remove this if you don't use Moment.js:
550 |       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
551 |       // Generate a service worker script that will precache, and keep up to date,
552 |       // the HTML & assets that are part of the Webpack build.
553 |       isEnvProduction &&
554 |         new WorkboxWebpackPlugin.GenerateSW({
555 |           clientsClaim: true,
556 |           exclude: [/\.map$/, /asset-manifest\.json$/],
557 |           importWorkboxFrom: 'cdn',
558 |           navigateFallback: publicUrl + '/index.html',
559 |           navigateFallbackBlacklist: [
560 |             // Exclude URLs starting with /_, as they're likely an API call
561 |             new RegExp('^/_'),
562 |             // Exclude URLs containing a dot, as they're likely a resource in
563 |             // public/ and not a SPA route
564 |             new RegExp('/[^/]+\\.[^/]+$'),
565 |           ],
566 |         }),
567 |       // TypeScript type checking
568 |       useTypeScript &&
569 |         new ForkTsCheckerWebpackPlugin({
570 |           typescript: resolve.sync('typescript', {
571 |             basedir: paths.appNodeModules,
572 |           }),
573 |           async: false,
574 |           checkSyntacticErrors: true,
575 |           tsconfig: paths.appTsConfig,
576 |           compilerOptions: {
577 |             module: 'esnext',
578 |             moduleResolution: 'node',
579 |             resolveJsonModule: true,
580 |             isolatedModules: true,
581 |             noEmit: true,
582 |             jsx: 'preserve',
583 |           },
584 |           reportFiles: [
585 |             '**',
586 |             '!**/*.json',
587 |             '!**/__tests__/**',
588 |             '!**/?(*.)(spec|test).*',
589 |             '!**/src/setupProxy.*',
590 |             '!**/src/setupTests.*',
591 |           ],
592 |           watch: paths.appSrc,
593 |           silent: true,
594 |           formatter: typescriptFormatter,
595 |         }),
596 |     ].filter(Boolean),
597 |     // Some libraries import Node modules but don't use them in the browser.
598 |     // Tell Webpack to provide empty mocks for them so importing them works.
599 |     node: {
600 |       dgram: 'empty',
601 |       fs: 'empty',
602 |       net: 'empty',
603 |       tls: 'empty',
604 |       child_process: 'empty',
605 |     },
606 |     // Turn off performance processing because we utilize
607 |     // our own hints via the FileSizeReporter
608 |     performance: false,
609 |   };
610 | };
611 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
  4 | const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
  5 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
  6 | const ignoredFiles = require('react-dev-utils/ignoredFiles');
  7 | const paths = require('./paths');
  8 | const fs = require('fs');
  9 | 
 10 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 11 | const host = process.env.HOST || '0.0.0.0';
 12 | 
 13 | module.exports = function(proxy, allowedHost) {
 14 |   return {
 15 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
 16 |     // websites from potentially accessing local content through DNS rebinding:
 17 |     // https://github.com/webpack/webpack-dev-server/issues/887
 18 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
 19 |     // However, it made several existing use cases such as development in cloud
 20 |     // environment or subdomains in development significantly more complicated:
 21 |     // https://github.com/facebook/create-react-app/issues/2271
 22 |     // https://github.com/facebook/create-react-app/issues/2233
 23 |     // While we're investigating better solutions, for now we will take a
 24 |     // compromise. Since our WDS configuration only serves files in the `public`
 25 |     // folder we won't consider accessing them a vulnerability. However, if you
 26 |     // use the `proxy` feature, it gets more dangerous because it can expose
 27 |     // remote code execution vulnerabilities in backends like Django and Rails.
 28 |     // So we will disable the host check normally, but enable it if you have
 29 |     // specified the `proxy` setting. Finally, we let you override it if you
 30 |     // really know what you're doing with a special environment variable.
 31 |     disableHostCheck:
 32 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
 33 |     // Enable gzip compression of generated files.
 34 |     compress: true,
 35 |     // Silence WebpackDevServer's own logs since they're generally not useful.
 36 |     // It will still show compile warnings and errors with this setting.
 37 |     clientLogLevel: 'none',
 38 |     // By default WebpackDevServer serves physical files from current directory
 39 |     // in addition to all the virtual build products that it serves from memory.
 40 |     // This is confusing because those files won’t automatically be available in
 41 |     // production build folder unless we copy them. However, copying the whole
 42 |     // project directory is dangerous because we may expose sensitive files.
 43 |     // Instead, we establish a convention that only files in `public` directory
 44 |     // get served. Our build script will copy `public` into the `build` folder.
 45 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
 46 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 47 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
 48 |     // Note that we only recommend to use `public` folder as an escape hatch
 49 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
 50 |     // for some reason broken when imported through Webpack. If you just want to
 51 |     // use an image, put it in `src` and `import` it from JavaScript instead.
 52 |     contentBase: paths.appPublic,
 53 |     // By default files from `contentBase` will not trigger a page reload.
 54 |     watchContentBase: true,
 55 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
 56 |     // for the WebpackDevServer client so it can learn when the files were
 57 |     // updated. The WebpackDevServer client is included as an entry point
 58 |     // in the Webpack development configuration. Note that only changes
 59 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
 60 |     hot: true,
 61 |     // It is important to tell WebpackDevServer to use the same "root" path
 62 |     // as we specified in the config. In development, we always serve from /.
 63 |     publicPath: '/',
 64 |     // WebpackDevServer is noisy by default so we emit custom message instead
 65 |     // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
 66 |     quiet: true,
 67 |     // Reportedly, this avoids CPU overload on some systems.
 68 |     // https://github.com/facebook/create-react-app/issues/293
 69 |     // src/node_modules is not ignored to support absolute imports
 70 |     // https://github.com/facebook/create-react-app/issues/1065
 71 |     watchOptions: {
 72 |       ignored: ignoredFiles(paths.appSrc),
 73 |     },
 74 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
 75 |     https: protocol === 'https',
 76 |     host,
 77 |     overlay: false,
 78 |     historyApiFallback: {
 79 |       // Paths with dots should still use the history fallback.
 80 |       // See https://github.com/facebook/create-react-app/issues/387.
 81 |       disableDotRule: true,
 82 |     },
 83 |     public: allowedHost,
 84 |     proxy,
 85 |     before(app, server) {
 86 |       if (fs.existsSync(paths.proxySetup)) {
 87 |         // This registers user provided middleware for proxy reasons
 88 |         require(paths.proxySetup)(app);
 89 |       }
 90 | 
 91 |       // This lets us fetch source contents from webpack for the error overlay
 92 |       app.use(evalSourceMapMiddleware(server));
 93 |       // This lets us open files from the runtime error overlay.
 94 |       app.use(errorOverlayMiddleware());
 95 | 
 96 |       // This service worker file is effectively a 'no-op' that will reset any
 97 |       // previous service worker registered for the same host:port combination.
 98 |       // We do this in development to avoid hitting the production cache if
 99 |       // it used the same host and port.
100 |       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
101 |       app.use(noopServiceWorkerMiddleware());
102 |     },
103 |   };
104 | };
105 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "react-chat",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "dependencies": {
  6 |     "@babel/core": "7.1.6",
  7 |     "@babel/plugin-transform-react-jsx": "^7.2.0",
  8 |     "@svgr/webpack": "2.4.1",
  9 |     "antd-mobile": "^2.2.8",
 10 |     "axios": "^0.18.0",
 11 |     "babel-core": "7.0.0-bridge.0",
 12 |     "babel-eslint": "9.0.0",
 13 |     "babel-jest": "23.6.0",
 14 |     "babel-loader": "8.0.4",
 15 |     "babel-plugin-import": "^1.11.0",
 16 |     "babel-plugin-named-asset-import": "^0.3.0",
 17 |     "babel-plugin-transform-decorators-legacy": "^1.3.5",
 18 |     "babel-preset-react-app": "^7.0.0",
 19 |     "bfj": "6.1.1",
 20 |     "body-parser": "^1.18.3",
 21 |     "browser-cookies": "^1.2.0",
 22 |     "case-sensitive-paths-webpack-plugin": "2.1.2",
 23 |     "chalk": "2.4.1",
 24 |     "cookie-parser": "^1.4.3",
 25 |     "css-loader": "1.0.0",
 26 |     "dotenv": "6.0.0",
 27 |     "dotenv-expand": "4.2.0",
 28 |     "eslint": "5.6.0",
 29 |     "eslint-config-react-app": "^3.0.6",
 30 |     "eslint-loader": "2.1.1",
 31 |     "eslint-plugin-flowtype": "2.50.1",
 32 |     "eslint-plugin-import": "2.14.0",
 33 |     "eslint-plugin-jsx-a11y": "6.1.2",
 34 |     "eslint-plugin-react": "7.11.1",
 35 |     "express": "^4.16.4",
 36 |     "file-loader": "2.0.0",
 37 |     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
 38 |     "fs-extra": "7.0.0",
 39 |     "html-webpack-plugin": "4.0.0-alpha.2",
 40 |     "identity-obj-proxy": "3.0.0",
 41 |     "jest": "23.6.0",
 42 |     "jest-pnp-resolver": "1.0.1",
 43 |     "jest-resolve": "23.6.0",
 44 |     "mini-css-extract-plugin": "0.4.3",
 45 |     "mongoose": "^5.4.3",
 46 |     "optimize-css-assets-webpack-plugin": "5.0.1",
 47 |     "pnp-webpack-plugin": "1.1.0",
 48 |     "postcss-flexbugs-fixes": "4.1.0",
 49 |     "postcss-loader": "3.0.0",
 50 |     "postcss-preset-env": "6.3.1",
 51 |     "postcss-safe-parser": "4.0.1",
 52 |     "prop-types": "^15.6.2",
 53 |     "react": "^16.7.0",
 54 |     "react-app-polyfill": "^0.2.0",
 55 |     "react-dev-utils": "^7.0.1",
 56 |     "react-dom": "^16.7.0",
 57 |     "react-redux": "^6.0.0",
 58 |     "react-router-dom": "^4.3.1",
 59 |     "redux": "^4.0.1",
 60 |     "redux-devtools-extension": "^2.13.7",
 61 |     "redux-thunk": "^2.3.0",
 62 |     "resolve": "1.8.1",
 63 |     "sass-loader": "7.1.0",
 64 |     "socket.io": "^2.2.0",
 65 |     "socket.io-client": "^2.2.0",
 66 |     "style-loader": "0.23.0",
 67 |     "terser-webpack-plugin": "1.1.0",
 68 |     "url-loader": "1.1.1",
 69 |     "utility": "^1.15.0",
 70 |     "webpack": "4.19.1",
 71 |     "webpack-dev-server": "3.1.14",
 72 |     "webpack-manifest-plugin": "2.0.4",
 73 |     "workbox-webpack-plugin": "3.6.3"
 74 |   },
 75 |   "scripts": {
 76 |     "start": "node scripts/start.js",
 77 |     "build": "node scripts/build.js",
 78 |     "test": "node scripts/test.js"
 79 |   },
 80 |   "eslintConfig": {
 81 |     "extends": "react-app",
 82 |     "rules": {
 83 |        "eqeqeq": ["off"],
 84 |        "jsx-a11y/accessible-emoji": [0]
 85 |     }
 86 |   },
 87 |   "browserslist": [
 88 |     ">0.2%",
 89 |     "not dead",
 90 |     "not ie <= 11",
 91 |     "not op_mini all"
 92 |   ],
 93 |   "jest": {
 94 |     "collectCoverageFrom": [
 95 |       "src/**/*.{js,jsx,ts,tsx}",
 96 |       "!src/**/*.d.ts"
 97 |     ],
 98 |     "resolver": "jest-pnp-resolver",
 99 |     "setupFiles": [
100 |       "react-app-polyfill/jsdom"
101 |     ],
102 |     "testMatch": [
103 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
104 |       "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
105 |     ],
106 |     "testEnvironment": "jsdom",
107 |     "testURL": "http://localhost",
108 |     "transform": {
109 |       "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
110 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
111 |       "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
112 |     },
113 |     "transformIgnorePatterns": [
114 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
115 |       "^.+\\.module\\.(css|sass|scss)$"
116 |     ],
117 |     "moduleNameMapper": {
118 |       "^react-native$": "react-native-web",
119 |       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
120 |     },
121 |     "moduleFileExtensions": [
122 |       "web.js",
123 |       "js",
124 |       "web.ts",
125 |       "ts",
126 |       "web.tsx",
127 |       "tsx",
128 |       "json",
129 |       "web.jsx",
130 |       "jsx",
131 |       "node"
132 |     ]
133 |   },
134 |   "babel": {
135 |     "presets": [
136 |       "react-app"
137 |     ],
138 |     "plugins": [
139 |       [
140 |         "import",
141 |         {
142 |           "libraryName": "antd-mobile",
143 |           "style": "css"
144 |         }
145 |       ],
146 |       [
147 |         "@babel/plugin-proposal-decorators",
148 |         {
149 |           "legacy": true
150 |         }
151 |       ]
152 |     ]
153 |   },
154 |   "proxy": "http://localhost:9093"
155 | }
156 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta
 7 |       name="viewport"
 8 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
 9 |     />
10 |     <meta name="theme-color" content="#000000" />
11 |     <!--
12 |       manifest.json provides metadata used when your web app is added to the
13 |       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
14 |     -->
15 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16 |     <!--
17 |       Notice the use of %PUBLIC_URL% in the tags above.
18 |       It will be replaced with the URL of the `public` folder during the build.
19 |       Only files inside the `public` folder can be referenced from the HTML.
20 | 
21 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22 |       work correctly both with client-side routing and a non-root public URL.
23 |       Learn how to configure a non-root public URL by running `npm run build`.
24 |     -->
25 |     <title>React App</title>
26 |   </head>
27 |   <body>
28 |     <noscript>You need to enable JavaScript to run this app.</noscript>
29 |     <div id="root"></div>
30 |     <!--
31 |       This HTML file is a template.
32 |       If you open it directly in the browser, you will see an empty page.
33 | 
34 |       You can add webfonts, meta tags, or analytics to this file.
35 |       The build step will place the bundled scripts into the <body> tag.
36 | 
37 |       To begin the development, run `npm start` or `yarn start`.
38 |       To create a production bundle, use `npm run build` or `yarn build`.
39 |     -->
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const path = require('path');
 19 | const chalk = require('chalk');
 20 | const fs = require('fs-extra');
 21 | const webpack = require('webpack');
 22 | const bfj = require('bfj');
 23 | const configFactory = require('../config/webpack.config');
 24 | const paths = require('../config/paths');
 25 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 26 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 27 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 28 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 29 | const printBuildError = require('react-dev-utils/printBuildError');
 30 | 
 31 | const measureFileSizesBeforeBuild =
 32 |   FileSizeReporter.measureFileSizesBeforeBuild;
 33 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 34 | const useYarn = fs.existsSync(paths.yarnLockFile);
 35 | 
 36 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 37 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 38 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 39 | 
 40 | const isInteractive = process.stdout.isTTY;
 41 | 
 42 | // Warn and crash if required files are missing
 43 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 44 |   process.exit(1);
 45 | }
 46 | 
 47 | // Process CLI arguments
 48 | const argv = process.argv.slice(2);
 49 | const writeStatsJson = argv.indexOf('--stats') !== -1;
 50 | 
 51 | // Generate configuration
 52 | const config = configFactory('production');
 53 | 
 54 | // We require that you explicitly set browsers and do not fall back to
 55 | // browserslist defaults.
 56 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 57 | checkBrowsers(paths.appPath, isInteractive)
 58 |   .then(() => {
 59 |     // First, read the current file sizes in build directory.
 60 |     // This lets us display how much they changed later.
 61 |     return measureFileSizesBeforeBuild(paths.appBuild);
 62 |   })
 63 |   .then(previousFileSizes => {
 64 |     // Remove all content but keep the directory so that
 65 |     // if you're in it, you don't end up in Trash
 66 |     fs.emptyDirSync(paths.appBuild);
 67 |     // Merge with the public folder
 68 |     copyPublicFolder();
 69 |     // Start the webpack build
 70 |     return build(previousFileSizes);
 71 |   })
 72 |   .then(
 73 |     ({ stats, previousFileSizes, warnings }) => {
 74 |       if (warnings.length) {
 75 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 76 |         console.log(warnings.join('\n\n'));
 77 |         console.log(
 78 |           '\nSearch for the ' +
 79 |             chalk.underline(chalk.yellow('keywords')) +
 80 |             ' to learn more about each warning.'
 81 |         );
 82 |         console.log(
 83 |           'To ignore, add ' +
 84 |             chalk.cyan('// eslint-disable-next-line') +
 85 |             ' to the line before.\n'
 86 |         );
 87 |       } else {
 88 |         console.log(chalk.green('Compiled successfully.\n'));
 89 |       }
 90 | 
 91 |       console.log('File sizes after gzip:\n');
 92 |       printFileSizesAfterBuild(
 93 |         stats,
 94 |         previousFileSizes,
 95 |         paths.appBuild,
 96 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 97 |         WARN_AFTER_CHUNK_GZIP_SIZE
 98 |       );
 99 |       console.log();
100 | 
101 |       const appPackage = require(paths.appPackageJson);
102 |       const publicUrl = paths.publicUrl;
103 |       const publicPath = config.output.publicPath;
104 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
105 |       printHostingInstructions(
106 |         appPackage,
107 |         publicUrl,
108 |         publicPath,
109 |         buildFolder,
110 |         useYarn
111 |       );
112 |     },
113 |     err => {
114 |       console.log(chalk.red('Failed to compile.\n'));
115 |       printBuildError(err);
116 |       process.exit(1);
117 |     }
118 |   )
119 |   .catch(err => {
120 |     if (err && err.message) {
121 |       console.log(err.message);
122 |     }
123 |     process.exit(1);
124 |   });
125 | 
126 | // Create the production build and print the deployment instructions.
127 | function build(previousFileSizes) {
128 |   console.log('Creating an optimized production build...');
129 | 
130 |   let compiler = webpack(config);
131 |   return new Promise((resolve, reject) => {
132 |     compiler.run((err, stats) => {
133 |       let messages;
134 |       if (err) {
135 |         if (!err.message) {
136 |           return reject(err);
137 |         }
138 |         messages = formatWebpackMessages({
139 |           errors: [err.message],
140 |           warnings: [],
141 |         });
142 |       } else {
143 |         messages = formatWebpackMessages(
144 |           stats.toJson({ all: false, warnings: true, errors: true })
145 |         );
146 |       }
147 |       if (messages.errors.length) {
148 |         // Only keep the first error. Others are often indicative
149 |         // of the same problem, but confuse the reader with noise.
150 |         if (messages.errors.length > 1) {
151 |           messages.errors.length = 1;
152 |         }
153 |         return reject(new Error(messages.errors.join('\n\n')));
154 |       }
155 |       if (
156 |         process.env.CI &&
157 |         (typeof process.env.CI !== 'string' ||
158 |           process.env.CI.toLowerCase() !== 'false') &&
159 |         messages.warnings.length
160 |       ) {
161 |         console.log(
162 |           chalk.yellow(
163 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
164 |               'Most CI servers set it automatically.\n'
165 |           )
166 |         );
167 |         return reject(new Error(messages.warnings.join('\n\n')));
168 |       }
169 | 
170 |       const resolveArgs = {
171 |         stats,
172 |         previousFileSizes,
173 |         warnings: messages.warnings,
174 |       };
175 |       if (writeStatsJson) {
176 |         return bfj
177 |           .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
178 |           .then(() => resolve(resolveArgs))
179 |           .catch(error => reject(new Error(error)));
180 |       }
181 | 
182 |       return resolve(resolveArgs);
183 |     });
184 |   });
185 | }
186 | 
187 | function copyPublicFolder() {
188 |   fs.copySync(paths.appPublic, paths.appBuild, {
189 |     dereference: true,
190 |     filter: file => file !== paths.appHtml,
191 |   });
192 | }
193 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'development';
  5 | process.env.NODE_ENV = 'development';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const fs = require('fs');
 19 | const chalk = require('chalk');
 20 | const webpack = require('webpack');
 21 | const WebpackDevServer = require('webpack-dev-server');
 22 | const clearConsole = require('react-dev-utils/clearConsole');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const {
 25 |   choosePort,
 26 |   createCompiler,
 27 |   prepareProxy,
 28 |   prepareUrls,
 29 | } = require('react-dev-utils/WebpackDevServerUtils');
 30 | const openBrowser = require('react-dev-utils/openBrowser');
 31 | const paths = require('../config/paths');
 32 | const configFactory = require('../config/webpack.config');
 33 | const createDevServerConfig = require('../config/webpackDevServer.config');
 34 | 
 35 | const useYarn = fs.existsSync(paths.yarnLockFile);
 36 | const isInteractive = process.stdout.isTTY;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // Tools like Cloud9 rely on this.
 44 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 45 | const HOST = process.env.HOST || '0.0.0.0';
 46 | 
 47 | if (process.env.HOST) {
 48 |   console.log(
 49 |     chalk.cyan(
 50 |       `Attempting to bind to HOST environment variable: ${chalk.yellow(
 51 |         chalk.bold(process.env.HOST)
 52 |       )}`
 53 |     )
 54 |   );
 55 |   console.log(
 56 |     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
 57 |   );
 58 |   console.log(
 59 |     `Learn more here: ${chalk.yellow('http://bit.ly/CRA-advanced-config')}`
 60 |   );
 61 |   console.log();
 62 | }
 63 | 
 64 | // We require that you explictly set browsers and do not fall back to
 65 | // browserslist defaults.
 66 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 67 | checkBrowsers(paths.appPath, isInteractive)
 68 |   .then(() => {
 69 |     // We attempt to use the default port but if it is busy, we offer the user to
 70 |     // run on a different port. `choosePort()` Promise resolves to the next free port.
 71 |     return choosePort(HOST, DEFAULT_PORT);
 72 |   })
 73 |   .then(port => {
 74 |     if (port == null) {
 75 |       // We have not found a port.
 76 |       return;
 77 |     }
 78 |     const config = configFactory('development');
 79 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 80 |     const appName = require(paths.appPackageJson).name;
 81 |     const urls = prepareUrls(protocol, HOST, port);
 82 |     // Create a webpack compiler that is configured with custom messages.
 83 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
 84 |     // Load proxy config
 85 |     const proxySetting = require(paths.appPackageJson).proxy;
 86 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
 87 |     // Serve webpack assets generated by the compiler over a web server.
 88 |     const serverConfig = createDevServerConfig(
 89 |       proxyConfig,
 90 |       urls.lanUrlForConfig
 91 |     );
 92 |     const devServer = new WebpackDevServer(compiler, serverConfig);
 93 |     // Launch WebpackDevServer.
 94 |     devServer.listen(port, HOST, err => {
 95 |       if (err) {
 96 |         return console.log(err);
 97 |       }
 98 |       if (isInteractive) {
 99 |         clearConsole();
100 |       }
101 |       console.log(chalk.cyan('Starting the development server...\n'));
102 |       openBrowser(urls.localUrlForBrowser);
103 |     });
104 | 
105 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
106 |       process.on(sig, function() {
107 |         devServer.close();
108 |         process.exit();
109 |       });
110 |     });
111 |   })
112 |   .catch(err => {
113 |     if (err && err.message) {
114 |       console.log(err.message);
115 |     }
116 |     process.exit(1);
117 |   });
118 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | 
19 | const jest = require('jest');
20 | const execSync = require('child_process').execSync;
21 | let argv = process.argv.slice(2);
22 | 
23 | function isInGitRepository() {
24 |   try {
25 |     execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
26 |     return true;
27 |   } catch (e) {
28 |     return false;
29 |   }
30 | }
31 | 
32 | function isInMercurialRepository() {
33 |   try {
34 |     execSync('hg --cwd . root', { stdio: 'ignore' });
35 |     return true;
36 |   } catch (e) {
37 |     return false;
38 |   }
39 | }
40 | 
41 | // Watch unless on CI, in coverage mode, or explicitly running all tests
42 | if (
43 |   !process.env.CI &&
44 |   argv.indexOf('--coverage') === -1 &&
45 |   argv.indexOf('--watchAll') === -1
46 | ) {
47 |   // https://github.com/facebook/create-react-app/issues/5210
48 |   const hasSourceControl = isInGitRepository() || isInMercurialRepository();
49 |   argv.push(hasSourceControl ? '--watch' : '--watchAll');
50 | }
51 | 
52 | 
53 | jest.run(argv);
54 | 


--------------------------------------------------------------------------------
/server/model.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose')
 2 | 
 3 | //链接mongo 并且使用react-chat这个集合
 4 | const DB_URL = 'mongodb://localhost:27017/react-chat'
 5 | mongoose.connect(DB_URL)
 6 | 
 7 | const models = {
 8 |     user: {
 9 |         'user':{type:String, require:true},
10 |         'pwd': {type:String, require:true},
11 |         'type':{type:String, require:true},
12 |          //头像
13 |         'avatar':{type:String},
14 |          //个人简介或者职位简介
15 |         'desc':{type:String},
16 |          //职位
17 |         'title':{type:String},
18 |          //如果是boss 还有两个字段
19 |         'company':{type:String},
20 |         'money':{type:String}
21 |     },
22 |     chat: {
23 |         'chatid':{'type':String, 'require':true},
24 |         'from':{'type':String, 'require':true},
25 |         'to':{'type':String, 'require':true},
26 |         'read':{'type':Boolean, 'default':false},
27 |         'content':{'type':String, 'require':true, 'default':''},
28 |         'create_time':{'type':Number, 'default':new Date().getTime()}
29 |     }
30 | }
31 | 
32 | //批量动态生成model
33 | for(let m in models){
34 |     mongoose.model(m, new mongoose.Schema(models[m]))
35 | }
36 | 
37 | //mongoose的工具函数库
38 | module.exports = {
39 |     getModel:function(name){
40 |         return mongoose.model(name)
41 |     }
42 | }


--------------------------------------------------------------------------------
/server/server.js:
--------------------------------------------------------------------------------
 1 | const express = require('express')
 2 | const bodyParser = require('body-parser')
 3 | const cookieParser = require('cookie-parser')
 4 | const model = require('./model')
 5 | const Chat = model.getModel('chat')
 6 | 
 7 | const app = express()
 8 | 
 9 | //work with express
10 | const server = require('http').Server(app) //express server 用http包裹
11 | const io = require('socket.io')(server)  //再传给socket.io对象，使其与express关联起来
12 | 
13 | //监听connection事件
14 | io.on('connection', function(socket){ //io全局的请求
15 |     socket.on('sendmsg', function(data){ //socket当前连接的请求
16 |         // console.log(data)
17 |         const {from, to, msg} = data
18 |         const chatid = [from, to].sort().join('_')
19 |         Chat.create({chatid, from, to, content:msg}, function(err, doc){ //数据库存入数据
20 |              io.emit('recvmsg', Object.assign({}, doc._doc))
21 |         })
22 |     })
23 | })
24 | 
25 | const userRouter = require('./user')
26 | 
27 | //开启中间件
28 | app.use(cookieParser())
29 | app.use(bodyParser.json()) //解析post 传来的json数据
30 | app.use('/user', userRouter)
31 | 
32 | //改app.listen 为server.listen：使socket.io 与express成功绑定
33 | server.listen(9093, function(){
34 |     console.log('Node app start at port 9093')
35 | })


--------------------------------------------------------------------------------
/server/user.js:
--------------------------------------------------------------------------------
  1 | const express = require('express')
  2 | const utils = require('utility')
  3 | const Router = express.Router()  //路由对象
  4 | const model = require('./model')
  5 | const User = model.getModel('user')
  6 | const Chat = model.getModel('chat')
  7 | //查询条件 不显示密码和版本号
  8 | const _filter = {'pwd':0, '__v':0}
  9 | 
 10 | //用户信息列表
 11 | Router.get('/list', function(req, res){
 12 |     const {type} = req.query
 13 |     // Chat.remove({}, function(err, doc){})
 14 |     User.find({type}, function(err, doc){
 15 |         return res.json({code:0, data:doc})
 16 |     })
 17 | })
 18 | //标识已读
 19 | Router.post('/readmsg', function(req, res){
 20 |     const userid = req.cookies.userid
 21 |     const {from} = req.body
 22 |     console.log(userid, from)
 23 |     Chat.update({from, to:userid}, 
 24 |                 {'$set':{read:true}}, 
 25 |                 {'multi':true},function(err, doc){
 26 |         if(!err){
 27 |             return res.json({code:0, num:doc.nModified})
 28 |         }
 29 |         return res.json({code:1, msg:'修改失败'})
 30 |     })
 31 | })
 32 | //更新信息
 33 | Router.post('/update', function(req, res){
 34 |     const userid = req.cookies.userid
 35 |     if(!userid){
 36 |         return json.dumps({code:1})
 37 |     }
 38 |     const body = req.body
 39 |     User.findByIdAndUpdate(userid, body, function(err, doc){
 40 |         const data = Object.assign({},{
 41 |             user: doc.user,
 42 |             type: doc.type,
 43 |         }, body)
 44 |         return res.json({code:0, data})
 45 |     })
 46 | })
 47 | //用户登录
 48 | Router.post('/login', function(req, res){
 49 |     const {user, pwd} = req.body
 50 |     User.findOne({user, pwd:md5Pwd(pwd)},{'pwd':0}, function(err, doc){
 51 |         if(!doc){
 52 |             return res.json({code:1, msg:'用户名或者密码错误'})
 53 |         }
 54 |         res.cookie('userid', doc._id)
 55 |         return res.json({code:0, data:doc})
 56 |     })
 57 | })
 58 | //用户注册
 59 | Router.post('/register', function(req, res){
 60 |     // console.log(req.body)
 61 |     const {user, pwd, type} = req.body
 62 |     User.findOne({user:user},function(err, doc){
 63 |         if(doc){
 64 |             return res.json({code:1, msg:'用户名重复'})
 65 |         }
 66 |         //注册后存储cookie model.save 获得id
 67 |         const userModel = new User({user, type, pwd:md5Pwd(pwd)})
 68 |         userModel.save(function(e, d){
 69 |             if(e){
 70 |                 return res.json({code:1, msg:'后端出错了'})
 71 |             }
 72 |             const {user, type, _id} = d
 73 |             res.cookie('userid', _id)
 74 |             return res.json({code:0, data:{user, type, _id}})
 75 |         })
 76 |     })
 77 | })
 78 | //用户信息
 79 | Router.get('/info', function(req, res){
 80 |     //用户cookie校验
 81 |     const {userid} = req.cookies
 82 |     if(!userid){
 83 |         return res.json({code:1})
 84 |     }
 85 |     User.findOne({_id: userid}, _filter, function(err, doc){
 86 |         if(err){
 87 |             return res.json({code:1, msg:'后端出错了'})
 88 |         }
 89 |         if(doc){
 90 |             return res.json({code:0, data:doc})
 91 |         }
 92 |     })
 93 |     
 94 | })
 95 | //获取聊天信息列表
 96 | Router.get('/getmsglist', function(req, res){
 97 |     const user = req.cookies.userid
 98 |     User.find({}, function(e, userdoc){
 99 |         let users = {}
100 |         userdoc.forEach(v=>{
101 |             users[v._id] = {name:v.user, avatar:v.avatar}
102 |         })
103 |         Chat.find({'$or':[{from:user},{to:user}]}, function(err, doc){
104 |             if(err){
105 |                 return res.json({code:1, msg:'后端出错了'})
106 |             }
107 |             if(doc){
108 |                 return res.json({code:0, msgs:doc, users:users})
109 |             }
110 |         })
111 |     })
112 | })
113 | 
114 | //密码加密
115 | function md5Pwd(pwd){
116 |     const salt = 'imooc_is_good_3957x8yza6!@#IUHJh~~'
117 |     return utils.md5(utils.md5(pwd+salt))
118 | }
119 | 
120 | module.exports = Router


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   animation: App-logo-spin infinite 20s linear;
 7 |   height: 40vmin;
 8 | }
 9 | 
10 | .App-header {
11 |   background-color: #282c34;
12 |   min-height: 100vh;
13 |   display: flex;
14 |   flex-direction: column;
15 |   align-items: center;
16 |   justify-content: center;
17 |   font-size: calc(10px + 2vmin);
18 |   color: white;
19 | }
20 | 
21 | .App-link {
22 |   color: #61dafb;
23 | }
24 | 
25 | @keyframes App-logo-spin {
26 |   from {
27 |     transform: rotate(0deg);
28 |   }
29 |   to {
30 |     transform: rotate(360deg);
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import logo from './logo.svg';
 3 | import './App.css';
 4 | 
 5 | class App extends Component {
 6 |   render() {
 7 |     return (
 8 |       <div className="App">
 9 |         <header className="App-header">
10 |           <img src={logo} className="App-logo" alt="logo" />
11 |           <p>
12 |             Edit <code>src/App.js</code> and save to reload.
13 |           </p>
14 |           <a
15 |             className="App-link"
16 |             href="https://reactjs.org"
17 |             target="_blank"
18 |             rel="noopener noreferrer"
19 |           >
20 |             Learn React
21 |           </a>
22 |         </header>
23 |       </div>
24 |     );
25 |   }
26 | }
27 | 
28 | export default App;
29 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div');
 7 |   ReactDOM.render(<App />, div);
 8 |   ReactDOM.unmountComponentAtNode(div);
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/component/authroute/authroute.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 用户信息校验，跳转登录
 3 |  */
 4 | import React from 'react'
 5 | import axios from 'axios'
 6 | import {withRouter} from 'react-router-dom'
 7 | import {connect} from 'react-redux'
 8 | import {loadData} from '../../redux/user.redux'
 9 | 
10 | @withRouter
11 | @connect(
12 |    null,
13 |    {loadData}
14 | )
15 | class AuthRoute extends React.Component{
16 |     componentDidMount() {
17 |        const publicList = ['/login', 'register']
18 |        const pathname = this.props.location.pathname;
19 |        if(publicList.indexOf(pathname) > -1){
20 |            return null
21 |        }
22 |        //获取用户信息
23 |        axios.get('/user/info')
24 |           .then(res => {
25 |              if(res.status == 200){
26 |                 if(res.data.code == 0){  //登录
27 |                    this.props.loadData(res.data.data)
28 |                 }else{
29 |                    this.props.history.push('/login')
30 |                    //console.log(this.props.history)
31 |                 }
32 |              }
33 |           })
34 |        //现在的url地址，login是不需要跳转的
35 |     }
36 |     render(){
37 | 		return null
38 | 	}
39 | }
40 | 
41 | export default AuthRoute


--------------------------------------------------------------------------------
/src/component/avatar-selector/avatar-selector.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Grid, List} from 'antd-mobile'
 3 | import PropTypes from 'prop-types'
 4 | 
 5 | class AvatarSelector extends React.Component{
 6 |     static propTypes = {
 7 |         selectAvatar: PropTypes.func.isRequired
 8 |     }
 9 |     constructor(props){
10 |         super(props)
11 |         this.state = {}
12 |     }
13 |     render(){
14 |         const avatarList = 'boy,girl,man,woman,bull,chick,crab,hedgehog,hippopotamus,koala,lemur,pig,tiger,whale,zebra'
15 |                             .split(',')
16 |                             .map(v=>({
17 |                                 icon:require(`../img/${v}.png`),
18 |                                 text:v
19 |                             }))
20 |         const gridHeader = this.state.text 
21 |                             ? (<div>
22 |                                 <span>已选择头像</span>
23 |                                 <img style={{width: 20}} src={this.state.icon} alt=""/>
24 |                             </div>) 
25 |                             :  <div>'请选择头像'</div>                   
26 |         return (
27 |             <div>
28 |                 <List renderHeader={() => gridHeader} style={{marginTop:45}}>
29 |                     <Grid 
30 |                         data={avatarList} 
31 |                         columnNum={5}
32 |                         onClick={elm => {
33 |                             this.setState(elm)
34 |                             this.props.selectAvatar(elm.text)
35 |                         }}
36 |                     />
37 |                 </List>
38 |             </div> 
39 |         )
40 |     }
41 | }
42 | 
43 | export default AvatarSelector


--------------------------------------------------------------------------------
/src/component/boss/boss.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Boss看到的是牛人列表 
 3 |  */
 4 | import React from 'react'
 5 | import {connect} from 'react-redux'
 6 | import {getUserList} from '../../redux/chatuser.redux'
 7 | import UserCard from '../usercard/usercard'
 8 | 
 9 | @connect(
10 |     state => state.chatuser,
11 |     {getUserList}
12 | )
13 | class Boss extends React.Component{
14 |     componentDidMount(){
15 |         this.props.getUserList('genius')
16 |     }
17 |     render(){
18 |         // console.log(this.state.data)
19 |         // console.log(this.props.userlist)
20 |         return <UserCard userlist={this.props.userlist}></UserCard>
21 |     }
22 | }
23 | 
24 | export default Boss


--------------------------------------------------------------------------------
/src/component/chat/chat.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import {List, InputItem, NavBar, Icon, Grid} from 'antd-mobile'
  3 | import {connect} from 'react-redux'
  4 | import {getMsgList, sendMsg, recvMsg, readMsg} from '../../redux/chat.redux'
  5 | import {getChatId} from '../../utils'
  6 | // import io from 'socket.io-client'
  7 | // const socket = io('ws://localhost:9093') //前后端端口不一，跨域需要手动连接socket
  8 | 
  9 | @connect(
 10 |     state => state,
 11 |     {getMsgList, sendMsg, recvMsg, readMsg}
 12 | )
 13 | class Chat extends React.Component{
 14 |     constructor(props){
 15 |         super(props)
 16 |         this.state={text: '', msg:[]}
 17 |     }
 18 |     componentDidMount(){
 19 |         if(!this.props.chat.chatmsg.length){
 20 |             this.props.getMsgList()
 21 |             this.props.recvMsg()
 22 |         }     
 23 |         // socket.on('recvmsg', (data) => {
 24 |         //     this.setState({
 25 |         //         msg: [...this.state.msg, data.text]
 26 |         //     })
 27 |         // })
 28 |     }
 29 |     componentWillUnmount(){
 30 |         const to = this.props.match.params.user
 31 |         this.props.readMsg(to)
 32 |     }
 33 |     //grid bug官方推荐解决方案：手动发送一个事件
 34 |     fixCarousel(){
 35 |         setTimeout(function(){ 
 36 |             window.dispatchEvent(new Event('resize'))
 37 |         }, 0)
 38 |     }
 39 |     handleSubmit(){
 40 |         // socket.emit('sendmsg',{text: this.state.text})  //触发事件
 41 |         const from = this.props.user._id
 42 |         const to = this.props.match.params.user
 43 |         const msg = this.state.text
 44 |         this.props.sendMsg({from, to, msg})
 45 |         this.setState({
 46 |             text: '',
 47 |             showEmoji: false
 48 |         })
 49 |     }
 50 |     render(){
 51 |         const emoji = '😁 😂 😃 😄 😅 😆 😇 😈 😉 😊 😋 😌 😍 😎 😏 😐 😒 😓 😔 😖 😘 😚 😜 😝 😞 😠 😡 😢 😣 😤 😥 😨 😩 😪 😫 😭 😰 😱 😲 😳 😵 😶 😷 😸 😹 😺 😻 😼 😽 😾 😿 🙀 🙅 🙆 🙇 🙈 🙉 🙊 🙋 🙌 🙍 🙎 🙏 🚀 🚃 🚄 🚅 🚇 🚉 🚌 🚏 🚑 🚒 🚓 🚕 🚗 🚙 🚚 🚢 🚤 🚥 🚧 🚨 🚩 🚪 🚫 🚬 🚭 🚲 🚶 🚹 🚺 🚻 🚼 🚽 🚾 🛀 '
 52 |                       .split(" ")
 53 |                       .filter(v=>v)
 54 |                       .map(v=>({text:v}));
 55 | 
 56 |         const userid = this.props.match.params.user
 57 |         const Item = List.Item
 58 |         const users = this.props.chat.users
 59 |         if(!users[userid]){
 60 |             return null
 61 |         }
 62 |         //过滤聊天信息：只显示与当前选择用户的信息
 63 |         const chatid = getChatId(userid, this.props.user._id)
 64 |         const chatmsgs = this.props.chat.chatmsg.filter(v=>v.chatid==chatid)
 65 |         return (
 66 |             <div id='chat-page'>
 67 |                 <NavBar 
 68 |                     mode='dark'
 69 |                     icon={<Icon type="left"/>}
 70 |                     onLeftClick={() => {
 71 |                         this.props.history.goBack()
 72 |                     }}
 73 |                 >
 74 |                     {users[userid].name}
 75 |                 </NavBar>
 76 |                 {chatmsgs.map(v=>{
 77 |                     const avatar = require(`../img/${users[v.from].avatar}.png`)
 78 |                     return v.from == userid ? (
 79 |                        <List key={v._id}>
 80 |                            <Item
 81 |                              thumb={avatar}
 82 |                            >{v.content}</Item>
 83 |                        </List>
 84 |                     ) : (
 85 |                        <List key={v._id}>
 86 |                            <Item 
 87 |                               extra={<img src={avatar} alt="头像"/>}
 88 |                               className='chat-me'
 89 |                             >{v.content}</Item>
 90 |                        </List>
 91 |                     )
 92 |                 })}
 93 |                 <div className="stick-footer">
 94 |                     <List>
 95 |                         <InputItem 
 96 |                             placeholder='请输入'
 97 |                             value={this.state.text}
 98 |                             onChange={v =>{
 99 |                                 this.setState({
100 |                                     text:v
101 |                                 })
102 |                             }}
103 |                             extra={
104 |                                 <div>
105 |                                     <span
106 |                                        style={{marginRight:15}}
107 |                                        onClick={()=>{
108 |                                            this.setState({
109 |                                                showEmoji: !this.state.showEmoji
110 |                                            })
111 |                                            this.fixCarousel()
112 |                                        }}
113 |                                     >😃</span>
114 |                                     <span onClick={()=>this.handleSubmit()}>发送</span>
115 |                                 </div>
116 |                             }
117 |                         >信息</InputItem>
118 |                     </List>
119 |                     {this.state.showEmoji ? <Grid 
120 |                         data={emoji}
121 |                         columnNum={9}
122 |                         carouselMaxRow={4}
123 |                         isCarousel={true}
124 |                         onClick={el=>{
125 |                             this.setState({
126 |                                 text: this.state.text+el.text
127 |                             })
128 |                         }}
129 |                     /> : null} 
130 |                 </div>  
131 |             </div>        
132 |         )
133 |     }
134 | }
135 | 
136 | export default Chat


--------------------------------------------------------------------------------
/src/component/dashboard/dashboard.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {NavBar} from 'antd-mobile'
 3 | import {connect} from 'react-redux'
 4 | import {Switch, Route} from 'react-router-dom'
 5 | import NavLinkBar from '../navlink/navlink'
 6 | import Boss from '../../component/boss/boss'
 7 | import Genius from '../../component/genius/genius'
 8 | import User from '../../component/user/user'
 9 | import Msg from '../../component/msg/msg'
10 | import {getMsgList, recvMsg} from '../../redux/chat.redux'
11 | 
12 | @connect(
13 |     state => state,
14 |     {getMsgList, recvMsg}
15 | )
16 | class DashBoard extends React.Component{
17 |     componentDidMount(){
18 |         if(!this.props.chat.chatmsg.length){
19 |             this.props.getMsgList()
20 |             this.props.recvMsg()
21 |         }      
22 |     }
23 |     render(){
24 |         const {pathname} = this.props.location
25 |         const user = this.props.user 
26 |         const navList = [
27 |             {
28 |                 path: '/boss',
29 |                 text: '牛人',
30 |                 icon: 'boss',
31 |                 title: '牛人列表',
32 |                 component: Boss,
33 |                 hide: user.type == 'genius'
34 |             },
35 |             {
36 |                 path: '/genius',
37 |                 text: 'Boss',
38 |                 icon: 'job',
39 |                 title: 'Boss列表',
40 |                 component: Genius,
41 |                 hide: user.type == 'boss'
42 |             },
43 |             {
44 |                 path: '/msg',
45 |                 text: '消息',
46 |                 icon: 'msg',
47 |                 title: '消息列表',
48 |                 component: Msg
49 |             },
50 |             {
51 |                 path: '/me',
52 |                 text: '我',
53 |                 icon: 'user',
54 |                 title: '个人中心',
55 |                 component: User
56 |             }
57 |         ]
58 |         return (
59 |             <div>
60 |                 <NavBar mode='dard' className='fixed-header'>{navList.find(v => v.path==pathname).title}</NavBar>
61 |                 <div>
62 |                     <Switch>
63 |                         {navList.map(v => (
64 |                             <Route key={v.path} path={v.path} component={v.component}></Route>
65 |                         ))}
66 |                     </Switch>
67 |                 </div>
68 |                 <NavLinkBar data={navList}></NavLinkBar>
69 |             </div>
70 |         )
71 |     }
72 | }
73 | 
74 | export default DashBoard


--------------------------------------------------------------------------------
/src/component/genius/genius.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 牛人看到的是Boss列表 
 3 |  */
 4 | import React from 'react'
 5 | import {connect} from 'react-redux'
 6 | import {getUserList} from '../../redux/chatuser.redux'
 7 | import UserCard from '../usercard/usercard'
 8 | 
 9 | @connect(
10 |     state => state.chatuser,
11 |     {getUserList}
12 | )
13 | class Genius extends React.Component{
14 |     componentDidMount(){
15 |         this.props.getUserList('boss')
16 |     }
17 |     render(){
18 |         // console.log(this.state.data)
19 |         // console.log(this.props.userlist)
20 |         return <UserCard userlist={this.props.userlist}></UserCard>
21 |     }
22 | }
23 | 
24 | export default Genius


--------------------------------------------------------------------------------
/src/component/img/boy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/img/boy.png


--------------------------------------------------------------------------------
/src/component/img/bull.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/img/bull.png


--------------------------------------------------------------------------------
/src/component/img/chick.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/img/chick.png


--------------------------------------------------------------------------------
/src/component/img/crab.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/img/crab.png


--------------------------------------------------------------------------------
/src/component/img/default_avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/img/default_avatar.png


--------------------------------------------------------------------------------
/src/component/img/girl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/img/girl.png


--------------------------------------------------------------------------------
/src/component/img/hedgehog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/img/hedgehog.png


--------------------------------------------------------------------------------
/src/component/img/hippopotamus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/img/hippopotamus.png


--------------------------------------------------------------------------------
/src/component/img/koala.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/img/koala.png


--------------------------------------------------------------------------------
/src/component/img/lemur.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/img/lemur.png


--------------------------------------------------------------------------------
/src/component/img/man.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/img/man.png


--------------------------------------------------------------------------------
/src/component/img/pig.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/img/pig.png


--------------------------------------------------------------------------------
/src/component/img/tiger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/img/tiger.png


--------------------------------------------------------------------------------
/src/component/img/whale.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/img/whale.png


--------------------------------------------------------------------------------
/src/component/img/woman.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/img/woman.png


--------------------------------------------------------------------------------
/src/component/img/zebra.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/img/zebra.png


--------------------------------------------------------------------------------
/src/component/imooc-form/imooc-form.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default function imoocForm(Comp){
 4 |     return class WrapperComp extends React.Component{
 5 |         constructor(props){
 6 |             super(props)
 7 |             this.state = {}
 8 |             this.handleChange = this.handleChange.bind(this)
 9 |         }
10 | 
11 |         handleChange(key, val){
12 |             this.setState({
13 |                 [key]: val
14 |             })
15 |         }
16 | 
17 |         render(){
18 |             return <Comp handleChange={this.handleChange} state={this.state} {...this.props}></Comp>
19 |         }
20 |     }
21 | }


--------------------------------------------------------------------------------
/src/component/logo/job.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/logo/job.png


--------------------------------------------------------------------------------
/src/component/logo/logo.css:
--------------------------------------------------------------------------------
1 | .logo-container{
2 |     margin-top: 40px;
3 |     text-align: center;
4 |     margin-bottom: 20px;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/component/logo/logo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logoImg from './job.png'
 3 | import './logo.css'
 4 | 
 5 | class Logo extends React.Component{
 6 |     render(){
 7 |         return (
 8 |             <div className="logo-container">
 9 |                 <img src={logoImg} alt="" />
10 |             </div>
11 |         )
12 |     }
13 | }
14 | 
15 | export default  Logo


--------------------------------------------------------------------------------
/src/component/msg/msg.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {List, Badge} from 'antd-mobile'
 3 | import {connect} from 'react-redux'
 4 | 
 5 | @connect(
 6 |     state => state
 7 | )
 8 | class Msg extends React.Component{
 9 |      //一个用户的信息自动排序，最后即最新
10 |      getLast = (arr) => {
11 |          return arr[arr.length-1]
12 |      }
13 |      render(){
14 |         const Item = List.Item
15 |         const Brief = Item.Brief
16 |         const userid = this.props.user._id
17 |         const userinfo = this.props.chat.users
18 | 
19 |         //按照聊天用户分组，根据 chatid
20 |         const msgGroup = {}
21 |         this.props.chat.chatmsg.forEach(v=>{
22 |             msgGroup[v.chatid] = msgGroup[v.chatid] || []
23 |             msgGroup[v.chatid].push(v)
24 |         })
25 |         
26 |         //用户信息数组的数组、排序
27 |         const chatList = Object.values(msgGroup).sort((a, b)=>{
28 |             const a_last = this.getLast(a).create_time
29 |             const b_last = this.getLast(b).create_time
30 |             return b_last - a_last
31 |         })
32 | 
33 |          return (
34 |              <div>
35 |                     {chatList.map(v=>{
36 |                         // console.log(v)
37 |                         const lastItem = this.getLast(v)
38 |                         const targetId = v[0].from==userid?v[0].to:v[0].from
39 |                         const unreadNum = v.filter(v=>!v.read&&v.to==userid).length
40 |                         if(!userinfo[targetId]){
41 |                             return null
42 |                         }
43 |                         return (
44 |                             <List key={lastItem._id}>
45 |                                 <Item
46 |                                   extra={<Badge text={unreadNum}></Badge>}
47 |                                   thumb={require(`../img/${userinfo[targetId].avatar}.png`)}
48 |                                   arrow="horizontal"
49 |                                   onClick={()=>{
50 |                                       this.props.history.push(`/chat/${targetId}`)
51 |                                   }}
52 |                                 >
53 |                                     {lastItem.content}
54 |                                     <Brief>{userinfo[targetId].name}</Brief>
55 |                                 </Item>
56 |                             </List>
57 |                         )
58 |                     })}
59 |              </div>
60 |          )
61 |      }
62 | }
63 | 
64 | export default Msg


--------------------------------------------------------------------------------
/src/component/navlink/img/boss-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/navlink/img/boss-active.png


--------------------------------------------------------------------------------
/src/component/navlink/img/boss.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/navlink/img/boss.png


--------------------------------------------------------------------------------
/src/component/navlink/img/job-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/navlink/img/job-active.png


--------------------------------------------------------------------------------
/src/component/navlink/img/job.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/navlink/img/job.png


--------------------------------------------------------------------------------
/src/component/navlink/img/msg-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/navlink/img/msg-active.png


--------------------------------------------------------------------------------
/src/component/navlink/img/msg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/navlink/img/msg.png


--------------------------------------------------------------------------------
/src/component/navlink/img/user-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/navlink/img/user-active.png


--------------------------------------------------------------------------------
/src/component/navlink/img/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/66Web/react-antd-zhaoping/f40d61c6ccd13fe00c41d0ce5d0077d019e9fc9e/src/component/navlink/img/user.png


--------------------------------------------------------------------------------
/src/component/navlink/navlink.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {TabBar} from 'antd-mobile'
 3 | import PropTypes from 'prop-types'
 4 | import {withRouter} from 'react-router-dom'
 5 | import {connect} from 'react-redux'
 6 | 
 7 | @withRouter
 8 | @connect(
 9 |     state => state.chat
10 | )
11 | class NavLinkBar extends React.Component{
12 |     static propTypes = {
13 |         data: PropTypes.array.isRequired
14 |     }
15 |     render(){
16 |        const {pathname} = this.props.location
17 |        const navList = this.props.data.filter(v=>!v.hide)
18 |        // console.log(navList)
19 |        return (
20 |            <TabBar>
21 |                {navList.map(v=>(
22 |                    <TabBar.Item
23 |                        badge={v.path == '/msg' ? this.props.unread : ''}
24 |                        key={v.path}
25 |                        title={v.text}
26 |                        icon={{uri: require(`./img/${v.icon}.png`)}}
27 |                        selectedIcon={{uri: require(`./img/${v.icon}-active.png`)}}
28 |                        selected={pathname===v.path}
29 |                        onPress={()=>{
30 |                            this.props.history.push(v.path)
31 |                        }}
32 |                    >
33 |                    </TabBar.Item>
34 |                ))}
35 |            </TabBar>
36 |        )
37 |     }
38 | }
39 | 
40 | export default NavLinkBar


--------------------------------------------------------------------------------
/src/component/user/user.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Result, List, WhiteSpace, Modal} from 'antd-mobile'
 3 | import {connect} from 'react-redux'
 4 | import browserCookie from 'browser-cookies'
 5 | import {Redirect} from 'react-router-dom'
 6 | import {logoutSubmit} from '../../redux/user.redux'
 7 | 
 8 | @connect(
 9 |     state=>state.user,
10 |     {logoutSubmit}
11 | )
12 | class User extends React.Component{
13 | 	logout = () => {
14 | 		const alert = Modal.alert
15 | 
16 | 		alert('注销', '确认退出登录吗???', [
17 | 		      { text: '取消', onPress: () => console.log('cancel') },
18 | 		      { text: '确认', onPress: () => {
19 | 		      	browserCookie.erase('userid')  //清除cookie
20 | 		      	this.props.logoutSubmit()   //清空redux，并跳转到login页
21 | 		      }}
22 | 		    ])
23 | 	}
24 | 	render(){
25 | 		const props = this.props
26 | 		const Item = List.Item
27 | 		const Brief = Item.Brief
28 | 		console.log(props)
29 | 		return props.user?(
30 | 			<div>
31 | 				<Result
32 | 					img={<img src={require(`../img/${props.avatar}.png`)} style={{width:50}} alt="" />}
33 | 					title={props.user}
34 | 					message={props.type=='boss'?props.company:null}
35 | 				/>
36 | 				
37 | 				<List renderHeader={()=>'简介'}>
38 | 					<Item
39 | 						multipleLine
40 | 					>
41 | 						{props.title}
42 | 						{props.desc.split('\n').map(v=><Brief key={v}>{v}</Brief>)}
43 | 						{props.money?<Brief>薪资:{props.money}</Brief>:null}
44 | 					</Item>
45 | 				</List>
46 | 				<WhiteSpace></WhiteSpace>
47 | 				<List>
48 | 					<Item onClick={this.logout}>退出登录</Item>
49 | 				</List>
50 | 			</div>
51 | 		): <Redirect to={props.redirectTo} />
52 | 	}
53 | }
54 | 
55 | 
56 | export default User
57 | 


--------------------------------------------------------------------------------
/src/component/usercard/usercard.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import {Card, WhiteSpace, WingBlank} from 'antd-mobile'
 4 | import {withRouter} from 'react-router-dom'
 5 | 
 6 | @withRouter
 7 | class UserCard extends React.Component{
 8 |      static propTypes = {
 9 |          userlist: PropTypes.array.isRequired
10 |      }  
11 |      handleClick(v){
12 |          this.props.history.push(`/chat/${v._id}`)
13 |      }
14 |      render(){
15 |         const Header = Card.Header
16 |         const Body = Card.Body
17 |          return (
18 |               <WingBlank>
19 |                 <WhiteSpace />
20 |                 {this.props.userlist.map(v=>(
21 |                     v.avatar ? <Card 
22 |                                   key={v._id}
23 |                                   onClick={() => this.handleClick(v)}
24 |                                 >
25 |                         <Header
26 |                            title={v.user}
27 |                            thumb={require(`../img/${v.avatar}.png`)}
28 |                            extra={<span>{v.title}</span>}
29 |                         >
30 |                         </Header>
31 |                         <Body>
32 |                            {v.type=='boss' ? <div>公司：{v.company}</div> : null} 
33 |                            {v.desc.split('\n').map(d=>(
34 |                                <div key={d}>{d}</div>
35 |                            ))}
36 |                            {v.type=='boss' ? <div>薪资：{v.money}</div> : null}
37 |                         </Body>
38 |                     </Card> : null
39 |                 ))}
40 |             </WingBlank>
41 |          )
42 |      }
43 | }
44 | 
45 | export default UserCard


--------------------------------------------------------------------------------
/src/config.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import {Toast} from 'antd-mobile'  //轻提示
 3 | 
 4 | //拦截请求
 5 | axios.interceptors.request.use(function(config){
 6 |          Toast.loading('加载中',0)
 7 |          return config
 8 | })
 9 | 
10 | //拦截响应
11 | axios.interceptors.response.use(function(config){
12 |          Toast.hide()
13 |          return config
14 | })


--------------------------------------------------------------------------------
/src/container/bossinfo/bossinfo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {NavBar, InputItem, TextareaItem, Button} from 'antd-mobile'
 3 | import AvatarSelector from '../../component/avatar-selector/avatar-selector'
 4 | import {connect} from 'react-redux'
 5 | import {update} from '../../redux/user.redux'
 6 | import {Redirect} from 'react-router-dom'
 7 | 
 8 | @connect(
 9 |     state => state.user,
10 |     {update}
11 | )
12 | class BossInfo extends React.Component{
13 |     constructor(props){
14 |         super(props)
15 |         this.state = {
16 |             title: '',
17 |             desc: '',
18 |             company: '',
19 |             money: ''
20 |         }
21 |     }
22 |     onChange(key, val){
23 |         this.setState({
24 |             [key]: val
25 |         }) 
26 |     }
27 |     render(){
28 |         const path = this.props.location.pathname
29 |         const redirect = this.props.redirectTo
30 |         return (
31 |             <div>
32 |                {redirect&&redirect!==path  ? <Redirect to={this.props.redirectTo}/> : null}
33 |                <NavBar mode="dark">Boss完善信息页面</NavBar>
34 |                 <AvatarSelector
35 |                    selectAvatar={(imgname) => {
36 |                        this.setState({
37 |                            avatar: imgname
38 |                        })
39 |                    }}
40 |                 ></AvatarSelector>
41 |                 <InputItem onChange={(v) => this.onChange('title', v)}>
42 |                     招聘职位
43 |                 </InputItem>
44 |                 <InputItem onChange={(v) => this.onChange('company', v)}>
45 |                     公司名称
46 |                 </InputItem>
47 |                 <InputItem onChange={(v) => this.onChange('money', v)}>
48 |                     职位薪资
49 |                 </InputItem>
50 |                 <TextareaItem
51 |                     rows={3}
52 |                     title="职位要求"
53 |                     autoHeight
54 |                     onChange={(v) => this.onChange('desc', v)}
55 |                 >
56 |                 </TextareaItem>
57 |                 <Button
58 |                     onClick={()=>{
59 |                         this.props.update(this.state)
60 |                     }}
61 |                     type="primary"
62 |                 >保存</Button>
63 |             </div>
64 |         )
65 |     }
66 | }
67 | 
68 | export default BossInfo


--------------------------------------------------------------------------------
/src/container/geniusinfo/geniusinfo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {NavBar, InputItem, TextareaItem, Button} from 'antd-mobile'
 3 | import AvatarSelector from '../../component/avatar-selector/avatar-selector'
 4 | import {connect} from 'react-redux'
 5 | import {update} from '../../redux/user.redux'
 6 | import {Redirect} from 'react-router-dom'
 7 | 
 8 | @connect(
 9 |     state => state.user,
10 |     {update}
11 | )
12 | class GeniusInfo extends React.Component{
13 |     constructor(props){
14 |         super(props)
15 |         this.state = {
16 |             title: '',
17 |             desc: ''
18 |         }
19 |     }
20 |     onChange(key, val){
21 |         this.setState({
22 |             [key]: val
23 |         }) 
24 |     }
25 |     render(){
26 |         const path = this.props.location.pathname
27 |         const redirect = this.props.redirectTo
28 |         return (
29 |             <div>
30 |                {redirect&&redirect!==path  ? <Redirect to={this.props.redirectTo}/> : null}
31 |                <NavBar mode="dark">牛人完善信息页面</NavBar>
32 |                 <AvatarSelector
33 |                    selectAvatar={(imgname) => {
34 |                        this.setState({
35 |                            avatar: imgname
36 |                        })
37 |                    }}
38 |                 ></AvatarSelector>
39 |                 <InputItem onChange={(v) => this.onChange('title', v)}>
40 |                     求职职位
41 |                 </InputItem>
42 |                 <TextareaItem
43 |                     rows={3}
44 |                     title="个人简介"
45 |                     autoHeight
46 |                     onChange={(v) => this.onChange('desc', v)}
47 |                 >
48 |                 </TextareaItem>
49 |                 <Button
50 |                     onClick={()=>{
51 |                         this.props.update(this.state)
52 |                     }}
53 |                     type="primary"
54 |                 >保存</Button>
55 |             </div>
56 |         )
57 |     }
58 | }
59 | 
60 | export default GeniusInfo


--------------------------------------------------------------------------------
/src/container/login/login.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Logo from '../../component/logo/logo'
 3 | import { InputItem, WingBlank, WhiteSpace, Button } from 'antd-mobile'
 4 | import {Redirect} from 'react-router-dom'
 5 | import {connect} from 'react-redux'
 6 | import {login} from '../../redux/user.redux'
 7 | import imoocFrom from '../../component/imooc-form/imooc-form'
 8 | 
 9 | @connect(
10 |     state => state.user,
11 |     {login}
12 | )
13 | @imoocFrom
14 | class Login extends React.Component{
15 |     register = () => {
16 |         // console.log(this.props)
17 |         this.props.history.push('/register')
18 |     }
19 |     handleLogin = () => {
20 |         this.props.login(this.props.state)
21 |     }
22 |     render(){
23 |         return (
24 |             <div>
25 |                 {this.props.redirectTo&&this.props.redirectTo!=='/login' ? <Redirect to={this.props.redirectTo}/> : null}
26 |                 <Logo></Logo>
27 |                 <WingBlank>
28 |                         {this.props.msg ? <p className='error-msg'>{this.props.msg}</p> : null}
29 |                         <InputItem
30 |                             onChange={v => this.props.handleChange('user', v)}
31 |                         >用户名</InputItem>
32 |                         <WhiteSpace />
33 |                         <InputItem
34 |                             type='password'
35 |                             onChange={v => this.props.handleChange('pwd', v)}
36 |                         >密码</InputItem>
37 |                     <WhiteSpace />
38 |                     <Button type="primary" onClick={this.handleLogin}>登录</Button>
39 |                     <WhiteSpace />
40 |                     <Button type="primary" onClick={this.register}>注册</Button>
41 |                 </WingBlank>
42 |             </div>
43 |         )
44 |     }
45 | }
46 | 
47 | export default  Login


--------------------------------------------------------------------------------
/src/container/register/register.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Logo from '../../component/logo/logo'
 3 | import {InputItem, Radio, WingBlank, WhiteSpace, Button } from 'antd-mobile'
 4 | import {Redirect} from 'react-router-dom'
 5 | import {connect} from 'react-redux'
 6 | import {register} from '../../redux/user.redux'
 7 | import imoocFrom from '../../component/imooc-form/imooc-form'
 8 | 
 9 | @connect(
10 |     state => state.user,
11 |     {register}
12 | )
13 | @imoocFrom
14 | class Register extends React.Component{
15 |     componentDidMount(){
16 |         this.props.handleChange('type', 'genius')
17 |     }
18 |     handleRegister = () => {
19 |         this.props.register(this.props.state)
20 |         // console.log(this.state)
21 |         // console.log(this.props)
22 |     }
23 |     render(){
24 |         const RadioItem = Radio.RadioItem
25 |         return (
26 |             <div>
27 |                 {this.props.redirectTo ? <Redirect to={this.props.redirectTo}/> : null}
28 |                 <Logo></Logo>
29 |                 <WingBlank>
30 |                     {this.props.msg ? <p className='error-msg'>{this.props.msg}</p> : null}
31 |                     <InputItem
32 |                        onChange={v => this.props.handleChange('user', v)}
33 |                     >用户名</InputItem>
34 |                     <WhiteSpace />
35 |                     <InputItem
36 |                         type='password'
37 |                         onChange={v => this.props.handleChange('pwd', v)}
38 |                     >密码</InputItem>
39 |                     <WhiteSpace />
40 |                     <InputItem
41 |                         type='password' 
42 |                         onChange={v => this.props.handleChange('repeatpwd', v)}
43 |                     >确认密码</InputItem>
44 |                     <WhiteSpace />
45 |                     <RadioItem 
46 |                         checked={this.props.state.type == 'genius'}
47 |                         onChange={() => this.props.handleChange('type', 'genius')}
48 |                     >
49 |                         牛人
50 |                     </RadioItem>
51 |                     <WhiteSpace />
52 |                     <RadioItem 
53 |                         checked={this.props.state.type == 'boss'}
54 |                         onChange={() => this.props.handleChange('type', 'boss')}
55 |                     >
56 |                         Boss
57 |                     </RadioItem>
58 |                     <WhiteSpace />
59 |                     <Button type="primary" onClick={this.handleRegister}>注册</Button>
60 |                 </WingBlank>
61 |             </div>
62 |         )
63 |     }
64 | }
65 | 
66 | export default  Register


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | .error-msg{
 2 |   color: #f50;
 3 |   padding-left: 10px;
 4 |   padding-top: 10px;
 5 | }
 6 | 
 7 | .am-tab-bar{
 8 |   position: fixed;
 9 |   bottom: 0;
10 |   width: 100%;
11 |   z-index: -1;
12 | }
13 | .fixed-header .am-navbar{
14 |   position: fixed;
15 |   top: 0;
16 |   width: 100%;
17 | }
18 | .page-content{
19 |   padding: 45px 5px;
20 | }
21 | 
22 | #chat-page .chat-me .am-list-extra{
23 |   flex-basis: auto;
24 | }
25 | #chat-page .chat-me .am-list-content{
26 |   padding-right: 15px;
27 |   text-align: right;
28 | }
29 | #chat-page .am-grid-icon{
30 |   display: none;
31 | }
32 | #chat-page .am-grid-text{
33 |   margin-top: 0;
34 | }
35 | .stick-footer{
36 |   z-index: 10;
37 |   position: absolute;
38 |   bottom: 0;
39 |   width: 100%;
40 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import * as serviceWorker from './serviceWorker';
 4 | import {createStore, applyMiddleware, compose} from 'redux'
 5 | import thunk from 'redux-thunk'
 6 | import {Provider} from 'react-redux'
 7 | import {BrowserRouter, Route, Switch} from 'react-router-dom'
 8 | import Login from './container/login/login'
 9 | import Register from './container/register/register'
10 | import AuthRoute from './component/authroute/authroute'
11 | import BossInfo from './container/bossinfo/bossinfo'
12 | import GeniusInfo from './container/geniusinfo/geniusinfo'
13 | import DashBoard from './component/dashboard/dashboard'
14 | import Chat from './component/chat/chat'
15 | 
16 | import reducers from './reducer'
17 | import './config'
18 | import './index.css'
19 | 
20 | const store = createStore(reducers, compose(
21 |     applyMiddleware(thunk),
22 |     window.devToolsExtension ? window.devToolsExtension() : f => f
23 | ))
24 | 
25 | ReactDOM.render(
26 |     <Provider store={store}>
27 |         <BrowserRouter>
28 |             <div>
29 |                 <AuthRoute></AuthRoute>
30 |                 <Switch>
31 |                     <Route path='/geniusinfo' component={GeniusInfo}></Route>
32 |                     <Route path='/bossinfo' component={BossInfo}></Route>
33 |                     <Route path='/login' component={Login}></Route>
34 |                     <Route path='/register' component={Register}></Route>
35 |                     <Route path='/chat/:user' component={Chat}></Route>
36 |                     <Route component={DashBoard}></Route>
37 |                 </Switch>
38 |             </div>
39 |         </BrowserRouter>
40 |     </Provider>, 
41 |     document.getElementById('root'));
42 | 
43 | // If you want your app to work offline and load faster, you can change
44 | // unregister() to register() below. Note this comes with some pitfalls.
45 | // Learn more about service workers: http://bit.ly/CRA-PWA
46 | serviceWorker.unregister();
47 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/reducer.js:
--------------------------------------------------------------------------------
1 | //合并所有reducer，并且返回
2 | import {combineReducers} from 'redux'
3 | import { user } from './redux/user.redux'
4 | import { chatuser } from './redux/chatuser.redux'
5 | import { chat } from './redux/chat.redux'
6 | 
7 | export default combineReducers({user, chatuser, chat})


--------------------------------------------------------------------------------
/src/redux/chat.redux.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import io from 'socket.io-client'
 3 | const socket = io('ws://localhost:9093') 
 4 | 
 5 | //action type
 6 | const MSG_LIST = 'MSG_LIST'  //获取聊天列表
 7 | const MSG_RECV = 'MST_RECV'  //读取信息
 8 | const MSG_READ = 'MSG_READ'  //标识已读
 9 | 
10 | const initState = {
11 |     chatmsg: [],
12 |     users: {},
13 |     unread: 0  //实时维护未读消息的数量
14 | }
15 | 
16 | //reducer
17 | export function chat(state=initState, action){
18 |     switch(action.type){
19 |         case MSG_LIST:
20 |              return {...state, users:action.payload.users, chatmsg:action.payload.msgs, unread:action.payload.msgs.filter(v=>!v.read&&v.to==action.payload.userid).length}  
21 |         case MSG_RECV:
22 |              const n = action.payload.to==action.userid ? 1 : 0
23 |              return {...state, chatmsg:[...state.chatmsg, action.payload], unread:state.unread+n}
24 |         case MSG_READ:
25 |              const {from, num} = action.payload
26 |              return {...state, chatmsg:state.chatmsg.map(v=>({...v, read:from==v.from?true:v.read})) , unread:state.unread-num}
27 |         default:
28 |              return state
29 |     }
30 | }
31 | 
32 | //action creator
33 | function msgList(msgs, users, userid){
34 |     return {type:MSG_LIST, payload:{msgs, users, userid}}
35 | }
36 | function msgRecv(msg, userid){
37 |     return {userid, type:MSG_RECV, payload:msg}
38 | }
39 | function msgRead({from, to, num}){
40 |     return {type:MSG_READ, payload:{from, to, num}}
41 | }
42 | 
43 | //操作数据的方法
44 | export function readMsg(from){
45 |     return (dispatch, getState)=>{
46 |         axios.post('/user/readmsg',{from})
47 |             .then(res=>{
48 |                 const userid = getState().user._id
49 |                 if(res.status==200&&res.data.code==0){
50 |                     dispatch(msgRead({userid, from, num:res.data.num}))
51 |                 }
52 |             })
53 |     }
54 | }
55 | export function recvMsg(){
56 |     return (dispatch, getState)=>{
57 |         socket.on('recvmsg', function(data){
58 |             // console.log('recvmsg', data)
59 |             const userid = getState().user._id
60 |             dispatch(msgRecv(data, userid))
61 |         })
62 |     }
63 | }
64 | export function sendMsg({from, to, msg}){
65 |     return dispatch=>{
66 |         socket.emit('sendmsg', {from, to, msg})
67 |     }
68 | }
69 | export function getMsgList(){  
70 |     return (dispatch, getState)=>{   //redux中使用其它地方的数据，通过getState获取全部的状态
71 |         axios.get('/user/getmsglist')
72 |            .then(res=>{
73 |                if(res.status==200 && res.data.code==0){
74 |                    //console.log('getState',getState())
75 |                    const userid = getState().user._id
76 |                    dispatch(msgList(res.data.msgs, res.data.users, userid))
77 |                }
78 |            })
79 |     }
80 | }
81 | 
82 | 


--------------------------------------------------------------------------------
/src/redux/chatuser.redux.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 用户间聊天redux管理数据
 3 |  */
 4 | import axios from 'axios'
 5 | //action type
 6 | const USER_LIST = 'USER_LIST'
 7 | 
 8 | const initState = {
 9 | 	userlist:[]
10 | }
11 | 
12 | //reducer
13 | export function chatuser(state=initState, action){
14 | 	switch(action.type){
15 | 		case USER_LIST:
16 | 			return {...state, userlist:action.payload}
17 | 		default:
18 | 			return state
19 | 	}
20 | }
21 | 
22 | //action creator
23 | function userList(data){
24 | 	return { type:USER_LIST, payload:data}
25 | }
26 | 
27 | //优化：异步操作数据的方法
28 | export function getUserList(type){
29 | 	return dispatch=>{
30 | 		axios.get('/user/list?type='+type)
31 | 			.then(res=>{
32 | 				if (res.data.code==0) {
33 |                     //dispatch触发数据变化，执行action
34 | 					dispatch(userList(res.data.data))
35 | 				}
36 | 			})
37 | 
38 | 	}
39 | }
40 | 


--------------------------------------------------------------------------------
/src/redux/user.redux.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import {getRedirectPath} from '../utils'
 3 | 
 4 | //action type
 5 | const AUTH_SUCCESS = 'AUTH_SUCCESS' //验证成功
 6 | const ERROR_MSG = 'ERROR_MSG'
 7 | const LOAD_DATA = 'LOAD_DATA'
 8 | const LOGOUT = 'LOGOUT'
 9 | 
10 | const initState = {
11 |     redirectTo:'',
12 |     msg: '',
13 |     user: '',
14 |     type: ''
15 | }
16 | 
17 | //reducer
18 | export function user(state=initState, action){
19 |     switch(action.type){
20 |         case AUTH_SUCCESS:
21 |              return {...state, msg:'', redirectTo:getRedirectPath(action.payload), ...action.payload} 
22 |         case LOAD_DATA:
23 |              return {...state, ...action.payload}
24 |         case LOGOUT:
25 |              return {...initState, redirectTo:'/login'}     
26 |         case ERROR_MSG:
27 |              return {...state, isAuth:false, msg:action.msg}
28 |         default:
29 |              return state
30 |     }
31 | }
32 | 
33 | //action creator
34 | function authSuccess(obj){
35 | 	const {pwd,...data} = obj
36 | 	return {type: AUTH_SUCCESS, payload:data}
37 | }
38 | function errorMsg(msg){
39 |     return { msg, type:ERROR_MSG }
40 | }
41 | 
42 | export function loadData(userinfo){
43 |     return {type:LOAD_DATA, payload:userinfo} 
44 | }
45 | export function logoutSubmit(){
46 |     return {type:LOGOUT}
47 | }
48 | export function update(data){
49 |     return dispatch=>{
50 |         axios.post('/user/update', data)
51 |            .then(res=>{
52 |                 if (res.status==200&&res.data.code===0) {
53 |                     dispatch(authSuccess(res.data.data))
54 |                 }else{
55 |                     dispatch(errorMsg(res.data.msg))
56 |                 }
57 |            })
58 |     }
59 | }
60 | export function login({user,pwd}){
61 |     if(!user||!pwd){
62 |         return errorMsg('用户名密码必须输入')
63 |     }
64 |     //redux异步操作数据
65 | 	return dispatch=>{
66 | 		axios.post('/user/login',{user,pwd})
67 | 			.then(res=>{
68 | 				if (res.status==200&&res.data.code===0) {
69 | 					dispatch(authSuccess(res.data.data))
70 | 				}else{
71 | 					dispatch(errorMsg(res.data.msg))
72 | 				}
73 | 			})		
74 | 	}
75 | 
76 | }
77 | 
78 | export function register({user,pwd,repeatpwd,type}){
79 | 	if (!user||!pwd||!type) {
80 | 		return errorMsg('用户名密码必须输入')
81 | 	}
82 | 	if (pwd!==repeatpwd) {
83 | 		return errorMsg('密码和确认密码不同')
84 |     }
85 |     //redux异步操作数据
86 | 	return dispatch=>{
87 | 		axios.post('/user/register',{user,pwd,type})
88 | 			.then(res=>{
89 | 				if (res.status==200&&res.data.code===0) {
90 | 					dispatch(authSuccess({user,pwd,type}))
91 | 				}else{
92 | 					dispatch(errorMsg(res.data.msg))
93 | 				}
94 | 			})		
95 | 	}
96 | 
97 | }
98 | 


--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read http://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.1/8 is considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit http://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl)
104 |     .then(response => {
105 |       // Ensure service worker exists, and that we really are getting a JS file.
106 |       const contentType = response.headers.get('content-type');
107 |       if (
108 |         response.status === 404 ||
109 |         (contentType != null && contentType.indexOf('javascript') === -1)
110 |       ) {
111 |         // No service worker found. Probably a different app. Reload the page.
112 |         navigator.serviceWorker.ready.then(registration => {
113 |           registration.unregister().then(() => {
114 |             window.location.reload();
115 |           });
116 |         });
117 |       } else {
118 |         // Service worker found. Proceed as normal.
119 |         registerValidSW(swUrl, config);
120 |       }
121 |     })
122 |     .catch(() => {
123 |       console.log(
124 |         'No internet connection found. App is running in offline mode.'
125 |       );
126 |     });
127 | }
128 | 
129 | export function unregister() {
130 |   if ('serviceWorker' in navigator) {
131 |     navigator.serviceWorker.ready.then(registration => {
132 |       registration.unregister();
133 |     });
134 |   }
135 | }
136 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 工具函数
 3 |  */
 4 | export function getRedirectPath({type, avatar}){
 5 |     //根据用户信息 返回跳转地址
 6 |     //判断user.type ：bose /genius
 7 |     //判断user.avtar ：bossinfo /geniusinfo
 8 |     let url = (type === 'boss') ? '/boss' : '/genius'
 9 |     if(!avatar){
10 |        url += 'info'
11 |     }
12 |     return url
13 | }
14 | 
15 | export function getChatId(userId, targetId){
16 |     return [userId, targetId].sort().join('_')
17 | }
18 | 


--------------------------------------------------------------------------------