老样子Vue前端axios发起请求

至于为什么老是Vue,表示我前端只会用Vue。React牛逼，我用Vue。

config: {
  Hostname: 'abc',
  Domainname: "hehe",
  Image: "nginx",
  ExposedPorts: {
    "80/tcp": {}
  },
  HostConfig: {
    PortBindings: {
      "80/tcp": [{HostPort: "12100"}]
    }
  },
}
复制代码

这边我启动的容器是nginx，配置我都写死了（图省事），“80/tcp”加了引号，不加语法检测不过，加了不碍事因为最终还是会转化成json字符串。

• Hostname启动的容器主机名
• Domainname 域名，没搞懂用处（一开始我认为是容器别名，然而不是）
• Image容器使用的镜像
• ExposedPorts容器内部开放的端口
• PortBindings容器内部端口与宿主机端口绑定

创建按钮事件

tianjia() {
    axios.dockerApi.post('/containers/create',JSON.stringify(this.config))
    .then( res => {
        if(res.status==201) {
          this.$message({
            message: '容器创建成功！',
            type: 'success'
          })
        }
        console.log(res.data)
      }
    ) 
},
复制代码

这边就是创建请求了，为了docker api的请求我特意新建了一个axios的实例。

// 用于请求docker的axios实例
const dockerApi = new axios.create({
  baseURL: '/api',
  timeout: 60000,
  headers: {'Content-Type': 'application/json; charset=UTF-8'}
}) 
复制代码

headers的设置很重要，不然post的json发不过去。axios请求存在跨域，所以我简单设置了proxy前端代理'/api'。

前端ok,就可以发起请求了。

服务器那边docker怎么设置http请求这边不谈了，自行查找。 创建成功docker服务会返回给前端201的状态码。

服务器执行docker ps -a 就能看到刚才创建的容器了，只是此时的状态是created并没有真正启动，docker start [id]启动容器，再docker ps 就能看到启动中的容器了。

容器的名称还是随机的名称，没找到哪个参数是设置容器名的，有知道的可以告诉我一下。

最后值得注意的是不同的docker版本api存在差异，请认准你的docker版本。docker api地址

最近完善了下容器的创建，附完整代码

<template>
  <div>
    <div class="head">
      <div class="text">容器创建</div>
    </div>
    <div class="form">
      <el-form label-position="left" label-width="100px">
        <el-col :span="12">
          <el-form-item label="选择服务器:">
            <el-select v-model="form.Channel" placeholder="请选择服务器" class="select">
              <el-option
                v-for="item in serverList"
                :key="item.Id"
                :label="item.ChannelName"
                :value="item.ChannelName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="选择镜像:">
            <el-select v-model="config.Image" placeholder="请选择镜像" class="select">
              <el-option
                v-for="(item,index) in images"
                :key="index"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="区服名称:">
            <el-input v-model="form.Area" style="width: 220px;"></el-input>
          </el-form-item>  
        </el-col> 

        <el-col :span="12">
          <el-form-item label="容器名称:">
            <el-input v-model="form.Name" style="width: 220px;"></el-input>
          </el-form-item>  
        </el-col> 

        <el-col :span="12">
          <el-form-item label="端口1填写:">
            <el-input v-model="form.Port1" style="width: 220px;"></el-input>
          </el-form-item>  
        </el-col> 
        <el-col :span="12">
          <el-form-item label="端口2填写:">
            <el-input v-model="form.Port2" style="width: 220px;"></el-input>
          </el-form-item>  
        </el-col> 
      </el-form>

      <el-col :span="24">
        <el-button style="margin-top:30px;" @click="create"><strong>确定创建</strong></el-button>
      </el-col>
    </div>
  </div>
</template>

<script>
import axios from '../../http'
  export default {
    data() {
      return {
        form: {
          Name: '',
          Channel: '',
          Area: '',
          Port1: '',
          Port2: '',
        },        
        images: [],
        serverList: [],
        config: {
          Domainname: '123',
          Image: '',
          ExposedPorts: {
            "10000/tcp": {},
            "10001/tcp": {},
          },
          HostConfig: {
            "Binds": [
              "/data/bs/mir:/data",
              "/data/bs/mir/json/private/server_1.json:/data/json/private/server.json"
            ],
            PortBindings: {
              "10000/tcp": [{HostPort: ''}],
              "10001/tcp": [{HostPort: ''}],
            }
          },
        }
      }
    },

    mounted() {
      axios.dockerApi.get('/images/json').then( res => {
        for(let i=0;i<res.data.length;i++) {
          let index = res.data[i].RepoTags[0].indexOf(':')
          this.images.push({name: res.data[i].RepoTags[0].substring(0,index)})
        }
      }) 
    },

    methods: {
      create() {
        this.config.HostConfig.PortBindings["10000/tcp"][0].HostPort = this.form.Port1
        this.config.HostConfig.PortBindings["10001/tcp"][0].HostPort = this.form.Port2
        axios.dockerApi.post('/containers/create?name='+this.form.Name,JSON.stringify(this.config))
        .then( 
          res => {
            if(res.status==201) {
              this.$message({
                message: '容器创建成功！',
                type: 'success'
              })
            }
          }
        )
        .catch(err => {this.$message.error('创建失败！')}) 
      },
    }
  }
</script>

<style scoped>
.head{
  background-color: rgb(120, 144, 156);
  height: 80px;
}
.form{
  margin: 0;
  padding: 40px;
  background-color: rgb(38, 166, 154);
  height: 260px;
}
.text{
  margin: 20px;
  float: left;
  font-size: 24px;
  font-weight: bold;
}
.select{
  margin-bottom: 0px;
}
</style>
复制代码

同时我也解决了给容器名命名的问题，仔细阅读官方文档发现要给容器命名必须使用url传参的方式，也就是我下面的代码：

axios.dockerApi.post('/containers/create?name='+this.form.Name,JSON.stringify(this.config))
复制代码