Document

29 |

30 | { 31 | avatarUrl && !isLoginPage 32 | ? 33 | : ( 34 | 35 | 36 | 37 | ) 38 | } 39 | {(loginname && !isLoginPage) ? loginname : '未登录'} 40 |

41 | {children} 42 | 43 | ) 44 | } 45 | } 46 | 47 | User.wrappedComponent.propTypes = { 48 | user: PropTypes.object.isRequired, 49 | } 50 | 51 | User.propTypes = { 52 | classes: PropTypes.object.isRequired, 53 | children: PropTypes.element.isRequired, 54 | isLoginPage: PropTypes.bool, 55 | } 56 | export default withStyles(userStyles)(User) 57 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dingsheng1214/react-cNode/f3240456fdce601be0048a23f6681d669a8dafe3/favicon.ico -------------------------------------------------------------------------------- /l1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dingsheng1214/react-cNode/f3240456fdce601be0048a23f6681d669a8dafe3/l1.jpg -------------------------------------------------------------------------------- /nodemon.json: -------------------------------------------------------------------------------- 1 | { 2 | "restartable": "rs", 3 | "ignore": [ 4 | ".git", 5 | "node_modules/**/node_modules", 6 | ".eslintrc", 7 | "client", 8 | "build" 9 | ], 10 | "env": { 11 | "NODE_ENV": "development" 12 | }, 13 | "verbose": true, 14 | "ext": "js" 15 | } 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-cNode", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "clear": "rimraf dist", 8 | "build:client": "cross-env NODE_ENV=production webpack --config build/webpack.config.client.js", 9 | "build:server": "cross-env NODE_ENV=production webpack --config build/webpack.config.server.js", 10 | "build": "npm run clear && npm run build:client", 11 | "dev:client": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js", 12 | "dev:server": "nodemon server/server.js", 13 | "eslint": "eslint --ext .js --ext .jsx client/", 14 | "precommit": "npm run eslint", 15 | "uploadCdn": "node build/qiNiuUpload.js", 16 | "start": "cross-env NODE_ENV=production node server/server.js", 17 | "deploy": "npm run build && npm run uploadCdn" 18 | }, 19 | "author": "dsying", 20 | "license": "ISC", 21 | "devDependencies": { 22 | "@babel/core": "^7.2.2", 23 | "@babel/plugin-proposal-class-properties": "^7.2.3", 24 | "@babel/plugin-proposal-decorators": "^7.2.3", 25 | "@babel/preset-env": "^7.2.3", 26 | "@babel/preset-react": "^7.0.0", 27 | "babel-eslint": "^10.0.1", 28 | "babel-loader": "^8.0.5", 29 | "babel-preset-mobx": "^2.0.0", 30 | "cross-env": "^5.2.0", 31 | "eslint": "^5.12.0", 32 | "eslint-config-airbnb": "^17.1.0", 33 | "eslint-config-standard": "^12.0.0", 34 | "eslint-loader": "^2.1.1", 35 | "eslint-plugin-import": "^2.14.0", 36 | "eslint-plugin-jsx-a11y": "^6.1.2", 37 | "eslint-plugin-node": "^8.0.1", 38 | "eslint-plugin-promise": "^4.0.1", 39 | "eslint-plugin-react": "^7.12.3", 40 | "eslint-plugin-standard": "^4.0.0", 41 | "file-loader": "^3.0.1", 42 | "html-webpack-plugin": "^3.2.0", 43 | "http-proxy-middleware": "^0.19.1", 44 | "husky": "^1.3.1", 45 | "memory-fs": "^0.4.1", 46 | "nodemon": "^1.18.9", 47 | "react-hot-loader": "^4.5.3", 48 | "rimraf": "^2.6.3", 49 | "serve-favicon": "^2.5.0", 50 | "terser-webpack-plugin": "^1.2.2", 51 | "uglifyjs-webpack-plugin": "^2.1.1", 52 | "webpack": "^4.28.1", 53 | "webpack-cli": "^3.2.1", 54 | "webpack-dev-server": "^3.1.14" 55 | }, 56 | "dependencies": { 57 | "@material-ui/core": "^3.9.0", 58 | "@material-ui/icons": "^3.0.2", 59 | "axios": "^0.18.0", 60 | "body-parser": "^1.18.3", 61 | "dateformat": "^3.0.3", 62 | "express": "^4.16.4", 63 | "express-session": "^1.15.6", 64 | "global": "^4.3.2", 65 | "highlightjs": "^9.12.0", 66 | "marked": "^0.6.0", 67 | "mobx": "^5.8.0", 68 | "mobx-react": "^5.4.3", 69 | "mobx-react-devtools": "^6.0.3", 70 | "morgan": "^1.9.1", 71 | "prop-types": "^15.6.2", 72 | "qiniu": "^7.2.1", 73 | "query-string": "^6.2.0", 74 | "react": "^16.7.0", 75 | "react-dom": "^16.7.0", 76 | "react-router-dom": "^4.3.1", 77 | "react-simplemde-editor": "^4.0.0" 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /pm2.yml: -------------------------------------------------------------------------------- 1 | apps: 2 | - script: ./server/server.js 3 | name: cnode 4 | env_production: 5 | NODE_ENV: production 6 | HOST: localhost 7 | -------------------------------------------------------------------------------- /server/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | // const ReactSSR = require('react-dom/server') 3 | // const fs = require('fs') 4 | const path = require('path') 5 | const favicon = require('serve-favicon') 6 | const bodyParser = require('body-parser') 7 | // const queryString = require('query-string') 8 | const session = require('express-session') 9 | 10 | const app = express() 11 | 12 | const morgan = require('morgan') 13 | 14 | app.use(morgan('dev')) 15 | // 把post提交的数据放到 req.body上 16 | app.use(bodyParser.json()) 17 | app.use(bodyParser.urlencoded({ extended: false })) 18 | 19 | app.use(session({ 20 | maxAge: 10 * 60 * 1000, 21 | name: 'tid', 22 | resave: false, // 是否每次都重新保存会话，建议false 23 | saveUninitialized: false, // 是否自动保存未初始化的会话，建议false 24 | secret: 'react cnode class' // 用来对session id相关的cookie进行签名 25 | })) 26 | 27 | app.use(favicon(path.join(__dirname, '../favicon.ico'))) 28 | 29 | app.use('/api/user', require('./util/handle-login')) 30 | app.use('/api', require('./util/proxy')) 31 | /** 32 | * 只有在production 生产环境下我们的项目目录下才会有打包生成的dist目录 33 | * 在development 开发环境下由于使用了 webpack-dev-server，打包后的文件存放在内存中，所以要区分处理 34 | */ 35 | const isDev = process.env.NODE_ENV === 'development' 36 | if (!isDev) { 37 | // --->production 38 | // 所有 /public 的url 请求的都是静态文件，这里用到的就是 webpack的 output中的 publicPath属性 39 | app.use('/public', express.static(path.join(__dirname, '../dist'))) 40 | app.get('*', function (request, response) { 41 | response.sendFile(path.resolve(__dirname, '../dist', 'index.html')) 42 | }) 43 | } else { 44 | // --->development 45 | const devStatic = require('./util/dev-static.js') 46 | devStatic(app) 47 | } 48 | 49 | const host = process.env.host || '0.0.0.0' 50 | const port = process.env.port || '3333' 51 | app.listen(port, host, () => console.log('server is starting on port 3333')) 52 | -------------------------------------------------------------------------------- /server/util/dev-static.js: -------------------------------------------------------------------------------- 1 | const axios = require('axios') 2 | const webpack = require('webpack') 3 | const path = require('path') 4 | const MemoryFs = require('memory-fs') 5 | const ReactSSR = require('react-dom/server') 6 | const proxy = require('http-proxy-middleware') 7 | 8 | // 用于接收 bundle 9 | let serverBundle 10 | 11 | // server端的 webpack 配置文件 12 | const webpackServerConfig = require('../../build/webpack.config.server') 13 | 14 | // 如果你不向 webpack 执行函数传入回调函数，就会得到一个 webpack Compiler 实例。你可以通过它手动触发 webpack 执行器，或者是让它执行构建并监听变更 15 | const serverCompiler = webpack(webpackServerConfig) 16 | 17 | const mfs = new MemoryFs() 18 | // 使用 memory-fs 替换默认的 outputFileSystem，以将文件写入到内存中，而不是写入到磁盘 19 | serverCompiler.outputFileSystem = mfs 20 | 21 | // 调用 watch 方法会触发 webpack 执行器，但之后会监听变更一旦 webpack 检测到文件变更，就会重新执行编译。该方法返回一个 Watching 实例(它会暴露一个 .close(callback) 方法。调用该方法将会结束监听：) 22 | serverCompiler.watch({ 23 | // watchOptions 示例 24 | aggregateTimeout: 300, 25 | poll: undefined 26 | }, (err, stats /* 以通过它获取到代码编译过程中的有用信息 */) => { 27 | if (err) throw err 28 | // 以 JSON 对象形式返回编译信息 29 | stats = stats.toJson() 30 | // 打印❌ 信息 31 | stats.errors.forEach(err => console.error(err)) 32 | // 打印⚠️ 信息 33 | stats.warnings.forEach(warn => console.warn(warn)) 34 | 35 | const output = webpackServerConfig.output 36 | // server-entry.js 打包后的完整路径 37 | const bundlePath = path.join(output.path, output.filename) 38 | 39 | // 读取打包后的文件，但是返回的是 string 类型 40 | const bundle = mfs.readFileSync(bundlePath, 'utf8') 41 | 42 | // 将webpack打包后生成的字符串转化成模块 43 | const Module = module.constructor 44 | const m = new Module() 45 | m._compile(bundle, 'server-entry.js') 46 | serverBundle = m.exports.default 47 | }) 48 | 49 | const getTemplate = () => { 50 | return new Promise((resolve, reject) => { 51 | // webpack-dev-server 打包后的文件保存在内存中，通过url去访问index.html 52 | axios.get('http://localhost:8887/public/index.html') 53 | .then(res => { 54 | resolve(res.data) 55 | }) 56 | .catch(err => { 57 | reject(err) 58 | }) 59 | }) 60 | } 61 | 62 | module.exports = function (app) { 63 | // 因为开发环境下通过webpack-dev-server打包不生成dist目录(保存在内存中) 所以只能将静态文件的请求做代理的处理 64 | app.use('/public', proxy({ 65 | target: 'http://localhost:8887' 66 | })) 67 | 68 | app.get('*', (req, res) => { 69 | getTemplate().then(template => { 70 | const content = ReactSSR.renderToString(serverBundle) 71 | res.send(template.replace('', content)) 72 | }) 73 | }) 74 | } 75 | -------------------------------------------------------------------------------- /server/util/handle-login.js: -------------------------------------------------------------------------------- 1 | const router = require('express').Router() 2 | const axios = require('axios') 3 | 4 | const baseUrl = 'https://cnodejs.org/api/v1' 5 | // 设置 login 路由 6 | router.post('/login', (req, res, next) => { 7 | // 验证token的正确性 8 | axios.post(`${baseUrl}/accesstoken`, { 9 | accesstoken: req.body.accesstoken 10 | }).then(result => { 11 | if (result.status === 200 && result.data.success === true) { 12 | // 如果token验证通过，则把用户信息保存在session中 13 | req.session.user = { 14 | accesstoken: req.body.accesstoken, 15 | loginname: result.data.loginname, 16 | id: result.data.id, 17 | avatar_url: result.data.avatar_url 18 | } 19 | 20 | res.json({ 21 | success: true, 22 | data: result.data 23 | }) 24 | } 25 | }).catch(err => { 26 | if (err.response) { 27 | res.json({ 28 | success: false, 29 | data: err.response.data 30 | }) 31 | } else { 32 | // 把异常抛出去 33 | next(err) 34 | } 35 | }) 36 | }) 37 | 38 | module.exports = router 39 | -------------------------------------------------------------------------------- /server/util/proxy.js: -------------------------------------------------------------------------------- 1 | const axios = require('axios') 2 | const queryString = require('querystring') 3 | 4 | const baseUrl = 'https://cnodejs.org/api/v1' 5 | 6 | module.exports = function (req, res, next) { 7 | const path = req.path 8 | const user = req.session.user || {} 9 | const needAccessToken = req.query.needAccessToken 10 | 11 | // 如果请求需要 token 但是 user信息里没有 token 则提示需要登录 12 | if (needAccessToken && !user.accesstoken) { 13 | res.status(401).send({ 14 | success: false, 15 | msg: 'need login' 16 | }) 17 | } 18 | const query = Object.assign({}, req.query) 19 | if (query.needAccessToken) delete query.needAccessToken 20 | 21 | // 转发请求 22 | axios(`${baseUrl}${path}`, { 23 | method: req.method, 24 | params: query, 25 | data: queryString.stringify(Object.assign({}, req.body, { // 将 {a:'b'} 转换成 a=b 26 | accesstoken: user.accesstoken 27 | })), 28 | headers: { // 因为我们设置了这种Content-Type, 所以提交的数据要按照 key1=val1&key2=val2的方式进行编码 29 | 'Content-Type': 'application/x-www-form-urlencoded' 30 | } 31 | }).then(result => { 32 | if (result.status === 200) { 33 | res.header({ 34 | 'Access-Control-Allow-Origin': '*' 35 | }) 36 | res.send(result.data) 37 | } else { 38 | res.status(result.status).send(result.data) 39 | } 40 | }).catch(err => { 41 | if (err.response) { 42 | res.status(500).send(err.response.data) 43 | } else { 44 | res.status(500).send({ 45 | success: false, 46 | msg: '未知错误' 47 | }) 48 | } 49 | }) 50 | } 51 | --------------------------------------------------------------------------------