Browse Source

MicroApp Test

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

2
code/web/client/index.ejs

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

6
code/web/client/index.html

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

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

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

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

@ -1,8 +1,12 @@
'use strict';
import './public-path'
import React from 'react';
import { render } from 'react-dom';
import App from './app';
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={{
height: 60,
minWidth: 520,
background: "url(/assets/images/background/header.png)",
background: `url(${__webpack_public_path__}assets/images/background/header.png)`,
backgroundSize: "100% 100%",
color: "white",
}}
header={{
logo: (
<img
src="/assets/images/background/logo.png"
src={`/assets/images/background/logo.png`}
style={{ display: "inline-block", width: 280, height: 52 }}
/>
),
@ -38,6 +38,9 @@ const Header = (props) => {
footer={
<Nav.Sub
itemKey={"user"}
dropdownStyle={{
position: 'relative'
}}
text={
<div
style={{
@ -47,7 +50,7 @@ const Header = (props) => {
}}
>
<img
src="/assets/images/background/notice.png"
src={`/assets/images/background/notice.png`}
style={{
display: "inline-block",
width: 18,

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

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

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

@ -0,0 +1,5 @@
// __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__
}

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();
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(require("webpack-hot-middleware")(compiler));
server.listen('5201', function (err) {

1
code/web/package.json

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

6
code/web/webpack.config.js

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

Loading…
Cancel
Save