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

女爷i 2023-08-17 17:39 107阅读 0赞

**前端开发**

**导航菜单**

参考：[https://ant.design/components/menu-cn/][https_ant.design_components_menu-cn]

![1348316-20190902000345623-1025137647.png][]

![1348316-20190903222950500-1096751824.png][]

参考：[https://ant.design/components/layout-cn/][https_ant.design_components_layout-cn]

import React from 'react';
    import ReactDom from 'react-dom';
    import { BrowserRouter as Router, Route, Link } from "react-router-dom";
    import Login from './component/login';
    import Reg from './component/reg';
    
    import {Layout,Menu,Icon} from 'antd';
    // import Pub from './component/pub';
    
    import 'antd/lib/layout/style';
    import 'antd/lib/menu/style';
    import 'antd/lib/icon/style';
    
    const { Header,Content,Footer} = Layout;//上中下布局
    
    const Home = () => (
      <div>
        <h2>Home</h2>
      </div>
    );
    
    const About = () => (
      <div>
        <h2>About</h2>
      </div>
    );
    
    
    class Root extends React.Component{
      render (){
      return (
        <Router>
          <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark">
                  <Menu.Item key="home">  <Link to="/"><Icon type="home" />主页</Link> </Menu.Item>
                  <Menu.Item key="login"> <Link to="/login"><Icon type="login" />登录</Link> </Menu.Item>
                  <Menu.Item key="reg">     <Link to="/reg">注册</Link> </Menu.Item>
                  <Menu.Item key="about">   <Link to="/about">关于</Link> </Menu.Item>
                </ Menu>
            </Header>
            <Content style={
        { padding: '8px 50px' }}>
              <div style={
        {background:'#fff',padding:24,minHeight:280}}>
                <Route exact path="/" component={Home} />
                <Route path="/about" component={About} />
                <Route path="/login" component={Login} />
                <Route path="/reg" component={Reg} />
              </div>
            
    
            </Content>
            <Footer style={
        {textAlign:'center'}}>
              Copyright © 2008-2018
            </Footer>
          </Layout>
        </Router>);
      }
    }
    
    ReactDom.render(<Root />,document.getElementById('root'));

![1348316-20190903223401419-1487600385.png][]

**博文业务**

**![1348316-20190903223429308-910596346.png][]**

**业务层**

//service/post.js
    import axios from 'axios';
    import {observable} from 'mobx';
    
    export default class PostService{
        @observable msg = "";
    
        pub(title,content){
            console.log(title);
            axios.post('/api/post/pub',{
                title,content
            })/*dev server 会代理 */
            .then(response => {
        //此函数要注意this问题
                console.log(response.data);
                console.log(response.status);
                this.msg = '博文提交成功'; //+ 信息显示
            })
            .catch(error =>{
                console.log(error);
                this.msg = '登录失败'; //+ 信息显示
            })
        }
    }

**发布组件**

使用Form组件 参考：[https://ant.design/components/form-cn/][https_ant.design_components_form-cn]

//src/component/pub.js
    import React from 'react';
    import {Link,Redirect} from 'react-router-dom'
    import {observer} from 'mobx-react';
    import {message} from 'antd';
    import {inject} from '../utils';
    import PostService from '../service/post';
    
    import {Form,Input,Button} from 'antd';
    
    import 'antd/lib/message/style';
    import 'antd/lib/form/style';
    import 'antd/lib/input/style';
    import 'antd/lib/button/style';
    
    const {TextArea} = Input;
    
    const service = new PostService();
    
    //注意装饰器顺序
    @inject({service})  //生成{service:service}对象
    @observer
    export default class Pub extends React.Component{
        handleSubmit(event){
            event.preventDefault();
            let fm = event.target;
            console.log(fm[0].value,fm[1].value);
            this.props.service.pub(
                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 (
                <Form layout='vertical' onSubmit={
        this.handleSubmit.bind(this)}>
                    <Form.Item label="标题" labelCol={
        {span:4}} wrapperCol={
        {span:14}}>
                        <Input placeholder='标题'/>
                    </Form.Item>
                    <Form.Item label="内容" labelCol={
        {span:4}} wrapperCol={
        {span:14}}>
                        <TextArea rows={10}/>
                    </Form.Item>
                    <Form.Item wrapperCol={
        {span:14, offset:4}}>
                        <Button type='primary' htmlType='submit'>提交</Button>
                    </Form.Item>
                </Form>
            ); 
        }
    }

**![1348316-20190903230915681-672892965.png][]**

待续...

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

[https_ant.design_components_menu-cn]: https://ant.design/components/menu-cn/
[1348316-20190902000345623-1025137647.png]: /images/20230808/9d34bdb660ec45a097ebc4880abac875.png
[1348316-20190903222950500-1096751824.png]: /images/20230808/c91ec1813333405baf5e99193b056cf4.png
[https_ant.design_components_layout-cn]: https://ant.design/components/layout-cn/
[1348316-20190903223401419-1487600385.png]: /images/20230808/e0da9a21a5094d6bb25c5a64e799d875.png
[1348316-20190903223429308-910596346.png]: /images/20230808/df991ff4358142da90baf0491f492638.png
[https_ant.design_components_form-cn]: https://ant.design/components/form-cn/
[1348316-20190903230915681-672892965.png]: /images/20230808/fd9f6a92511e4ac68a039a5c9c40094b.png