Vue - 配置 Elementui 和 axios

项目结构

package.json

{
  "name": "rancherapi-with-wssh",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "element-ui": "^2.13.2",
    "vue": "^2.6.11",
    "vue-axios": "^2.1.5",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

// axios start
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios);

// axios end

//element ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
//elementui

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

使用

<template>
    <div>
        <div class="exp-control">
            <el-input v-show="!isStartedExp" v-model="stuno" type="text" value="sunwu"
                      placeholder="请输入身份标识符"></el-input>
            <el-button type="primary" @click="startExp" v-show="!isStartedExp">开始实验</el-button>
        </div>
        <div class="exp-panel" v-show="isStartedExp">
            <h1>实验进行中(学生身份：{{stuno}})</h1>
            <h5 style="color: red;">做完实验之后记得提交呀</h5>
            <div class="sw-box">
                <h3>我是实验哟</h3>
                <iframe height="1000px" width="99%" src="https://www.yuque.com/gsunwu/blog/gimrey"
                        frameborder="0"></iframe>
            </div>
            <div v-if="isStartedExp" class="sw-box">
                <h3>我是 ssh 咯</h3>

                <iframe ref="sshd" id="sshiframe"
                        height="1000px"
                        width="99%"
                        :src="sshinfo"
                        frameborder="0"></iframe>
            </div>
        </div>

    </div>
</template>

<script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'
    import {HTTP} from "../api/api";
    import {config} from "../config";

    export default {
        name: 'Home',
        components: {},
        data() {
            return {
                isStartedExp: false,
                sshinfo: null,
                stuno: null
            }
        },
        created() {

        },
        methods: {
            startExp() {
                let _this = this;
                this.isStartedExp = true;
                const loading = this.$loading({
                    lock: true,
                    text: '初始化实验环境，请稍后...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                console.log(config.apiServer);
                this.axios.get(`${config.apiServer}/install/${_this.stuno}`).then(function (response) {
                    var res = response.data;
                    if (res['type'] === "sshd") {
                        var ip = (res.data.ip);
                        var port = (res.data.port);
                        var wsshServer = config.wsshServer
                        var ssh = `http://${wsshServer}/?hostname=${ip}&port=${port}&username=root&password=cm9vdA==`;
                        console.log(ssh);
                        _this.sshinfo = ssh;
                        loading.setText("环境初始化成功，初始化ssh");
                        _this.isStartedExp = true;
                        setTimeout(() => {
                            _this.$refs.sshd.src = null
                            _this.$refs.sshd.src = ssh
                            loading.close()
                        }, 3000)
                    } else {
                        console.log("err");
                    }
                })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    }
</script>

<style>
    .sw-box {
        border: 1px solid red;
        height: 400px;
        width: 45%;
        float: left;
        margin: 2%;
    }
</style>

config.js

export const config={
    wsshServer:"192.168.101.112:10030", //wssh 的服务器
    apiServer: "http://127.0.0.1:5000" // 我自己写的那个服务器，用来一键安装的那个
}