前端初始化 —— Go（全栈）开发企业级后台管理系统

Abstract：

之前在从事VR（VirtualReality[虚拟现实]）相关的工作时，有句话印象特别深刻——人是视觉动物。所以，一个美观、漂亮、大方的前端页面是必不可少的，所以在本项目中，博主为了让大家看此系列文章的时候不至于恶心到吐，能让大家有个轻松，预约的心情，特意筛选了一套工具，基于Antd（An
Ui Design Language）实现的前端系统，项目原地址在这里：https://pro.ant.design/.
强烈建议大家读读官方的文档，一个非常不错的工具，应该说是众多前端开发人员的福利。

显示如下所示：

3D模型展示:

Echarts显示：

 Ok，看完上面三幅图片，相信你已经意识到，我们这个项目肯定会是一个美观的项目了，那么接下来，需要做的事情就是跟着博主，一步步实现此系统，让你在开发的道路上越来越自信，越来越熟练，越来越帅，走的越来越远！ 前面提到我们要用到ant-design-pro所以，我们首先根据官方指引初始化我们的项目。

我们采用官方提供的第二种方式—使用命令行工具安装：

  npm install ant-design-pro-cli -g  mkdir  adminsystem.  && cd adminsystem  pro new

  至此我们的前端项目就算是初始化ok了，接下来就是运行此前端代码，查看我们初始化之后的项目：安装必要的包，主要是package.json里面列举的包, 在项目路径下执行:  npm install启动项目:   npm  start.   显示如下说明启动已经成功，访问: http://localhost:8000/.   就可以看到初始化的界面了。

  你是不是看到浏览器里面的界面很好看？嗯，是的，确实很好看！ 但这些数据都是构造的一些伪数据，是一个静态的页面，并没有什么卵用，所以接下来我们要给此项目瘦身，让其成为我们想要的样子，或者是一个最基本的样子，我们一步步添加功能。  既然要给项目瘦身，所以我们需要熟悉项目结构，理清每个文件在代码中的作用，把我们不需要的代码先移除掉，然后添加我们想要的内容。

代码结构：

以上为代码的目录结构以及对应的功能列表。
接下来我们再看看初始化的界面功能显示列表：

• Dashboard
  
  • Analytic 分析页面
  • Monitor 监控页面
  • Workspace 工作台
• Form
  
  • Basic Form 基础表单
  • Step Form 分步表单
  • Advanced From 高级表单
• List
  
  • Standard Table 查询表格
  • Standard List 标准列表
  • Card List 卡片列表
  • Search List (Project/Applications/Article) 搜索列表
• Profile
  
  • Simple Profile 基础详情页
  • Advanced Profile 高级详情页
• Result 结果页
  
  • Success
  • Failed
• Exception 异常页面
  
  • 403
  • 404
  • 500
• User 用户账号
  
  • Login
  • Register
  • Register Result

   当然了，看了这些功能之后，发现有些确实是我们需要的，但是并不是按照我们想要的方式展示。所以，索性我们都给干掉，保留一个最基础的Hello World页面，然后我们一步步按照自己的需求来搭建我们自己的项目。由于整个项目中public下面的index.html为项目的入口，所以我们首先修改此文件:

<title>企业后台管理系统</title>

初步设计我们的页面有以下目录：

• 首页
• 工作台
• 文献管理
• 项目
• 文档
• 帮助

 对应需要修改代码，通过阅读代码我们发现，控制左侧显示菜单的代码路径为：  | ——src         |——common             |——nav.js 修改此文件为我们想要的样子：具体代码如下，原先的代码可以注释掉或者直接删掉。

const data = [{    component: BasicLayout,    layout: 'BasicLayout',    name: '首页', // for breadcrumb    path: '',    children: [{        name: '首页',        icon: 'home',        path: '',        component: "",        },{        name: "工作台",        icon: "laptop",        path: "workstage",        component: "",        },{        name: "文献管理",        icon: "folder-open",        path: "article",        component: "",        },{        name: "项目",        icon: "global",        path: "project",        component: ""        },{        name: "文档",        icon: "file",        path: "file",        component: "",        },{        name: "帮助",        icon: "info-circle",        path: "help",        component: ""        }    ],}];

修改完之后npm start 在浏览器里面查看如下所示：

接下来我们需要需要修改几处地方，让网站更像自己的网站而不是拿来的模版。 首先修改网站名称以及网站底部信息：
从上面的修改nav.js文件中，我们可以看到BasicLayout这个文件具体地址：

| ——src        |——layouts            |——BasicLayout.js

修改此文件，将【Antd Design Pro】 更换为【企业后台管理系统】

修改copyright为你想要的copyright信息

保存，在浏览器查看，没错，正如下图所示：

至此，我们的前端项目初始化算是告一段落啦，你可以喝杯咖啡，听首音乐，等待下一阶段的教程了。

参考目录：

• https://ant.design/index-cn
• https://pro.ant.design/docs/getting-started-cn89