Skip to content

X
xcLab
提交 4d6d9f63 authored 作者: Your Name's avatar Your Name
浏览文件
操作

静态页面

上级 06756ea2
隐藏空白字符变更
内嵌 并排
正在显示 包含 593 行增加 和 71 行删除
config.js
浏览文件 @ 4d6d9f63
......@@ -3,7 +3,9 @@
*/
// 服务地址
const IP = 'https://www.easy-mock.com/mock/5b70ec93ad23a1570071a34e/Interview'; // easymock
// const IP = 'https://www.easy-mock.com/mock/5b70ec93ad23a1570071a34e/Interview'; // easymock
const IP = '192.168.0.112:8077';
// 请求目标服务器域名配置
const DOMAIN_NAME = {
......
package-lock.json
浏览文件 @ 4d6d9f63
......@@ -4181,7 +4181,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
......@@ -4598,7 +4599,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -4654,6 +4656,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -4697,12 +4700,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},
......
src/App.vue
浏览文件 @ 4d6d9f63
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
......@@ -13,7 +9,7 @@
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
/*text-align: center;*/
color: #2c3e50;
}
......
src/assets/css/base.css 0 → 100644
浏览文件 @ 4d6d9f63
@charset "utf-8";
/*通配css样式*/
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
/* 适配全屏 */
/*html {*/
/* height: 100%;*/
/*}*/
body {
font-size: 16px;
/*background-image: url("../img/baseImg/bg.png");*/
/*background-repeat: no-repeat;*/
background-size: cover;
/*background-position: top center;*/
overflow: hidden;
/*overflow-y: scroll;*/
cursor: default;
}
a {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: none;
}
a:visited {
color: #000;
text-decoration: none;
}
a:link {
text-decoration: none;
}
ul, li {
list-style: none
}
img, li {
vertical-align: middle;
border: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
i, em {
font-style: normal;
}
src/components/HelloWorld.vue
浏览文件 @ 4d6d9f63
<template>
<div class="hello">
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
<div class="hello">
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
</template>
<script>
......
src/components/appHeader.vue 0 → 100644
浏览文件 @ 4d6d9f63
<!-- 头部 -->
<template>
<div class="headerContent">
<!--appheader 头部-->
</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
name: 'app-header',
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data () {
// 这里存放数据
return {};
},
// 方法集合
methods: {},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
//生命周期 - 创建完成（可以访问当前this实例）
created () {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted () {},
// 生命周期 - 创建之前
beforeCreate () {},
// 生命周期 - 挂载之前
beforeMount () {},
// 生命周期 - 更新之前
beforeUpdate () {},
// 生命周期 - 更新之后
updated () {},
// 生命周期 - 销毁之前
beforeDestroy () {},
// 生命周期 - 销毁完成
destroyed () {},
// 如果页面有keep-alive缓存功能，这个函数会触发
activated () {},
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/main.js
浏览文件 @ 4d6d9f63
......@@ -5,6 +5,7 @@ import App from './App.vue';
import router from './router';
import store from './store';
import server from './services/server';
import './assets/css/base.css';
Vue.prototype.$server = server;
Vue.use(ElementUI);
......
src/router/index.js
浏览文件 @ 4d6d9f63
......@@ -9,7 +9,7 @@ const routes = [
path: '/',
name: 'Home',
component: Home,
redirect: '/Home',
redirect: '/labSystem',
children: [
{
path: '/home',
......@@ -18,14 +18,23 @@ const routes = [
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
}, {
path: '/about',
name: 'about',
},
{
path: '/webs',
name: 'webs',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "home" */ '../views/webs.vue')
},
{
path: '/labSystem',
name: 'labSystem',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "databaseConfig" */ '../views/About.vue')
}
component: () => import(/* webpackChunkName: "labSystem" */ '../views/labSystem.vue')
},
]
},
]
......@@ -37,3 +46,4 @@ const router = new VueRouter({
})
export default router
src/services/axios.js
浏览文件 @ 4d6d9f63
import axios from 'axios';
// import Qs from 'qs';
import baseUrl from '../../config';
import store from '../store';
// import store from '../store';
// axios.defaults.withCredentials = true;
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
......
src/views/About.vue deleted 100644 → 0
浏览文件 @ 06756ea2
<template>
<div class="about">
<button @click="ceGet">获取数据</button>
<span>数据：{{ this.dataGet }}</span>
</div>
</template>
<script>
export default {
data () {
return {
dataGet: ''
}
},
created() {
},
mounted(){
},
methods: {
// 测试数据接口
ceGet() {
console.log('你好数据');
this.$server.getCeShi().then(res => {
console.log(res);
}).catch(err => {
console.log(err);
this.$message.error('数据请求失败');
})
}
},
components: {
},
watch: {
}
}
</script>
src/views/Home.vue
浏览文件 @ 4d6d9f63
<!-- 页面布局 -->
<template>
<div class="home">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
<div class="home">
<!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->
<div>
<div>
<appHeader></appHeader>
</div>
<router-view></router-view>
</div>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// import HelloWorld from '@/components/HelloWorld.vue'
import appHeader from '../components/appHeader'
export default {
name: 'Home',
components: {
HelloWorld
}
name: 'Home',
// import引入的组件需要注入到对象中才能使用
components: {
appHeader
},
props: {},
data () {
// 这里存放数据
return {};
},
// 方法集合
methods: {},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
//生命周期 - 创建完成（可以访问当前this实例）
created () {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted () {},
// 生命周期 - 创建之前
beforeCreate () {},
// 生命周期 - 挂载之前
beforeMount () {},
// 生命周期 - 更新之前
beforeUpdate () {},
// 生命周期 - 更新之后
updated () {},
// 生命周期 - 销毁之前
beforeDestroy () {},
// 生命周期 - 销毁完成
destroyed () {},
// 如果页面有keep-alive缓存功能，这个函数会触发
activated () {},
}
</script>
src/views/labSystem.vue 0 → 100644
浏览文件 @ 4d6d9f63
<!-- XClab系统页面 -->
<template>
<div class="labsystem">
<div class="labContent">
<div class="labContent-title">
<p >XClab系统</p>
</div>
<div class="themeContent">
<div class="themeBtn"> <span>项目归档</span> </div>
<div class="themeName"> <i></i> XXX项目 </div>
<div class="themeOne">
<p class="themeOne-title"> <i></i> 项目配置详情 <span><img src="../assets/img/edit.png" alt="">编辑</span> </p>
<div class="themeOne-context">
<el-row :gutter="24">
<el-col :offset="1" :span="11">
<div>访问路径： <span></span> </div>
</el-col>
<el-col :offset="1" :span="11">
<div>gitlab地址： <span></span> </div>
</el-col>
</el-row>
</div>
</div>
<div class="themeTwo">
<p class="themeOne-title"> <i></i> 项目配置详情 <span><img src="../assets/img/save.png" alt="">保存</span> </p>
<div class="themeTwo-context">
<el-row>
<el-col :span="8">
<div>
<span class="">打包方式：</span>
<el-select v-model="method" placeholder="请选择">
<el-option label="方式1" :value="1"></el-option>
<el-option label="方式2" :value="2"></el-option>
<el-option label="方式3" :value="3"></el-option>
</el-select>
</div>
</el-col>
<el-col :span="8">
<div>
<span class="">代码类型：</span>
<el-select v-model="type" placeholder="请选择">
<el-option label="方式1" :value="1"></el-option>
<el-option label="方式2" :value="2"></el-option>
<el-option label="方式3" :value="3"></el-option>
</el-select>
</div>
</el-col>
<el-col :span="8">
<div>
<span class="">编译频率：</span>
<el-input style="width:217px;" v-model="hz" placeholder="请输入"></el-input>
</div>
</el-col>
</el-row>
<el-row style="margin-top:32px;">
<el-col :span="8">
<div>
<span class="">编译版本：</span>
<el-select v-model="version" placeholder="请选择">
<el-option label="方式1" :value="1"></el-option>
<el-option label="方式2" :value="2"></el-option>
<el-option label="方式3" :value="3"></el-option>
</el-select>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="themeThree">
<p class="themeOne-title"> <i></i> 项目环境 <span><img src="../assets/img/apply.png" alt="">重新申请</span> </p>
<div class="themeThree-context">
<div>
<i></i>
服务器：
<span>型号/版本: <span>X86</span> </span>
<span>ip: <span>192.168.1.123</span></span>
</div>
<div>
<i></i>
中间件：
<span>型号/版本: <span>X86</span> </span>
<span>ip: <span>192.168.1.123</span></span>
<span>端口号：</span>
</div>
<div>
<i></i>
数据库：
<span>型号/版本: <span>X86</span> </span>
<span>ip: <span>192.168.1.123</span></span>
<span>端口号：</span>
<span>用户名：</span>
<span>密码：</span>
</div>
</div>
</div>
<div class="themeFour">
<p class="themeOne-title"> <i></i> 项目运行日志 <span><img src="../assets/img/refresh.png" alt="">刷新</span> </p>
<div class="themeFour-context">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
name: 'labSystem',
// import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data () {
// 这里存放数据
return {
method: '', // 打包方式
type: '', // 代码类型
hz: '', // 编译频率
version: '', //编译版本
};
},
// 方法集合
methods: {
},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
//生命周期 - 创建完成（可以访问当前this实例）
created () {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted () {},
// 生命周期 - 创建之前
beforeCreate () {},
// 生命周期 - 挂载之前
beforeMount () {},
// 生命周期 - 更新之前
beforeUpdate () {},
// 生命周期 - 更新之后
updated () {},
// 生命周期 - 销毁之前
beforeDestroy () {},
// 生命周期 - 销毁完成
destroyed () {},
// 如果页面有keep-alive缓存功能，这个函数会触发
activated () {},
}
</script>
<style scoped>
.labsystem {
background: #ebf0f8;
padding: 30px 45px ;
height: 96vh;
overflow-y: scroll;
}
.labContent {
width: 100%;
background: #fff;
}
.labContent-title p {
font-size: 24px;
color: #233b6e;
padding: 30px;
text-align: center;
}
.themeContent {
padding: 0 64px;
}
.themeBtn {
text-align: right;
}
.themeBtn span {
display: inline-block;
width: 100px;
height: 34px;
line-height: 34px;
background: #4877e6;
color: #fff;
text-align: center;
border-radius: 5px;
}
.themeBtn span:hover {
background: #1c45a4;
}
.themeName {
text-align: left;
position: relative;
background-color: #ecf1fc;
height: 40px;
margin-top: 40px;
width: 100%;
line-height: 40px;
font-weight: bold;
font-size: 20px
}
.themeName i {
display: block;
float: left;
background-color: #4877e6;
height: 40px;
width: 4px;
margin-right: 10px;
}
/* 二级标题样式可以重复使用 */
.themeOne-title {
position: relative;
font-size: 20px;
margin-top: 20px;
color: #333;
height: 40px;
width: 100%;
text-align: left;
line-height: 40px;
text-indent: 10px;
font-weight: bold;
}
.themeOne-title i {
width: 4px;
height: 20px;
float: left;
display: block;
background-color: #4877e6;
margin-top: 10px;
}
.themeOne-title span {
float: right;
font-size: 18px;
color: rgba(72,119,230,.6);
font-weight: normal;
}
.themeOne-title span img {
margin-right: 8px;
}
.themeOne-title span img:hover {
}
/* 二级标题样式可以重复使用 */
.themeOne >>> div span {
color: #333;
display: inline-block;
width: 60%;
height: 36px;
background: #f5f8fd;
border: 1px solid #d5e3ff;
border-radius: 2px;
line-height: 36px;
padding: 0 12px;
margin-bottom: -14px;
}
.themeTwo-context,.themeThree-context,.themeFour-context {
width: 96%;
margin: 0 auto;
height: 115px;
border: 2px solid #eaf1ff;
margin-top: 10px;
margin-bottom: 30px;
padding: 30px 2px 30px 50px;
}
.themeThree-context {
height: 85px;
}
.themeThree-context div i {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgb(72,119,230);
}
</style>
\ No newline at end of file
src/views/webs.vue 0 → 100644
浏览文件 @ 4d6d9f63
<template>
<div>
webstocket
</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
name: 'webs',
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data () {
// 这里存放数据
return {};
},
// 方法集合
methods: {
init() {
if(typeof(WebSocket) === "undefined"){
alert("您的浏览器不支持socket")
}else{
// 实例化socket
this.websocket = new WebSocket(`ws://192.168.0.112:8076/webServer/abc`)
this.initWebSocket();
console.log(this.websocket)
}
},
initWebSocket() {
//连接错误
this.websocket.onerror = this.setErrorMessage;
// //连接成功
this.websocket.onopen = this.setOnopenMessage;
//收到消息的回调
this.websocket.onmessage = this.setOnmessageMessage;
//连接关闭的回调
this.websocket.onclose = this.setOncloseMessage;
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = this.onbeforeunload;
},
setErrorMessage() {
this.data = 'WebSocket连接发生错误' + ' 状态码：' + this.websocket.readyState;
},
setOnopenMessage() {
this.data = 'WebSocket连接成功' + ' 状态码：' + this.websocket.readyState;
},
setOnmessageMessage(event) {
this.data = '服务端返回：' + event.data;
console.log(event.data);
// this.logData.push(event.data);
// this.$refs['elscroll'].wrap.scrollTop = this.$refs['elscroll'].wrap.scrollHeight;
},
setOncloseMessage() {
this.data = 'WebSocket连接关闭' + ' 状态码：' + this.websocket.readyState;
},
onbeforeunload() {
this.closeWebSocket();
},
//websocket发送消息
send() {
this.messages = {
token:this.token,
text:this.text,
}
this.websocket.send(this.text);
// this.websocket.send(this.messages);
this.text = '';
// this.messages = {};
},
closeWebSocket() {
console.log(this.websocket)
this.websocket.close();
},
},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
//生命周期 - 创建完成（可以访问当前this实例）
created () {
this.init();
},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted () {
this.init();
},
// 生命周期 - 创建之前
beforeCreate () {},
// 生命周期 - 挂载之前
beforeMount () {},
// 生命周期 - 更新之前
beforeUpdate () {},
// 生命周期 - 更新之后
updated () {},
// 生命周期 - 销毁之前
beforeDestroy () {},
// 生命周期 - 销毁完成
destroyed () {},
// 如果页面有keep-alive缓存功能，这个函数会触发
activated () {},
}
</script>
<style scoped>
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论