mirror of
https://github.com/gl-inet/glkvm-cloud.git
synced 2026-09-23 19:16:18 +00:00
vue: in debug...
Signed-off-by: Jianhui Zhao <jianhuizhao329@gmail.com>
This commit is contained in:
Jianhui Zhao
+6
-1
@@ -10,7 +10,12 @@
|
||||
"build": "node build/build.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.5.2"
|
||||
"iview": "^2.8.0",
|
||||
"js-base64": "^2.4.1",
|
||||
"simple-websocket": "^5.1.0",
|
||||
"vue": "^2.5.2",
|
||||
"vue-router": "^3.0.1",
|
||||
"xterm": "^3.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^7.1.2",
|
||||
|
||||
+13
-22
@@ -1,28 +1,19 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<img src="./assets/logo.png">
|
||||
<HelloWorld/>
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
HelloWorld
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
</style>
|
||||
html,body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f0f0f0;
|
||||
overflow: hidden;
|
||||
}
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>>
|
||||
|
||||
|
||||
@@ -1,113 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<h2>Essential Links</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://vuejs.org"
|
||||
target="_blank"
|
||||
>
|
||||
Core Docs
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://forum.vuejs.org"
|
||||
target="_blank"
|
||||
>
|
||||
Forum
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://chat.vuejs.org"
|
||||
target="_blank"
|
||||
>
|
||||
Community Chat
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://twitter.com/vuejs"
|
||||
target="_blank"
|
||||
>
|
||||
Twitter
|
||||
</a>
|
||||
</li>
|
||||
<br>
|
||||
<li>
|
||||
<a
|
||||
href="http://vuejs-templates.github.io/webpack/"
|
||||
target="_blank"
|
||||
>
|
||||
Docs for This Template
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Ecosystem</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="http://router.vuejs.org/"
|
||||
target="_blank"
|
||||
>
|
||||
vue-router
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="http://vuex.vuejs.org/"
|
||||
target="_blank"
|
||||
>
|
||||
vuex
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="http://vue-loader.vuejs.org/"
|
||||
target="_blank"
|
||||
>
|
||||
vue-loader
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/awesome-vue"
|
||||
target="_blank"
|
||||
>
|
||||
awesome-vue
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
data () {
|
||||
return {
|
||||
msg: 'Welcome to Your Vue.js App'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h1, h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
Executable
+56
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div ref="terminal" class="terminal-container"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { Terminal } from 'xterm'
|
||||
import * as fit from 'xterm/lib/addons/fit/fit';
|
||||
import 'xterm/lib/xterm.css'
|
||||
import { Base64 } from 'js-base64';
|
||||
import * as Socket from 'simple-websocket';
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
mounted: function () {
|
||||
Terminal.applyAddon(fit);
|
||||
var term;
|
||||
var sid;
|
||||
var container = this.$refs['terminal'];
|
||||
var socket = new Socket('ws://192.168.3.33:5912/ws/browser?did=qq')
|
||||
socket.on('connect', function () {
|
||||
term = new Terminal();
|
||||
})
|
||||
|
||||
socket.on('data', function (data) {
|
||||
var resp = JSON.parse(data);
|
||||
|
||||
var type = resp.type
|
||||
if (type == 'login') {
|
||||
if (resp.err) {
|
||||
//$('#msg').text(resp.err);
|
||||
return;
|
||||
}
|
||||
sid = resp.sid;
|
||||
term.open(container);
|
||||
term.fit();
|
||||
|
||||
term.on('data', function(data) {
|
||||
socket.send(JSON.stringify({type: 'data', did: 'qq', sid: sid, data: Base64.encode(data)}));
|
||||
});
|
||||
} else if (type == 'data') {
|
||||
var data = Base64.decode(resp.data);
|
||||
term.write(data);
|
||||
} else if (type == 'logout') {
|
||||
socket.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.terminal-container {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Executable
+57
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div @keydown.enter="handleSubmit">
|
||||
<Card class="login-container">
|
||||
<p slot="title">Login</p>
|
||||
<Form ref="form" :model="form" :rules="ruleValidate">
|
||||
<FormItem prop="id">
|
||||
<Input type="text" v-model="form.id" size="large" auto-complete="off" placeholder="Enter device ID...">
|
||||
<Icon type="ios-person-outline" slot="prepend"></Icon>
|
||||
</Input>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" long size="large" icon="log-in" @click="handleSubmit">Login</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Login',
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
id: ''
|
||||
},
|
||||
ruleValidate: {
|
||||
id: [
|
||||
{required: true, trigger: 'blur', message: 'Device ID is required'}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$router.push('/home');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-container {
|
||||
width: 400px;
|
||||
height: 240px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -200px;
|
||||
margin-top: -120px;
|
||||
}
|
||||
</style>
|
||||
Regular → Executable
+8
-3
@@ -2,12 +2,17 @@
|
||||
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
import iView from 'iview'
|
||||
import 'iview/dist/styles/iview.css'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.use(iView);
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
components: { App },
|
||||
template: '<App/>'
|
||||
el: '#app',
|
||||
router,
|
||||
render: (h)=>h(App)
|
||||
})
|
||||
|
||||
Executable
+13
@@ -0,0 +1,13 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Login from '@/components/Login'
|
||||
import Home from '@/components/Home'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
routes: [
|
||||
{path: '/', component: Login},
|
||||
{path: '/home', component: Home}
|
||||
]
|
||||
})
|
||||
Reference in New Issue
Block a user