free-sun
/
GovernmentDataResourceCenter
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

使用 DefinePlugin 定义前端全局变量

master
巴林闲侠 2 years ago
parent
dcdbd1a7f2
commit
74cd4280c6
16 changed files with 123 additions and 320 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      web/client/index.ejs
  2. 56
      web/client/index.html
  3. 2
      web/client/src/components/Upload/index.js
  4. 17
      web/client/src/layout/actions/global.js
  5. 39
      web/client/src/layout/actions/labour.js
  6. 23
      web/client/src/layout/actions/metting.js
  7. 23
      web/client/src/layout/actions/site.js
  8. 11
      web/client/src/layout/containers/layout/index.js
  9. 3
      web/client/src/layout/index.js
  10. 54
      web/client/src/layout/reducers/global.js
  11. 1
      web/client/src/utils/webapi.js
  12. 38
      web/config.js
  13. 23
      web/middlewares/webpack-dev.js
  14. 11
      web/routes/attachment/index.js
  15. 9
      web/webpack.config.js
  16. 3
      web/webpack.config.prod.js

30
web/client/index.ejs
View File

@ -5,41 +5,13 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="shortcut icon" href="/assets/images/logo.png"> <link rel="shortcut icon" href="/assets/images/logo.png">
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css"> <link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css">
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: 'c50ace7f5825644b0905ee265360491b',
}
</script>
<script
src="https://webapi.amap.com/maps?v=2.0&key=0a0ee6a6589803fee75a4cf6a0c35df0&plugin=AMap.Adaptor,AMap.Scale,AMap.ToolBar,AMap.DistrictSearch,AMap.Geocoder,AMap.CustomLayer"></script>
<script src="https://webapi.amap.com/loca?v=2.0.0&key=26c2550b67c7d4730573a8ab02051d61"></script>
<script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
<script src="https://api.map.baidu.com/api?v=2.0&ak=wEiighBCdHAkOrXRHDsqlgW5"></script>
</head> </head>
<style> <style>
.amap-logo {
display: none;
opacity: 0 !important;
}
.amap-copyright {
opacity: 0;
}
@font-face {
font-family: YouSheBiaoTiHei;
src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf");
}
@font-face {
font-family: D-DIN;
src: url("/assets/font_sc/D-DIN.ttf");
}
</style> </style>
<body style="background: transparent"> <body style="background: transparent">
<div id='App'></div> <div id='App'></div>
</body> </body>
</html> </html>

56
web/client/index.html
View File

@ -8,63 +8,13 @@
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css"> <link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css">
</head> </head>
<style> <style>
.amap-logo {
display: none;
opacity: 0 !important;
}
.amap-copyright {
opacity: 0;
}
@font-face {
font-family: YouSheBiaoTiHei;
src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf");
}
@font-face {
font-family: SourceHanSansCN-Medium;
src: url("/assets/font_sc/SourceHanSansCN-Medium.otf");
}
@font-face {
font-family: SourceHanSansCN-Regular;
src: url("/assets/font_sc/SourceHanSansCN-Regular.otf");
}
@font-face {
font-family: D-DIN;
src: url("/assets/font_sc/D-DIN.ttf");
}
@font-face {
font-family: D-DIN-Bold;
src: url("/assets/font_sc/D-DIN-Bold.ttf");
}
</style> </style>
<body>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: 'c50ace7f5825644b0905ee265360491b',
}
</script>
<script>
window.less = {
async: false,
env: 'production'
};
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=0a0ee6a6589803fee75a4cf6a0c35df0&plugin=AMap.Adaptor,AMap.Scale,AMap.ToolBar,AMap.DistrictSearch,AMap.Geocoder,AMap.CustomLayer"></script>
<script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
<script src="https://webapi.amap.com/loca?v=2.0.0&key=26c2550b67c7d4730573a8ab02051d61"></script>
<script src="https://api.map.baidu.com/api?v=2.0&ak=wEiighBCdHAkOrXRHDsqlgW5"></script>
<body>
<div id='App'></div> <div id='App'></div>
<script type="text/javascript" src="http://localhost:5901/client/build/vendor.js"></script> <script type="text/javascript" src="http://localhost:5401/client/build/vendor.js"></script>
<script type="text/javascript" src="http://localhost:5901/client/build/app.js"></script> <script type="text/javascript" src="http://localhost:5401/client/build/app.js"></script>
</body> </body>
</html> </html>

2
web/client/src/components/Upload/index.js
View File

@ -9,7 +9,7 @@ import { PlusOutlined, UploadOutlined, CloseOutlined } from '@ant-design/icons';
class Uploads extends Component { class Uploads extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.ApiRoot = localStorage.getItem('tyApiRoot') this.ApiRoot = API_ROOT
this.state = { this.state = {
fileUploading: false, fileUploading: false,
fileList: [], fileList: [],

17
web/client/src/layout/actions/global.js
View File

@ -25,20 +25,3 @@ export function resize (clientHeight, clientWidth) {
} }
} }
} }
export const INIT_API_ROOT = 'INIT_API_ROOT';
export function initApiRoot () {
return dispatch => {
RouteRequest.get(RouteTable.apiRoot).then(res => {
localStorage.setItem('tyApiRoot', res.root);
localStorage.setItem('qnDomain', res.qiniu);
localStorage.setItem('aliAdmin', res.aliAdmin);
dispatch({
type: INIT_API_ROOT,
payload: {
apiRoot: res.root
}
})
});
}
}

39
web/client/src/layout/actions/labour.js
View File

@ -1,39 +0,0 @@
'use strict';
import { ApiTable } from '$utils'
import { Request, basicAction } from '@peace/utils'
export const SET_GLOBAL_WORKER_LIST = 'SET_GLOBAL_WORKER_LIST';
export const CLEAR_GLOBAL_WORKER_LIST = 'CLEAR_GLOBAL_WORKER_LIST';
export function getWorkerList() {
return dispatch => {
Request.get(ApiTable.getWorkerList).then(res => {
dispatch({
type: SET_GLOBAL_WORKER_LIST,
payload: {
data: res
}
})
});
}
}
export const SET_GLOBAL_CHECK_LIST = 'SET_GLOBAL_CHECK_LIST';
export const CLEAR_GLOBAL_CHECK_LIST = 'CLEAR_GLOBAL_CHECK_LIST';
export function getCheckList() {
return dispatch => {
Request.get(ApiTable.getChcekList).then(res => {
dispatch({
type: SET_GLOBAL_CHECK_LIST,
payload: {
data: res
}
})
});
}
}
export default {
getWorkerList,
getCheckList
}

23
web/client/src/layout/actions/metting.js
View File

@ -1,23 +0,0 @@
'use strict';
import { ApiTable } from '$utils'
import { Request, basicAction } from '@peace/utils'
export const SET_GLOBAL_METTING_LIST = 'SET_GLOBAL_METTING_LIST';
export const CLEAR_GLOBAL_METTING_LIST = 'CLEAR_GLOBAL_METTING_LIST';
export function getMettingList() {
return dispatch => {
Request.get(ApiTable.mettingList + '?state=已提交').then(res => {
dispatch({
type: SET_GLOBAL_METTING_LIST,
payload: {
data: res
}
})
});
}
}
export default {
getMettingList
}

23
web/client/src/layout/actions/site.js
View File

@ -1,23 +0,0 @@
'use strict';
import { ApiTable } from '$utils'
import { Request, basicAction } from '@peace/utils'
export const SET_GLOBAL_SITE_LIST = 'SET_GLOBAL_SITE_LIST';
export const CLEAR_GLOBAL_SITE_LIST = 'CLEAR_GLOBAL_SITE_LIST';
export function getUserSiteList() {
return dispatch => {
Request.get(ApiTable.getUserSiteList).then(res => {
dispatch({
type: SET_GLOBAL_SITE_LIST,
payload: {
data: res
}
})
});
}
}
export default {
getUserSiteList
}

11
web/client/src/layout/containers/layout/index.js
View File

@ -3,7 +3,7 @@
import './index.less'; import './index.less';
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { message, Layout, Breadcrumb, Badge } from 'antd'; import { message, Layout } from 'antd';
import Sider from '../../components/sider'; import Sider from '../../components/sider';
import Header from '../../components/header'; import Header from '../../components/header';
import Footer from '../../components/footer'; import Footer from '../../components/footer';
@ -11,7 +11,7 @@ import Breadcrumbs from './breadcrumb';
import { resize } from '../../actions/global'; import { resize } from '../../actions/global';
import * as NProgress from 'nprogress'; import * as NProgress from 'nprogress';
import PerfectScrollbar from 'perfect-scrollbar'; import PerfectScrollbar from 'perfect-scrollbar';
import { getUserSiteList } from '../../actions/site';
NProgress.configure({ NProgress.configure({
template: ` template: `
<div class="bar" style="height:2px" role="bar"> <div class="bar" style="height:2px" role="bar">
@ -22,12 +22,13 @@ NProgress.configure({
</div> </div>
` `
}); });
const headerHeight = 64 const headerHeight = 64
const footerHeight = 0 const footerHeight = 0
let scrollbar let scrollbar
const LayoutContainer = props => { const LayoutContainer = props => {
const { dispatch, msg, user, copyright, children, sections, clientWidth, clientHeight, location, match, routes, history, sites } = props const { dispatch, msg, user, copyright, children, sections, clientWidth, clientHeight, location, match, routes, history } = props
const [collapsed, setCollapsed] = useState(false) const [collapsed, setCollapsed] = useState(false)
NProgress.start(); NProgress.start();
@ -43,9 +44,6 @@ const LayoutContainer = props => {
useEffect(() => { useEffect(() => {
resize_(collapsed) resize_(collapsed)
scrollbar = new PerfectScrollbar('#page-content', { suppressScrollX: true }); scrollbar = new PerfectScrollbar('#page-content', { suppressScrollX: true });
if (!sites.length) {
dispatch(getUserSiteList());//获取工地列表
}
}, []) }, [])
useEffect(() => { useEffect(() => {
@ -128,7 +126,6 @@ function mapStateToProps (state) {
clientHeight: global.clientHeight, clientHeight: global.clientHeight,
msg: ajaxResponse.msg, msg: ajaxResponse.msg,
user: auth.user, user: auth.user,
sites: global.sites
}; };
} }

3
web/client/src/layout/index.js
View File

@ -16,7 +16,7 @@ import 'antd/dist/antd.less';
moment.locale('zh-cn'); moment.locale('zh-cn');
const { initLayout, initApiRoot } = layoutActions; const { initLayout } = layoutActions;
const Root = props => { const Root = props => {
const { sections, title, copyright } = props; const { sections, title, copyright } = props;
@ -124,7 +124,6 @@ const Root = props => {
let store = configStore(reducers, history); let store = configStore(reducers, history);
store.dispatch(initLayout(title, copyright, sections, actions)); store.dispatch(initLayout(title, copyright, sections, actions));
store.dispatch(actions.auth.initAuth()); store.dispatch(actions.auth.initAuth());
store.dispatch(initApiRoot())
const combineRoutes = flatRoutes(innerRoutes); const combineRoutes = flatRoutes(innerRoutes);

54
web/client/src/layout/reducers/global.js
View File

@ -1,9 +1,7 @@
'use strict'; 'use strict';
import Immutable from 'immutable'; import Immutable from 'immutable';
import { INIT_LAYOUT, RESIZE } from '../actions/global'; import { INIT_LAYOUT, RESIZE } from '../actions/global';
import { SET_GLOBAL_SITE_LIST, CLEAR_GLOBAL_SITE_LIST } from '../actions/site'
import { SET_GLOBAL_METTING_LIST, CLEAR_GLOBAL_METTING_LIST } from '../actions/metting'
import { SET_GLOBAL_WORKER_LIST, CLEAR_GLOBAL_WORKER_LIST, SET_GLOBAL_CHECK_LIST, CLEAR_GLOBAL_CHECK_LIST } from '../actions/labour'
function global (state = { function global (state = {
title: '', title: '',
copyright: '', copyright: '',
@ -12,10 +10,6 @@ function global(state = {
plugins: {}, plugins: {},
clientHeight: 768, clientHeight: 768,
clientWidth: 1024, clientWidth: 1024,
sites: [],
metting: {},
worker: {},
check: {}
}, action) { }, action) {
const payload = action.payload; const payload = action.payload;
switch (action.type) { switch (action.type) {
@ -33,53 +27,7 @@ function global(state = {
plugins: payload.plugins, plugins: payload.plugins,
clientHeight: state.clientHeight, clientHeight: state.clientHeight,
clientWidth: state.clientWidth, clientWidth: state.clientWidth,
detailsComponent: null,
sites: []
}; };
// case INIT_RESOURCE_ROOT:
// return Immutable.fromJS(state).merge(payload).toJS();
// case INIT_PAGE_HEADER_DETAILS:
// return Immutable.fromJS(state).merge({
// detailsComponent: payload.component
// }).toJS();
case SET_GLOBAL_SITE_LIST:
let list = payload.data;
let notRole3 = JSON.parse(sessionStorage.getItem('user')).role.type != 3;//非项目端用户
let singSiteId = sessionStorage.getItem('toggleSinglePlatformSiteId');//发生了跳转
if (notRole3 && singSiteId && window.location.href.indexOf('singleSiteBoard') != -1) {
list = payload.data.filter(s => s.id == singSiteId);//领导驾驶舱, 单工地跳转
}
return Immutable.fromJS(state).merge({
sites: list
}).toJS();
case CLEAR_GLOBAL_SITE_LIST:
return Immutable.fromJS(state).merge({
sites: []
}).toJS();
case SET_GLOBAL_METTING_LIST:
return Immutable.fromJS(state).merge({
metting: payload.data
}).toJS();
case CLEAR_GLOBAL_METTING_LIST:
return Immutable.fromJS(state).merge({
metting: {}
}).toJS();
case SET_GLOBAL_WORKER_LIST:
return Immutable.fromJS(state).merge({
worker: payload.data
}).toJS();
case CLEAR_GLOBAL_WORKER_LIST:
return Immutable.fromJS(state).merge({
worker: {}
}).toJS();
case SET_GLOBAL_CHECK_LIST:
return Immutable.fromJS(state).merge({
check: payload.data
}).toJS();
case CLEAR_GLOBAL_CHECK_LIST:
return Immutable.fromJS(state).merge({
check: {}
}).toJS();
default: default:
return state; return state;
} }

1
web/client/src/utils/webapi.js
View File

@ -9,7 +9,6 @@ export const ApiTable = {
}; };
export const RouteTable = { export const RouteTable = {
apiRoot: '/api/root',
fileUpload: '/_upload/new', fileUpload: '/_upload/new',
cleanUpUploadTrash: '/_upload/cleanup', cleanUpUploadTrash: '/_upload/cleanup',
}; };

38
web/config.js
View File

@ -28,6 +28,12 @@ const ANXINCLOUD_QINIU_SECRETKEY = process.env.ANXINCLOUD_QINIU_SECRETKEY || fla
const ANXINCLOUD_QINIU_BUCKET_RESOURCE = process.env.ANXINCLOUD_QINIU_BUCKET_RESOURCE || flags.qnbkt; const ANXINCLOUD_QINIU_BUCKET_RESOURCE = process.env.ANXINCLOUD_QINIU_BUCKET_RESOURCE || flags.qnbkt;
const ANXINCLOUD_QINIU_DOMAIN_QNDMN_RESOURCE = process.env.ANXINCLOUD_QINIU_DOMAIN_QNDMN_RESOURCE || flags.qndmn; const ANXINCLOUD_QINIU_DOMAIN_QNDMN_RESOURCE = process.env.ANXINCLOUD_QINIU_DOMAIN_QNDMN_RESOURCE || flags.qndmn;
//阿里OSS
const ALI_OSS_ACCESSKEY = process.env.ALI_OSS_ACCESSKEY || flags.aliOssAccessKey;
const ALI_OSS_SECRETKET = process.env.ALI_OSS_SECRETKET || flags.aliOssSecretKey;
const ALI_OSS_BUCKET = process.env.ALI_OSS_BUCKET || flags.aliOssBucket;
const ALI_OSS_REGION = process.env.ALI_OSS_REGION || flags.aliOssRegion;
if ( if (
!FS_UNIAPP_API !FS_UNIAPP_API
// || !ANXINCLOUD_QINIU_ACCESSKEY // || !ANXINCLOUD_QINIU_ACCESSKEY
@ -39,10 +45,13 @@ if (
args.showHelp(); args.showHelp();
process.exit(-1); process.exit(-1);
} }
console.log(1,);
const product = { const product = {
port: flags.port || 8080, port: flags.port || 8080,
staticDirs: [path.join(__dirname, './client')], staticDirs: [path.join(__dirname, './client')],
frontParams: {
API_ROOT: FS_UNIAPP_API
},
mws: [ mws: [
{ {
entry: require('./middlewares/proxy').entry, entry: require('./middlewares/proxy').entry,
@ -64,6 +73,24 @@ const product = {
// uploadPath: 'other' // uploadPath: 'other'
// } // }
// }, // },
{
entry: require('./routes').entry,
opts: {
apiUrl: FS_UNIAPP_API,
staticRoot: './client',
qiniu: {
fetchUrl: '/_file-server',
domain: ANXINCLOUD_QINIU_DOMAIN_QNDMN_RESOURCE
},
aliOss: {
fetchUrl: '/_file-ali-server',
accessKey: ALI_OSS_ACCESSKEY,
secretKey: ALI_OSS_SECRETKET,
bucket: ALI_OSS_BUCKET,
region: ALI_OSS_REGION
}
}
},
{ {
entry: require('./client').entry,// 静态信息 entry: require('./client').entry,// 静态信息
opts: {} opts: {}
@ -88,16 +115,20 @@ const product = {
maxRetries: 1 maxRetries: 1
} }
}; };
console.log(2, product);
let config; let config;
if (dev) { if (dev) {
console.log(2.1);
config = { config = {
port: product.port, port: product.port,
staticDirs: product.staticDirs, staticDirs: product.staticDirs,
frontParams: product.frontParams,
mws: product.mws.concat([ mws: product.mws.concat([
{ {
entry: require('./middlewares/webpack-dev').entry, entry: require('./middlewares/webpack-dev').entry,
opts: {} opts: {
frontParams: product.frontParams,
}
} }
]), ]),
logger: product.logger logger: product.logger
@ -107,4 +138,5 @@ if (dev) {
config = product; config = product;
} }
console.log(3, config);
module.exports = config;//区分开发和发布 module.exports = config;//区分开发和发布

23
web/middlewares/webpack-dev.js
View File

@ -6,11 +6,24 @@ const middleware = require('webpack-dev-middleware');
const proxy = require('koa-better-http-proxy'); const proxy = require('koa-better-http-proxy');
const url = require('url'); const url = require('url');
const compiler = webpack(devConfig);
module.exports = { module.exports = {
entry: function (app, router, opts) { entry: function (app, router, opts) {
app.use(proxy('http://localhost:5901', { devConfig.plugins.push(
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
...(() => {
let nextParams = {}
for (let k in opts.frontParams) {
nextParams[k] = JSON.stringify(opts.frontParams[k])
}
return nextParams
})()
}),
)
const compiler = webpack(devConfig);
app.use(proxy('http://localhost:5401', {
filter: function (ctx) { filter: function (ctx) {
return /\/build/.test(url.parse(ctx.url).path); return /\/build/.test(url.parse(ctx.url).path);
}, },
@ -19,7 +32,7 @@ module.exports = {
} }
})); }));
app.use(proxy('http://localhost:5901', { app.use(proxy('http://localhost:5401', {
filter: function (ctx) { filter: function (ctx) {
return /\/$/.test(url.parse(ctx.url).path); return /\/$/.test(url.parse(ctx.url).path);
}, },
@ -31,7 +44,7 @@ module.exports = {
const server = express(); const server = express();
server.use(middleware(compiler)); server.use(middleware(compiler));
//server.use(require("webpack-hot-middleware")(compiler)); //server.use(require("webpack-hot-middleware")(compiler));
server.listen('5901', function (err) { server.listen('5401', function (err) {
if (err) { if (err) {
console.log(err); console.log(err);
} }

11
web/routes/attachment/index.js
View File

@ -75,17 +75,6 @@ module.exports = {
await next(); await next();
} }
}; };
const getApiRoot = async function (ctx) {
const { apiUrl, qiniu } = opts;
const { bucket, region } = opts.aliOss
ctx.status = 200;
ctx.body = {
root: apiUrl,
qiniu: qiniu.domain,
aliAdmin: `http://${bucket}.${region}.aliyuncs.com`
};
};
let upload = async function (ctx, next) { let upload = async function (ctx, next) {
try { try {

9
web/webpack.config.js
View File

@ -6,7 +6,6 @@ const PATHS = {
app: path.join(__dirname, 'client/src'), app: path.join(__dirname, 'client/src'),
build: path.join(__dirname, 'client/build') build: path.join(__dirname, 'client/build')
}; };
module.exports = { module.exports = {
mode: "development", mode: "development",
devtool: 'source-map', devtool: 'source-map',
@ -31,8 +30,14 @@ module.exports = {
} }
}, },
plugins: [ plugins: [
// DefinePlugin 已在 middlewares 的 webpack-dev 中重新加载
// new webpack.DefinePlugin({
// 'process.env.NODE_ENV': JSON.stringify('development'),
// }),
new webpack.HotModuleReplacementPlugin(), new webpack.HotModuleReplacementPlugin(),
new BundleAnalyzerPlugin(), new BundleAnalyzerPlugin({
analyzerPort: 8400,
}),
], ],
module: { module: {
rules: [{ rules: [{

3
web/webpack.config.prod.js
View File

@ -1,12 +1,13 @@
var path = require('path'); var path = require('path');
var webpack = require('webpack'); var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin');
const config = require('./config.js');
const PATHS = { const PATHS = {
app: path.join(__dirname, 'client/src'), app: path.join(__dirname, 'client/src'),
build: path.join(__dirname, 'client/build') build: path.join(__dirname, 'client/build')
}; };
console.log(config);
module.exports = { module.exports = {
mode: "production", mode: "production",
entry: { entry: {

Write Preview
Loading…
Cancel
Save