坏人未变坏

坏人未变坏 查看完整档案

深圳编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

努力学习,早日度过这艰难的日子

个人动态

坏人未变坏 赞了回答 · 10月21日

解决请问vue项目如何配置多个VUE_APP_BASE_API?

https://cli.vuejs.org/zh/guide/mode-and-env.html#在客户端侧代码中使用环境变量
必须VUE_APP_开头
VUE_APP_IM_BASE_API
process.env.VUE_APP_IM_BASE_API

关注 2 回答 1

坏人未变坏 提出了问题 · 10月21日

解决请问vue项目如何配置多个VUE_APP_BASE_API?

我在.env.development中加了一个VUE_IM_BASE_API的变量,通过process.env.VUE_IM_BASE_API获取,但是拿不到,请问该如何配置呢?
image
谢谢!

关注 2 回答 1

坏人未变坏 收藏了文章 · 10月13日

Vue 项目中使用websocket

在vue项目中使用websocket

websocket相关文档传送门

https://github.com/websockets/ws

https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

1.首先init一个websocket

https 使用 wss, http 使用 ws
data(){
    websocketObj: null,
    wsHeartflag: false,
    reconnectTime: 0
},
created(){
    this.initWebsocket();
},
methods: {
    initWebsocket(){
        if (websocket in window) {
            this.webSocketObj = new WebSocket(
                "wss://"+newApi+"/websocket?sid="+userToken
            );
            this.webSocketObj.onmessage = this.onMessage
            this.webSocketObj.onopen = this.onOpen
            this.webSocketObj.onerror = this.onError
            this.webSocketObj.onclose = this.onClose
        }  
    }
}

2.写上对应websocket方法

onOpen() {
    if (this.webSocketObj.readyState === 1) {
        //- readyState 等于1 的时候建立链接成功
        this.wsHeartflag = true;
        this.webSocketObj.send("13123123");
        this.reconnectTime = 0;
    }
},
timingHeart() {
    // 心跳检测  每4.5分钟发送一次 
    if (this.wsHeartflag) {
        this.webSocketObj.send('123123123');
    }
    this.wsHeart = setTimeout(() => {
        this.timingHeart();
    }, 100 * 1000); // 100s心跳
},
onMessage(evt) {
    var received_msg = evt && JSON.parse(evt.data);
    if (received_msg.code === '1') {
        // 支付成功
        // this.$toast('恭喜您,支付成功,已升级成VIP');
        this.onClose();
    } else {
        // 支付失败
        this.showSuccessPop = false;
    }
},
onError() {
    // 链接失败,进行重连
    clearTimeout(this.wsHeart);
    this.wsHeartflag = false;
    if (this.reconnectTime <= MAX_CONNECT) {
        setTimeout(() => {
            this.onOpen();
            this.reconnectTime+=1;
        }, 5000);
    } else {
        this.$toast('抱歉,暂时无法连接到聊天服务器,请稍后再试');
        this.onClose();
    }
},
onClose() {
    this.wsHeartflag = false;
    this.webSocketObj && this.webSocketObj.close && this.webSocketObj.close();
},

3.功能基本完备,如果api要走nginx的话,需要另外做处理:

配置ngnix
server: {
    localhost / {
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection  "upgrade";
    }
}            
自此 websocket 已经可以使用,详情点击上面传送门详细了解
码农进阶题库,每天一道面试题 or Js小知识 https://www.javascriptc.com/interview-tips/

❤️ 看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!

关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网 - 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容
JS中文网 - 前端进阶资源教程,领略前端前沿,关注IT平头哥联盟
查看原文

坏人未变坏 赞了文章 · 10月13日

Vue 项目中使用websocket

在vue项目中使用websocket

websocket相关文档传送门

https://github.com/websockets/ws

https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

1.首先init一个websocket

https 使用 wss, http 使用 ws
data(){
    websocketObj: null,
    wsHeartflag: false,
    reconnectTime: 0
},
created(){
    this.initWebsocket();
},
methods: {
    initWebsocket(){
        if (websocket in window) {
            this.webSocketObj = new WebSocket(
                "wss://"+newApi+"/websocket?sid="+userToken
            );
            this.webSocketObj.onmessage = this.onMessage
            this.webSocketObj.onopen = this.onOpen
            this.webSocketObj.onerror = this.onError
            this.webSocketObj.onclose = this.onClose
        }  
    }
}

2.写上对应websocket方法

onOpen() {
    if (this.webSocketObj.readyState === 1) {
        //- readyState 等于1 的时候建立链接成功
        this.wsHeartflag = true;
        this.webSocketObj.send("13123123");
        this.reconnectTime = 0;
    }
},
timingHeart() {
    // 心跳检测  每4.5分钟发送一次 
    if (this.wsHeartflag) {
        this.webSocketObj.send('123123123');
    }
    this.wsHeart = setTimeout(() => {
        this.timingHeart();
    }, 100 * 1000); // 100s心跳
},
onMessage(evt) {
    var received_msg = evt && JSON.parse(evt.data);
    if (received_msg.code === '1') {
        // 支付成功
        // this.$toast('恭喜您,支付成功,已升级成VIP');
        this.onClose();
    } else {
        // 支付失败
        this.showSuccessPop = false;
    }
},
onError() {
    // 链接失败,进行重连
    clearTimeout(this.wsHeart);
    this.wsHeartflag = false;
    if (this.reconnectTime <= MAX_CONNECT) {
        setTimeout(() => {
            this.onOpen();
            this.reconnectTime+=1;
        }, 5000);
    } else {
        this.$toast('抱歉,暂时无法连接到聊天服务器,请稍后再试');
        this.onClose();
    }
},
onClose() {
    this.wsHeartflag = false;
    this.webSocketObj && this.webSocketObj.close && this.webSocketObj.close();
},

3.功能基本完备,如果api要走nginx的话,需要另外做处理:

配置ngnix
server: {
    localhost / {
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection  "upgrade";
    }
}            
自此 websocket 已经可以使用,详情点击上面传送门详细了解
码农进阶题库,每天一道面试题 or Js小知识 https://www.javascriptc.com/interview-tips/

❤️ 看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!

关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网 - 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容
JS中文网 - 前端进阶资源教程,领略前端前沿,关注IT平头哥联盟
查看原文

赞 0 收藏 1 评论 0

坏人未变坏 关注了问题 · 7月30日

解决为什么`router.addRoutes()` 添加的路由在 this.$router.options 看不到?

只能看到路由配置里配置的固定路由表.
而后端传过来的路由配置, 通过 router.addRoutes() 添加的路由, 却看不到.

我想要实现的需求是, 当前页面下, 获取当前路由路径, 动态将子路由添加进去.

关注 4 回答 1

坏人未变坏 赞了回答 · 7月30日

解决为什么`router.addRoutes()` 添加的路由在 this.$router.options 看不到?

如果你指的是动态路由通过 this.$router.options 找不到,这是 vue-router 故意这么设计的,曾经有人和你一样以为这是 Bug 而提了 Issus(传送门:https://github.com/vuejs/vue-...)。

作者的回复是:

options is the object passed to the vuerouter constructor. It's not modified afterwards.

如果你非要这么做,可以这么做:

let newRoutes = []; // 要动态添加的路由

this.$router.addRoutes(newRoutes);
this.$router.options.routes = this.$router.options.routes.concat(newRoutes);

但不建议这么做,原帖下有作者的更进一步说明,真需要动态路由的话最好还是配合 vuex store 来做。

关注 4 回答 1

坏人未变坏 提出了问题 · 7月30日

vue-element-admin中侧边栏routes改变,但是sidebar的computed中routes一直不会更新?

我是在首页请求的侧边栏接口,不是在permission中请求的
1.png

这是sidebar:
2.png

请问该如何处理谢谢!

关注 3 回答 2

坏人未变坏 回答了问题 · 7月1日

解决vxe-table分页无法显示?

要用<vxe-grid> 不能用 <vxe-table> 要吐血了。。。
如果用<vxe-table> 就要在下面加:

<vxe-pager
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
      :total="tablePage.totalResult"
      :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
      >
    </vxe-pager>

暂时不知道两个的区别

关注 2 回答 1

坏人未变坏 提出了问题 · 7月1日

解决vxe-table分页无法显示?

vue版本:2.6.10 xe-utils:2.6

html:

  border
  height="300"
  show-header-overflow="tooltip"
  show-overflow="tooltip"
  highlight-hover-row
  :resizable="true"
  :loading="loading"
  :pager-config="tablePage"
  :data="tableData">
  <vxe-table-column type="seq" width="60" title="序号"></vxe-table-column>
  <vxe-table-column field="name" title="订单创建日期" width="120"></vxe-table-column>
  <vxe-table-column field="sex" title="订单号" width="100"></vxe-table-column>
  <vxe-table-column field="sex" title="客户名称" width="100"></vxe-table-column>
  <vxe-table-column field="sex" title="备注" width="100"></vxe-table-column>
  <vxe-table-column field="role" title="操作" width="80" fixed="right">
    <template v-slot="{ row }">
      <vxe-button status="primary" @click="" size="mini">查看</vxe-button>
    </template>
  </vxe-table-column>

</vxe-table>
js:
data() {
  return {
    tableData: [],
    loading: false,
    tablePage: {
      total: 110,
      currentPage: 1,
      pageSize: 10,
      align: 'center',
      pageSizes: [10, 20, 50, 100, 200, 500],
      perfect: true
    }
  }
},
created() {
  this.getListData2()
},
methods: {
  getListData2 () {
    this.loading = true
    getListData().then(res => {
      this.tableData = res.result
      console.log(res.total);
      // this.tablePage.total = res.total
      // console.log(res)
      this.loading = false
    })
  }
}

main.js:

import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
Vue.use(VXETable)


JSON:
`{
  code: 200,
  total: 11,
  result: [
    {name: '张东方闪电三', sex: '男', age: 20},
          {name: '李大范甘迪四', sex: '男', age: 21},
          {name: '王五', sex: '女', age: 22},
          {name: '王五', sex: '女', age: 22},
          {name: '王五', sex: '女', age: 22},
          {name: '王五', sex: '女', age: 22},
          {name: '王五', sex: '女', age: 22},
          {name: '王五', sex: '女', age: 22},
          {name: '王五', sex: '女', age: 22},
          {name: '王五', sex: '女', age: 22}
          
  ]
}`

在线例子:[http://jsrun.net/SQvKp/edit](http://jsrun.net/SQvKp/edit)

关注 2 回答 1

坏人未变坏 提出了问题 · 3月27日

解决请问这段vue代码是什么意思?

提问.png
vue的代码
而且不知道为什么我的编辑器还报错了,这都上线了,代码本身应该是没问题的。
谢谢!

关注 4 回答 3

认证与成就

  • 获得 8 次点赞
  • 获得 92 枚徽章 获得 4 枚金徽章, 获得 18 枚银徽章, 获得 70 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-05-22
个人主页被 802 人浏览