连接数据

.eslintrc.js

@@ -18,6 +18,6 @@ module.exports = {
       'camelcase': 2,//强制驼峰法命名
       'vars-on-top': 2,//var必须放在作用域顶部
       'no-redeclare': 2,//禁止重复声明变量
-      'complexity': [0, 11]//循环复杂度
+      'complexity': [0, 11],//循环复杂度
   }
 }

config.js

@@ -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

@@ -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

@@ -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

+<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

@@ -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

@@ -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

@@ -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/webs.vue

 <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

@@ -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,