wenlele 2 years ago
parent
commit
ae40cc24bf
  1. 1
      code/api/.vscode/launch.json
  2. 2
      code/web/client/index.ejs
  3. 6
      code/web/client/index.html
  4. 6
      code/web/client/src/app.jsx
  5. 6
      code/web/client/src/index.jsx
  6. 9
      code/web/client/src/layout/components/header/index.jsx
  7. 4
      code/web/client/src/layout/index.jsx
  8. 7
      code/web/client/src/public-path.js
  9. 5
      code/web/client/src/sections/microApp/actions/index.js
  10. 5
      code/web/client/src/sections/microApp/containers/index.js
  11. 37
      code/web/client/src/sections/microApp/containers/microApp.jsx
  12. 15
      code/web/client/src/sections/microApp/index.js
  13. 13
      code/web/client/src/sections/microApp/nav-item.jsx
  14. 5
      code/web/client/src/sections/microApp/reducers/index.js
  15. 12
      code/web/client/src/sections/microApp/routes.js
  16. 14
      code/web/middlewares/webpack-dev.js
  17. 1
      code/web/package.json
  18. 6
      code/web/webpack.config.js

1
code/api/.vscode/launch.json

@ -18,7 +18,6 @@
"-g postgres://postgres:123@10.8.30.32:5432/iot_auth", "-g postgres://postgres:123@10.8.30.32:5432/iot_auth",
"--redisHost 10.8.30.112", "--redisHost 10.8.30.112",
"--redisPort 6379", "--redisPort 6379",
"--iotVcmpApi http://127.0.0.1:4000",
] ]
}, },
{ {

2
code/web/client/index.ejs

@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<div id='App'></div> <div id='IotAuthApp'></div>
</body> </body>
</html> </html>

6
code/web/client/index.html

@ -9,12 +9,12 @@
</head> </head>
<body> <body>
<div id='App'></div> <div id='IotAuthApp'></div>
<!-- Webpack --> <!-- Webpack -->
<script type="text/javascript" src="http://localhost:5201/client/build/app.js"></script> <script type="text/javascript" src="http://localhost:5201/client/build/app.js"></script>
<!-- Vite --> <!-- Vite -->
<script type="module"> <!-- <script type="module">
import RefreshRuntime from "http://localhost:5202/@react-refresh" import RefreshRuntime from "http://localhost:5202/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window) RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => { } window.$RefreshReg$ = () => { }
@ -22,7 +22,7 @@
window.__vite_plugin_react_preamble_installed__ = true window.__vite_plugin_react_preamble_installed__ = true
const global = window const global = window
</script> </script>
<script type="module" src="http://localhost:5202/src/index.jsx"></script> <script type="module" src="http://localhost:5202/src/index.jsx"></script> -->
<!-- Vite End --> <!-- Vite End -->
<script> <script>
//过滤掉一些无用的警告、没有价值的报错 //过滤掉一些无用的警告、没有价值的报错

6
code/web/client/src/app.jsx

@ -3,6 +3,7 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import Layout from './layout'; import Layout from './layout';
import Auth from './sections/auth'; import Auth from './sections/auth';
import MicroApp from './sections/microApp'
const App = props => { const App = props => {
const { projectName } = props const { projectName } = props
@ -14,7 +15,10 @@ const App = props => {
return ( return (
<Layout <Layout
title={projectName} title={projectName}
sections={[Auth]} sections={[
Auth,
// MicroApp
]}
/> />
) )
} }

6
code/web/client/src/index.jsx

@ -1,8 +1,12 @@
'use strict'; 'use strict';
import './public-path'
import React from 'react'; import React from 'react';
import { render } from 'react-dom'; import { render } from 'react-dom';
import App from './app'; import App from './app';
import './index.less'; import './index.less';
import microApp from '@micro-zoe/micro-app'
render((<App projectName="飞尚物联" />), document.getElementById('App')); microApp.start()
render((<App projectName="飞尚物联" />), document.getElementById('IotAuthApp'));

9
code/web/client/src/layout/components/header/index.jsx

@ -22,14 +22,14 @@ const Header = (props) => {
style={{ style={{
height: 60, height: 60,
minWidth: 520, minWidth: 520,
background: "url(/assets/images/background/header.png)", background: `url(${__webpack_public_path__}assets/images/background/header.png)`,
backgroundSize: "100% 100%", backgroundSize: "100% 100%",
color: "white", color: "white",
}} }}
header={{ header={{
logo: ( logo: (
<img <img
src="/assets/images/background/logo.png" src={`/assets/images/background/logo.png`}
style={{ display: "inline-block", width: 280, height: 52 }} style={{ display: "inline-block", width: 280, height: 52 }}
/> />
), ),
@ -38,6 +38,9 @@ const Header = (props) => {
footer={ footer={
<Nav.Sub <Nav.Sub
itemKey={"user"} itemKey={"user"}
dropdownStyle={{
position: 'relative'
}}
text={ text={
<div <div
style={{ style={{
@ -47,7 +50,7 @@ const Header = (props) => {
}} }}
> >
<img <img
src="/assets/images/background/notice.png" src={`/assets/images/background/notice.png`}
style={{ style={{
display: "inline-block", display: "inline-block",
width: 18, width: 18,

4
code/web/client/src/layout/index.jsx

@ -6,7 +6,7 @@ import { Provider } from 'react-redux';
import { createBrowserHistory } from 'history'; import { createBrowserHistory } from 'history';
import { ConnectedRouter } from 'connected-react-router' import { ConnectedRouter } from 'connected-react-router'
import { Layout, NoMatch } from './containers'; import { Layout, NoMatch } from './containers';
import { Switch, Route } from "react-router-dom"; import { BrowserRouter, Switch, Route } from "react-router-dom";
import { ConfigProvider } from '@douyinfe/semi-ui'; import { ConfigProvider } from '@douyinfe/semi-ui';
import layoutActions from './actions'; import layoutActions from './actions';
import zhCN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN'; import zhCN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN';
@ -154,6 +154,7 @@ const Root = props => {
store ? store ?
<ConfigProvider locale={zhCN}> <ConfigProvider locale={zhCN}>
<Provider store={store}> <Provider store={store}>
<BrowserRouter basename={window.__MICRO_APP_BASE_ROUTE__ || '/'}>
<ConnectedRouter history={history}> <ConnectedRouter history={history}>
<Switch> <Switch>
{outerRoutes} {outerRoutes}
@ -169,6 +170,7 @@ const Root = props => {
/> />
</Switch> </Switch>
</ConnectedRouter> </ConnectedRouter>
</BrowserRouter >
</Provider> </Provider>
</ConfigProvider > </ConfigProvider >
: '' : ''

7
code/web/client/src/public-path.js

@ -0,0 +1,7 @@
// __MICRO_APP_ENVIRONMENT__和__MICRO_APP_PUBLIC_PATH__是由micro-app注入的全局变量
if (window.__MICRO_APP_ENVIRONMENT__) {
// eslint-disable-next-line
__webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
} else {
__webpack_public_path__ = '/'
}

5
code/web/client/src/sections/microApp/actions/index.js

@ -0,0 +1,5 @@
'use strict';
export default {
}

5
code/web/client/src/sections/microApp/containers/index.js

@ -0,0 +1,5 @@
'use strict';
import MicroApp from './microApp';
export { MicroApp };

37
code/web/client/src/sections/microApp/containers/microApp.jsx

@ -0,0 +1,37 @@
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { Spin, Card } from '@douyinfe/semi-ui';
const MicroApp = (props) => {
const { dispatch, actions, } = props
return (
<div>
<p>MicroApp</p>
<div style={{
height: 'calc(100% - 64px)', overflow: 'auto', position: 'absolute',
}}>
<micro-app
name='microapp-test'
url='http://localhost:5000/'
baseroute='/microApp'
inline
// disableSandbox
// shadowDOM
style={{height:'100%'}}
>
microApp
</micro-app>
</div>
</div>
)
}
function mapStateToProps (state) {
const { auth, global } = state;
return {
};
}
export default connect(mapStateToProps)(MicroApp);

15
code/web/client/src/sections/microApp/index.js

@ -0,0 +1,15 @@
'use strict';
import reducers from './reducers';
import routes from './routes';
import actions from './actions';
import { getNavItem } from './nav-item';
export default {
key: 'microApp',
name: 'MicroApp',
reducers: reducers,
routes: routes,
actions: actions,
getNavItem: getNavItem
};

13
code/web/client/src/sections/microApp/nav-item.jsx

@ -0,0 +1,13 @@
import React from 'react';
import { IconCode } from '@douyinfe/semi-icons';
export function getNavItem (user, dispatch) {
return (
[
{
itemKey: 'MicroApp', text: 'MicroApp', icon: <IconCode />,
to: '/microApp',
},
]
);
}

5
code/web/client/src/sections/microApp/reducers/index.js

@ -0,0 +1,5 @@
'use strict';
export default {
}

12
code/web/client/src/sections/microApp/routes.js

@ -0,0 +1,12 @@
'use strict';
import { MicroApp, } from './containers';
export default [{
type: 'inner',
route: {
path: '/microApp',
key: 'microApp',
breadcrumb: 'microApp',
component: MicroApp,
}
}];

14
code/web/middlewares/webpack-dev.js

@ -29,6 +29,20 @@ module.exports = {
})); }));
const server = express(); const server = express();
server.all("*", function (req, res, next) {
//设置允许跨域的域名,*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin", "*");
//允许的header类型
res.header("Access-Control-Allow-Headers", "content-type");
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
if (req.method == 'OPTIONS')
res.sendStatus(200); //让options尝试请求快速结束
else
next();
});
server.use(middleware(compiler)); server.use(middleware(compiler));
// server.use(require("webpack-hot-middleware")(compiler)); // server.use(require("webpack-hot-middleware")(compiler));
server.listen('5201', function (err) { server.listen('5201', function (err) {

1
code/web/package.json

@ -49,6 +49,7 @@
"dependencies": { "dependencies": {
"@douyinfe/semi-ui": "^2.8.0", "@douyinfe/semi-ui": "^2.8.0",
"@fs/attachment": "^1.0.0", "@fs/attachment": "^1.0.0",
"@micro-zoe/micro-app": "^1.0.0-alpha.1",
"@peace/components": "0.0.35", "@peace/components": "0.0.35",
"@peace/utils": "^0.0.48", "@peace/utils": "^0.0.48",
"@vitejs/plugin-react": "^1.3.1", "@vitejs/plugin-react": "^1.3.1",

6
code/web/webpack.config.js

@ -12,9 +12,13 @@ module.exports = {
devtool: 'source-map', devtool: 'source-map',
devServer: { devServer: {
historyApiFallback: true, historyApiFallback: true,
// 为 MicroApp 配置跨域
'Access-Control-Allow-Origin': '*',
allowedHosts: ['127.0.0.1:5200'],
}, },
entry: { entry: {
app: ["@babel/polyfill", PATHS.app] app: ["@babel/polyfill", PATHS.app],
}, },
output: { output: {
publicPath: '/client/build/', publicPath: '/client/build/',

Loading…
Cancel
Save