写在前面：D2Admin是一款优雅的中后台集成开源方案，但后端在起步时可能会遇到些许困难。这篇文章可能会帮助你解决从clone代码到部署自己的后台界面遇到的众多问题。包括但不限于修改logo和标题、添加界面、跨域、请求后端API等问题。

新建页面

首先需要安装运行环境，详见https://fairyever.com/d2-admin/doc/zh/learn-guide/getting-started.html#%E5%AE%89%E8%A3%85%E7%8E%AF%E5%A2%83

在下载D2Admin源码时，建议完整版和简化起始模板都下载下来。因为将完整版修改成适合我们自己的后台太麻烦，最好就是将完整版的符合我们需求的单个模板复制到简化版里构造整合出最适合我们的方案。

在上面的快速上手介绍中说明怎样添加一个新的界面。有点不同的是这个快速上手是在srcpages里新建页面文件，其实在简化版里并没有./pages这个路径，而是已经存在在srcviewsdemo路径里。

修改logo

logo都存在pubilc路径下，左上角的logo存在publicimagethemetomorrow-night-bluelogoall.png中，我们在选择logo时要选择png格式的图片。首页的文件在srcviewssystemindexcomponentsd2-page-coverindex.vue里，小图标在publicicon.ico中。

顶栏&侧边栏

路径srcmenu

// 参考上面的界面
// 侧边栏
export default [
  // 菜单
  { path: '/index', title: '首页', icon: 'home' },
  {
    title: '管理员',
    icon: 'folder-o',
    children: [
      // 子菜单
      { path: '/page1', title: '管理员' },
      { path: '/page2', title: '管理员审核' },
      { path: '/page3', title: '添加管理员' }
    ]
  },
  {
    title: '宿舍楼',
    icon: 'folder-o',
    children: [
      { path: '/page4', title: '已创建宿舍楼' },
      { path: '/page5', title: '创建宿舍楼' },
      { path: '/page6', title: '宿舍楼信息' }
    ]
  }
]

表格

对于后台管理来说用到的表格较多

//示例代码
<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  title: '基础表格',
  index: 1,
  data () {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  }
}
</script>

<template>中tableData对应<script>中的tableData。date、name、address也都是一一对应的。

请求后端API

下面是我们请求后端的代码，使用axios

//我们的代码
<template>
  <el-table
    :data="list"
    height="400"
    border
    style="width: 100%">
    <el-table-column
      prop="account"
      label="账号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="admin_name"
      label="姓名"
      width="160">
    </el-table-column>
    <el-table-column
      prop="admin_phone"
      label="联系方式"
      width="180">
    </el-table-column>
    <el-table-column
      prop="build_num"
      label="管理宿舍楼"
      width="180">
    </el-table-column>
    <el-table-column
      prop="password"
      label="密码"
      width="180">
    </el-table-column>
    <el-table-column
      prop="school"
      label="学校">
    </el-table-column>
  </el-table>
</template>

<script>
// 请求后端API代码
import Axios from 'axios'
export default {
  title: '管理员',
  data(){
    return{
      list:[]
    }
  },
  // 加载即执行
  mounted() {
    this.getData()
  },
  methods: {
    getData(){
      var api='http://localhost:8091/showadmin'
      Axios.get(api)
    
    .then(res => {
      //返回数据，需要注意的是Admin这个变量是后端传输过来的切片变量名
      this.list=res.data.Admin;
    })
    .catch(err => {
      //异常情况
      console.log(err);
    })
    }
  }
}
</script>

跨域

请求后端时可能会出现报错No 'Access-Control-Allow-Origin' header is present on the requested resource'，这是因为浏览器的跨域问题，建议从后端解决，在向前端传输数据时设置http请求头。

// 将前端请求数据以json形式返回的代码
// struct change to json
jsonstr, err := json.Marshal(admingather)
if err != nil {
    fmt.Println(err)
}
// send to front
var a json.RawMessage
a = jsonstr
b, _ := a.MarshalJSON()
w.Header().Set("Content-Length", strconv.Itoa(len(b)))
// set http header 'Access-Control-Allow-Origin'
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Write(b)

这是我们请求获得的后端数据，以json类型进行数据传输

后端json结构体信息

//Admin 管理员信息
type AdminOne struct {
    Account     string `json:"account"`
    Admin_name  string `json:"admin_name"`
    Password    string `json:"password"`
    Admin_Phone string `json:"admin_phone"`
    School      string `json:"school"`
    Build_num   string `json:"build_num"`
}

type AdminGather struct {
    Admin []AdminOne
}

可以发现account,admin_name,password等在<template>里的prop、前端获得的json数组和后端的json结构的是相等且对应的。

至此我们就完成了D2Admin的基本使用