如何用axios连接vue和egg
现在我的情况是不会连接了。
前端vue代码:
<template scope>
<div class="interface" id="#app">
<div class="Headerheading">
<img src="../imgs/01.jpg" alt="" class="logo">
<h4 class="Headertitle">爱学习</h4>
</div>
<div class="background">
<a href="/Epm">
<img src="../imgs/return.jpg" alt="" class="return">
</a>
<div class="content">
<div class="navbox">
<ul class="nav">
<li><a href="/MultiplesElection" style="color: #a9a9a9;">单选题</a></li>
<li><a href="/SingleElection" class="shortAnswer">多选题</a><div class="mark"></div></li>
<li><a href="/GapFilling" style="color: #a9a9a9;">填空题</a></li>
<li><a href="/Shortanswer" style="color: #a9a9a9;">简答题</a></li>
</ul>
<hr>
</div>
<div class="form">
<form action="#" class="formbox" name="datas">
<ul class="formlist">
<li>
<h3 style="font-size:15px;margin-top:10px;font-weight:500">试题题干</h3>
<textarea type="text" style="width:70.4%;height:118px;margin-top:5px;"></textarea>
</li>
<li>
<h3 style="font-size:15px;margin-top:25px;font-weight:500">试题选项</h3>
<!-- <textarea type="text" style="width:70.4%;height:78px;margin-top:5px;"></textarea> -->
<p class="A">(A)</p>
<input type="text" style="width:70.4%;height:60px;margin-top:5px;"/>
<p class="B">(B)</p>
<input type="text" style="width:70.4%;height:60px;margin-top:5px;"/>
<p class="C">(C)</p>
<input type="text" style="width:70.4%;height:60px;margin-top:5px;" />
<p class="D">(D)</p>
<input type="text" style="width:70.4%;height:60px;margin-top:5px;"/>
</li>
<li>
<h3 style="font-size:15px;margin-top:25px;font-weight:500">试题答案</h3>
<input type="checkbox" name="1" value="" checked style="margin-top:17px;" />A
<input type="checkbox" name="1" value="" checked style="margin-left:3.6%;"/>B
<input type="checkbox" name="1" value="" checked style="margin-left:3.6%;"/>C
<input type="checkbox" name="1" value="" checked style="margin-left:3.6%;"/>D
</li>
<li>
<h3 style="font-size:15px;margin-top:35px;font-weight:500;">试题标签</h3>
<ul class="Label">
<li class="simple" @click="simple">简单</li>
<li class="ordinary" @click="ordinary">普通</li>
<li class="difficulty" @click="difficulty">困难</li>
</ul>
<div style="clearfix:after{content:””; display:block; clear:both;padding-top:10px;}"></div>
<input type="text" class="Labelinput" v-model="demo">
</li>
</ul>
<input type="submit" class="submit" value="保存">
</form>
</div>
</div>
</div>
</div>
</template>
<script>
// import axios from "axios";
module.exports = {
data:function(){
return {
demo:"",
}
},
methods:{
simple(){
this.demo="简单"
},
ordinary(){
this.demo="普通"
},
difficulty(){
this.demo="困难"
},
TianJia() {
axios.post("http://127.0.0.1:7001",{
})
.then(
);
}
}
}
console.log(this.datas)
</script>
<style scoped>
.submit{
width: 19.6%;
height: 30px;
background-color: #4f89b1;
border: none;
border-radius: 8px;
font-size: 13px;
color: white;
margin-left: 37%;
margin-top: 123px;
}
.Labelinput{
width:70.4%;
height:38px;
}
.Label{
margin-top: 9px;
}
.Label li{
float: left;
margin-right: 1%;
text-align: center;
}
.simple{
width:7.6%;
height:28px;
background-color: #e9e9e9;
border: none;
border: 1px solid #c7c7c7;
outline:none;
cursor: pointer;
font-size: 15px;
color: #979797;
float: left;
line-height: 28px;
}
.ordinary{
width:7.6%;
height:28px;
background-color: #c7c7c7;
border: none;
border: 1px solid #c7c7c7;
outline:none;
cursor: pointer;
font-size: 15px;
color: #fcfcfc;
float: left;
line-height: 28px;
}
.difficulty{
width:7.6%;
height:28px;
background-color: #a2a2a2;
border: none;
border: 1px solid #c7c7c7;
outline:none;
cursor: pointer;
font-size: 15px;
color: #ffffff;
float: left;
line-height: 28px;
}
.promptbox{
width: 78.2%;
background-color: #f2f2f2;
height: 4.1%;
border: 1px solid #c7c7c7;
}
.promptbox p{
font-size: 12px;
color: #6d6d6d;
line-height: 31px;
margin-left: 0.9%;
}
.formlist li{
list-style: none;
}
.form{
margin-left: 3.9%;
}
.shortAnswer{
color: #0f8be1;
}
.nav a{
text-decoration: none;
}
.mark{
width: 100%;
height: 2px;
margin-top: 7px;
background-color: #0f8be1;
}
.nav{
width: 87.7%;
height: 40px;
margin: 0 auto;
}
.navbox li {
float: left;
list-style: none;
margin-left: 17.2%;
font-size: 13px;
color: #a9a9a9;
margin-top: 10px;
}
hr{
background-color: #c4c4c4;
width: 87.7%;
margin: 0 auto;
}
.content{
background-color: #ffffff;
height: 100%;
width: 53.1%;
margin: 0 auto;
}
.return{
position: absolute;
width: 4.2%;
height: 4.4%;
}
.background{
width: 100%;
height: 1080px;
background-color: #ececec;
}
*{
margin: 0;
padding: 0;
}
.logo{
margin-left: 2%;
margin-top: 0.5%;
float: left;
}
.interface{
width: 100%;
height: 1080px;
}
.Headerheading{
background-color: #0f8be1;
width: 100%;
height: 50px;
}
.Headertitle{
color: #f3f9ff;
font-size: 15px;
padding-top: 14px;
float: left;
padding-left: 1%;
}
egg代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="/" method="post">
<h2>试题题干</h2>
<input type="text" name="text_one" id="">
<h2>答案选项</h2>
<span>(A)</span>
<input type="text" name="text_two" id="">
<span>(B)</span>
<input type="text" name="ext_two" id="">
<span>(C)</span>
<input type="text" name="xt_two" id="">
<span>(D)</span>
<input type="text" name="t_two" id="">
<h2>正确答案</h2>
<form action="" method="POST">
<input type="checkbox" name="one" value="a">(A)
<input type="checkbox" name="two" value="b">(B)
<input type="checkbox" name="three" value="c">(C)
<input type="checkbox" name="four" value="d">(D)
<h2>试题标签</h2>
<select name="tree" id="">
<option value="简单">简单</option>
<option value="较难">较难</option>
<option value="很难">困难</option>
</select>
<button type="submit">保存</button>
</form>
</form>
</body>
</html>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论