VUE.js前端向后端发送请求 以及页面路由跳转

VUE向后端发请求

首先构造入参请求体,内容通常是一个json格式的,(jason:前后端数据交互格式之一,辨识度好,发送接收方便,花括号引起来,格式如下。

let params = {
 id :this.id,
 count : this.count
}

随后直接拿到路径发请求咯,从后端接收的数据放到res里以便前端接着处理,这是常见的回调语法,发请求的同时拿到后端返回的信息。

window.vue.$apiAxios.post('myApp/countUsers',params).then(res=>{
		if(res.data.statusCode === 200){
			let content = res.data.content;
			//todo 接下来对content的内容为所欲为即可。
		}
	}
)

注意:!!!如果你是get请求,post换成get外,params还要加上{},变成{params}。

VUE路由跳转

路由跳转的基础写法:

this.$router.push({name:'myApp/countUsers' , query:{id: this.id}})

其中name可以替换成path,query可以替换成params,区别在于替换成params之后路径栏不会显示当前id路径,只会显示path,而query却可以显示详细id部分路径,比如网页上常跟的?id = E67UI92L1YS9,一般统一用query,因为params不支持path,所以总结起来:
统一用(name:, query(非密型)/params(密码型):{})

  • 5
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,前端需要安装 axios 库,用于发送 HTTP 请求。接下来,可以通过以下步骤实现 Vue2.js 项目连接后端实现登录: 1. 在 Vue2.js 项目中创建一个登录页面,包括用户名和密码输入框以及登录按钮。 2. 在登录页面中,当用户点击登录按钮时,通过 axios 发送 HTTP POST 请求后端登录接口,携带用户名和密码等登录信息。 3. 后端接口收到请求后,对用户的登录信息进行验证,如果验证通过,则返回一个包含用户信息的 JSON 对象,否则返回错误信息。 4. 前端接收到后端返回的 JSON 对象后,可以将用户信息存储在本地,如将用户信息保存在 Vuex 中。 5. 在登录成功后,跳转到其他需要登录才能访问的页面时,可以在路由守卫中验证用户是否已登录,如果已登录则放行,否则跳转到登录页面。 下面是一个示例代码,用于实现 Vue2.js 项目连接后端实现登录: ```html <template> <div> <input type="text" v-model="username" placeholder="用户名"> <input type="password" v-model="password" placeholder="密码"> <button @click="login">登录</button> </div> </template> <script> import axios from 'axios'; export default { data() { return { username: '', password: '', }; }, methods: { async login() { try { const response = await axios.post('/api/login', { username: this.username, password: this.password, }); const user = response.data.user; // 将用户信息保存在 Vuex 中 this.$store.commit('setUser', user); // 跳转到其他需要登录才能访问的页面 this.$router.push('/dashboard'); } catch (error) { console.error(error); alert('登录失败,请检查用户名和密码'); } }, }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值