Vue项目创建首页发送axios请求的方法实例
更新时间：2023年02月20日 14:28:05 作者：biubiubiu0706
这篇文章主要给大家介绍了关于Vue项目创建首页发送axios请求的相关资料,文中通过图文以及实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
这是个全新的Vue项目,引入了ElementUI
将App.vue里的内容干掉,剩如下
然后下面的三个文件也可以删掉了
在views文件下新建Login.vue组件
到router目录下的index.js
那么现在的流程大概是这样子的
启动
写登陆页面
<template>
<div>
<el-form :ref="form" :model="loginForm" class="loginContainer">
<h3 class="loginTitle">系统登录</h3>
<!-- auto-complete="false"自动补全 -->
<el-form-item label="">
<el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="">
<el-input type="text" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="">
<el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片更换验证码" style="width:250px;margin-right: 5px;"></el-input>
<img :src="captchaUrl"/>
</el-form-item>
<el-checkbox v-model="checked" class="loginRemeber">记住我</el-checkbox>
<el-button type="primary" style="width:100%">登录</el-button>
</el-form>
</div>
</template>
<script>
export default {
name:"Login",
data(){
return{
captchaUrl:'',//验证码图片链接
loginForm:{
username:'admin',
password:'123456',
code:'1234'
},
checked:true
}
}
}
</script>
<style>
.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;
}
</style>
给登录按钮添加点击事件
添加方法
添加表单校验 暂时先吧:ref="form"去掉
校验的username,password,code需要和上面的对应上 需要加prop属性
测试,校验规则是存在的,但是出现的问题是点击表单还是生效的
在点击登录时候添加表单校验
会自动根据我们自己定义的校验规则来校验,还是将用户名长度改成5位好了
用ElementUI的showMessage
效果如下
接下来需要发送axios请求
安装axios
安装完成,可以在package.json文件看到
组件里引入
这里我随便建个后端,先进行演示,会出现跨域现象,这里跨域先不讲
看下返回的信息里有什么
<template>
<div>
<el-form :rules="rules" ref="form" :model="loginForm" class="loginContainer">
<h3 class="loginTitle">系统登录</h3>
<!-- auto-complete="false"自动补全 -->
<el-form-item prop="username">
<el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="text" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item prop="code">
<el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片更换验证码" style="width:250px;margin-right: 5px;"></el-input>
<img :src="captchaUrl"/>
</el-form-item>
<el-checkbox v-model="checked" class="loginRemeber">记住我</el-checkbox>
<el-button type="primary" style="width:100%" @click="submitLogin">登录</el-button>
</el-form>
</div>
</template>
<script>
import axios from 'axios'
export default {
name:"Login",
data(){
return{
captchaUrl:'',//验证码图片链接
loginForm:{
username:'admin',
password:'123456',
code:'1234'
},
checked:true,
rules:{
username:[
{required:true,message:'请输入用户名',trigger:'blur'},
{min:5,max:12,message:'用户名长度6到12位',trigger:'blur'}
],
password:[
{required:true,message:'请输入密码',trigger:'blur'},
{min:6,max:12,message:'密码长度6到12位',trigger:'blur'}
],
code:[
{required:true,message:'请输入验证码',trigger:'blur'},
{min:4,max:4,message:'验证码长度4位',trigger:'blur'}
],
}
}
},
methods:{
submitLogin(){
this.$refs.form.validate((valid)=>{
if(valid){
axios.post('http://localhost:8081/demo',{username:"xxx",password:"123456",code:"1234"}).then((res)=>{
console.log(res)
})
}else{
this.$message.error('请输入正确格式')
return false
}
})
}
}
}
</script>
<style>
.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;
}
</style>总结
到此这篇关于Vue项目创建首页发送axios请求的文章就介绍到这了,更多相关Vue创建首页发送axios请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于vue.js中Vue-router 2.0基础实践的相关资料，其中包括vue-router 2.0的基础用法、动态路由匹配、嵌套路由、编程式路由、命名路由以及命名视图等相关知识，需要的朋友可以参考借鉴，下面来一起看看吧。2017-05-05
高亮显示是我们日常开发中经常会遇到的需求,下面这篇文章主要给大家介绍了关于如何使用Vue3实现文章内容中多个"关键词"标记高亮显示的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue中provide inject的响应式监听解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了页面内锚点定位及跳转方法总结，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue中跨域以及sessionId不一致问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
递归 简单来讲就是程序自己调用自身,vue中的递归组件就是,组件自身调用自身,下面这篇文章主要给大家介绍了关于Vue3递归组件的用法,需要的朋友可以参考下2022-03-03
计算属性是Vue中比较好用的API，开发者可以利用计算属将复杂的计算进行缓存，同时基于它的响应式特性，我们无需关注数据更新问题，但需要注意的是，计算属性是惰性求值的，本文将详细介绍计算属性的实现原理,需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了vue递归组件实现树形结构，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要介绍了el-form 多层级表单的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
在平时开发是经常用到一些父子组件通信,经常用到props、vuex等等,下面这篇文章主要给大家介绍了关于vue中v-model和.sync修饰符区别的相关资料,需要的朋友可以参考下2022-06-06
最新评论