今天完成的事情：

今天的收获是比较大的，解决了我这大半个月来长久的问题，就是一个简单的post请求而已，但是就是发不出去，真的是气，哪里的原因都找过了，还是不行，操蛋真的是，于是今天来请刘师兄帮忙解决一下，这个人实在是有点暴躁，搞了半天还是没找到问题在哪里，（现在也没找到，以后我会把这个项目留着，看看到底是哪里出了问题），于是无奈只能祭出了绝技：重建项目。

没错，又重建了一个新的项目，话说这是我建的第三还是第四个项目了，实在是不想新建本来，找不到问题在哪里实在是比较耻辱，本来想找到问题洗刷冤屈，但是新建项目貌似有点像问题妥协的样子，实在是不推崇这个做法，但是后来新建过项目之后，又把之前的代码拿过来跑了一遍，一点问题也没有啊！！！真的是日狗了。浪费我这么长时间。

不过通过今天还是又温习了一遍怎么新建项目，也不算是收获吧：

<template>
   <div id="app">
<!-- 3.再用一个大盒子包裹,控制登录框大小和位置 -->
<div class="form-container">
           <h2>用户登录</h2>
<!-- 1.通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left，当设为 top 时标签会置于表单域的顶部 -->
           <!-- 2.将一些默认formLabelAlign、name、region等名称改掉 -->
           <!-- ref是vue提供的属性,让我们可以给dom元素起名字 -->
<el-form label-position="top" label-width="80px" :model="formData" :rules="rules" ref="formData">
               <el-form-item  prop="username" prefix-icon="el-icon-user">
                   <el-input v-model="formData.username" prefix-icon="el-icon-user" ></el-input>
               </el-form-item>

               <el-form-item  prop="password">
<!-- 密码输入框增加属性type="password"就可以变成密文 -->
<el-input v-model="formData.password" type="password" prefix-icon="el-icon-lock"></el-input>
               </el-form-item>

               <div>{{hint}}</div>
               <el-button class="login-btn" type="success" @click="submitForm()">登录</el-button>
           </el-form>
       </div>
   </div>
</template>

<script>
// 这里的formData、username、password都要跟上面的html代码对应
export default {
data() {
return {
formData: {
username: "",
password: "",
},
//添加表单验证规则,名称要与formDate内的一致
rules: {
username: [
//required:必须
                       //message:提示信息
                       //trigger:触发时机,blur输入框失去焦点触发,change输入框内容改变就触发
                       //min:最短  max:最长
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, message: '密码长度输入有误', trigger: 'blur' }
]
},
hint:'',
};
},
//方法
methods:{
submitForm(){
// http://dev.admin.carrotsNaNteng.com
this.$axios({
method:'post',
url:'/api/a/login',
// params:{
                   //     name:'admin',
                   //     pwd:'123456',
                   // }
}).then((res)=>{
console.log(res);
})
}
},
};
</script>

<style lang="scss">
//  删除默认样式,重新编写
#app {
height: 100%;
background-color: #324152;
display: flex;
justify-content: center;
align-items: center;
.el-icon-user{
font-size: 20px;
}
.el-icon-lock{
font-size: 20px;
}
.form-container {
background-color: #fff;
width: 400px;
padding: 40px;
box-sizing: border-box;
border-radius: 10px;
opacity: .8;
.login-btn {
width: 100%;
}
.hint{
height: 30px;
line-height: 30px;
}
}
background: url("../../img/background.png");
background-size: cover;
}
</style>

明天计划的事情：

明天开始进入新的篇章，该开始好好干了，今天已经把这个沙雕问题解决了，对vue的理解也该进入下一步了，希望以后别遇到这么沙雕的问题了。

收获：

收获就是上面说的，解决了长久以来让我头疼的post请求，收获算不上，明天继续努力。