乐趣区

关于前端:react种子框架

我的项目地址 https://github.com/holidaying/reactSeed
我的项目 demohttp://www.aishop.store/reactSeed/dist/pc/index.html#/login

脚本配置

"build": "webpack --config ./build/webpack.build.conf.js && node ./build/distserver.js",
    "build:pc": "webpack --config ./build/webpack.build.conf.js && node ./build/distserver.js & gulp copy --sysname=pc",
    "build:web": "webpack --config ./build/webpack.build.conf.js && node ./build/distserver.js & gulp copy  --sysname=web",
    "dev:pc": "webpack-dev-server  --hot --open'google chrome'--progress --config ./build/webpack.dev.conf.js --sysname=pc",
    "dev:web": "webpack-dev-server  --hot --open'google chrome'--progress --config ./build/webpack.dev.conf.js --sysname=web",

路由

react-router

<Router >
        <Switch>
            <Route exact path='/login' component={Login} />
            <Route path="/">
                <div className="app-container">
                    <NavApp></NavApp>
                    <div className="main-container">
                        <Switch>
                            <Route path="/index">
                                <Index />
                            </Route>
                            <Route path="/log">
                                <Log/>
                            </Route>
                            <Route path="/devops">
                                <Devops/>
                            </Route>
                        </Switch>
                    </div>
                </div>
            </Route>
        </Switch>
    </Router >

申请

app.listen(port, () => console.log(`Example app listening on port ${port}!`))
app.post('/education/api/login', function (req, res) {
    // 接管申请参数
    console.log(req.body.username);
    res.cookie("oath", Token.createToken(req.body.username, Date.now()), {maxAge: 900000, httpOnly: true});
    res.send({"data": true})
})

事件、循环

handleSubmit(){login({username:this.state.username,password:this.state.password}).then(res=>{this.props.history.push('/index')
    })
  }
  render() {
    return (<div className="login-container">
      <video src="/video.mp4" muted autoPlay loop="loop" className="video-bg"></video>
      <div className="form-login">
        <Input placeholder="请输出用户名" name="username" value={this.state.username} type="text" onChange={(e)=>this.handleChange(e)} />
        <Input placeholder="请输出明码"  name="password" value={this.state.password} type ="password" onChange={(e)=>this.handleChange(e)} />
        <div className="footer">

父子消息传递

父组件给子组件传递数据:间接在调用子组件的中央传递数据即可。

调用子组件的办法:简略说就是给子组件,通过 ref 起个名字,而后在父组件的点击事件中,通过 this.refs. 子组件的名字. 子组件的办法来实现

子组件调用父组件的办法。在调用子组件的中央将办法传递,子组件中通过 this.props。父组件传递的办法即可

子组件给父组件传递数据:通过调用父组件的办法时,通过 callback 回调传递数据。this.props. 父组件的办法(传递的数据)

组件

function 函数、class es6 语法

按需

利用 react-loadable 这个高级组件,要做到实现按需加载这一点,咱们将应用的 WebPack,babel-plugin-syntax-dynamic-import 和 react-loadable。

npm i –save-dev babel-plugin-syntax-dynamic-import
npm i –save-dev react-loadable

typescript

单元测试

兄弟节点信息传递 redux 和 eventhub

(1)Web 利用是一个状态机,视图与状态是一一对应的。
(2)所有的状态,保留在一个对象外面。

多页面

   new HtmlWebpackPlugin({
                title: '主页面',
                filename: 'index.html',
                template: resolve('../src/template/index.html'),
                hash: true, // 会在打包好的 bundle.js 前面加上 hash 串
                inject: "body",
                chunks:["home"]
            }),
            new HtmlWebpackPlugin({
                title: '跳转页面',
                filename: 'page.html',
                template: resolve('../src/template/page.html'),
                hash: true, // 会在打包好的 bundle.js 前面加上 hash 串
                inject: "body",
                chunks: ["page"]
            })
        ],

依赖动静加载和独立部署

微前端

乾坤 /sigle-spa
前端微服务化解决方案 1 – 思考

前端微服务化解决方案 2 – Single-SPA

前端微服务化解决方案 3 – 模块加载器

前端微服务化解决方案 4 – 音讯总线

前端微服务化解决方案 5 – 路由散发

前端微服务化解决方案 6 – 构建与部署

前端微服务化解决方案 7 – 动态数据共享

前端微服务化解决方案 8 – 二次构建

docker

可拜访 https://hub.docker.com/_/nginx 查看 python 镜像源

FROM nginx:1.15.2-alpine

将当前目录下 dist 文件夹所有文件都拷贝到 image 文件中指定目录

COPY ../dist /
COPY default.conf /etc/nginx/conf.d/default.conf

凋谢容器的 80 端口,容许内部拜访这个端口

EXPOSE 80

构建镜像

docker image build -t front .

构建容器

docker run -p 82:82 --name front -d front 

FAQ

  • 欢送补充
退出移动版