这是个全新的Vue项目,引入了ElementUI
2023022014212718.png
将App.vue里的内容干掉,剩如下
2023022014212719.png
然后下面的三个文件也可以删掉了
2023022014212720.jpg
2023022014212821.jpg
在views文件下新建Login.vue组件
2023022014212822.png
到router目录下的index.js
2023022014212823.png
那么现在的流程大概是这样子的
2023022014212824.jpg
启动
2023022014212825.png
写登陆页面
系统登录
记住我
登录
.loginContainer{
border-radius: 15px;
background-clip: padding-box;
margin:180px auto;
width:350px;
padding: 15px 35px 15px 35px;
background: #a8dad5;
border:1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
.loginTitle{
margin: 0px auto 40px auto;
text-align: center;
}
.loginRemeber{
text-align: left;
margin:0px 0px 15px 0px;
}
2023022014212826.png
给登录按钮添加点击事件
2023022014212827.png
添加方法
2023022014212828.png
2023022014212929.png
添加表单校验 暂时先吧:ref="form"去掉
2023022014212930.png
2023022014212931.png
校验的username,password,code需要和上面的对应上 需要加prop属性
2023022014212932.jpg
测试,校验规则是存在的,但是出现的问题是点击表单还是生效的
2023022014212933.png
在点击登录时候添加表单校验
2023022014212934.png
2023022014212935.png
会自动根据我们自己定义的校验规则来校验,还是将用户名长度改成5位好了
2023022014212936.png
2023022014212937.png
2023022014212938.png
用ElementUI的showMessage
2023022014213039.png
2023022014213040.png
效果如下
2023022014215141.png
接下来需要发送axios请求
安装axios
2023022014215142.png
安装完成,可以在package.json文件看到
2023022014215143.png
组件里引入
2023022014215144.png
2023022014215145.png
这里我随便建个后端,先进行演示,会出现跨域现象,这里跨域先不讲
2023022014221246.png
2023022014221247.png
看下返回的信息里有什么
2023022014221348.png
系统登录
记住我
登录
.loginContainer{
border-radius: 15px;
background-clip: padding-box;
margin:180px auto;
width:350px;
padding: 15px 35px 15px 35px;
background: #a8dad5;
border:1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
.loginTitle{
margin: 0px auto 40px auto;
text-align: center;
}
.loginRemeber{
text-align: left;
margin:0px 0px 15px 0px;
}
总结
到此这篇关于Vue项目创建首页发送axios请求的文章就介绍到这了,更多相关Vue创建首页发送axios请求内容请搜索知鸟论坛以前的文章或继续浏览下面的相关文章希望大家以后多多支持知鸟论坛！ |
发表于 2023-5-4 11:50:15