之前用vue写了一个欢迎界面,然后用php写了后端的处理,但把php文件与vue整合时出现了错误,先是通过el-button跳转到php页面时网页并没有改变,而是进行了php文件的下载,这个我很纳闷。还有在html文件里通过axios访问php提示404 not found
报错截图
文件目录
html文件中访问php的部分代码
getdata() {
setInterval(() => {
axios.get('/src/assets/php/data.php').then(res => {
this.allincome = res.data;
});
}, 500)
}
<form action="/src/php/welcome.php" method="POST" target="fmResult" id="data" name="dataform">
代码发一下
<!DOCTYPE html>
<html>
</html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<title>用户登录</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body onbeforeunload="window.location='destroyed.php'">
<div id="app">
<el-container direction="vertical">
<el-header style="right: 0;">投资页面</el-header>
<el-container>
<el-aside width="22%" style="text-align: center;">
<span>总收益</span><br>
<span>{{allincome}}</span>
</el-aside>
<el-container>
<el-main>
<form action="welcome.php" method="POST" target="fmResult" id="data" name="dataform">
<span>第<font color="red">{{round}}</font>轮投资</span><br>
<el-radio-group v-model="radio1" @change.native="changelabel" :disabled="radioable">
<el-radio-button label="0"></el-radio-button>
<el-radio-button label="1" :disabled="label1"></el-radio-button>
<el-radio-button label="2" :disabled="label2"></el-radio-button>
<el-radio-button label="3" :disabled="label3"></el-radio-button>
<el-radio-button label="4" :disabled="label4"></el-radio-button>
<el-radio-button label="5" :disabled="label5"></el-radio-button><br>
<el-radio-button label="6" :disabled="label6"></el-radio-button>
<el-radio-button label="7" :disabled="label7"></el-radio-button>
<el-radio-button label="8" :disabled="label8"></el-radio-button>
<el-radio-button label="9" :disabled="label9"></el-radio-button>
<el-radio-button label="10" :disabled="label10"></el-radio-button><br>
<input type="text" name="num" v-model="radio1" v-show="false" id="username"><br>
<input type="text" name="sessionid" v-show="false" value="<?= $sessionid ?>"><br>
<input type="text" name="round" v-model="round" v-show="false"><br>
<br>
<el-button type="primary" round :disabled="submitable" @click="changeable" style="margin-top: 30%;">提交
</el-button><br><br>
<el-button type="success" id="roundnum" round @click.native="changeround" :disabled="submitround" v-if="roundable" style="margin-top: 10%;">
下一轮</el-button>
</el-radio-group><br>
</form>
</el-main>
</el-container>
<el-aside type="float:right" width="22%">
<span text-align="left">信息公示</span><br>
<div>
<iframe name="fmResult" frameborder="0"></iframe>
</div>
</el-aside>
</el-container>
</el-container>
</div>
<!-- 定义各个元素的属性 -->
<style type="text/css">
#app,
html,
body {
height: 100%;
width: 100%;
top: 0;
padding: 0;
margin: 0;
left: 0;
}
.el-header {
background-color: black;
color: white;
font: bold;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #ebebeb;
color: #333;
line-height: 180px;
}
.el-main {
background-color: #ebebeb;
color: #333;
text-align: center;
line-height: 140px;
}
.el-container {
height: 100%;
width: 100%;
}
</style>
<!-- vue的参数设置 -->
<script>
new Vue({
el: "#app",
data() {
return {
radio1: '', //按钮的绑定值
round: 1, //第几轮
allincome: 10,
submitable: true, //控制提交按钮的禁用状态
submitround: true, //控制下一轮按钮的禁用状态
radioable: false, //控制按钮组的禁用状态
label1: false, //控制每一个按钮的禁用状态
label2: false,
label3: false,
label4: false,
label5: false,
label6: false,
label7: false,
label8: false,
label9: false,
label10: false,
roundable: true,
frameable: true,
cardable: false
};
},
methods: {
changelabel: function(val) { //更改单选框的change事件
let that = this
that.submitable = false;
},
changeround: function() { //更改下一轮按钮的点击事件
this.round += 1;
this.submitround = true;
this.radioable = false;
this.radio1 = '';
this.frameable = false;
if (this.round == 4) {
this.roundable = false;
this.cardable = true;
};
if (this.allincome < 10 && this.allincome >= 9) {
this.label10 = true;
};
if (this.allincome < 9 && this.allincome >= 8) {
this.label10 = this.label9 = true;
};
if (this.allincome < 8 && this.allincome >= 7) {
this.label10 = this.label9 = this.label8 = true;
};
if (this.allincome < 7 && this.allincome >= 7) {
this.label10 = this.label9 = this.label8 = this.label7 = true;
};
if (this.allincome < 6 && this.allincome >= 5) {
this.label10 = this.label9 = this.label8 = this.label7 = this.label6 = true;
};
if (this.allincome < 5 && this.allincome >= 4) {
this.label10 = this.label9 = this.label8 = this.label7 = this.label6 = this.label5 = true;
};
if (this.allincome < 4 && this.allincome >= 3) {
this.label10 = this.label9 = this.label8 = this.label7 = this.label6 = this.label5 = this.label4 = true;
};
if (this.allincome < 3 && this.allincome >= 2) {
this.label10 = this.label9 = this.label8 = this.label7 = this.label6 = this.label5 = this.label4 = this.label3 = true;
};
if (this.allincome < 2 && this.allincome >= 1) {
this.label10 = this.label9 = this.label8 = this.label7 = this.label6 = this.label5 = this.label4 = this.label3 = this.label2 = true;
};
if (this.allincome < 1) {
this.label10 = this.label9 = this.label8 = this.label7 = this.label6 = this.label5 = this.label4 = this.label3 = this.label2 = this.label1 = true;
};
},
changeable: function() { //更改提交的点击事件
this.submitround = !this.submitround;
this.radioable = true;
document.dataform.submit();
this.submitable = true;
this.frameable = true;
},
getdata() {
setInterval(() => {
axios.get('data.php').then(res => {
this.allincome = res.data;
});
}, 500)
}
// clearcontent() {
// alert("确定离开嘛");
// console.log('sdf');
//
// $servername = "localhost";
// $username = "root";
// $password = "wgz52157";
// $dbname = "myFirstDB";
// // 创建连接
// $conn = new mysqli($servername, $username, $password, $dbname);
// mysqli_query($conn, "DELETE FROM MyUsers WHERE id='$sessionid'");
//
// // window.location.reload();
// }
},
created() {
this.getdata()
}
})
</script>
</body>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</html>
<?php
session_destroy();
?>
这个是html页面的代码,文件结构如问题中所述,运行时提示php not found
使用绝对路径