Skip to content

马贞晓 / templateReact

Go to a project
Commit 8f1df021 by 马贞晓
Options

结构调整

1 parent 3bb186c3
Inline Side-by-side
Showing 6 changed files with 60 additions and 58 deletions
config/webpackDevServer.config.js
...@@ -12,6 +12,7 @@ const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'; ...@@ -12,6 +12,7 @@ const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const host = process.env.HOST || '0.0.0.0'; const host = process.env.HOST || '0.0.0.0';
module.exports = function(proxy, allowedHost) { module.exports = function(proxy, allowedHost) {
return { return {
// WebpackDevServer 2.4.3 introduced a security fix that prevents remote // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
// websites from potentially accessing local content through DNS rebinding: // websites from potentially accessing local content through DNS rebinding:
...@@ -82,7 +83,12 @@ module.exports = function(proxy, allowedHost) { ...@@ -82,7 +83,12 @@ module.exports = function(proxy, allowedHost) {
disableDotRule: true, disableDotRule: true,
}, },
public: allowedHost, public: allowedHost,
proxy, proxy:{
"/api": {
target: "https://www.jianshu.com/shakespeare/notes/2ce732125376/recommendations",
pathRewrite: {"^/api" : ""}
}
},
before(app, server) { before(app, server) {
// console.log(path.join(__dirname,'../src/service/mock/index.js')) // console.log(path.join(__dirname,'../src/service/mock/index.js'))
......
src/component/layout/App.js
...@@ -7,33 +7,38 @@ import { Layout } from 'antd'; ...@@ -7,33 +7,38 @@ import { Layout } from 'antd';
import LayoutHeader from "./LayoutHeader"; import LayoutHeader from "./LayoutHeader";
import LayoutSlide from "./LayoutSlide"; import LayoutSlide from "./LayoutSlide";
import LayoutFooter from "./LayoutFooter"; import LayoutFooter from "./LayoutFooter";
import { BrowserRouter as Router,Switch,Route} from "react-router-dom";
const { Header, Content, Footer, Sider } = Layout; const { Header, Content, Footer, Sider } = Layout;
class App extends Component{ class App extends Component{
render(){ render(){
// console.log(LayoutFooter);
return <Provider store={store}> return <Provider store={store}>
<Router>
<Layout className="h100"> <Layout className="h100">
<Header className="header"> <Header className="header">
<LayoutHeader title="头部" />
<LayoutHeader title="头部" /> </Header>
</Header>
<Content style={{ padding: '0 50px',display:"flex"}}> <Content style={{ padding: '0 50px',display:"flex"}}>
<Layout style={{ padding: '24px 0', background: '#fff' }}> <Layout style={{ padding: '24px 0', background: '#fff' }}>
<Sider width={200} style={{ background: '#fff' }}> <Sider width={200} style={{ background: '#fff' }}>
<LayoutSlide data="fdafdsa" title="侧边" /> <LayoutSlide title="侧边" />
</Sider> </Sider>
<Content style={{ padding: '0 24px', minHeight: 280,display:"flex" }}> <Content style={{ padding: '0 24px', minHeight: 280,display:"flex" }}>
<Routers title="路由"/>
</Content> <Routers/>
</Layout>
</Content> </Content>
<Footer style={{ textAlign: 'center' }}><LayoutFooter /></Footer> </Layout>
</Layout>
</Content>
<Footer style={{ textAlign: 'center' }}><LayoutFooter /></Footer>
</Layout>
</Router>
</Provider> </Provider>
} }
} }
......
src/component/layout/LayoutSlide.js
import React,{Component} from 'react' import React,{Component} from 'react'
import { Layout, Menu, Breadcrumb, Icon } from 'antd'; import { Menu, Icon } from 'antd';
import {Link} from "react-router-dom";
const { SubMenu } = Menu; const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;
export default class LayoutSlide extends Component{ export default class LayoutSlide extends Component{
componentWillMount(){ componentWillMount(){
...@@ -12,19 +12,18 @@ export default class LayoutSlide extends Component{ ...@@ -12,19 +12,18 @@ export default class LayoutSlide extends Component{
mode="inline" mode="inline"
defaultSelectedKeys={['1']} defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']} defaultOpenKeys={['sub1']}
style={{ height: '100%' }} style={{ height: '100%' }}>
>
<SubMenu <SubMenu
key="sub1" key="sub1"
title={ title={
<span> <span>
<Icon type="user" /> <Icon type="user" />
subnav 1
</span> </span>
} }
> >
<Menu.Item key="1">option1</Menu.Item> <Menu.Item key="1"><Link to="/index2">index2</Link></Menu.Item>
<Menu.Item key="2">option2</Menu.Item> <Menu.Item key="2"><Link to="/">index</Link></Menu.Item>
<Menu.Item key="3">option3</Menu.Item> <Menu.Item key="3">option3</Menu.Item>
<Menu.Item key="4">option4</Menu.Item> <Menu.Item key="4">option4</Menu.Item>
</SubMenu> </SubMenu>
......
src/router/App.js
import{lazy} from 'react'; import{lazy} from 'react';
export default [ export default [
{ path:"/system/index",component:lazy(()=>import(/* webpackChunkName: "Index" */ "../view/index/index.js"))}, { path:"/",component:lazy(()=>import(/* webpackChunkName: "Index" */ "../view/index/index.js"))},
{ path:"system/index2",component:lazy(()=>import(/* webpackChunkName: "Index" */ "../view/index/index.js"))} { path:"/index",component:lazy(()=>import(/* webpackChunkName: "Index2" */ "../view/index/index.js"))},
{ path:"/index2",component:lazy(()=>import(/* webpackChunkName: "Index2" */ "../view/index/index.js"))}
] ]
\ No newline at end of file \ No newline at end of file
src/router/index.js
import React,{Component,lazy,Suspense} from 'react' import React,{Component,lazy,Suspense} from 'react'
import { import {Switch,Route } from "react-router-dom";
BrowserRouter as Router,
Switch,
Route,
} from "react-router-dom";
import Load from "../component/loading/index.js"; import Load from "../component/loading/index.js";
//import Demo from "../view/index/index"; //import Demo from "../view/index/index";
//const Demo = lazy(()=>import(/* webpackChunkName: "Index" */ "../view/index/index.js")) //const Demo = lazy(()=>import(/* webpackChunkName: "Index" */ "../view/index/index.js"))
import App from "./App.js"; import App from "./App.js";
//let List = [ { path:"/",component:lazy(()=>import(/* webpackChunkName: "Index" */ "../view/index/index.js"))}]; //let List = [ { path:"/",component:lazy(()=>import(/* webpackChunkName: "Index" */ "../view/index/index.js"))}];
class Routers extends Component{ class Routers extends Component{
state={ state={
...@@ -25,28 +22,18 @@ componentWillMount(){ ...@@ -25,28 +22,18 @@ componentWillMount(){
render(){ render(){
const {List} = this.state; const {List} = this.state;
return <Router> return <Switch>
<Switch> {
{
List.map((item,ind)=>{ List.map((item,ind)=>{
return <Route exact path={item.path} key={ind} return <Route exact path={item.path} key={ind}>
render={(props)=>( <Suspense fallback={Load()}>
<Suspense fallback={Load()}> <item.component />
<item.component {...props} /> </Suspense>
</Suspense> </Route>
)} })
> }
</Switch>
</Route>
})
}
{/* <Route exact path="/">
<Suspense fallback={Load()}>
<Demo />
</Suspense>
</Route> */}
</Switch>
</Router>
} }
} }
export default Routers export default Routers
\ No newline at end of file \ No newline at end of file
src/view/index/index.js
...@@ -2,6 +2,7 @@ import React,{Component} from 'react'; ...@@ -2,6 +2,7 @@ import React,{Component} from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import{connect} from "react-redux"; import{connect} from "react-redux";
import EVENT from "../../store/EVENT" import EVENT from "../../store/EVENT"
import {Link} from "react-router-dom";
import $http from "../../service"; import $http from "../../service";
//import * as utils from "../../utils/index"; //import * as utils from "../../utils/index";
@connect((state)=>{ @connect((state)=>{
...@@ -20,6 +21,9 @@ import $http from "../../service"; ...@@ -20,6 +21,9 @@ import $http from "../../service";
.then(d=>{ .then(d=>{
debugger debugger
}) })
.catch(e=>{
debugger
})
} }
/** /**
* @name 同步修改 * @name 同步修改
...@@ -56,7 +60,7 @@ import $http from "../../service"; ...@@ -56,7 +60,7 @@ import $http from "../../service";
render(){ render(){
let { layout,login} = this.props; let { layout,login} = this.props;
// console.log(layout,login) // console.log(layout,login)
return <article> return <article><Link to="/system/index2">go</Link>
{ {
this.state.list.map((item,ind)=>{ this.state.list.map((item,ind)=>{
return <span style={{margin:10}} onClick={this.EventClickSetList.bind(this,item,ind)} key={ind}>{item}</span> return <span style={{margin:10}} onClick={this.EventClickSetList.bind(this,item,ind)} key={ind}>{item}</span>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!