Banshee

Banshee 查看完整档案

海外编辑长江职业学院  |  Mechatronics 编辑自由前端人  |  web前端开发cv工程师 编辑 Bashee 编辑
编辑

To die is to die, to live is to suffer
软件:http://www.sharerw.com/

个人动态

Banshee 提出了问题 · 3月29日

vue项目里面如何让浏览器刷新页面不跳首页而是当前页刷新?

目前发现一个问题,项目上线后,在某个详情页手动刷新浏览器当前页面后跳到首页去了,这个是什么原因尼?应该是刷新当前页面就好了,是不是因为生产模式没有路由没有hash值了?

关注 2 回答 1

Banshee 赞了回答 · 3月26日

【跪求】红包求实现个JS小功能:

该走的总会走 该留的也无法挽留

let count = -1;
window.onbeforeunload = () => {
    count++;
    if (count < 3) return false;
};

关注 4 回答 3

Banshee 发布了文章 · 1月29日

vue项目使用echarts地图简单渲染数据

将vue项目里面通过引入echarts,完成简单地图数据渲染,代码特殊地方通过注释表明

注意:

安装 cnpm i echarts -S 4.9.0
最新的5.0引入方式不一样,如果直接使用cnpm i echarts -S会安装最新的版本,引入方式也要跟随文档更改

main.js

import echarts from 'echarts'
Vue.prototype.$echarts = echarts 

主页面:

<template>
      <div id="china_map" :style="{ width: width, height: '400px' }"></div>
</template>
<script>
    import china from "echarts/map/json/china.json";  //中国地图
echarts.registerMap("china", china);
export default {
    name: "index",
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
  },
  data(){
  }
  mounted() {
    this.setMapData();
  },
  methods: {
     // 地图
    setMapData() {
      // 初始化echarts实例 #D8E9FD
      this.chinachart = echarts.init(document.getElementById("china_map"));
      // 进行相关配置
      this.chartOption = {
        tooltip: {
          // 鼠标移到图里面的浮动提示框
          // formatter详细配置: https://echarts.baidu.com/option.html#tooltip.formatter
          formatter(params, ticket, callback) {
            // params.data 就是series配置项中的data数据遍历
            let localValue, perf, downloadSpeep, usability, point;
            if (params.data) {
              localValue = params.data.value;
              perf = params.data.perf;
              downloadSpeep = params.data.downloadSpeep;
              usability = params.data.usability;
              point = params.data.point;
            } else {
              // 为了防止没有定义数据的时候报错写的
              localValue = 0;
              perf = 0;
            }
            let htmlStr = `
          <div style='font-size:18px;'> ${params.name}</div>
          <p style='text-align:left;margin-top:-4px;'>
              项目数量:${localValue}<br/>
              占比:${perf}<br/>
          </p>
        `;
            return htmlStr;
          },
          backgroundColor: "#ff7f50", //提示标签背景颜色
          textStyle: { color: "#fff" }, //提示标签字体颜色
        },
        visualMap: {
          show: true,
          bottom: 60,
          right: 200,
          text: ["高", "低"],
          //  min:0,
          //   precision:0,
          itemHeight: 200,
          color: [
            "#5475f5",
            "#9feaa5",
            "#85daef",
            "#74e2ca",
            "#e6ac53",
            "#9fb5ea",
          ],
        },
        // geo配置详解: https://echarts.baidu.com/option.html#geo
        geo: {
          // 地理坐标系组件用于地图的绘制
          map: "china", // 表示中国地图
          // roam: true, // 是否开启鼠标缩放和平移漫游
          zoom: 1.2, // 当前视角的缩放比例(地图的放大比例)
          label: {
            // show: true
          },
          itemStyle: {
            // 地图区域的多边形 图形样式。
            normal: {
              //未选中的状态
              borderColor: "#ffffff",
              areaColor: "#D8E9FD", //背景颜色
              label: {
                // show: true, //显示名称
              },
            },
            emphasis: {
              //选中的状态
              // 高亮状态下的多边形和标签样式
              shadowBlur: 20,
              shadowColor: "rgba(0, 0, 0, 0.5)",
              borderColor: "#fff",
              areaColor: "#DA3A3A",
            },
          },
        },
        series: [
          {
            name: "地图", // 浮动框的标题(上面的formatter自定义了提示框数据,所以这里可不写)
            type: "map",
            geoIndex: 0,
            label: {
              show: true,
            },
            // 这是需要配置地图上的某个地区的数据,根据后台的返回的数据进行拼接(下面是我定义的假数据)
            data: [
              {
                name: "北京",
                value: 599, //  项目数量
                perf: "60%", // 项目占比
              },
              {
                name: "上海",
                value: 142,
                perf: "40%",
              },
              {
                name: "黑龙江",
                value: 44,
                perf: "1%",
              },
              {
                name: "新疆",
                value: 999,
                perf: "70%",
              },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示地图数据
      this.chinachart.setOption(this.chartOption);
    },
  }
}
</script>

如图:

image

查看原文

赞 0 收藏 0 评论 0

Banshee 提出了问题 · 1月26日

ivew里面的Menu组件如何实现动态数据三级菜单

之前的项目需求中菜单都是二级菜单,现在需要增加到三级菜单,获取到后台数据后动态加载,保证菜单既能实现二级,也能实现三级的,请问该如何做尼

关注 2 回答 1

Banshee 提出了问题 · 1月25日

iview里面的menu组件如何实现三级菜单和二级菜单?

之前用iView的时候只是将菜单组件Menu封装了二级菜单,现在需要再添加三级菜单,因为后面数据里面有的是二级菜单的,有的是三级菜单的,这个代码该如何更改呢?
代码:

<div>
    <Menu
      :open-names="[openItem]"
      accordion
      :active-name="activeItem"
      ref="cusMenu"
    >
      <template v-for="(menu, index) in menuData">
        <MenuItem
          :key="menu.id"
          :name="'' + index"
          v-if="!menu.children"
          @click.native="openPage(menu, menu.path, index)"
        >
          <Icon :type="menu.icon" />
          {{ menu.name }}
        </MenuItem>

        <Submenu v-else :key="menu.id" :name="'' + index">
          <template slot="title">
            <Icon :type="menu.icon" />
            {{ menu.name }}
          </template>
          <MenuItem
            :name="index + '-' + subIndex"
            v-for="(item, subIndex) in menu.children"
            :key="item.id"
            @click.native="openPage(item, menu.path, index, subIndex)"
            >{{ item.name }}</MenuItem
          >
        </Submenu>
      </template>
    </Menu>
  </div>
<script>
export default {
  name: "Menu4",
  data() {
    return {
      activeItem: null,
      openItem: [],
      menuData: [],
      // menuData1: [
      //   {
      //     name: "基础设置",
      //     icon: "ios-paper",
      //     url: "baseSeting.html",
      //     router: "/",
      //     children: [
      //       {
      //         name: "用户设置",
      //         icon: "",
      //         url: "baseSeting.html",
      //         router: "#/",
      //       },
      //       {
      //         name: "菜单设置",
      //         icon: "",
      //         url: "baseSeting.html",
      //         router: "#/menuSet",
      //       },
      //     ],
      //   },
      //   {
      //     name: "接口管理",
      //     icon: "ios-stats",
      //     url: "interfaceMengement.html",
      //     router: "/",
      //     children: [
      //       {
      //         name: "接口设置",
      //         icon: "",
      //         url: "interfaceMengement.html",
      //         router: "#/",
      //       },
      //       {
      //         name: "接口文档",
      //         icon: "",
      //         url: "http://10.81.1.77:8888/doc.html",
      //         router: "#/",
      //       },
      //     ],
      //   },

      //   {
      //     name: "数据中心",
      //     icon: "ios-people",
      //     url: "dataCenter.html",
      //     router: "/",
      //     children: [
      //       {
      //         name: "业务数据",
      //         icon: "",
      //         url: "dataCenter.html",
      //         router: "#/",
      //       },
      //       {
      //         name: "大屏数据",
      //         icon: "",
      //         url: "dataCenter.html",
      //         router: "#/bigScreenData",
      //       },
      //       {
      //         name: "接口统计",
      //         icon: "",
      //         url: "dataCenter.html",
      //         router: "#/interfaceStatistics",
      //       },
      //     ],
      //   },
      // ],
    };
  },
  methods: {
    openPage(item, page, index1, index2) {
      this.getMenuList();
      console.log(
        item,
        page,
        index1,
        index2,
        "openPage(item, page, index1, index2)"
      );
      // console.log(item.url, item.router);
      // console.log(`${process.env.VUE_APP_PAGE}`, 'process.env.VUE_APP_PAGE');
      if (!item.path) {
        this.$Message.destroy();
        this.$Message.info("待开发");
        return;
      }
      if (item.path.indexOf("http") != -1) {
        window.open(`${item.path}${item.router}?item=${index1}`);
      } else {
        if (index2 === undefined) {
          window.location.href = `${item.path}${item.router}?item=${index1}`;
        } else {
          window.location.href = `${item.path}${item.router}?item=${index1}-${index2}`;
        }
      }
    },

    handleUrl(item) {
      console.log(item, "handleUrl");
      if (item.indexOf("-") !== -1) {
        return item.split("-")[0];
      }
      return item;
    },
    // 解析url中的参数值
    getQueryVariable(str) {
      console.log(str, "str");
      const query = window.location.hash.split("?")[1];
      console.log(query, "query");
      if (query) {
        const vars = query.split("&");
        for (let i = 0; i < vars.length; i += 1) {
          const pair = vars[i].split("=");
          if (pair[0] === str) {
            return pair[1];
          }
        }
      }
      return "0";
    },
    // 获取菜单组数据
    async getMenuList() {
      const url = "/api/menu/userTree";
      await this.$Ajax.get(url).then((e) => {
        if (e.success) {
          console.log(e.result, "e.result");
          this.menuData = e.result;
          if (this.menuData.length > 0) {
            this.$set(this.$store.state, "MENULIST", true);
          } else {
            this.$set(this.$store.state, "MENULIST", false);
          }
          this.$nextTick(() => {
            this.$refs.cusMenu.updateActiveName();
            this.$refs.cusMenu.updateOpened();
          });
        } else {
          this.$Message.info(e.message);
        }
      });
    },
  },
  mounted() {
    this.getMenuList();
    this.activeItem = this.getQueryVariable("item");
    this.openItem = this.handleUrl(this.getQueryVariable("item"));
  },
};
</script>

关注 1 回答 0

Banshee 赞了回答 · 1月20日

vue项目打包后如何部署上线访问?

vue项目打包后部署到服务器上一般使用nginx作为服务器中间件。
因为是前后端分离的项目,在本地是通过node来代理api的。打包之后失去了node环境,所以需要采用nginx作为服务器中间件来部署和代理api。

安装nginx后,使用nginx的反向代理,将api的地址代理到你的前端网址上。比如
你前端访问使用 192.168.10.50(www.a.com)
api地址为:192.168.10.51:8088

server {
        listen 80;     #1.你想让你的这个项目跑在哪个端口
        server_name 192.168.10.50;     #2.当前服务器ip
        location / {
            root   E:/my_project/dist;     #3.dist文件的位置
            try_files $uri $uri/ /index.html;     #4.重定向,内部文件的指向(照写)
        }
        location /api {  #4.当请求跨域时配置端口转发
            proxy_pass http://192.168.10.51:8088/api; #5.转发地址
            proxy_set_header Host $http_host;
        }
    }

通过代理api之后,你访问http://192.168.10.51:8088/api就相当于访问http://192.168.10.50:80.
这样既不暴露api的实际地方。既安全又稳定。

关注 4 回答 5

Banshee 赞了回答 · 1月20日

vue项目打包后如何部署上线访问?

关注 4 回答 5

Banshee 赞了回答 · 1月20日

vue项目打包后如何部署上线访问?

那看你用啥web服务器了, 大部分是nginx或者tomcat

关注 4 回答 5

Banshee 赞了回答 · 1月20日

vue项目打包后如何部署上线访问?

如果是hash模式,直接将dist上传到服务器就可以;如果是history模式,需要服务器做一些配置

关注 4 回答 5

Banshee 赞了回答 · 1月20日

vue项目打包后如何部署上线访问?

要看你后端用的什么语言写的,好像就是把api转应用程序就可以了.

关注 4 回答 5

认证与成就

  • 获得 25 次点赞
  • 获得 8 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 8 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-07-02
个人主页被 3.3k 人浏览