目前发现一个问题,项目上线后,在某个详情页手动刷新浏览器当前页面后跳到首页去了,这个是什么原因尼?应该是刷新当前页面就好了,是不是因为生产模式没有路由没有hash值了?
To die is to die, to live is to suffer
软件:http://www.sharerw.com/
没有足够的数据
Banshee 提出了问题 · 3月29日
目前发现一个问题,项目上线后,在某个详情页手动刷新浏览器当前页面后跳到首页去了,这个是什么原因尼?应该是刷新当前页面就好了,是不是因为生产模式没有路由没有hash值了?
目前发现一个问题,项目上线后,在某个详情页手动刷新浏览器当前页面后跳到首页去了,这个是什么原因尼?应该是刷新当前页面就好了,是不是因为生产模式没有路由没有hash值了?
关注 2 回答 1
Banshee 赞了回答 · 3月26日
该走的总会走 该留的也无法挽留
let count = -1;
window.onbeforeunload = () => {
count++;
if (count < 3) return false;
};
该走的总会走 该留的也无法挽留 {代码...}
关注 4 回答 3
Banshee 发布了文章 · 1月29日
将vue项目里面通过引入echarts,完成简单地图数据渲染,代码特殊地方通过注释表明
安装 cnpm i echarts -S 4.9.0
最新的5.0引入方式不一样,如果直接使用cnpm i echarts -S会安装最新的版本,引入方式也要跟随文档更改
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>
安装 cnpm i echarts -S 4.9.0最新的5.0引入方式不一样,如果直接使用cnpm i echarts -S会安装最新的版本,引入方式也要跟随文档更改
赞 0 收藏 0 评论 0
Banshee 提出了问题 · 1月26日
之前的项目需求中菜单都是二级菜单,现在需要增加到三级菜单,获取到后台数据后动态加载,保证菜单既能实现二级,也能实现三级的,请问该如何做尼
之前的项目需求中菜单都是二级菜单,现在需要增加到三级菜单,获取到后台数据后动态加载,保证菜单既能实现二级,也能实现三级的,请问该如何做尼
关注 2 回答 1
Banshee 提出了问题 · 1月25日
之前用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>
之前用iView的时候只是将菜单组件Menu封装了二级菜单,现在需要再添加三级菜单,因为后面数据里面有的是二级菜单的,有的是三级菜单的,这个代码该如何更改呢?代码:
关注 1 回答 0
Banshee 赞了回答 · 1月20日
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的实际地方。既安全又稳定。
vue项目打包后部署到服务器上一般使用nginx作为服务器中间件。因为是前后端分离的项目,在本地是通过node来代理api的。打包之后失去了node环境,所以需要采用nginx作为服务器中间件来部署和代理api。
关注 4 回答 5
Banshee 赞了回答 · 1月20日
那看你用啥web服务器了, 大部分是nginx或者tomcat
那看你用啥web服务器了, 大部分是nginx或者tomcat
关注 4 回答 5
Banshee 赞了回答 · 1月20日
如果是hash模式,直接将dist上传到服务器就可以;如果是history模式,需要服务器做一些配置
如果是hash模式,直接将dist上传到服务器就可以;如果是history模式,需要服务器做一些配置
关注 4 回答 5
Banshee 赞了回答 · 1月20日
要看你后端用的什么语言写的,好像就是把api转应用程序就可以了.
要看你后端用的什么语言写的,好像就是把api转应用程序就可以了.
关注 4 回答 5
查看全部 个人动态 →
(゚∀゚ )
暂时没有
注册于 2017-07-02
个人主页被 3.3k 人浏览
推荐关注