优化代码、恢复图片放大功能

package.json

@@ -159,6 +159,7 @@
     "analyz": "NODE_ENV=production npm_config_report=true npm run build",
     "dev": "npm-run-all --parallel dev:**",
     "dev:server": "cross-env NODE_ENV=dev nodemon --exec babel-node \"./buildserver/bundle.js\" --watch config --watch server",
+    "test:build:server": "cross-env NODE_ENV=localtest webpack --config config/webpack.server.js",
     "dev:build:server": "cross-env NODE_ENV=dev webpack --config config/webpack.server.js",
     "pm2": "pm2 start pm2.json"
   },

server/index.js

@@ -29,25 +29,26 @@ const options = (target) => {
   };
 }
 
-const proxy = createProxyMiddleware(options(`http://localhost:${ rubyPort }`));
+let proxy = createProxyMiddleware(options(`http://localhost:${ rubyPort }`));
-// const proxy = createProxyMiddleware(options(url));
-
 
+if (process.env.NODE_ENV === 'dev') {
   // 本地调试用设置代理
-// app.use(['/api/zone', '/api/cms'], (req, res) => {
+  proxy = createProxyMiddleware(options(url));
-//   const proxy = createProxyMiddleware(options(zoneUrl));
+  app.use(['/api/zone', '/api/cms'], (req, res) => {
-//   proxy(req, res);
+    const proxy = createProxyMiddleware(options(zoneUrl));
-// });
+    proxy(req, res);
-
+  });
-// 本地调试用设置代理
+  app.use(['/api', '/images', '/system', '/favicon', '/robots.txt', '/sitemap*.xml', '/sitemap*.txt', '/favicon.ico', '/admins', '/assets', '/attachments', '/oauth'], (req, res) => {
-// app.use(['/api', '/images', '/system', '/favicon', '/robots.txt', '/sitemap*.xml', '/sitemap*.txt', '/favicon.ico', '/admins', '/assets', '/attachments', '/oauth'], (req, res) => {
+    proxy(req, res);
-//   proxy(req, res);
+  });
-// });
+} else {
-
   // 设置代理
   app.use(['/api', '/admins', '/attachments', '/oauth', '/competitions', '/projects', '/auth'], (req, res) => {
     proxy(req, res);
   });
+}
+
+
 
 // 匹配路径，匹配到的返回处理后的html，没匹配到转发到后端
 app.get('*',async function (req,res) {

server/render.js

@@ -3,12 +3,9 @@ import {renderToString} from "react-dom/server";
 import {StaticRouter, matchPath} from "react-router-dom";
 import StyleContext from 'isomorphic-style-loader/StyleContext'
 import {renderRoutes} from "react-router-config";
-
 import Routes, { deepRoutes, specialRoute } from "../Routes";
 import { Provider } from "react-redux";
 import { serverStore } from "../src/redux/stores/configureStore";
-// import App from "../src/App";
-// import { Route } from 'react-router-dom';
 import { setDefaultMeta } from '../src/common/UrlTool'
 import Logger from "./log";
 import { changeHead } from './setHead'
@@ -72,7 +69,7 @@ export const render = async (req,res)=>{
       query: req.path,
     });
 
-    // 
+    // 当前只做了项目详情页，没获取到数据使用原来的
     if(!store.getState().projectReducer.projectBase.id) {
       return false
     }
@@ -80,6 +77,7 @@ export const render = async (req,res)=>{
 
   let content = '' 
 
+  // 匹配路由、并且不是特定一级路由、且不是只动态修改head的，在服务端渲染页面
   if (_route && !specialRoute.includes(_match.url && _match.url.replace('/', '')) && !_route.onlyHead) {
     content = renderToString((
       <Provider store={store}>
@@ -104,6 +102,8 @@ export const render = async (req,res)=>{
       script.setAttribute('id', 'initState')
     }
     script.textContent = `window.__initState__ = ${ JSON.stringify(store.getState()) }`
+    
+    // 目前直接把详情页涉及到的css抽出来塞到返回的html里，没有使用insertCss
     const styleNode = domObj.window.document.createElement('style')
     styleNode.type = 'text/css'
     // styleNode.innerHTML = `${ [...css].join('') }`
@@ -128,6 +128,7 @@ export const render = async (req,res)=>{
     data=data.replace('<div id="root" class="page -layout-v -fit widthunit"></div>',`<div id="root" class="page -layout-v -fit widthunit">${rootString}</div>`);
     return data;
   }
+  
   res.send(prepHTML(html, content))
 
   store = null

server/setHead.js

@@ -6,6 +6,7 @@ export const changeHead = async ({ key }, params) => {
   let res
   let data
   switch (key) {
+    // 详情页不再修改head，直接ssr渲染页面
     // case 'detail':
     //   res = await getProjectDetailFunc(params.owner, params.projectsId);
     //   data = res.data

src/forge/Main/Detail.js

@@ -15,9 +15,8 @@ import types from '../../redux/actions/actionTypes'
 import { getProjectFunc, getProjectDetailFunc } from '../../services/project'
 import '../css/index.scss'
 import './list.scss';
-// import styles from './list.scss'
+import '../../modules/courses/css/Courses.css'
-// import styles1 from '../css/index.scss'
+import { ImageLayerOfCommentHOC } from "../../modules/page/layers/ImageLayerOfCommentHOC";
-// import withStyles from 'isomorphic-style-loader/withStyles';
 
 
 import Loadable from 'react-loadable';
@@ -986,4 +985,7 @@ Detail.preFetch = ({ store, match, query }) => {
 export default withRouter(connect(
   mapStateToProps,
   mapDispatchToProps
-)(Detail));
+)(ImageLayerOfCommentHOC({
+  imgSelector: ".imageLayerParent img, .imageLayerParent .imageTarget",
+  parentSelector: ".newContainer",
+})(Detail)));

src/modules/page/layers/ImageLayer.js

@@ -22,6 +22,9 @@ class ImageLayer extends Component {
 
 	render() {
 		let { showImage, imageSrc, } = this.props;
+		if (__SERVER__) {
+			return null
+		}
 		return ReactDOM.createPortal(
 			<div>
 				{showImage ?

src/modules/page/layers/ImageLayerOfCommentHOC.js

@@ -47,8 +47,10 @@ export function ImageLayerOfCommentHOC(options = {}) {
       }
 
       componentWillUnmount() {
+        if (__CLIENT__) {
           $(options.parentSelector || ".commentsDelegateParent", 'click', this.onDelegateClick)
         }
+      }
 
       onImageLayerClose = () => {
         this.setState({