esxi8 绑定域名 esxi加入域

转载

mob6454cc7966b9 2024-08-15 17:12:56

文章标签 esxi8 绑定域名 vue js node.js ios 文章分类 架构后端开发

baseURL 请求地址的基准地址
headers 是对象

Authorization 字段
值： Bearer + 空格 + token

第一步：在src下新建目录api，在其下新建文件index.js

// 配置项目的axios,导出进行全局配置

// 基准地址
// axios.defaults.baseURL =
//     'http://10.88.155.43/tkweb-legal-platform/lumen/public/rest/'
import Vue from 'vue'
import axios from 'axios'
const config = {
    // baseURL在此处省略配置,考虑到项目可能由多人协作完成开发，域名也各不相同，此处通过对api的抽离，域名单独配置在base.js中

    // 请求超时时间
    timeout: 60 * 1000,
    // baseURL: 'http://10.88.155.43/tkweb-legal-platform/lumen/public/rest/',
    baseURL: 'api/',
    // 跨域请求时是否需要凭证
    // withCredentials: true, // Check cross-site Access-Control
    heards: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
        'Access-Control-Allow-Origin': '*'
    }
}

// 创建实例
const _axios = axios.create(config)
    // 请求拦截器
_axios.interceptors.request.use(
    function(config) {
        // 从vuex里获取token
        // const token = store.state.token
        //     // 如果token存在就在请求头里添加
        // token && (config.headers.token = token)
        return config
    },
    function(error) {
        // // Do something with request error
        // error.data = {}
        // error.data.msg = '服务器异常'
        return Promise.reject(error)
    }
)

// 响应拦截器
_axios.interceptors.response.use(
    function(response) {
        // 清除本地存储中的token,如果需要刷新token，在这里通过旧的token跟服务器换新token，将新的token设置的vuex中
        //    if(response.data.code===401){
        //      localStorage.removeItem("token");
        //    }
        // 只返回response中的data数据
        return response.data
    },
    function(error) {
        if (error) {
            // 请求已发出，但不在2xx范围内
            //  errorHandle(error.status,error.data.msg);
            return Promise.reject(error)
        } else {
            // 断网
            return Promise.reject(error)
        }
    }
)

/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
const get = (url, data = {}) => {
    return new Promise((resolve, reject) => {
        _axios.get(url, data).then(
            response => {
                resolve(response)
            },
            err => {
                reject(err)
            }
        )
    })
}

export default {
    get
}

第二步：在页面指定位置处-src/views/welcome/index.vue，进行axios配置

<template>
  <div class="container">
    <el-card class="car-img">
      <el-input
        placeholder="小智一下，搜你所想"
        v-model="input"
        suffix-icon="el-icon-search"
        clearable
      ></el-input>
    </el-card>
    <el-card class="car-lef" body-style="padding:0px">
      <div class="a">
        <div class="a-a">
          <span class="spa">个性推荐</span>
          <span class="spb">RECOMMEND</span>
          <div class="spc">
            <span class="spd">查看详情</span>
            <img src="../../assets/images/rig.png" alt />
          </div>
        </div>
        <div class="c-b">
          <dl>
            <dt class="spa">
              你好，委托资产业务部的无敌，小智为你推荐一下内容
            </dt>
            <dt>关于专户信息披露的合规法律意见</dt>
            <dt class="spc">产品宣传推介材料及信息披露合规法律审核指引</dt>
          </dl>
        </div>
      </div>
      <div class="b">
        <div class="b-a">
          <span class="spa">最近更新</span>
          <span class="spb">LATELY</span>
          <div class="spc">
            <span class="spd">查看更多</span>
            <img src="../../assets/images/rig.png" alt />
          </div>
        </div>
        <div class="b-b">
          <dl>
            <dt>2019年5月资产管理业务监管动态月报</dt>
            <dt>股权投资顾问服务协议</dt>
            <dt>年金计划更名-变更存款证实书</dt>
          </dl>
        </div>
      </div>
      <div class="c">
        <div class="c-a">
          <span class="spa">最热问题</span>
          <span class="spb">HOT</span>
          <div class="spc">
            <span class="spd">换一批</span>
            <img src="../../assets/images/cha.png" alt />
          </div>
        </div>
        <div class="c-b">
          <dl>
            <dt>同业存单可否归入流动性资产？</dt>
            <dt>保险资金能否投资QDII基金？</dt>
            <dt>保险资金能否投资新三板股票？问题最长字数…</dt>
          </dl>
        </div>
      </div>
    </el-card>
    <el-card class="car-rig" body-style="padding:0px">
      <div class="d">
        <div class="block">
          <!-- <span class="demonstration">默认 Hover 指示器触发</span> -->
          <el-carousel height="336px" indicator-position="outside">
            <!-- <el-carousel-item v-for="item in 4" :key="item"> -->
            <!-- <h3 class="small">{{ item }}</h3> -->
            <el-carousel-item v-for="item in imagesbox" :key="item.id">
              <img :src="item.idView" class="image" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="f">
        <div class="f-a">
          <span class="spa">联系合规伙伴</span>
          <span class="spb">CONTACT</span>
          <div class="spc">
            <span class="spd">换一批</span>
            <img src="../../assets/images/cha.png" alt />
          </div>
        </div>
        <div class="f-b">
          <div class="fb-lef">
            <img src="../../assets/images/boy.png" alt />
            <div class="spc">
              <dl>
                <dd class="spa">肖泰悦</dd>
                <dd class="spb">459-35727535</dd>
              </dl>
            </div>
          </div>
          <div class="fb-rig">
            <img src="../../assets/images/girl.png" alt />
            <div class="spc">
              <dl>
                <dd class="spa">娄巧</dd>
                <dd class="spb">15051983967</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
      
+     //调接口位置-重复使用，可单独封装成组件 
      <div class="g">
        <div>
          <div class="g-a">
            <span class="spa">常用链接</span>
            <span class="spb">LINK</span>
+            <div class="spc" @click="handleChange">
+              <span class="spd">换一批</span>
+              <img src="../../assets/images/cha.png" alt />
+            </div>
          </div>
        </div>
        <div class="g-b">
          <!-- <div class="spa"> -->
          <dl>
            <dt v-for="(item, index) in overLink" :key="index">
              <a :href="item.url">{{ item.name }}</a>
            </dt>
          </dl>

          <!-- </div> -->
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
+ // 引入axios
+ import axios from 'axios'
export default {
  data() {
    return {
      input: '',
      imagesbox: [
        { id: 0, idView: require('../../assets/images/zc.png') },
        { id: 1, idView: require('../../assets/images/zc.png') },
        { id: 2, idView: require('../../assets/images/zc.png') }
      ],
+      linkList: [
+        '赵',
+        '钱',
+        '孙',
+        '李',
+        '周',
+        '吴',
+        '郑',
+        '王',
+        '冯',
+        '陈',
+        '蜀',
+        '魏'
+      ],
+      overLink: [],
+      globalNum: 0
    }
  },
+  created() {
+    this.getLinkList()
+  },
  methods: {
+    getLinkList() {
+      // 测试接口
+      console.log('开始请求')
+      this.$http
+        .get('random')
+        .then(res => {
+          console.log(res)
+          this.linkList = res.data.links
+          this.handleChange()
+        })
+        .catch(err => {
+          console.log(err)
+        })
+      // axios.get('').then(res=>{

+      // })
+    },
+    changeList(arr, colomns) {
+      let len = arr.length
+      let result = []
+      if (len <= colomns) {
+        result.push(arr)
+        return result
+      }
+      for (let i = 0; i < arr.length; i += colomns) {
+        result.push(arr.slice(i, i + colomns))
+      }
+      return result
+    },
    
+   //点击事件-换一批
+    handleChange() {
+      //console.log(this.globalNum())
+      let result = this.changeList(this.linkList, 6)
+      if (this.globalNum > result.length - 1) {
+        this.globalNum = 0

+        this.overLink = result[this.globalNum]
+      } else {
+        this.overLink = result[this.globalNum]
+        this.globalNum++
+      }
+    }
  }
}
</script>
<style scoped lang="less">
.car-img {
  width: 1180px;
  height: 200px;
  background: url('../../assets/images/map.png');
  .el-input {
    float: right;
    width: 367px;
    height: 48px;
    margin-right: 100px;
    margin-top: 56px;
    .suffix-icon {
      width: 28px;
      height: 28px;
      vertical-align: middle;
    }
  }
}
.car-lef {
  position: absolute;
  width: 380px;
  height: 540px;
  padding-top: 20px;
  background: #fafafa;

  .a {
    padding-right: 20px;
    padding-left: 20px;
    height: 164px;
    background: #ffffff;
    // background: red;
    padding-bottom: 20px;
    padding-top: 20px;
    .a-a {
      margin-top: 16px;
      height: 22px;
      line-height: 22px;
      .spa {
        font-size: 18px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
        font-weight: bold;
      }
      .spb {
        // display: block;
        margin-left: 4px;
        font-size: 20px;
        color: #e7ebef;
        line-height: 20px;
      }
      .spc {
        float: right;
        .spd {
          font-size: 14px;
          color: #666666;
          text-align: right;
        }
        img {
          width: 14px;
          height: 14px;
          vertical-align: middle;
          margin-left: 1.7px;
        }
      }
    }
    dl {
      float: left;
      width: 340px;
      dt {
        font-size: 16px;
        padding-top: 16px;
      }
      .spa {
        font-size: 14px;
        color: #999999;
        line-height: 18px;
      }
      .spc {
        font-size: 16px;
        color: #1890ff;
      }
    }
  }
  .b {
    padding-right: 20px;
    padding-left: 20px;
    height: 168px;
    // background: green;
    background: #ffffff;
    padding-bottom: 20px;
    .b-a {
      margin-top: 16px;
      height: 22px;
      line-height: 22px;
      .spa {
        font-size: 18px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
        font-weight: bold;
      }
      .spb {
        // display: block;
        margin-left: 4px;
        font-size: 20px;
        color: #e7ebef;
        line-height: 20px;
      }
      .spc {
        float: right;
        .spd {
          font-size: 14px;
          color: #666666;
          text-align: right;
        }
        img {
          width: 14px;
          height: 14px;
          vertical-align: middle;
          margin-left: 1.7px;
        }
      }
    }
    dl {
      float: left;
      width: 340px;
      dt {
        font-size: 16px;
        padding-top: 16px;
      }
    }
  }
  .c {
    padding-right: 20px;
    padding-left: 20px;
    height: 168px;
    // background: blue;
    background: #ffffff;
    .c-a {
      margin-top: 16px;
      height: 22px;
      line-height: 22px;
      .spa {
        font-size: 18px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
        font-weight: bold;
      }
      .spb {
        // display: block;
        margin-left: 4px;
        font-size: 20px;
        color: #e7ebef;
        line-height: 20px;
      }
      .spc {
        float: right;
        .spd {
          font-size: 14px;
          color: #666666;
          text-align: right;
        }
        img {
          width: 14px;
          height: 14px;
          vertical-align: middle;
          margin-left: 7px;
        }
      }
    }
    dl {
      float: left;
      width: 340px;
      dt {
        font-size: 16px;
        padding-top: 16px;
      }
    }
  }
}
.car-rig {
  // float: right;
  position: relative;
  left: 400px;
  width: 780px;
  height: 540px;
  margin-top: 20px;
  .d {
    height: 394px;
    // background: green;
    // margin-bottom: 20px;
    padding: 20px;
  }
  .el-carousel__item h3 {
    color: red;
    font-size: 14px;
    opacity: 0.75;
    // line-height: 150px;
    margin: 0;
  }
  .image {
    width: 740px;
    height: 336px;
  }
  .el-carousel__button {
    width: 32px;
    height: 6px;
    border-radius: 4px;
    border-radius: 4px;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }

  .f {
    width: 380px;
    // background: red;
    position: absolute;
    height: 126px;
    // background: #ffffff;
    .f-a {
      // margin-top: 16px;
      margin: 0px 10px 12px 20px;
      height: 22px;
      line-height: 22px;
      .spa {
        font-size: 18px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
        font-weight: bold;
      }
      .spb {
        // display: block;
        margin-left: 4px;
        font-size: 20px;
        color: #e7ebef;
        line-height: 20px;
      }
      .spc {
        float: right;
        .spd {
          font-size: 14px;
          color: #666666;
          text-align: right;
        }
        img {
          width: 14px;
          height: 14px;
          vertical-align: middle;
          margin-left: 7px;
        }
      }
    }
    .f-b {
      height: 60px;
      width: 360px;
      margin: 0px 10px 16px 10px;
      .fb-lef {
        background: #edf6ff;
        float: left;
        height: 60px;
        width: 170px;
        // vertical-align: middle;
        img {
          float: left;
          width: 40px;
          height: 40px;
          margin: 10px 8px 10px 10px;
        }
        .spc {
          // float: right;
          vertical-align: middle;
          // background: green;
          // height: 40px;
          dl .spa {
            font-size: 14px;
            color: #333333;
            line-height: 18px;
            // vertical-align: middle;
          }
          dl .spb {
            font-size: 12px;
            color: #666666;
            line-height: 14px;
          }
        }
      }
      .fb-rig {
        float: right;
        // background: #edf6ff;
        height: 60px;
        width: 170px;
        img {
          float: left;
          width: 40px;
          height: 40px;
          margin: 10px 8px 10px 0px;
        }
        .spc {
          vertical-align: middle;
          // height: 40px;
          .spa {
            font-size: 14px;
            color: #333333;
            line-height: 18px;
            // vertical-align: middle;
          }
          .spb {
            font-size: 12px;
            color: #666666;
            line-height: 14px;
          }
        }
      }
    }
  }
  .g {
    position: relative;
    width: 380px;
    left: 400px;
    // background: red;
    height: 126px;
    .g-a {
      // margin-top: 16px;
      margin: 0px 10px 4px 20px;
      height: 22px;
      line-height: 22px;
      .spa {
        font-size: 18px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
        font-weight: bold;
      }
      .spb {
        // display: block;
        margin-left: 4px;
        font-size: 20px;
        color: #e7ebef;
        line-height: 20px;
      }
      .spc {
        float: right;
        .spd {
          font-size: 14px;
          color: #666666;
          text-align: right;
        }
        img {
          width: 14px;
          height: 14px;
          vertical-align: middle;
          margin-left: 7px;
        }
      }
    }
    .g-b {
      height: 60px;
      width: 340px;
      margin: 0px 20px 16px 20px;
      padding-top: 0px;
    }
    .g-b dl {
      // padding-top: 0px;
      float: left;
      color: #666666;
      width: 113.3px;
    }
    .g-b dl dt {
      font-size: 14px;
      line-height: 16px;
      padding-bottom: 16px;
    }
    .g-b dl dd {
      margin-left: 0px;
      font-size: 14px;

      // padding-top: 16px;
      line-height: 16px;
    }
    .spa {
      color: #1890ff;
    }
  }
}
</style>

在百度输入——开源api，选择其中一个

如：天气预报api-http://zhouxunwang.cn/api_a.php?id=7

天气预报接口：http://zhouxunwang.cn/data/?id=7&key=R5RTF4G5F5H6&name=shandong

配置跨域

第三步：在src的同层级目录下，新建文件vue.config.js

// vue.config.js
module.exports = {
    lintOnSave: false,
    devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        //以上的ip和端口是我们本机的;下面为需要跨域的
        proxy: {
            //配置跨域
            '/api': {
                // target: 'http://10.88.155.43/tkweb-legal-platform/lumen/public/rest/', //这里后台的地址模拟的;应该填写你们真实的后台接口
                target: 'http://localhost:3000/', //这里后台的地址模拟的;应该填写你们真实的后台接口
                ws: true,
                changOrigin: true, //允许跨域
                pathRewrite: {
                    '^/api': '' //请求的时候使用这个api就可以
                }
            }
        }
    }
}

express-模拟跨域-基于node

官网：https://www.expressjs.com.cn/

官网——>快速入手

第四步：在vscode中点击项目文件夹，同时点击"Ctrl+上引号`"，打开命令行

输入：

npm i 或 cnpm init -y

第五步：在src同层级目录下，新建目录server，在其下新建文件index.js

var express = require('express')
var app = express()

app.get('/random', function(req, res) {
    res.json({ result: 'hello world' })
})

app.listen(3000, function() {
    console.log('App started on port 3000')
})

第六步：切换目录

继续输入：

cd server

第七步：下载express包

继续输入：

cnpm i express

第八步：启动node项目命令，验证跨域，接口数据是否显示

node index.js

第九步：启动node项目命令后，重启项目

npm run serve

F12打开控制台，点击Network——>XHR——>点击下方的random，右侧——验证跨域，接口数据是否显示

esxi8 绑定域名 esxi加入域_vue

main.js中

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

import router from './router'
import store from './store'

// 简单配置axios
import server from '@/api'
Vue.prototype.$http = server

Vue.config.productionTip = false

Vue.use(ElementUI)

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。