如何用axios连接vue和egg

发布于 2022-09-11 22:26:32 字数 8499 浏览 19 评论 0

现在我的情况是不会连接了。
前端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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文