「Serverless云开发72变」来左边跟我一起画个龙，右边跟我用AntV画个图

2020-11-09 9496

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 最近爱上了一个画图表的框架，antV，所以就想着利用阿里云云开发平台来学习一波这个好用的图表工具，在这里可以画出各种各样的美丽图标，在配合云开发平台十分方便的部署，学习起来真是太爽了！Serverless云开发支持两种开发方式，一种是在本地开发，开发完后打包项目，利用云开发平台的nodejs存量迁移进行部署；第二种是直接在云开发平台进行开发，所有写代码环节都在webIDE中进行，这篇文章主要对两种方式进行讲解。

利用云开发平台画图表

最近爱上了一个画图表的框架，antV，所以就想着利用阿里云云开发平台来学习一波这个好用的图表工具，在这里可以画出各种各样的美丽图标，在配合云开发平台十分方便的部署，学习起来真是太爽了

那么这就有两种开发方式：一种是在本地开发，开发完后打包项目，利用云开发平台的nodejs存量迁移进行部署；第二种是直接在云开发平台进行开发，所有写代码环节都在webIDE中进行，这篇文章主要对两种方式进行讲解

所用技术：云开发平台，react，antdV

开发前准备

首先要有一个阿里云账号，然后还需要开通阿里云云开发平台(http://workbench.aliyun.com/), 接着跟着我来一步一步来进行云上开发！

首先要创建一个项目，实验室 -> WEB -> Midway Serveless OTS ,(这里并没有用到OTS哦，只是用到了这个·方案生成的react模板)

然后给应用起个名字并添加一段介绍

点击上一步完成后会有一小段时间的项目初始化过程，然后会出现下图的开发部署四个字，点击开发部署

搜狗截图20201106022046.jpg

点击过后会打开webIDE，可能会慢一些，耐心等待。加载成功后就可以看到如下界面，到这一步就开始正式的开发了！

搜狗截图20201106022543.jpg

将项目跑起来

开发前首先要进行的就是安装依赖，照着README.md里的方法进行用npm+淘宝镜像安装

搜狗截图20201106022938.jpg

安装完成后，运行 npm run dev, 终端会给出一个临时地址，访问这个地址就可以看到这个项目默认的样子了

搜狗截图20201106022954.jpg

进行开发

我们不需要它自带的那个模板，我们将它自带的删掉，书写自己的代码

整个项目的依赖都有：

"@ant-design/charts": "^1.0.4",
"@antv/g2": "^4.0.15",
"@antv/g6": "^3.8.3",
"@antv/graphin": "^1.5.0",
"@antv/l7": "^2.2.41",
"@antv/l7-maps": "^2.2.41",
"antd": "^4.8.0",
"bizcharts": "^4.0.14",
"react-router-dom": "^5.2.0",

需要先将这些一来进行安装，安装方式和上面安装方式一样使用npm + 淘宝镜像的方式安装

然后书写我们的项目入口文件 index.tsx:

import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom';
import './index.css';
import { HashRouter  as Router, Route } from "react-router-dom";

import AdminIndex from './components/AdminIndex/index'

export default function App() {

  return (
    <Router>
      <div>
        <Route path="/" component={AdminIndex} />
      </div>


    </Router>
  )
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

在 index.css 引入antd的样式：

@import '~antd/dist/antd.css';

然后书写我们布局组件 AdminIndex ：

import React, { useState } from 'react';
import { Route } from "react-router-dom";

import './index.css'
import { Layout, Menu, Breadcrumb } from 'antd';

import {
  BarsOutlined,
  PlusCircleOutlined,
  BarChartOutlined,
  FormOutlined
} from '@ant-design/icons';

import G201 from '../G201/index'
import G202 from '../G202/index'

import G2Plot01 from '../G2Plot01/index'
import G2Plot02 from '../G2Plot02/index'
import G2Plot03 from '../G2Plot03/index'
import G2Plot04 from '../G2Plot04/index'

import G601 from '../G601/index'
import G602 from '../G602/index'

import Graphin01 from '../Graphin01/index'
import Graphin02 from '../Graphin02/index'
import Graphin03 from '../Graphin03/index'

// import L701 from '../L701/index'
import L702 from '../L702/index'

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

function AdminIndex(props) {

  const [collapsed, setCollapsed] = useState(false)
  const [url, setUrl] = useState('无')

  const onCollapse = () => {
    setCollapsed(!collapsed)
  }

  const handleClickArticle = e => {
    setUrl(e.key)

    switch (e.key) {
      case "G201":
        setUrl('G201')
        props.history.push('/G201')
        break
      case "G202":
        setUrl('G202')
        props.history.push('/G202')
        break
      case "G2Plot01":
        setUrl('G2Plot01')
        props.history.push('/G2Plot01')
        break
      case "G2Plot02":
        setUrl('G2Plot02')
        props.history.push('/G2Plot02')
        break
      case "G2Plot03":
        setUrl('G2Plot03')
        props.history.push('/G2Plot03')
        break
      case "G2Plot04":
        setUrl('G2Plot04')
        props.history.push('/G2Plot04')
        break
      case "G601":
        setUrl('G601')
        props.history.push('/G601')
        break
      case "G602":
        setUrl('G602')
        props.history.push('/G602')
        break
      case "Graphin01":
        setUrl('Graphin01')
        props.history.push('/Graphin01')
        break
      case "Graphin02":
        setUrl('Graphin02')
        props.history.push('/Graphin02')
        break
      case "Graphin03":
        setUrl('Graphin02')
        props.history.push('/Graphin03')
        break
      case "L701":
        setUrl('L701')
        props.history.push('/L701')
        break
      case "L702":
        setUrl('L702')
        props.history.push('/L702')
        break
    }


  }

  return (
    <Layout style={{ minHeight: '100vh' }} >
      <Sider collapsible collapsed={collapsed} onCollapse={onCollapse} style={{ position: "fixed", height: "100%" }}>
        <div className="logo" style={{ height: 32, backgroundColor: '#ffffff33', color: '#fff', margin: 16, textAlign: 'center', lineHeight: 2.2 }}>欢迎</div>
        <Menu theme="dark" defaultSelectedKeys={['Manager']} mode="inline" onClick={handleClickArticle}>
          <SubMenu key="sub1" icon={<BarsOutlined />} title="G2">
            <Menu.Item key="G201" icon={<PlusCircleOutlined />}>
              G201
            </Menu.Item>
            <Menu.Item key="G202" icon={<PlusCircleOutlined />}>
              G201
            </Menu.Item>
          </SubMenu>

          <SubMenu key="sub2" icon={<BarsOutlined />} title="G2Plot">
            <Menu.Item key="G2Plot01" icon={<PlusCircleOutlined />}>
              G2Plot01
            </Menu.Item>
            <Menu.Item key="G2Plot02" icon={<PlusCircleOutlined />}>
              G2Plot02
            </Menu.Item>
            <Menu.Item key="G2Plot03" icon={<PlusCircleOutlined />}>
              G2Plot03
            </Menu.Item>
            <Menu.Item key="G2Plot04" icon={<PlusCircleOutlined />}>
              G2Plot04
            </Menu.Item>
          </SubMenu>

          <SubMenu key="sub4" icon={<BarsOutlined />} title="Graphin">
            <Menu.Item key="Graphin01" icon={<PlusCircleOutlined />}>
              Graphin01
            </Menu.Item>
            <Menu.Item key="Graphin02" icon={<PlusCircleOutlined />}>
              Graphin02
            </Menu.Item>
            <Menu.Item key="Graphin03" icon={<PlusCircleOutlined />}>
              Graphin03
            </Menu.Item>
          </SubMenu>

        </Menu>
      </Sider>
      <Layout className="site-layout" style={{ marginLeft: 200 }}>
        <Header className="site-layout-background" style={{ padding: 0 }} >
          <div style={{ fontSize: 28, paddingLeft: 20, fontWeight: 'bold' }}>antdV</div>
        </Header>
        <Content style={{ margin: '0 16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>{url}</Breadcrumb.Item>
          </Breadcrumb>
          <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
            <div style={{ padding: 24, background: '#fff', minHeight: 450 }}>

              <div>
                <Route path="/G201" exact component={G201} />
                <Route path="/G202" exact component={G202} />
                <Route path="/G2Plot01" exact component={G2Plot01} />
                <Route path="/G2Plot02" exact component={G2Plot02} />
                <Route path="/G2Plot03" exact component={G2Plot03} />
                <Route path="/G2Plot04" exact component={G2Plot04} />
                <Route path="/G601" exact component={G601} />
                <Route path="/G602" exact component={G602} />
                <Route path="/Graphin01" exact component={Graphin01} />
                <Route path="/Graphin02" exact component={Graphin02} />
                <Route path="/Graphin03" exact component={Graphin03} />
                {/* <Route path="/L701" exact component={L701} /> */}
                <Route path="/L702" exact component={L702} />
              </div>

            </div>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>跌倒的小黄瓜 ©2020 Created by Aliyun Midway</Footer>
      </Layout>
    </Layout>
  )
}

export default AdminIndex

可以看到这里就是展现一个又一个组件，具体到每个组件我就放到github上了, (https://github.com/1793523411/serveless-antdv), 来看一下最终的效果吧