Skip to content

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

连接数据

上级 4d6d9f63
隐藏空白字符变更
内嵌 并排
正在显示 包含 345 行增加 和 61 行删除
.eslintrc.js
浏览文件 @ a27f46f8
......@@ -18,6 +18,6 @@ module.exports = {
'camelcase': 2,//强制驼峰法命名
'vars-on-top': 2,//var必须放在作用域顶部
'no-redeclare': 2,//禁止重复声明变量
'complexity': [0, 11]//循环复杂度
'complexity': [0, 11],//循环复杂度
}
}
config.js
浏览文件 @ a27f46f8
......@@ -4,7 +4,7 @@
// 服务地址
// const IP = 'https://www.easy-mock.com/mock/5b70ec93ad23a1570071a34e/Interview'; // easymock
const IP = '192.168.0.112:8077';
const IP = 'http://192.168.1.54:8077';
// 请求目标服务器域名配置
......
package.json
浏览文件 @ a27f46f8
......@@ -21,6 +21,7 @@
"@vue/cli-service": "~4.2.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"vue-loader": "^15.9.1",
"vue-template-compiler": "^2.6.11"
}
}
src/assets/css/base.css
浏览文件 @ a27f46f8
......@@ -12,7 +12,7 @@ textarea, p, blockquote, th, td {
/* height: 100%;*/
/*}*/
body {
font-size: 16px;
font-size: 18px;
/*background-image: url("../img/baseImg/bg.png");*/
/*background-repeat: no-repeat;*/
background-size: cover;
......
src/components/dial/newApply.vue 0 → 100644
浏览文件 @ a27f46f8
<template>
<div class="newApply">
<p>技术路线</p>
<div class="newApply-box" >
<div class="whole" v-for="(item,index) in val ">
<div class="newApply-title">
<!--<el-radio v-model="tech" :label="1">{{item.name}}</el-radio>-->
<span @click="check(index)"> <i :class="(isCheck==index) ? 'isActive': ''"></i> </span>
<div>{{item.name}}</div>
</div>
<div class="newApply-content">
<div>
<span>操作系统：<i>{{item.os.version}}</i></span>
<span>数据库：<i>{{item.db.version}}</i></span>
<span>中间件：<i>{{item.midWare.version}}</i></span>
</div>
</div>
</div>
</div>
<div class="line"></div>
<div class="newApplyBtn">
<span @click="cancle">取消</span>
<span @click="makeSure">确定</span>
</div>
</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
name: 'newApply',
// import引入的组件需要注入到对象中才能使用
components: {},
props: ['val','applyId'],
data () {
// 这里存放数据
return {
tech: '',
isCheck: false,
};
},
// 方法集合
methods: {
cancle() {
this.$emit('on-close');
},
check(i) {
console.log('选中')
this.isCheck = i;
},
makeSure() {
}
},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {
'val': function(val) {
console.log('技术路线数据',val)
},
'applyId': function(applyId) {
console.log('项目id',applyId)
}
},
//生命周期 - 创建完成（可以访问当前this实例）
created () {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted () {},
// 生命周期 - 创建之前
beforeCreate () {},
// 生命周期 - 挂载之前
beforeMount () {},
// 生命周期 - 更新之前
beforeUpdate () {},
// 生命周期 - 更新之后
updated () {},
// 生命周期 - 销毁之前
beforeDestroy () {},
// 生命周期 - 销毁完成
destroyed () {},
// 如果页面有keep-alive缓存功能，这个函数会触发
activated () {},
}
</script>
<style scoped>
.newApply {
width: 810px;
height: 518px;
background: #fff;
border-radius: 11px;
position: absolute;
top: 17px;
left: -425px;
}
.newApply p {
width: 100%;
height: 58px;
font-size: 18px;
text-align: center;
line-height: 58px;
background: #ebf0f8;
color: #333;
border-top-left-radius: 11px;
border-top-right-radius: 11px;
}
.newApply-box{
display: flex;
justify-content: space-around;
align-items: center;
}
.newApply-title {
text-align: center;
margin: 25px 0;
}
.newApply-title span i{
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid #666;
margin-left: 58px;
margin-top: 3px;
float: left;
}
.newApply-content {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
}
.newApply-content div {
text-align: right;
}
.newApply-content div span {
display: block;
height: 45px;
line-height: 45px;
color: #666;
margin-bottom: 20px;
width: 200px;
}
.newApply-content div span i {
display: inline-block;
width: 64%;
background: #f5f8fd;
height: 35px;
border: 1px solid rgba(8,104,157,.3);
text-align: center;
color: #333;
}
.newApplyBtn {
text-align: center;
}
.newApplyBtn span {
display: inline-block;
width: 100px;
height: 34px;
line-height: 34px;
background: #4877e6;
color: #fff;
text-align: center;
border-radius: 5px;
margin-left: 60px;
}
.newApplyBtn span:hover {
background: #1c45a4;
}
.line {
width: 71%;
margin: 0 auto;
border: 1px solid rgba(8,104,157,.1);
margin-bottom: 50px;
}
.isActive {
/*background: #1E8255;*/
/*border: 1px solid red;*/
width: 14px;
height: 14px;
background: url("../../assets/img/check.png") no-repeat;
background-size: 100% 100%;
background-color: transparent;
border: none;
}
</style>
\ No newline at end of file
src/router/index.js
浏览文件 @ a27f46f8
......@@ -18,23 +18,21 @@ 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: '/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: "labSystem" */ '../views/labSystem.vue')
},
}
]
},
]
......
src/services/axios.js
浏览文件 @ a27f46f8
......@@ -5,6 +5,7 @@ import baseUrl from '../../config';
// axios.defaults.withCredentials = true;
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
console.log(config)
// console.log(store.getters.getSession.session)
// config.headers.session = store.getters.getSession.session;
// 预处理请求信息（config 发出的数据） 下方是三种请求，李迪凡的
......
src/services/server.js
浏览文件 @ a27f46f8
......@@ -11,16 +11,20 @@ import axios from '@/services/axios';
*/
// import qs from 'qs';
const server = {
getCeShi() { // 测试接口
return axios('/resume', {
getProject(id) { // 获取项目详情
return axios('/project/get/' + id, {
method: 'get'
});
})
},
postadd(data) { // 新增角色
return axios('/role/add', {
method: 'post',
data: data
});
findAll() { // 技术路线
return axios('/tech/findAll/', {
method: 'get'
})
},
midify() { // 技术路线
return axios('/project/midify/', {
method: 'get'
})
},
}
export default server;
src/views/labSystem.vue
浏览文件 @ a27f46f8
......@@ -7,13 +7,13 @@
</div>
<div class="themeContent">
<div class="themeBtn"> <span>项目归档</span> </div>
<div class="themeName"> <i></i> XXX项目 </div>
<div class="themeName"> <i></i> {{name}} </div>
<div class="themeOne">
<p class="themeOne-title"> <i></i> 项目配置详情 <span><img src="../assets/img/edit.png" alt="">编辑</span> </p>
<p class="themeOne-title"> <i></i> 项目配置详情 <span class="edit"><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>
<div>访问路径： <span>http://www.baidu.com</span> </div>
</el-col>
<el-col :offset="1" :span="11">
<div>gitlab地址： <span></span> </div>
......@@ -22,33 +22,32 @@
</div>
</div>
<div class="themeTwo">
<p class="themeOne-title"> <i></i> 项目配置详情 <span><img src="../assets/img/save.png" alt="">保存</span> </p>
<p class="themeOne-title"> <i></i> 项目配置详情 <span class="save"><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 v-model="pack" placeholder="请选择">
<el-option label="maven" :value="0"></el-option>
<el-option label="cnpm" :value="1"></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 v-model="codeType" placeholder="请选择">
<el-option label="js/html/css" :value="0"></el-option>
<el-option label="java" :value="1"></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>
<span class="">日志保存时间：</span>
<el-input style="width:117px;" v-model="rate" placeholder="请输入"></el-input>
天
</div>
</el-col>
</el-row>
......@@ -56,10 +55,9 @@
<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 v-model="compile" placeholder="请选择">
<el-option label="jdk1.8" :value="0"></el-option>
<el-option label="nodejs10.16" :value="1"></el-option>
</el-select>
</div>
</el-col>
......@@ -67,73 +65,125 @@
</div>
</div>
<div class="themeThree">
<p class="themeOne-title"> <i></i> 项目环境 <span><img src="../assets/img/apply.png" alt="">重新申请</span> </p>
<p class="themeOne-title"> <i></i> 项目环境 <span class="apply" @click="apply"><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>
<span>型号/版本: <a>{{os.version}}</a> </span>
<span>ip: <a>{{os.ip}}</a></span>
</div>
<div>
<i></i>
中间件：
<span>型号/版本: <span>X86</span> </span>
<span>ip: <span>192.168.1.123</span></span>
<span>端口号：</span>
<span>型号/版本: <a>{{mid.version}}</a> </span>
<span>ip: <a>{{mid.ip}}</a></span>
<span>端口号：<a>{{mid.port}}</a> </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>
<span>型号/版本: <a>{{db.version}}</a> </span>
<span>ip: <a>{{db.ip}}</a></span>
<span>端口号：<a>{{db.port}}</a> </span>
<span>用户名：<a>{{db.userName}}</a></span>
<span>密码：<a>{{db.password}}</a></span>
</div>
</div>
</div>
<div class="themeFour">
<p class="themeOne-title"> <i></i> 项目运行日志 <span><img src="../assets/img/refresh.png" alt="">刷新</span> </p>
<p class="themeOne-title"> <i></i> 项目运行日志 <span class="refresh"><img src="../assets/img/refresh.png" alt="">刷新</span> </p>
<div class="themeFour-context">
</div>
</div>
</div>
</div>
<!--重新申请弹窗-->
<el-dialog :visible.sync="applyModal" width="0%" >
<newApply :val="applyMessage" :applyId="applyId" @on-close="reset()"></newApply>
<img src="../assets/img/close.png" class="closeModel" @click="reset()">
</el-dialog>
<!--重新申请弹窗-->
</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import newApply from '../components/dial/newApply'
export default {
name: 'labSystem',
// import引入的组件需要注入到对象中才能使用
components: {},
components: {newApply},
props: {},
data () {
data() {
// 这里存放数据
return {
method: '', // 打包方式
type: '', // 代码类型
hz: '', // 编译频率
version: '', //编译版本
id: 1, //
name:'', // 项目名字
pack: '', // 打包方式
codeType: '', // 代码类型
rate: '', // 编译频率
compile: '', // 编译版本
os: '', // 服务器
mid: '', // 中间件
db: '', // 数据库
applyModal: false, // 重新申请弹窗
applyMessage: '', // 弹窗数据
applyId:'', // 传给弹窗的项目id
};
},
// 方法集合
methods: {
getProject() {
console.log(3333)
this.$server.getProject(this.id).then(res => {
console.log(res.data);
this.name = res.data.name
this.pack = res.data.pack
this.codeType = res.data.codeType
this.rate = res.data.rate
this.compile = res.data.compile
this.os = res.data.os;
console.log('服务器',this.os)
this.mid = res.data.mid;
console.log('中间件',this.mid)
this.db = res.data.db;
console.log('数据库',this.db)
}).catch(err => {
console.log(err);
this.$message.error('数据请求失败');
})
},
apply() {
console.log(1)
this.applyModal = true
this.$server.findAll().then(res => {
console.log(res.data);
this.applyMessage = res.data
this.applyId = this.id
console.log('77777',this.applyId)
}).catch(err => {
console.log(err)
this.$message.error('请求失败')
})
},
reset(){
this.applyModal = false;
},
},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
//生命周期 - 创建完成（可以访问当前this实例）
// 生命周期 - 创建完成（可以访问当前this实例）
created () {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted () {},
mounted () {
this.getProject();
},
// 生命周期 - 创建之前
beforeCreate () {},
// 生命周期 - 挂载之前
......@@ -148,7 +198,7 @@ export default {
destroyed () {},
// 如果页面有keep-alive缓存功能，这个函数会触发
activated () {},
}
}
</script>
<style scoped>
......@@ -236,8 +286,20 @@ export default {
.themeOne-title span img {
margin-right: 8px;
}
.themeOne-title span img:hover {
.themeOne-title span:hover {
color: #4877e6;
}
.themeOne-title .edit:hover img {
content: url("../assets/img/eidth.png");
}
.themeOne-title .save:hover img {
content: url("../assets/img/saveh.png");
}
.themeOne-title .apply:hover img {
content: url("../assets/img/applyh.png");
}
.themeOne-title .refresh:hover img {
content: url("../assets/img/refreshh.png");
}
/* 二级标题样式可以重复使用 */
.themeOne >>> div span {
......@@ -264,6 +326,10 @@ export default {
.themeThree-context {
height: 85px;
color: #666;
}
.themeThree-context div {
margin-bottom: 10px;
}
.themeThree-context div i {
display: inline-block;
......@@ -272,5 +338,21 @@ export default {
border-radius: 50%;
background: rgb(72,119,230);
}
.themeThree-context div span {
display: inline-block;
width: 15%;
padding-left: 30px;
}
.themeThree-context div span a {
color: #333;
}
.closeModel {
position: absolute;
right: -360px;
top: 36px;
cursor: pointer;
}
.closeModel:hover {
content: url("../assets/img/closeh.png");
}
</style>
\ No newline at end of file
src/views/webs.vue
浏览文件 @ a27f46f8
<template>
<div>
webstocket
<div>
webstocket
webstocket
webstocket
</div>
</div>
</template>
......@@ -23,7 +28,7 @@ export default {
alert("您的浏览器不支持socket")
}else{
// 实例化socket
this.websocket = new WebSocket(`ws://192.168.0.112:8076/webServer/abc`)
this.websocket = new WebSocket(`ws://192.168.1.54:8077/webServer/abc`)
this.initWebSocket();
console.log(this.websocket)
}
......@@ -35,8 +40,11 @@ export default {
// //连接成功
this.websocket.onopen = this.setOnopenMessage;
//收到消息的回调
this.websocket.onmessage = this.setOnmessageMessage;
console.log('连接成功2222',this.websocket.onmessage)
//连接关闭的回调
this.websocket.onclose = this.setOncloseMessage;
......
vue.config.js
浏览文件 @ a27f46f8
......@@ -46,7 +46,7 @@ module.exports = {
// webpack-dev-server 相关配置
devServer: {
open: true,
host: 'localhost',
host: '0.0.0.0',
port: 8088,
https: false,
hotOnly: false,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论