博文业务代码实现和Antd组件--Django播客系统(十一)

导航菜单

• 菜单网址，https://ant.design/components/menu-cn/

• Menu 菜单组件

  1. mode有水平、垂直、内嵌

• Menu.Item 菜单项

  1. key菜单项item的唯一标识

• 修改src/index.js导航菜单

import React from 'react';
import ReactDom from 'react-dom';
import {
   Route,Link,BrowserRouter as Router} from "react-router-dom";
import Login from "./component/login";
import Reg from "./component/reg";
import {
   Menu} from 'antd'; //加载antd的组件

import 'antd/lib/menu/style'; //加载组件的样式css
import {
    HomeFilled,LoginOutlined,RotateRightOutlined,AccountBookFilled } from '@ant-design/icons';


const App = () =>  (
    <Router>
        <div>
            <div>
                <Menu mode="horizontal" theme="dark"  style={
   {
    lineHeight: '64px' }} defaultSelectedKeys= {
   ['home']} >
                    <Menu.Item key="home" icon={
   <HomeFilled />} ><Link to="/">主页</Link></Menu.Item>
                    <Menu.Item key="login" icon={
   <LoginOutlined />}><Link to="/login">登录</Link></Menu.Item>
                    <Menu.Item key="reg" icon={
   <RotateRightOutlined />}><Link to="/reg">注册</Link></Menu.Item>
                    <Menu.Item key="about" icon={
   <AccountBookFilled />}><Link to="/about">关于</Link></Menu.Item>
                </Menu>
            </div>
            <div>
                <Route path="/about" component={
   About} />
                <Route path="/login" component={
   Login} />
                <Route path="/reg" component={
   Reg} />
                <Route exact path="/" component={
   Home} />
            </div>
        </div>
    </Router>
);

function Home() {
   
    return (
        <div>
        <h2>Home</h2>
        </div>
    );
}

function About() {
   
    return (
        <div>
        <h2>About</h2>
        </div>
    );
}


ReactDom.render(<App />, document.getElementById('root'));

页面布局

• 采用上中下布局，参考：https://ant.design/components/layout-cn/

1. 修改src/index.js导航菜单

import React from 'react';
import ReactDom from 'react-dom';
import {
   Route,Link,BrowserRouter as Router} from "react-router-dom";
import {
   Menu,Layout} from 'antd'; //加载antd的组件

import Login from "./component/login";
import Reg from "./component/reg";

import 'antd/lib/menu/style'; //加载组件的样式css
import 'antd/lib/layout/style';
import {
    HomeFilled,LoginOutlined,RotateRightOutlined,AccountBookFilled } from '@ant-design/icons';

const {
   Header,Content,Footer} = Layout; // 上中下

const App = () =>  (
	<Router>
		<Layout>
			<Header>
				<Menu mode="horizontal" theme="dark"  style={
   {
    lineHeight: '64px' }} defaultSelectedKeys= {
   ['home']} >
					<Menu.Item key="home" icon={
   <HomeFilled />} ><Link to="/">主页</Link></Menu.Item>
					<Menu.Item key="login" icon={
   <LoginOutlined />}><Link to="/login">登录</Link></Menu.Item>
					<Menu.Item key="reg" icon={
   <RotateRightOutlined />}><Link to="/reg">注册</Link></Menu.Item>
					<Menu.Item key="about" icon={
   <AccountBookFilled />}><Link to="/about">关于</Link></Menu.Item>
				</Menu>
			</Header>
			<Content style={
   {
    padding: '8px 50px' }}>
				<div style={
   {
    background: '#fff', padding: 24, minHeight: 280 }}>
					<Route path="/about" component={
   About} />
					<Route path="/login" component={
   Login} />
					<Route path="/reg" component={
   Reg} />
					<Route exact path="/" component={
   Home} />
				</div>
			</Content>
			<Footer style={
   {
    textAlign: 'center' }}>xddweb©2019-2020 </Footer>
		</Layout>
  </Router>
);

function Home() {
   
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
   
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}


ReactDom.render(<App />, document.getElementById('root'));

博文业务

url	method	说明
/posts/	POST	提交博文的title、content,成功返回json,包含post_id,title
/posts/id	GET	返回博文详情 返回json,id,title、author_id、postdate(时间戳)、content
/posts/	GET	返回博文标题列表，分页

业务层

• 创建service/post.js文件，新建PostService类。

import axios from 'axios';
import {
   observable} from 'mobx';

class PostService{
   
    @observable msg = '';

    pub(title,content){
   
        console.log(title);
        axios.post('/api/posts/',{
   
            title,content
        })/* dev server 会代理 */
        .then(
            response => {
   
                console.log(response.data);
                console.log(response.status);
                this.msg = '博文提交成功';
            }
        ).catch(
            error => {
   
                console.log(error);
                this.msg = '博