4.VUE学习记录-列表显示-详情页实现-返回 (axios发送请求查询数据展示)

最新推荐文章于 2023-08-12 17:13:39 发布
最新推荐文章于 2023-08-12 17:13:39 发布
阅读量894 收藏 6
点赞数 2
分类专栏： VUE学习笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangshengqiang168/article/details/107779945
版权

demo地址:链接：https://pan.baidu.com/s/1eWmQElwK0AYskR6O5Ith-A 
提取码：zsq6

列表展示的实现

1.引入axios , $http这个名字可以随意定义

2. 安装axios 命令   cnpm install --save axios

3.发送请求

4.展示数据

5.效果图

 详情页的实现

1.修改路由,路由传递key

2.img图片上添加路由跳转

3.跳转页,接收路由传参

 

4.显示item参数

5.效果图

 

返回实现

zhangshengqiang168
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 详情页返回列表，过滤查询条件保留
sika-master的博客
06-17 3619
列表---详情---列表，过滤条件不清空
vue商城项目开发：axios发送请求及列表数据展示
学亮编程手记
09-21 1327
使用axios发送get请求 先install一下axios： 在main.js中全局引入axios： 仅仅在main.js中引入axios不会生效： 第二种解决方法如下，也是最常用的： 使用$http发送请求： 使用axios发送get请求： 请求URL优化 将请求URL定义成变量： axios.defaults.baseURL //是axios默认的属性 发起请求时只需要写相对地址即可： v-for遍历列表数据 补全列表展示模块html代码： 展示接口返回的数据： 使用items
Vue实现详细界面里面有一个列表
最新发布
axbhealj的博客
08-12 460
Vue如何实现详细界面里面有一个列表
Vue + Vue-router + Element-ui+axios 实现研究生管理系统中的“日志查询”（前端+后端数据）
洋大槐
04-02 555
相关的内容和原理都在标题上，这里直接贴出源代码 1.logSearch.vue <template> <div class="logSearch"> <div class="crumbs"> <el-breadcrumb separator="/"> <el-breadcrumb-item> ...
vue框架之 vue+element+axios 实现弹框显示后台数据列表
de44518767的专栏
07-20 1171
　　最近在做一个前后端分离的前端项目，目前只有我一个人以前没有做过前端任何的项目，知识自学过一些前端知识。组长没有说用什么框架，所以我选择了最近挺火的vue框架。从开始听到任务到现在整整一个月时间了，框架已经搭起来了，目前先把功能实现了，页面好看不好看的后期在做。之前没有咋写过博客，啥时候高兴了写一个，有的写得不还被我删了，从现在起，如果在不忙的情况下我会坚持下去。废话不多说，开始。 ...
【Vue】【Element】使用一个方法，打开弹窗并接收返回值
随便写写
07-08 3157
使用一个方法，打开弹窗并接收返回值 示例 父组件 <template> <div> <el-button @click="open1">打开弹窗1</el-button> <el-button @click="open2">打开弹窗2</el-button> <module-1 ref="module1" /> <module-2 ref="module2" /> &l
Vue中实现用户点击返回时，出现弹框提示。
第一行代码
11-02 8469
  需求：   在移动端或者pc端，如果在用户点击返回，或者在写评论或者什么的时候，如果用户点击返回，则需要弹框提示   解决方案：          在vue中，对于这个功能的实现是非常方便的，        1.可以使用watch来监听对应的路由的path：  watch:   "this.$router.path"  监听路由是否改变，然后弹框提示。         2.通过使用ro...
vue-maoyan-master.zip
01-10
这些组件可以通过props接收父组件传递的数据，也可以通过事件向父组件发送信号，实现数据的双向绑定。 项目中可能运用了Vue Router进行页面路由管理，这使得用户在浏览过程中无需刷新页面就能切换不同的电影列表或...
在vue-cli3中使用axios获取本地json操作
10-15
本文将详细介绍如何使用axios库在vue-cli3项目中获取本地JSON文件，以便于在开发环境中模拟真实的数据请求。 Vue CLI 3是Vue.js官方提供的一个脚手架工具，它提供了一种快速构建Vue应用的模板方式。在Vue CLI 3中，...
vue3 简易版 购物车(数据持久化处理、axios数据请求、移动端适配) 包括【列表页、详情页、购物车页面】需要自己安装依赖
07-05
Vue3简易版购物车项目是一个基于Vue.js框架的前端应用，它涵盖了数据持久化处理、axios数据请求以及移动端适配等功能。在这个项目中，你将能够深入理解Vue3的特性和实际应用，同时掌握如何与后端进行数据交互以及...
vue-cli购物商城
01-18
本项目“vue-cli购物商城”是一个利用Vue CLI构建的电子商务平台，它展示了如何利用现代前端技术栈来实现一个功能完备的在线购物体验。 一、Vue CLI基础 Vue CLI提供了快速初始化项目、自动化构建、热重载、代码...
用vue实现消息弹框
Anita的博客
05-24 1万+
一、弹框组件 1.首先需要写一个弹框组件model.vue，包括遮罩层及弹框本身。 //html部分 <template> <div class="model"> <div class="mask">123</div> <div class="model-dialog"> <div class="model-header"> <span>提示</span>
vue封装axios请求列表数据加载到选择框中
A873054267的博客
08-13 1188
入职一个半月..对业务不是很熟悉。但是感觉这么写获取字典表数据还是挺好的。哈哈 方法二： 调用仅仅需要传入Key值即可。如果是其他方法可以做相应的修改。 export const setDicValue2=(dicInfoKey) => { let _this=this let p =new Promise(( resolve => { axios.p...
vue 列表页跳转详情页获取id的方法以及详情页通过id获取数据
热门推荐
荔枝吖阿
12-17 2万+
  1.先在router.js中配置路由 { path: '/movieDetail/:movieId', name: 'movieDetail', component:movieDetail } 2.获取详情页的id,并派发父组件事件（movieList.vue)页面 &lt;li v-for="(item,index) in movies"...
怎么用axios返回的数据动态显示页面
qq_45334976的博客
03-27 6095
vue3，通过axios返回数据渲染页面
VUE动态路由+请求数据演示新闻列表及详情页
weixin_30243533的博客
10-16 870
依赖：vue-resource vue-router 准备：在项目目录下安装好上面两个插件 1、在main.js中引入vue-resource vue-router import VueResource from 'vue-resource'; import VueRouter from 'vue-router'; 2、在main.js中引入将用到的组件 import News...
Vue项目详情页 - 使用递归组件实现详情页列表
王依米
11-27 5942
此时list已经显示出来 如何使用递归组件实现详情页列表 父组件Detail.vue里的父组件 这时分类就会显示出来 然后布局样式 一级列表项已经显示出来了,然后如何显示二级列表项呢 这里的二级关系.自己调用他自己的这个组件 但是没有层级关系 这时是三级列表 但是头部景点并没有完全盖住下方的字体 这是list.vue ...
vue 后台返回数值，页面显示为文字
前端小菜鸡的博客
05-23 1万+
针对状态少的 1、用三目运算 三目运算，true 返回的’是的’，false 为 ‘不是’ <span >{{ scope.row.carNum == 1 ? '是的':'不是'}}</span> 2、用v-if 可以用来判断多个 <span v-if="scope.row.salerDealer == 1">卖家1</span> <span v-else-if="scope.row.sal
使用vue,mock,axios等实现商城详情页，包括接口
05-29
好的，我会尽力回答你的问题。 首先，你需要准备一个后端API接口，用于返回商城详情页所需要的数据。这个接口可以使用mock.js来模拟。下面是一个简单的示例： ```javascript import Mock from 'mockjs' // 模拟商品详情数据 Mock.mock('/api/goods/detail', 'get', { code: 200, msg: 'success', data: { id: '@id', name: '@ctitle(10, 20)', price: '@integer(100, 5000)', desc: '@cparagraph(2, 4)', image: '@image("200x200", "#50B347", "#FFF", "Mock.js")', detail: '@cparagraph(10, 20)' } }) ``` 上面的代码中，我们使用Mock.js来模拟了一个商品详情接口，返回了一个包含商品id、名称、价格、描述、图片和详情的JSON对象。 接下来，你需要使用axios来发送请求，获取接口数据，并在vue组件中展示。下面是一个简单的示例： ```vue <template> <div> <h2>{{ goods.name }}</h2> <p>价格：{{ goods.price }}元</p> <img :src="goods.image" alt=""> <p>{{ goods.desc }}</p> <div v-html="goods.detail"></div> </div> </template> <script> import axios from 'axios' export default { data() { return { goods: {} } }, mounted() { this.getGoodsDetail() }, methods: { getGoodsDetail() { axios.get('/api/goods/detail').then(res => { if (res.data.code === 200) { this.goods = res.data.data } }) } } } </script> ``` 上面的代码中，我们使用axios发送了一个GET请求，获取了商品详情数据，并将数据赋值给了goods属性。在vue模板中，我们使用了{{}}语法来展示数据，同时使用v-html指令来展示商品详情的HTML内容。 以上就是使用vue、mock和axios实现商城详情页的基本流程。当然，这只是一个简单的示例，实际开发中还需要处理一些异常情况、添加loading等。希望能对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值