C/C++气象数据中心实战，手把手教你做工业级项目(源码齐全)

#1

C/C++气象数据中心实战，手把手教你做工业级项目(源码齐全)
超清原画 完整无密 包括所有视频课件以及源码 MP4格式
获取资料:网盘链接

完成一个 Code Pen:（一）项目初始化

前言

前段时间掘金上线了一个新功用 Code pen，能够在线写代码，阅读器就能够运转预览，在文章中就能够插入代码片段，对 web 开发者大有裨益，十分便当读者对文章的了解，笔者对这种在线实时编辑的功用充溢了猎奇，所以打算开发一个简易的 Code pen。

技术栈

  • Next.js
  • Tailwindcss
  • Uniapp 云数据库

初始化项目

运用以下命令初始化一个 next 项目

npx create-next-app next-code-pen
cd next-code-pen
复制代码

装置 tailwindcss 相关包，初始化 tailwind.config.js

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
复制代码

修正 tailwind.config.js 配置，将代码挪动到 src 目录下，这个是我的个人偏好

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
复制代码

页面构造

用 Tailwind 来完成一个页面

SVG 完成 LOGO

有个好的 logo 才干够开端一个好的项目

 <div className="flex justify-center items-center h-16 w-28">
    <svg
    className="w-10 h-10"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    >
    <path
        d="M512 341.33333336c0-94.4 76.8-171.2 171.2-171.2 94.4 0 171.2 76.8 171.2 171.2s-76.8 171.2-171.2 171.2C588.8 512.53333336 512 435.73333336 512 341.33333336z"
        fill="#FF3C41"
    ></path>
    <path
        d="M171.2 682.13333336c0-94.4 76.8-171.2 171.2-171.2H512v171.2C512 776.53333336 435.2 853.33333336 340.8 853.33333336s-169.6-76.8-169.6-171.2z"
        fill="#0EBEFF"
    ></path>
    <path
        d="M171.2 341.33333336c0 94.4 76.8 171.2 171.2 171.2H512V170.13333336H340.8c-94.4 0-169.6 76.8-169.6 171.2z"
        fill="#FCD000"
    ></path>
    <text
        fill="#fff"
        x="520"
        y="860"
        fontFamily="Verdana"
        fontSize="460"
    >
        +
    </text>
    </svg>
    <span className="ml2 text-gray-50">CODE</span>
</div>
复制代码

这个 logo 局部来源 figma ，后面再加一个 + ，意味着后我们能够从它开端一些五彩斑斓的项目。

页面主体局部

我们先装置 react-split-pane , 把我们的页面拆分红几块，分为HTML，CSS，JS，能够拖拽视窗大小，这个包依赖版本是 react16， 由于 react 是平滑晋级，所以能够强迫装置

npm i react-split-pane --force
复制代码

运用 react-split-pane ，初始化页面构造, react-split-pane 是将页面拆分红 2 块，若要拆分红 3 块的话，要运用 2 次。

<SplitPane defaultSize="50%" split="vertical">
    <SplitPane split="horizontal" defaultSize="33%">
        <div className="overflow-hidden flex flex-col w-full">
        </div>
    <SplitPane split="horizontal" defaultSize="50%">
        <div className="overflow-hidden flex flex-col  h-full w-full">
        </div>
        <div className="overflow-hidden flex flex-col h-full w-full">
        </div>
    </SplitPane>
    </SplitPane>
    <div className="bg-red-50 h-full overflow-hidden"></div>
</SplitPane>