Vue后台管理系统项目(30)获取SpuForm数据

Vue后台管理系统获取SpuForm数据接口与存储实践
最新推荐文章于 2022-06-23 16:03:52 发布
原创 最新推荐文章于 2022-06-23 16:03:52 发布 · 437 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript #elementui #前端框架

本文介绍了在Vue后台管理系统中获取SpuForm数据的详细步骤，包括需要调用的四个接口：品牌数据、销售属性、SPU信息和SPU图片。通过gitee仓库链接提供了代码历史供查阅，同时展示了如何在`api/product/spu.js`书写接口以及在子组件`SpuForm/index.vue`中存储数据的方法。

目录

gitee仓库地址:

书写接口

存储数据

gitee仓库地址:

https://gitee.com/CMD-UROOT/my_project/commits/master

大家根据上传历史进行查找你需要的代码

SpuForm业务需要发四个请求

---品牌的数据需要发请求的            http://localhost:9529/dev-api/admin/product/baseTrademark/getTrademarkList

---获取平台中全部的销售属性（3个）    http://localhost:9529/dev-api/admin/product/baseSaleAttrList

---获取某一个SPU信息                 Request URL: http://localhost:9529/dev-api/admin/product/getSpuById/5092

--获取SPU图片                        http://localhost:9529/dev-api/admin/product/spuImageList/5092

这是获取SPU信息的接口

这是获取品牌的接口 

 

 这是获取图片的接口

 这是获取销售属性的接口 

书写接口

在api/product/spu.js中:

存储数据

接口写完以后,当我们点击修改spu按钮的时候,调用子组件的initSpuData方法的时候触发,发请求

在子组件中:

在views/product/Spu/SpuForm/index.vue中: 

 写完以后我们看到四条数据都有了

 

Vue项目中常见问题(55)提交订单、获取订单号、展示支付信息
qq_46368050的博客
05-25 3880
目录 gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master 业务需求:完成提交订单的业务 1.支付静态组件先完成 Pay静态组件完成 配置路由 2.点击提交订单把支付信息传给服务器 提交订单的接口 2. 1.写api 这次我们不用vuex来写,如果没有vuex,我们应该直接在组件当中发请求,拿到服务器的数据,在组件当中进行管理 2.2.引入api 第一种引入方法: 第二种引入方法: 2. 3.发请求 ..
Vue后台管理系统项目(31)SpuForm组件数据展示与收集数据
qq_46368050的博客
06-19 558
目录gitee仓库地址:数据展示SPU名称品牌SPU描述SPU图片gitee仓库地址:https://gitee.com/CMD-UROOT/my_project/commits/master大家根据上传历史进行查找你需要的代码上一篇文章我们已经把四种数据存储好了,我们现在需要把这些数据进行页面的展示在views/product/Spu/SpuForm/index.vue中: 效果:spu名称就有了注意:当我们点击修改spu的时候,不仅仅只是考虑如何展示这个数据,我们还需要考虑一件事,就是把用户需要修改的数
阿语Python项目实操之美多后台管理-系统管理之用户组管理7.2.1节获取用户组表列表数据...
zz77244920的博客
05-25 418
获取用户组表列表数据接口分析请求方式：GET /meiduo_admin/permission/groups/请求参数：通过请求头传递jwt token数据。返回数据：JSON { ...
环境搭建，解决跨域-1
m0_61464384的博客
04-24 1729
准备工作：安装脚手架 vue-cli 然后输入创建项目 npm create sms-pro 创建成功之后 退到项目中 （用cd sms-pro） 然后启动服务 npm run serve 1：前端：创建api文件夹 里面放ajax的方法 assets放一些公共资源的 components里面放非路由组件 utils 放工具木块 views放路由组件 App.vue放根组件 main.js入口js permission.js路由守卫 router.js 前端路由文件 vue.config.js是vue配
Vue 跨域
weixin_43805387的博客
11-11 364
什么是跨域 解决 通过代理请求的方式解决，将 API 请求通过代理服务器请求到 API 服务器。 开发环境中，在 vue.config.js 文件中使用 devServer.proxy 选项进行代理配置（类似于vpn 的东西模拟发送请求） 参考：https://cli.vuejs.org/zh/config/#devserver vue.config.js 所示 module.e...
Vue学习--跨域问题解决
ice书香的博客
02-18 1049
什么是跨域 跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。 常见的跨域场景 Vue解决跨域问题 Vue代码结构 request.js设定axios的请求设定初始URL请求: 其中process.env.VUE_APP_BASE_API设定是通过项目内 .env文件设定的,举例: 最终设定的基础地址为:http//loc...
Vue后台管理系统项目(32)SpuForm销售属性的数据展示
qq_46368050的博客
06-23 629
目录展示有几列展示属性名展示属性名称列表销售属性的展示https://gitee.com/CMD-UROOT/my_project/commits/master大家根据上传历史进行查找你需要的代码spu图片我们只是完成了照片墙的展示,但是对于数据的收集还没有做,比如我们删除了已经有的图片,那么我们需要收集数据提交给服务器,或者我们新增了图片也需要收集数据提交给服务器现在我们要完成的是销售属性的数据的展示整个项目当中销售属性一共三个：颜色、尺码、版本我们从数据中可以看到saleAttrList是平台的销售属性
Vue后台管理系统项目(28)SpuForm静态组件完成
qq_46368050的博客
06-03 328
登录 - Gitee.com大家根据上传历史进行查找你需要的代码完成下图的静态页面搭建 当用户点击这下图这两个按钮的时候都会进行页面的切换,切换成上图中的样子 那么我们就需要给这两个按钮绑定相应的事件三级分类的数据没有选择的情况,添加SPU按钮是不能使用的,只有三级分类选择了,才能使用 解决点击添加或修改按钮切换到新的页面的问题以及上图中的按钮是否可用的问题在views/product/Spu/index.vue中: 修改的时候是需要传参数的,用参数才能确定修改的是谁 效果:点击添加或修改按钮可以实现切换
Vue后台管理系统项目(33)完成SpuForm照片墙数据的收集
qq_46368050的博客
06-23 683
目录分析删除图片,收集数据 添加图片,收集数据https://gitee.com/CMD-UROOT/my_project/commits/master大家根据上传历史进行查找你需要的代码我们目前只是对照片墙的数据进行了展示,并没有进行收集,当我们删除或者新增照片的时候,都需要传重新提交服务器,下一次进来的时候数据一定是会发生变化的----照片墙何时收集数据---预览照片墙的时候，显示大的图片的时候，需要收集数据吗? ---不需要收集的【数据已经有了】---照片墙在删除图片的时候，需要收集数据的。---照
Vue后台管理系统项目(29)SpuForm请求业务的分析
qq_46368050的博客
06-16 419
从下图来看,点击修改按钮进入该页面后,需要发四个请求---品牌的数据需要发请求的 http://localhost:9529/dev-api/admin/product/baseTrademark/getTrademarkList---获取平台中全部的销售属性（3个） http://localhost:9529/dev-api/admin/product/baseSaleAttrList---获取某一个SPU信息 Request URL: http://localhost:9529/dev-api/admi
确认订单页面实现及请求发送
XYXYYDD的博客
09-15 643
1.页面布局 2.以下关于确认订单发送请求需要携带的参数 3.以下是打印的是 productlist 的内容，其中 productlist 为vuex中的数据 以下是获取productList里面的value 4.以下是正确发送方式，但是这样会包含（count = 0）的商品，7关于解决办法 5.清空购物车 6.关于潜藏Bug报错 当清空购物车后并进行本地存储清除会发生页面报错 一般来说 有JSON.parse( 将json字符串转化为 js 对象)一...
vue后台管理知识点、难点总结01
joan_yb的博客
02-24 7347
vue后台管理知识点、难点总结
Vue中关于收集表单数据
weixin_56035334的博客
05-19 908
收集表单数据： 若： <input type="text"/>， 则v-model收集的是value值，用户输入的就是value值。 若： <input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。 若：<input type="checkbox"/> 1.没有配置input的value属性，那么收集的就是check...
Vue学习：Vue技术——收集表单数据
qq_49916504的博客
06-11 927
Vue中收集表单数据的方式
分布式电商项目三十七：销售属性维护
LastYHM的博客
06-06 443
销售属性维护 销售属性对应前端页面： 对应API文档 09、获取分类销售属性 GET /product/attr/sale/list/{catelogId} 请求参数 { page: 1,//当前页码 limit: 10,//每页记录数 sidx: 'id',//排序字段 order: 'asc/desc',//排序方式 key: '华为'//检索关键字 } 分页数据 响应数据 { "msg": "success", "code": 0, "page": { "t
【跨域问题】Access to XMLHttpRequest at‘http://localhost:跨域问题解决
热门推荐
qq_37952113的博客
09-03 15万+
错误： Access to XMLHttpRequest at ‘http://localhost:3000/framework/create’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control ...
05.Vue3.x中$refs 取表单数据及数据双向绑定
05-13 4081
获取表单的值 在表单文本框总加入ref=“[名称]”这样的属性 通过this.$refs.[名称].value获取 逻辑 export default { name: "", data() { return { peopleInfo:"", } }, methods: { doSubmit(){ console.log(this.$refs.age.value);
Vue获取表单数据的方法
qq_16786131的博客
03-21 6056
@submit.prevent 提交阻止默认跳转 v-model.trim 去除两端空格 v-model.number 将字符串转为数值 v-model.lazy 不是立即收集，而是切换焦点后收集 <template> <form @submit.prevent="submit"> <p>账号：<input type="text" v-model.trim="userinfo.username" /></p> <p&gt
Ant DesignVue表单预设初值以及获取表单数据
酸酸的博客
07-29 6485
Ant DesignVue表单预设初值以及获取表单数据一、方法setFieldsValue与validateFields二、setFieldsValue方法使用三、validateFields方法使用 一、方法setFieldsValue与validateFields Ant DesignVue官网，查看form的API，方法setFieldsValue 用给来设置输入控件的值。方法validateFields来获取一组输入域的值与校验全部组件。 二、setFieldsValue方法使用 1.form表单
Vue后台管理系统权限控制实战指南
在本项目中，Vue被用来构建后台管理系统的用户界面。 知识点二：element-ui组件库 element-ui是一个基于Vue 2.0的桌面端组件库，它为开发者提供了一整套可复用的UI组件，从而快速开发出美观、一致的web应用。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值