前端初始化 —— 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信息

这里写图片描述

保存，在浏览器查看，没错，正如下图所示：
这里写图片描述

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

参考目录：

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

猜你喜欢