「Serverless云开发72变」实现一个简单的博客

npm i

npm run dev

functions:
  register:
    handler: user.register
    events:
      - apigw:
          path: /api/user/register

  login:
    handler: user.login
    events:
      - apigw:
          path: /api/user/login

  list:
    handler: blog.list
    events:
      - apigw:
          path: /api/blog/list

  detail:
    handler: blog.detail
    events:
      - apigw:
          path: /api/blog/detail

  del:
    handler: blog.del
    events:
      - apigw:
          path: /api/blog/del

  new:
    handler: blog.new
    events:
      - apigw:
          path: /api/blog/new

  update:
    handler: blog.update
    events:
      - apigw:
          path: /api/blog/update

npm i

import React, { useState,useEffect } from 'react'
import { Layout, Menu, Input, Button, Row, Col, Card } from 'antd';
import { BrowserRouter, Route, Link} from 'react-router-dom';
import axios from 'axios'
import {InfiniteListExample} from './CardList'
import Tea from './Tea'
import Advise from './Advise'
import Login from './Login'
import Detail from './Detail'
import Update from './Update';
import Register from './Register';
import New from './new'
import {
  HomeOutlined,
  FileTextOutlined,
  CoffeeOutlined,
  AudioOutlined
} from '@ant-design/icons';
const { Search } = Input;
const suffix = (
  <AudioOutlined
    style={{
      fontSize: 16,
      color: '#1890ff',
    }}
  />
);
const { Header, Sider, Content, Footer } = Layout;
export default function SiderDemo() {
  const [collapsed, SetCollapsed] = useState(false);
 const toggle = () => {
     SetCollapsed(!collapsed)
  }
  return (
    <>
    <BrowserRouter>
      <Layout >
        <Sider className='sider' collapsible trigger={null} breakpoint='lg' onBreakpoint={toggle} >
          <Menu className='menu'  mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1" icon={<HomeOutlined />}>
              <Link to="/">首页</Link>
            </Menu.Item>
            <Menu.Item key="2" icon={<FileTextOutlined />}>
              <Link to="/advise">排行榜</Link>
            </Menu.Item>
            <Menu.Item key="3" icon={ <CoffeeOutlined /> }>
              <Link to="/tea"> 须知 </Link>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
          <Row style={{ background: "white" }}>
            <Col span={6}></Col>
            <Col> 
            <Search
              placeholder="目前还不支持搜索功能"
              style={{
                width: 200,
              }} />
            </Col>
            <Col span={6}></Col>
            <Col><Button type="primary" style={{
            }}><Link to="/login">登入</Link></Button><Button><Link to="/register">注册</Link></Button></Col></Row>
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 800,
            }}
          >
              <Route path='/' exact render={() =><InfiniteListExample/>}></Route>
            <Route path='/advise' exact render={() => <Advise />}></Route>
            <Route path='/tea' exact render={() => <Tea />}></Route>
            <Route path='/login' exact render={() =>  <Login/>}></Route>
             <Route path='/register' exact render={() =>  <Register/>}></Route>
            <Route path='/detail' exact render={() =>  <Detail/>}></Route>
            <Route path='/update' exact render={() =>  <Update/>}></Route>
            <Route path='/new' exact render={() =>  <New/>}></Route>             
          </Content>
          <Footer style={{ textAlign: 'center' }}>BBBlog ©2020 Created by kunpeng</Footer>
        </Layout>
      </Layout>
    </BrowserRouter>
    </>
  );
}

import React from 'react'
import ReactDOM from 'react-dom';
import './index.css';
import Sider from './components/menu' 
export default function App() {
  return (
    <div>
        <Sider/>
    </div>
  )
}
ReactDOM.render(
    <App />
  ,
  document.getElementById('root')
);

import React, { useState } from 'react';
import { Form, Input, Button, Checkbox } from 'antd';
import axios from 'axios'
const Register = () => {
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    const handleRegister = () => {
        axios.post('/api/user/register',{
            username,password
        })
        .then(resp => resp.data)
        .then(resp => {
          if (resp) {
            alert(`注册成功，快去登入吧`)
          } else {
            alert(`注册失败`)
          }
        })
    } 
    return (
        <Form
            name="basic"
            layout='inline'
            initialValues={{
                remember: true,
            }}
        >
            <Form.Item
                label="用户名"
                name="用户名"
                rules={[
                    {
                        required: true,
                        message: '请输入你的用户名!',
                    },
                ]}
            >
                <Input onChange={e => {
                    setUsername(e.target.value)
                }} />
            </Form.Item>
            <Form.Item
                label="密码"
                name="密码"
                rules={[
                    {
                        required: true,
                        message: '请输入你的密码!',
                    },
                ]}
            >
                <Input.Password onChange={e => {
                    setPassword(e.target.value)
                }} />
            </Form.Item>
            <Form.Item >
                <Button  htmlType="submit" onClick={handleRegister}>
                    注册
        </Button>
            </Form.Item>
        </Form>
    );
};
export default Register;

import React from 'react'
import axios from 'axios'
import { List, message, Avatar, Spin, Button } from 'antd';
import InfiniteScroll from 'react-infinite-scroller';
import { Link } from 'react-router-dom';
export class InfiniteListExample extends React.Component {
  state = {
    data: [],
    loading: false,
    hasMore: true,
    author:localStorage.getItem('author')
  };
  componentDidMount() {
    this.fetchData.then(res => {
      this.setState({
        data: res.list,
      });
    });
  }
  fetchData = axios.get('/api/blog/list').then(res => res.data
  )
  renderRow(item) {
  return (
    <div key={item.id} className="row">
      <div className="image">
      </div>
      <div className="content">
        <div>{item.title}</div>
        <div className='content'>{item.content.substring(0,100).concat('...')}</div>
        <div className='author'>by   {item.author}</div>
        <Button type="dashed"><Link to={`/detail?${item.id}`}>点击查看详情</Link></Button>
      </div>
    </div>
  );
}
  handleInfiniteOnLoad = () => {
    let { data } = this.state;
    this.setState({
      loading: true,
    });
    if (data.length > 14) {
      message.warning('Infinite List loaded all');
      this.setState({
        hasMore: false,
        loading: false,
      });
      return;
    }
    this.fetchData.then(res => {
      data = data.concat(res);
      this.setState({
        data,
        loading: false,
      });
    });
  };
  render() {
    return (
      <div className="demo-infinite-container">
        <InfiniteScroll
          initialLoad={false}
          pageStart={0}
          loadMore={this.handleInfiniteOnLoad}
          hasMore={!this.state.loading && this.state.hasMore}
          useWindow={false}
        >
          <div className="list">
        {this.state.data.map(this.renderRow.bind(this))}
      </div>
        </InfiniteScroll>
        <Button>  {this.state.author ? <Link to='new'>点击新增博客</Link> : '请先登入才能新增博客哦'} </Button>
      </div>
    );
  }
}

import React, { useState } from 'react'
import axios from 'axios'
import {Col,Row, Button, Alert} from 'antd'
import { Link } from 'react-router-dom';
export default function Detail() {
    let list = window.location.search.split('?');
    let id = list[1];
    const  Author = localStorage.getItem('author')
    const [author, setAuthor] = useState('');
    const [content, SetContent] = useState("");
    const [title, setTitle] = useState('')
    axios.get(`/api/blog/detail?id=${id}`).then(
      res => res.data
    ). then(res => {
       setAuthor(res.author)
      setTitle(res.title)
       SetContent(res.content)
   })
    const handleDel =()=>{
                axios(`/api/blog/del?id=${id}`).then(
            res=>res.data
        )
        .then(
               res=>{
                   if(res.success){
                       alert('删除成功')
                   }else{
                       alert('删除失败')
                   }
               }
            )
    }
    return (<div>
       <Row align='middle'justify='center'><h2 className="title">{title}</h2></Row> 
       <Row><div><span style={{
           color:'grey',
           fontSize:'12px'
       }}> write By {author}</span><span style={{
        color:'grey',
        fontSize:'12px'
    }}> </span></div></Row> 
    <br/>
    <br/>
        <div><p>{content}</p></div>
       <Button>{Author===author?<Link to={`/update?${id}`}>更新</Link>:''}</Button> 
        <br/>
         {Author===author?<Button onClick={handleDel}>删除 </Button>:<div></div>}
    </div>
    )
}

import React, { useState, useContext } from 'react'
import { Input,Button } from 'antd';
import axios from 'axios'
export default  function Update(){
    let list = window.location.search.split('?');
    let id = list[1];
    const { TextArea } = Input;
    const [title,SetTitle]=useState('')
    const [content,SetContent]=useState('')
    //  const [author,SetAuthor]=useState('')
     const author = localStorage.getItem('author')
    const HandleUpdate=()=>{
        axios(`/api/blog/update?id=${id}&title=${title}&content=${content}&author=${author}`,).then(res=>res.data
        ).then(res=>{
          // console.log(res)
            if(res){
                alert('更新成功')
            }
            else{
                alert('更新失败')
            }
        }
        )
    }
    return(
        <div> <Input onChange={e=>{SetTitle(e.target.value)}}  placeholder="请输入标题" />
         {/* <Input onChange={e=>{SetAuthor(e.target.value)}}  placeholder="请输入作者姓名" /> */}
        <TextArea onChange={e=>{SetContent(e.target.value)}} rows={4} placeholder='请输入内容'/>
       <Button onClick={HandleUpdate}>提交更新</Button></div>
    )}

import React, { useState, useContext } from 'react'
import { Input,Button } from 'antd';
import axios from 'axios'
export default  function New(){
    const { TextArea } = Input;
    const [title,SetTitle]=useState('')
    const [content,SetContent]=useState('')
    const author = localStorage.getItem('author')
    const HandleUpdate=()=>{
        axios(`/api/blog/new?title=${title}&content=${content}&author=${author}`).then(res=>
          res.data
        )
        .then(res=>{
             if(res.success){
                 alert('新增成功')
             }
             else{
                 alert('新增失败')
             }
         }
         )
    }
    return(
        <div> <Input onChange={e=>{SetTitle(e.target.value)}}  placeholder="请输入标题" />
        {/* <Input onChange={e=>{SetAuthor(e.target.value)}}  placeholder="请输入作者姓名" /> */}
        <TextArea onChange={e=>{SetContent(e.target.value)}} rows={4} placeholder='请输入内容'/>
       <Button onClick={HandleUpdate}>提交</Button></div>
    )}

import React, { useState } from 'react'
import { Alert } from 'antd'
export default  function Tea(){
    return(
     <div>
       <Alert
      message="请注意"
      description="不要发不良的信息呦!"
      type="info"
      showIcon
    />
    <br/>
        <h1>这个blog有很多不足</h1>
          <h1>但俺才快大二，有时间去升级和维护</h1>
        <h1>求大家点赞^ ^</h1></div>
    )}

npm run dev