From 4807fc38f6aaa96d5895f73f92f8159eca8fc498 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E5=BF=83=E5=AE=87?= Date: Sat, 11 May 2024 10:25:13 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81=E3=80=81?= =?UTF-8?q?=E6=81=A2=E5=A4=8D=E5=9B=BE=E7=89=87=E6=94=BE=E5=A4=A7=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + server/index.js | 35 ++++++++++--------- server/render.js | 9 ++--- server/setHead.js | 1 + src/forge/Main/Detail.js | 10 +++--- src/modules/page/layers/ImageLayer.js | 3 ++ .../page/layers/ImageLayerOfCommentHOC.js | 4 ++- 7 files changed, 37 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index e2d3f53f..f0c3872d 100644 --- a/package.json +++ b/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" }, diff --git a/server/index.js b/server/index.js index f0742578..95c57e10 100644 --- a/server/index.js +++ b/server/index.js @@ -29,25 +29,26 @@ const options = (target) => { }; } -const proxy = createProxyMiddleware(options(`http://localhost:${ rubyPort }`)); -// const proxy = createProxyMiddleware(options(url)); +let proxy = createProxyMiddleware(options(`http://localhost:${ rubyPort }`)); + +if (process.env.NODE_ENV === 'dev') { + // 本地调试用设置代理 + proxy = createProxyMiddleware(options(url)); + app.use(['/api/zone', '/api/cms'], (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) => { + proxy(req, res); + }); +} else { + // 设置代理 + app.use(['/api', '/admins', '/attachments', '/oauth', '/competitions', '/projects', '/auth'], (req, res) => { + proxy(req, res); + }); +} -// 本地调试用设置代理 -// app.use(['/api/zone', '/api/cms'], (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) => { -// proxy(req, res); -// }); - -// 设置代理 -app.use(['/api', '/admins', '/attachments', '/oauth', '/competitions', '/projects', '/auth'], (req, res) => { - proxy(req, res); -}); // 匹配路径，匹配到的返回处理后的html，没匹配到转发到后端 app.get('*',async function (req,res) { diff --git a/server/render.js b/server/render.js index cb363ee4..b19741ec 100644 --- a/server/render.js +++ b/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(( @@ -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('
',`
${rootString}
`); return data; } + res.send(prepHTML(html, content)) store = null diff --git a/server/setHead.js b/server/setHead.js index cdaf072d..11d874da 100644 --- a/server/setHead.js +++ b/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 diff --git a/src/forge/Main/Detail.js b/src/forge/Main/Detail.js index a126ffb0..f99b603b 100644 --- a/src/forge/Main/Detail.js +++ b/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 styles1 from '../css/index.scss' -// import withStyles from 'isomorphic-style-loader/withStyles'; +import '../../modules/courses/css/Courses.css' +import { ImageLayerOfCommentHOC } from "../../modules/page/layers/ImageLayerOfCommentHOC"; import Loadable from 'react-loadable'; @@ -986,4 +985,7 @@ Detail.preFetch = ({ store, match, query }) => { export default withRouter(connect( mapStateToProps, mapDispatchToProps -)(Detail)); \ No newline at end of file +)(ImageLayerOfCommentHOC({ + imgSelector: ".imageLayerParent img, .imageLayerParent .imageTarget", + parentSelector: ".newContainer", +})(Detail))); \ No newline at end of file diff --git a/src/modules/page/layers/ImageLayer.js b/src/modules/page/layers/ImageLayer.js index e58cabf3..c0f2f0c6 100644 --- a/src/modules/page/layers/ImageLayer.js +++ b/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(
{showImage ? diff --git a/src/modules/page/layers/ImageLayerOfCommentHOC.js b/src/modules/page/layers/ImageLayerOfCommentHOC.js index 3e51d8c1..25589751 100644 --- a/src/modules/page/layers/ImageLayerOfCommentHOC.js +++ b/src/modules/page/layers/ImageLayerOfCommentHOC.js @@ -47,7 +47,9 @@ export function ImageLayerOfCommentHOC(options = {}) { } componentWillUnmount() { - $(options.parentSelector || ".commentsDelegateParent", 'click', this.onDelegateClick) + if (__CLIENT__) { + $(options.parentSelector || ".commentsDelegateParent", 'click', this.onDelegateClick) + } } onImageLayerClose = () => {