多人博客项目构建过程(四)

悠悠 2023-08-17 17:39 75阅读 0赞

**前端开发**

**开发环境设置**

**![1348316-20190830212858460-57808557.png][]**

![1348316-20190830212906350-634344109.png][]

![1348316-20190830213540803-335061424.png][]

**修改项目信息**

**打开VS工具，选择package.json文件**

**![1348316-20190830214049038-300488082.png][]**

**选择webpack.config.dev.js文件**

![1348316-20190830214237827-274316006.png][]

**安装依赖**

$npm install
    $npm install react-router
    $npm install react-router-dom

![1348316-20190830214943283-2078428056.png][]

![1348316-20190830223102077-1641360619.png][]

**开发**

**前端路由**

**![1348316-20190830215018373-1060350828.png][]**

官网文档：https://reacttraining.com/react-router/web/guides/philosophy
    基本例子：https://reacttraining.com/react-router/web/example/basic

![1348316-20190830215120041-1225113000.png][]

#src/index.js
    import React from 'react';
    import ReactDom from 'react-dom';
    import { BrowserRouter as Router, Route, Link } from "react-router-dom";
    
    const Home = () => (
      <div>
        <h2>Home</h2>
      </div>
    );
    
    const About = () => (
      <div>
        <h2>About</h2>
      </div>
    );
    
    const App = () => (
      <Router>
        <div>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </div>
      </Router>
    );
    
    ReactDom.render(<App />,document.getElementById('root'));

![1348316-20190830220741930-1111642636.png][]

![1348316-20190830220750540-1886645673.png][]

**登录组件**

**![1348316-20190830222744035-1675158473.png][]**

登录页模板：https://codepen.io/colorlib/pen/rxddKy

<div class="login-page">
      <div class="form">
        <form class="register-form">
          <input type="text" placeholder="name"/>
          <input type="password" placeholder="password"/>
          <input type="text" placeholder="email address"/>
          <button>create</button>
          <p class="message">Already registered? <a href="#">Sign In</a></p>
        </form>
        <form class="login-form">
          <input type="text" placeholder="username"/>
          <input type="password" placeholder="password"/>
          <button>login</button>
          <p class="message">Not registered? <a href="#">Create an account</a></p>
        </form>
      </div>
    </div>

![1348316-20190830222850643-1497996757.png][]

![1348316-20190830222907299-528595324.png][]

![1348316-20190830222930446-1602689604.png][]

![1348316-20190830222938013-916019739.png][]

//在src/component/login.js
    import React from 'react';
    import ReactDom from 'react-dom';
    import { BrowserRouter as Router, Route, Link } from "react-router-dom";
    import '../css/login.css'
    
    export default class Login extends React.Component{
        render(){
            return (
                <div className="login-page">
                    <div className="form">
                        <form className="login-form">
                        <input type="text" placeholder="邮箱"/>
                        <input type="password" placeholder="密码"/>
                        <button>登录</button>
                        <p className="message">还未注册？ <a href="/reg">注册用户</a></p>
                        </form>
                    </div>
                </div>
            ); 
        }
    }

//src/index.js
    import React from 'react';
    import ReactDom from 'react-dom';
    import { BrowserRouter as Router, Route, Link } from "react-router-dom";
    import Login from './component/login';
    
    const Home = () => (
      <div>
        <h2>Home</h2>
      </div>
    );
    
    const About = () => (
      <div>
        <h2>About</h2>
      </div>
    );
    
    class Root extends React.Component{
      render(){
        return (
        <Router>
          <div>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/login" component={Login} />
          </div>
        </Router>
        );
      }
    }
    
    ReactDom.render(<Root />,document.getElementById('root'));

![1348316-20190831142120786-284243355.png][]

![1348316-20190831142137860-1175803222.png][]

//在src/CSS/login.css文件中
    body {
        
      background: #456;
      font-family: SimSun;
      font-size: 14px;
    }
    
    .login-page {
        
      width: 360px;
      padding: 8% 0 0;
      margin: auto;
    }
    .form {
        
      font-family: "Microsoft YaHei", SimSun;
      position: relative;
      z-index: 1;
      background: #FFFFFF;
      max-width: 360px;
      margin: 0 auto 100px;
      padding: 45px;
      text-align: center;
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    }
    .form input {
        
      outline: 0;
      background: #f2f2f2;
      width: 100%;
      border: 0;
      margin: 0 0 15px;
      padding: 15px;
      box-sizing: border-box;
      font-size: 14px;
    }
    .form button {
        
      text-transform: uppercase;
      outline: 0;
      background: #4CAF50;
      width: 100%;
      border: 0;
      padding: 15px;
      color: #FFFFFF;
      font-size: 14px;
      cursor: pointer;
    }
    .form button:hover,.form button:active,.form button:focus {
        
      background: #43A047;
    }
    .form .message {
        
      margin: 15px 0 0;
      color: #b3b3b3;
      font-size: 12px;
    }
    .form .message a {
        
      color: #4CAF50;
      text-decoration: none;
    }

![1348316-20190831142348181-512410667.png][]

![1348316-20190830231706568-840750411.png][]

![1348316-20190831142429600-861353058.png][]

可以看到如下界面，（[http://127.0.0.1:3000/login][http_127.0.0.1_3000_login]）

![1348316-20190831142533753-802125482.png][]

**注册组件**

![1348316-20190831142557038-1352015787.png][]

#src/component/reg.js
    import React from 'react';
    import {Link} from 'react-dom';
    import '../css/login.css'
    
    export default class Reg extends React.Component{
        render(){
            return (
                <div className="login-page">
                    <div className="form">
                        <form className="login-form">
                        <input type="text" placeholder="姓名"/>
                        <input type="text" placeholder="邮箱"/>
                        <input type="password" placeholder="密码"/>
                        <input type="password" placeholder="确认密码"/>
                        <button>注册</button>
                        <p className="message">如果已经注册 <Link to="/reg">请登录</Link></p>
                        </form>
                    </div>
                </div>
            ); 
        }
    }

![1348316-20190831143134007-808990432.png][]

//在src/index.js添加
    import Reg from './component/reg';
    
    class Root extends React.Component{
      render(){
        return (
        <Router>
          <div>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/login" component={Login} />
            <Route path="/reg" component={Reg} />
          </div>
        </Router>
        );
      }
    }

![1348316-20190831144653587-52918263.png][]

**导航栏组件**

![1348316-20190831144721117-576207694.png][]

//...
    class Root extends React.Component{
      render(){
        return (
        <Router>
          <div>
          <ul>
              <li><Link to="/">主页</Link></li>
              <li><Link to="/login">登录</Link></li>
              <li><Link to="/reg">注册</Link></li>
              <li><Link to="/about">关于</Link></li>
            </ul>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/login" component={Login} />
            <Route path="/reg" component={Reg} />
          </div>
        </Router>
        );
      }
    }
    //...

![1348316-20190831145132333-357348273.png][]

**登录功能实现**

**![1348316-20190831145213006-1466855667.png][]**

![1348316-20190831145220579-861037847.png][]

import React from 'react';
    import ReactDom from 'react-dom';
    import '../css/login.css'
    
    export default class Login extends React.Component{
        handleClick(event){
            event.preventDefault();
            console.log('~~~~~~~~~~~~~~~~~~');
            console.log(this);//Login
            console.log(event);
            console.log(event.target);//button
            console.log(event.target.form);
            console.log(event.target.form[0].value);
            console.log(event.target.form[1].value);
        }
        render(){
            return (
                <div className="login-page">
                    <div className="form">
                        <form className="login-form">
                        <input type="text" placeholder="邮箱"/>
                        <input type="password" placeholder="密码"/>
                        <button onClick={
        this.handleClick.bind(this)}>登录</button>
                        <p className="message">还未注册？ <a href="/reg">注册用户</a></p>
                        </form>
                    </div>
                </div>
            ); 
        }
    }

![1348316-20190831145813273-912080586.png][]

//src/component/login.js
    import React from 'react';
    import ReactDom from 'react-dom';
    import '../css/login.css';
    import UserService from '../service/user';
    
    const userService = new UserService();
    
    export default class Login extends React.Component{
        render(){
            return <_Login service={userService}/>;
        }
    }
    
    class _Login extends React.Component{
        handleClick(event){
            event.preventDefault();
            console.log('~~~~~~~~~~')
            let fm = event.target.form;
            this.props.service.login(
                fm[0].value,fm[1].value
            );
    
        }
        render(){
            return (
                <div className="login-page">
                    <div className="form">
                        <form className="login-form">
                        <input type="text" placeholder="邮箱"/>
                        <input type="password" placeholder="密码"/>
                        <button onClick={
        this.handleClick.bind(this)}>登录</button>
                        <p className="message">还未注册？ <a href="/reg">注册用户</a></p>
                        </form>
                    </div>
                </div>
            ); 
        }
    }

**UserService的login方法实现**

![1348316-20190831202711903-1720750621.png][]

devServer: {
            compress: true,
            port: 3000,
            publicPath: '/assets/',
            hot: true,
            inline: true,
            historyApiFallback: true,
            stats: {
                chunks: false
            },
            proxy: {
                '/api': {
                    target: 'http://127.0.0.1:8000',
                    changeOrigin: true
                }
            }
        }

**axios异步库**

![1348316-20190831202837662-539605323.png][]

![1348316-20190831202848333-2023566451.png][]

中文说明参考:https://www.kancloud.cn/yunye/axios/234845

![1348316-20190831203018618-102238989.png][]

![1348316-20190831203029252-1441722945.png][]

import axios from 'axios';
    
    export default class UserService{
        login(email,password){
            console.log(email,password,'++++++')
            //异步调用
            axios.post('/api/user/login', {
                'email': email,
                'password': password
              })/*dev server会代理*/
              .then(function (response) {
                console.log(response);
                console.log(response.data);
                console.log(response.status);
                console.log(response.statusText);
                console.log(response.headers);
                console.log(response.config);
              })
              .catch(function (error) {
                console.log(error);
              });
        }
    }

![1348316-20190831210031371-51207263.png][]

![1348316-20190831210053237-1393708066.png][]

![1348316-20190831210102398-709045855.png][]

**参考：[https://webpack.js.org/configuration/dev-server/\#devserver-proxy][https_webpack.js.org_configuration_dev-server_devserver-proxy]**

![1348316-20190831210110200-1719756689.png][]

//在webpack.config.dev.js中添加
        devServer: {
            compress: true,
            port: 3000,
            publicPath: '/assets/',
            hot: true,
            inline: true,
            historyApiFallback: true,
            stats: {
                chunks: false
            },
            proxy: {
                '/api': {
                    target: 'http://127.0.0.1:8000',
                    pathRewrite: {
         '^/api' : ''},
                    changeOrigin: true
                }
            }
        }

![1348316-20190831210737549-555524831.png][]

**token持久化---LocalStorage**

**![1348316-20190831211002995-1003545661.png][]**

![1348316-20190831211120330-832656970.png][]

![1348316-20190831211114323-783962233.png][]

![1348316-20190831211132053-32249862.png][]

![1348316-20190831211138375-1052934819.png][]

**store.js**

**![1348316-20190831211215767-1089665510.png][]**

![1348316-20190831211241031-738183218.png][]

![1348316-20190831211248737-2109737321.png][]

![1348316-20190831225722201-418166794.png][]

store.addPlugin(require('store/plugins/expire'));//过期插件
    store.set('token',res.data.token,(new Date()).getTime() + (8*3600*1000));

**Mobx状态管理**

**Redux和Mobx**

![1348316-20190831230032366-2003137376.png][]

![1348316-20190831230040053-1839339559.png][]

![1348316-20190831230048959-172560908.png][]

Mobx官网：https://mobx.js.org/

![1348316-20190831230212731-1346046422.png][]

![1348316-20190831230227585-367861359.png][]

**状态管理**

**![1348316-20190831230316724-1345185579.png][]**

![1348316-20190831230325249-1994393225.png][]

**1.同步调用**

**![1348316-20190831230406275-401841034.png][]**

import React from 'react';
    import ReactDom from 'react-dom';
    
    class Service{
        handle(n){
            //同步
            console.log('pending~~~~~');
            for (let s=new Date();new Date()-s<n*1000;);
            console.log('done');
            return Math.random();
        }
    }
    
    class Root extends React.Component{
        state = {ret:null}
        handleClick(event){
            //同步返回值
            let ret = this.props.Service.handle(4);
        }
    
        render(){
            console.log('*'*20)
            return (
                <div>
                    <button onClick={
        this.handleClick.bind(this)}>触发handleClick函数</button>
                    <span style={
        {color:'red'}}>{
        new Date().getTime()} Service的handle函数返回值是：{
        this.state.ret}</span>
                </div>
            )
        }
    }
    
    ReactDom.render(<Root service={
        new Service()}/>,document.getElementById('root'));

![1348316-20190831231748712-1252128229.png][]

**2.异步调用**

![1348316-20190831231826114-656130960.png][]

![1348316-20190831231835824-511418677.png][]

![1348316-20190831231927514-1060544230.png][]

import React from 'react';
    import ReactDom from 'react-dom';
    
    class Service{
        handle(obj){
            //Promise
            new Promise((resolve,reject) => {
                setTimeout(()=>resolve('OK'),5000);
            }).then(
                value => {
        //
                    obj.setState({ret:(Math.random()*100)});
                }
            )
        }  
    }
    
    class Root extends React.Component{
        state = {ret:null}
        handleClick(event){
            //异步不能直接使用返回值
            this.props.service.handle(this);
        }
    
        render(){
            console.log('*'*20)
            return (
                <div>
                    <button onClick={
        this.handleClick.bind(this)}>触发handleClick函数</button>
                    <span style={
        {color:'red'}}>{
        new Date().getTime()} Service的handle函数返回值是：{
        this.state.ret}</span>
                </div>
            )
        }
    }
    
    ReactDom.render(<Root service={
        new Service()}/>,document.getElementById('root'));

![1348316-20190831232638608-482609783.png][]

**3.Mobx实现**

**![1348316-20190831232710018-512594064.png][]**

import React from 'react';
    import ReactDom from 'react-dom';
    import {observable} from 'mobx';
    import {observer} from 'mobx-react';
    
    class Service{
        @observable ret = -1;
        handle(obj){
            //Promise
            new Promise((resolve,reject) => {
                setTimeout(()=>resolve('OK'),2000);
            }).then(
                value => {
        //
                    this.ret = (Math.random()*100);
                    console.log(ret);
                }
            )
        }  
    }
    
    @observer   //将react组件转换为响应式组件
    class Root extends React.Component{
        // state = {ret:null}
        handleClick(event){
            //异步不能直接使用返回值
            this.props.service.handle(this);
        }
    
        render(){
            console.log('*'*20)
            return (
                <div>
                    <button onClick={
        this.handleClick.bind(this)}>触发handleClick函数</button>
                    <span style={
        {color:'red'}}>{
        new Date().getTime()} Service的handle函数返回值是：{
        this.state.ret}</span>
                </div>
            )
        }
    }
    
    ReactDom.render(<Root service={
        new Service()}/>,document.getElementById('root'));

![1348316-20190831234105302-1197298190.png][]

![1348316-20190831234114160-82656948.png][]

**login登录功能代码实现**

//在src/service/user.js中
    import axios from 'axios';
    import store from 'store';
    import {observable} from 'mobx';
    
    store.addPlugin(require('store/plugins/expire'));
    
    export default class UserService{
      @observable loggindin = false; //+被观察者
    
      login(email,password){
          console.log(email,password);
          //异步调用
          axios.post('/api/user/login', {
              'email': email,
              'password': password
            })/*dev server会代理*/
            .then((response) => {
              console.log(response.data);
              console.log(response.status);
              //+ 存储token
              store.set('token',response.data.token,(new Date()).getTime()+(8*3600*1000));
              this.loggindin = true;  //+ 修改被观察者
            })
            .catch( (error) => {
              console.log(error);
            });
      }
    }

//src/component/login.js
    import React from 'react';
    import '../css/login.css';
    import UserService from '../service/user';
    import {Link,Redirect} from 'react-router-dom'
    import {observer} from 'mobx-react';
    
    const userService = new UserService();
    
    export default class Login extends React.Component{
        render(){
            return <_Login service={userService}/>;
        }
    }
    
    @observer
    class _Login extends React.Component{
        handleClick(event){
            event.preventDefault();
            let fm = event.target.form;
            this.props.service.login(
                fm[0].value,fm[1].value
            );
    
        }
        render(){
            if (this.props.service.loggedin){
                return <Redirect to='/' />; //+ 跳转
            }
            return (
                <div className="login-page">
                    <div className="form">
                        <form className="login-form">
                        <input type="text" placeholder="邮箱"/>
                        <input type="password" placeholder="密码"/>
                        <button onClick={
        this.handleClick.bind(this)}>登录</button>
                        <p className="message">还未注册？ <a href="/reg">注册用户</a></p>
                        </form>
                    </div>
                </div>
            ); 
        }
    }

![1348316-20190901134728174-775362704.png][]

**前端注册功能实现**

**![1348316-20190901135355350-461115868.png][]**

import axios from 'axios';
    import store from 'store';
    import {observable} from 'mobx';
    
    store.addPlugin(require('store/plugins/expire'));
    
    export default class UserService{
      @observable loggedin = false; //+被观察者
    
      login(email,password){
          console.log(email,password);
          //异步调用
          axios.post('/api/user/login', {
              'email': email,
              'password': password
            })/*dev server会代理*/
            .then((response) => {
              console.log(response.data);
              console.log(response.status);
              //+ 存储token
              store.set('token',response.data.token,(new Date()).getTime()+(8*3600*1000));
              this.loggedin = true;  //+ 修改被观察者
            })
            .catch( (error) => {
              console.log(error);
            });
      }
    //新增reg函数
      reg(name, email, password){
        console.log(email,password);
    
        axios.post('api/user/reg',{
            'eamil':email,
            'password':password,
            'name':name
        })/* dev server会代理 */
        .then((response) => {
         //此函数需要注意this的问题
            console.log(response.data);
            console.log(response.status);
            //+ 存储token
            store.set('token',response.data.token,(new Date).getTime()+(8*3600*1000));
            //注册成功，返回token即成功登录
            this.loggedin = true; //+ 修改被观察者
        })
        .catch((error)=>{
          console.log(error);
        })
      }

![1348316-20190901140714759-1480378879.png][]

//src/component/reg.js
    import React from 'react';
    import {Redirect} from 'react-router-dom';
    import '../css/login.css'
    import UserService from '../service/user';
    import {observer} from 'mobx-react';
    
    const userService = new UserService();
    
    export default class Reg extends React.Component{
        render(){
            return <_Reg service={userService} />;
        }
    }
    
    @observer
    class _Reg extends React.Component{
        handleClick(event){
            event.preventDefault();
            let fm = event.target.form;
            this.props.service.reg(fm[0].value,fm[1].value,fm[2].value);
        }
    
        render(){
            console.log('component reg!!')
            if(this.props.service.loggedin){
                return <Redirect to='/about'/>;
            }
            return (
                <div className="login-page">
                    <div className="form">
                        <form className="register-form">
                        <input type="text" placeholder="姓名"/>
                        <input type="text" placeholder="邮箱"/>
                        <input type="password" placeholder="密码"/>
                        <input type="password" placeholder="确认密码"/>
                        <button onClick={
        this.handleClick.bind(this)}>注册</button>
                        <p className="message">如果已经注册 <a href="/login">请登录</a></p>
                        </form>
                    </div>
                </div>
            ); 
        }
    }

**Ant Design**

**![1348316-20190901151959803-1311206878.png][]**

官网：https://ant.design/index-cn
    官方文档：https://ant.design/docs/react/introduce-cn

![1348316-20190901152207467-1428844228.png][]

![1348316-20190901152219507-1317252212.png][]

import {List} from 'antd';
    import 'antd/lib/list/style/css';
    import ReactDom from 'react-dom';
    
    ReactDom.render(<List />,mountNode);

![1348316-20190901153039953-221697280.png][]

**信息显示**

**![1348316-20190901153056394-2137821495.png][]**

import axios from 'axios';
    import store from 'store';
    import {observable} from 'mobx';
    
    store.addPlugin(require('store/plugins/expire'));
    
    export default class UserService{
      @observable loggedin = false; //+被观察者
      @observable errMsg = '';      
    
      login(email,password){
          console.log(email,password,'in login function!');
          //异步调用
          axios.post('/api/user/login', {
              'email': email,
              'password': password
            })/*dev server会代理*/
            .then((response) => {
              console.log(response.data);
              console.log(response.status);
              //+ 存储token
              store.set('token',response.data.token,(new Date()).getTime()+(8*3600*1000));
              this.loggedin = true;  //+ 修改被观察者
            })
            .catch( (error) => {
              console.log(error);
              this.errMsg = '登录失败';//+ 信息显示
            });
      }
    
      reg(name, email, password){
        console.log(email,password,name,'in reg f unction!');
        //异步调用
        axios.post('api/user/reg',{
            'email':email,
            'password':password,
            'name':name
        })/* dev server会代理 */
        .then((response) => {
        //此函数需要注意this的问题
            console.log(response.data);
            console.log(response.status);
            //+ 存储token
            store.set('token',response.data.token,(new Date()).getTime()+(8*3600*1000));
            //注册成功，返回token即成功登录
            this.loggedin = true; //+ 修改被观察者
        })
        .catch((error)=>{
          console.log(error);
          this.errMsg = '注册失败'//+ 信息显示
        });
      }

![1348316-20190901154359303-1409954231.png][]

import React from 'react';
    import '../css/login.css';
    import UserService from '../service/user';
    import {Link,Redirect} from 'react-router-dom'
    import {observer} from 'mobx-react';
    //新增
    import {message} from 'antd';
    import 'antd/lib/message/style';
    
    
    const userService = new UserService();
    
    export default class Login extends React.Component{
        render(){
            return <_Login service={userService}/>;
        }
    }
    
    @observer
    class _Login extends React.Component{
        handleClick(event){
            event.preventDefault();
            let fm = event.target.form;
            this.props.service.login(
                fm[0].value,fm[1].value
            );
    
        }
        render(){
            console.log('in login.js')
            if (this.props.service.loggedin){
                return <Redirect to='/about' />; //+ 跳转
            }
            //新增
            if (this.props.service.errMsg){
                message.info(this.props.service.errMsg,3,
                    ()=> SetTimeout(()=>this.props.service.errMsg=''),1000);
                
            }
    
            return (
                <div className="login-page">
                    <div className="form">
                        <form className="login-form">
                        <input type="text" placeholder="邮箱"/>
                        <input type="password" placeholder="密码"/>
                        <button onClick={
        this.handleClick.bind(this)}>登录</button>
                        <p className="message">还未注册？ <a href="/reg">注册用户</a></p>
                        </form>
                    </div>
                </div>
            ); 
        }
    }

![1348316-20190901163936314-1779878876.png][]

import React from 'react';
    import {Redirect} from 'react-router-dom';
    import '../css/login.css'
    import UserService from '../service/user';
    import {observer} from 'mobx-react';
    //新增
    import {message} from 'antd';
    import 'antd/lib/message/style';
    
    const userService = new UserService();
    
    export default class Reg extends React.Component{
        render(){
            return <_Reg service={userService} />;
        }
    }
    
    @observer
    class _Reg extends React.Component{
        handleClick(event){
            event.preventDefault();
            let fm = event.target.form;
            this.props.service.reg(fm[0].value,fm[1].value,fm[2].value);
        }
    
        render(){
            console.log('component reg!!')
            if(this.props.service.loggedin){
                return <Redirect to='/about'/>;
            }
            //新增
            if(this.props.service.errMsg){
                message.info(this.props.service.errMsg,3,()=>{
                    setTimeout(()=>this.props.service.errMsg='',1000);
                })
            }
            return (
                <div className="login-page">
                    <div className="form">
                        <form className="register-form">
                        <input type="text" placeholder="姓名"/>
                        <input type="text" placeholder="邮箱"/>
                        <input type="password" placeholder="密码"/>
                        <input type="password" placeholder="确认密码"/>
                        <button onClick={
        this.handleClick.bind(this)}>注册</button>
                        <p className="message">如果已经注册 <a href="/login">请登录</a></p>
                        </form>
                    </div>
                </div>
            ); 
        }
    }

转载于:https://www.cnblogs.com/xiaoshayu520ly/p/11437593.html

[1348316-20190830212858460-57808557.png]: /images/20230808/7ec1189ee18a443cb7af6a1d4b6100a7.png
[1348316-20190830212906350-634344109.png]: /images/20230808/298997b5904c436695286d3dd1f66556.png
[1348316-20190830213540803-335061424.png]: /images/20230808/27ce3edad2bc43459fca956194426475.png
[1348316-20190830214049038-300488082.png]: /images/20230808/636a9ce017b44f29acdebfe6f5db2083.png
[1348316-20190830214237827-274316006.png]: /images/20230808/0199e8f693494310a62b0372109e1691.png
[1348316-20190830214943283-2078428056.png]: /images/20230808/44f93a0348924d1385385a9c4bebfded.png
[1348316-20190830223102077-1641360619.png]: /images/20230808/3ffdf82acbb74e50873f574afe823998.png
[1348316-20190830215018373-1060350828.png]: /images/20230808/d7479c616dbc49c4afcdc4a1f554be1f.png
[1348316-20190830215120041-1225113000.png]: /images/20230808/5e0ddc583ffb46d99bbb25eaeae5c6fe.png
[1348316-20190830220741930-1111642636.png]: /images/20230808/240978917e88466c9819c53ee6a6d7d5.png
[1348316-20190830220750540-1886645673.png]: /images/20230808/41ccbfab440947ddb8f93bb4bb30f6ef.png
[1348316-20190830222744035-1675158473.png]: /images/20230808/6c71838419b74e0bb590851a86179843.png
[1348316-20190830222850643-1497996757.png]: /images/20230808/a5d8eb5eaa2846038e3ddb34a5e05f26.png
[1348316-20190830222907299-528595324.png]: /images/20230808/d569608cf62d4bde906bbc652133f3af.png
[1348316-20190830222930446-1602689604.png]: /images/20230808/653808ad1619403db683f50e5f4cecbc.png
[1348316-20190830222938013-916019739.png]: /images/20230808/7be6909b68044ca08428c4cb41816d9b.png
[1348316-20190831142120786-284243355.png]: /images/20230808/3b336a60afdd4e2796192120b5164838.png
[1348316-20190831142137860-1175803222.png]: /images/20230808/96bb4860de0f4b7d8249356102bdbac9.png
[1348316-20190831142348181-512410667.png]: /images/20230808/5329a98e238d434c8686bebecaa25719.png
[1348316-20190830231706568-840750411.png]: /images/20230808/2d3b3420b177499ea1fc7650d01075ec.png
[1348316-20190831142429600-861353058.png]: /images/20230808/95c71c4af1a94fe89a2e11d921f4ee71.png
[http_127.0.0.1_3000_login]: http://127.0.0.1:3000/login
[1348316-20190831142533753-802125482.png]: /images/20230808/0b1ea5f30d404afab38f94530455de93.png
[1348316-20190831142557038-1352015787.png]: /images/20230808/3491594f4c8740bbb3f5d3c1b4f40aad.png
[1348316-20190831143134007-808990432.png]: /images/20230808/3e59dcd34a6d4fc9b7c0cf9f5e47dfba.png
[1348316-20190831144653587-52918263.png]: /images/20230808/6daa4f08985d4666a72d766f7567d437.png
[1348316-20190831144721117-576207694.png]: /images/20230808/51879317714f424497beefe08e78d16f.png
[1348316-20190831145132333-357348273.png]: /images/20230808/82a6d545cc85456a85ed764bedea6740.png
[1348316-20190831145213006-1466855667.png]: /images/20230808/000616a4a8474c97aa0ba3c1d3ae2f9b.png
[1348316-20190831145220579-861037847.png]: /images/20230808/6b043a5a26464be7b63a7f9bf5fd48d2.png
[1348316-20190831145813273-912080586.png]: /images/20230808/a8edf9c0da9d47f69788779beda8acb3.png
[1348316-20190831202711903-1720750621.png]: /images/20230808/44666e0ba262458c8bf540b45154b5c7.png
[1348316-20190831202837662-539605323.png]: /images/20230808/ff0b2d7b793149ca9a6ec7fc9924f9c5.png
[1348316-20190831202848333-2023566451.png]: /images/20230808/ba32c84df80943c0bbf1084c7977a60b.png
[1348316-20190831203018618-102238989.png]: /images/20230808/a61e8ee6406d40fc9a9d6a40f508ac70.png
[1348316-20190831203029252-1441722945.png]: /images/20230808/0637a3c45e344d0494877163aea2e92a.png
[1348316-20190831210031371-51207263.png]: /images/20230808/8a2fe3d95b154e09bc27f2c8b7e4e7b7.png
[1348316-20190831210053237-1393708066.png]: /images/20230808/216ffae38c0f485f89dcf90756c80b83.png
[1348316-20190831210102398-709045855.png]: /images/20230808/4343314420c94a4bb03d2f50f6a13bf9.png
[https_webpack.js.org_configuration_dev-server_devserver-proxy]: https://webpack.js.org/configuration/dev-server/#devserver-proxy
[1348316-20190831210110200-1719756689.png]: /images/20230808/be1d5059f5b64775b56df1777d9cc1cf.png
[1348316-20190831210737549-555524831.png]: /images/20230808/03ce70a8159744bb8a130a42aa0d4d1b.png
[1348316-20190831211002995-1003545661.png]: /images/20230808/213e45ae338c4dc58556e34bc18da841.png
[1348316-20190831211120330-832656970.png]: /images/20230808/bda8dc592e02469c9495f78104e72368.png
[1348316-20190831211114323-783962233.png]: /images/20230808/b6d58156dc4d46c68cace7dc1cd81c7f.png
[1348316-20190831211132053-32249862.png]: /images/20230808/c18c9e8b88974ae2b4004db47b803cc3.png
[1348316-20190831211138375-1052934819.png]: /images/20230808/9cb27cbf84c74a8eb86c83fb066e02a8.png
[1348316-20190831211215767-1089665510.png]: /images/20230808/6a857841ec99462597715d3631ea8fe6.png
[1348316-20190831211241031-738183218.png]: /images/20230808/66ae3ddaac544a41a08df4318466e727.png
[1348316-20190831211248737-2109737321.png]: /images/20230808/e813a2c8e08e45cdb40e5d9caf101d49.png
[1348316-20190831225722201-418166794.png]: /images/20230808/68293b33dc0d47859e900352f84d0390.png
[1348316-20190831230032366-2003137376.png]: /images/20230808/609534f9c0754f11b86b93596b6aa3ab.png
[1348316-20190831230040053-1839339559.png]: /images/20230808/7daf2fa5152b48658f7f21ec9c026cd7.png
[1348316-20190831230048959-172560908.png]: /images/20230808/88f74df671f741cc928cb283fd020aac.png
[1348316-20190831230212731-1346046422.png]: /images/20230808/a0bd77bcd9744d9b91c12f069c37897e.png
[1348316-20190831230227585-367861359.png]: /images/20230808/37796a1150d046d4a38879531f660ea1.png
[1348316-20190831230316724-1345185579.png]: /images/20230808/eae031acc1e64dc28282904e47b44c00.png
[1348316-20190831230325249-1994393225.png]: /images/20230808/8dcfe977428f4e70921999bf588db440.png
[1348316-20190831230406275-401841034.png]: /images/20230808/e935b877248e429396cd277feeb296f0.png
[1348316-20190831231748712-1252128229.png]: /images/20230808/b3559279497b4ee797e5c9f09a148410.png
[1348316-20190831231826114-656130960.png]: /images/20230808/47db0c4973e0498b8256d239a9c89415.png
[1348316-20190831231835824-511418677.png]: /images/20230808/2652aa1f08234cd58d613a91fed8e7e5.png
[1348316-20190831231927514-1060544230.png]: /images/20230808/267e9bc8d944482e8ec42b7ee61547ac.png
[1348316-20190831232638608-482609783.png]: /images/20230808/9b4ac154d3ad422d8a08f369d0828adf.png
[1348316-20190831232710018-512594064.png]: /images/20230808/724e1cecb25f4d3696be8122dd60b9f7.png
[1348316-20190831234105302-1197298190.png]: /images/20230808/81183c6c62a14aeab5ceb592dbab82e3.png
[1348316-20190831234114160-82656948.png]: /images/20230808/ea4481d84af644eea9ce73822a561e13.png
[1348316-20190901134728174-775362704.png]: /images/20230808/f5c4491cc2d74719a9c2e568ad76fff6.png
[1348316-20190901135355350-461115868.png]: /images/20230808/eb5b2e774b104c3bbacc471febbbbb30.png
[1348316-20190901140714759-1480378879.png]: /images/20230808/bb5652fe2afe4fb7983192fb988897fc.png
[1348316-20190901151959803-1311206878.png]: /images/20230808/8a9fbd5995ce4328b34c0f83958f4e39.png
[1348316-20190901152207467-1428844228.png]: /images/20230808/da87ee5f27e14c91ba2cad39d29f380b.png
[1348316-20190901152219507-1317252212.png]: /images/20230808/2e7878ee6f24481bb4108a9539ccb355.png
[1348316-20190901153039953-221697280.png]: /images/20230808/433df7b4544b4e9aba03f6f3bb4e20b1.png
[1348316-20190901153056394-2137821495.png]: /images/20230808/a4db20a7aa1a4a0b8ad95d9f1cde42da.png
[1348316-20190901154359303-1409954231.png]: /images/20230808/432ddb3abea745da9be6b74b3675e769.png
[1348316-20190901163936314-1779878876.png]: /images/20230808/1577b80bf8d54f2ab6d04320ec9d9aaa.png