利用Vue制作一个商品管理页面（第二部分，小完结）

最新推荐文章于 2023-08-07 10:57:05 发布
最新推荐文章于 2023-08-07 10:57:05 发布
阅读量1k 收藏 11
点赞数 2
分类专栏： Vue学习历程 文章标签： vue.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BlankTheMemory/article/details/107324868
版权

接上一篇学习日记，今天做了些页面的其它一些操作，比如说添加了库存的选项并设置可以自由增删库存货物数量；增加了日期选项和删除货物按钮；以及增加了选项卡删除的操作，具体的代码附上，不好理解的地方有注释。加油，今天也是进步的一天~

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品列表</title>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script>
			window.onload = () =>{
				new Vue({
					el:'.container',
					data:{
						imgUrl:'../res/images/',
						imgName:'logo.jpg',
						colNum:8,
						goods:{
							id:'',
							name:'',
							price:'',
							stock:'',
							type:'',
							addDate:''     //存库日期   2020-10-20
						},
						goodsType:['日用百货','文具图书','服装'],
						goodsArray:[
							{id:'001',name:'蚊香',price:4.5,stock:300,type:'日用百货',addDate:'2020-03-05'},
							{id:'002',name:'演员的自我修养',price:47.9,stock:180,type:'文具图书',addDate:'2020-05-19'},
							{id:'003',name:'沙滩裤',price:59,stock:100,type:'服装',addDate:'2020-07-13'},
						],
						delArray:[]   //放置要删除的索引序号
					},
					methods:{
						addGoods(){
							this.goodsArray.push(this.goods);
							this.goods = {};	//输入之后清空添加过的商品信息
							
							//当添加新产品，获取当前年月日，并按照格式显示
							var d = new Date();
							var y = d.getFullYear();
							var m = d.getMonth() + 1;
							var day = d.getDate() < 10 ? '0' + d.getDate():d.getDate();
							var myDate = y + '-' + m + '-' +day;
 							this.goods.addDate = myDate;
						},
						delGoods(index){
							this.goodsArray.splice(index,1);
						},
						clearGoodsArray(){
							this.goodsArray = [];
						},
					    //删除选项卡货物，下面有处理，为了防止用户不是按照顺序选择选项卡做的操作
						delSelected(){
							//保证了删除数组由小到大
							this.delArray.sort((a,b)=>{
								return a - b;
							});
							for(var i=0;i<this.delArray.length;i++){
								this.goodsArray.splice(this.delArray[i]-i,1);
							}
							this.delArray = [];
						}
					}
				});
			}
		</script>
		<style type="text/css">
			/*对大容器进行样式设置*/
			.container{
				margin: 0 auto;
				text-align: center;
				width: 1000px;
				border: 5px solid gray;
			}
			.logo{
				position: relative;
				top: 10px;
			}
			.header{
				border: 1px solid gray;
				margin: 20px;
			}
			.header .title{
				color.rgb(55,75,95);
				background:rgb(65,180,130);
			}
			.form-warp{
				border: 1px solid gray;
				margin: 20px;
				padding-bottom: 10px;
			}
		
			.form-warp .content{
				line-height: 35px;
			}
			.form-warp input{
				width: 150px;
				height: 18px;
			}
			.form-warp select{
				width: 154px;
				height: 24px;
			}
			.sub-title{
				color.rgb(142,5,1);
				background:rgb(124,211,122);
			}
			.table-warp{
				border: 1px solid gray;
				margin: 20px;
				padding-bottom: 10px;
			}
			.table-warp th{
				width: 80px;
				background:rgb(124,211,122);
			}
			.table-warp a{
				text-decoration: none;
			}
			.clear-btn{
				text-align: right;
				padding-right: 10px;	
			}
			.fontColor{
				color:gray;
				text-align: center;
			}
			.myBackgroundColor{
				background:rgb(65,180,130);
			}
			.myFontSize{
				font-size: 200px;
			}
		</style>
	</head>
	<body>
		<!--容器内放三部分-->
		<div class="container">
			<!--包括标题、logo-->
			<div class="header">
				<!--src路径是url+name-->
				<img :src="imgUrl+imgName" class="logo" height="80px" />
				<h1 class="title">商品管理v1.0</h1>
			</div>
			<!--输入部分，也包含三个部分,商品的全属性，操作按钮-->
			<div class="form-warp">
				<h2 class="sub-title">添加商品</h2>
				<div class="content">
					商品编号：<input type="text" placeholder="这里填写商品的编号" v-model="goods.id" /><br />
					商品名称：<input type="text" placeholder="这里填写商品的名称" v-model="goods.name" /><br />
					商品价格：<input type="text" placeholder="这里填写商品的价格" v-model="goods.price" /><br />
					商品库存：<input type="text" placeholder="这里填写商品的库存" v-model="goods.stock" /><br />
					商品种类：<select v-model="goods.type">
							 	<option value="">--选择商品类型--</option>
							 	<option v-for="type in goodsType">{{type}}</option>
							 </select>
				</div>
				<div class="form-btn">
					<button @click="addGoods">确认添加</button>
					<button @click="goods = {}">重置</button>
				</div>
			</div>
			<!--显示部分-->
			<div class="table-warp">
				<h2 class="sub-title">商品列表</h2>
				<div class="content">
					<table border="1" align="center" >
						<tr>
							<th>序号</th>
							<th>编号</th>
							<th>名称</th>
							<th>价格</th>
							<th>库存</th>
							<th>种类</th>
							<th style="width: 100px;">日期</th>
							<th>删除</th>
							<th>选择</th>
						</tr>
						<tr>
							<td :colspan="colNum" height="150px" v-show="goodsArray.length <= 0">暂无商品</td>
						</tr>
						<tr v-for="(item,index) in goodsArray" :key="item.id">
							<td>{{index}}</td>
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.price}}</td>
							<td style="display: flex;">
								<a style="flex: 0.5;" href="#" @click.prevent="item.stock = item.stock-- <= 0 ? 0:item.stock--">-</a>
								{{item.stock}}
								<a style="flex: 0.5;" href="#" @click.prevent="item.stock++">+</a>
							</td>
							<td>{{item.type}}</td>
							<td>{{item.addDate}}</td>
							
							<td>
								<button @click="delGoods(index)">删除</button>
							</td>
							<td>
								<input type="checkbox" :value="index" v-model="delArray" />
							</td>
						</tr>
					</table>
				</div>
				<div class="clear-btn">
					<a href="#" @click.prevent="delSelected" v-show="delArray.length > 0">删除选中商品</a>
					<a href="#" @click.prevent="clearGoodsArray" v-show="goodsArray.length > 0">清空全部商品</a>
				</div>
			</div>
			
		</div>
	</body>
</html>
BlankTheMemory
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue.js学习——获取本地JSON文件数据展示到页面
liu5282828的博客
10-19 5739
Vue.js学习——获取本地JSON文件数据展示到页面 自己跟着视频学习，就是B站上搜索 vue.js 点击量最多的那个。 自己编写的json文件如下 { "status":0, "message":[ { "id":1, "name":"三菱", "ctime":"2017-02-03" }, { "id":2, "name":"保时捷", "ctime":"2017-02-03" },
vue购物车商品订单详情页面代码
06-10
vue购物车商品订单详情页面代码是一款网上商城商品购买购物车地址及付款详情页，收货人信息添加修改，支付方式选择，送货清单，发票信息，使用优惠券等订单功能。
【精品课】Vue.js实现电商后台管理系统（企业项目实战）
12-02
为什么我在本地写demo很顺，项目实战的时候却问题不断？知识点掌握的再好，没有实战经验，实际工作中也免不了频频碰壁
使用Vue创建一个商品展示首页
qq_22593423的博客
08-07 2148
在这篇博客中，我们将使用Vue来创建一个简单的商品展示首页。我们已经有一个后端API提供了商品信息，接口地址为：http://localhost:8080/api/products/，返回的数据格式是JSON。下面是详细的步骤和代码示例。
手把手教你用Vue搭建一个商品页面
szuwaterbrother的博客
05-10 3629
vue的一些零散知识 一.VUE对象和vue实例 如何使用Vue实例开始编写Vue应用程序，以及如何将基本数据加载到网页上。 Vue实例是每个Vue应用程序的根 Vue实例插入到DOM中的一个元素中 Vue实例的数据可以使用称为表达式的类似于mustache的语法{{}}来显示。（放data然后再处理） Vue是响应式的，原例改变 后面跟着变 二.VUE属性绑定 比如 data我放了product的text和一个image和link，在html页面时候 我就直接{{}}框出文字。
Vue使用教程和后台商品管理系统分享（详细完整教程讲解）
a910247的博客
04-10 1915
随着软件开发不断进步，前后端框架技术也取得重大进步，前端主要Layui经典框架，还有谷歌flutter和如今流行的Vue框架，后端主要是Spring框架，尤其是SpringBoot应用非常广泛，而前端这门技术也越来越重要，很多人都开启了学习Vue技术，本文就介绍了Vue的基础内容以及后台管理系统项目分享。
使用vue构建一个上传图片表单
12-03
在本文中，我们将探讨如何使用Vue.js框架构建一个图片上传表单。Vue.js是一个轻量级的、数据驱动的前端框架，它通过响应式的数据绑定和组件化来简化Web开发。在从jQuery向Vue过渡的过程中，理解其核心理念至关重要。...
vue制作百度搜索框首页功能特效代码
03-20
在本文中，我们将深入探讨如何使用Vue.js框架来制作一个类似百度搜索框的首页功能特效。Vue.js是一个轻量级的前端JavaScript框架，以其组件化、易学习和高性能的特性深受开发者喜爱。以下是对实现这一功能所需的关键...
用于springdatarest的前端基于vue2iview3iviewadmin2制作
08-10
这个项目是专门针对Spring Data REST服务创建的前端应用，使用了现代前端框架Vue.js的第二版（Vue2）以及iView UI库的第三版（iView3）和基于Vue2的管理后台模板iView Admin2。本文将详细探讨这些技术栈以及它们如何...
vue2-QQ：:fire:一款基于Vue2全家桶制作的高仿手机QQ单页应用
02-05
"vue2-QQ：:fire:一款基于Vue2全家桶制作的高仿手机QQ单页应用" 这个标题表明了我们正在讨论一个使用Vue.js 2.x版本开发的项目，它是一个单页面应用程序（SPA），旨在模仿手机QQ的用户界面和功能。"Vue2全家桶"指的...
基于mui+mint+vue2.x+vue-router+vuex+webpack制作H5app项目
最新发布
11-05
标题中的“基于mui+mint+vue2.x+vue-router+vuex+webpack制作H5app项目”揭示了一个使用多种技术栈构建的移动端Web应用程序。这个项目利用了前端开发的几个关键组件，包括： 1. **MUI**：MUI是一个针对移动设备优化...
利用Vue制作一个商品管理页面（第一部分）
BlankTheMemory的博客
07-12 1444
写在前面：入职一周的java菜鸟工程师，老大说接下来的活用到了Vue，所以就尝试着做一个小demo练练手，后端学前端框架，我可太难了~ 今天先完成了一点简单的功能，包括管理页面的样式和body里面的内容，把添加按钮和重置按钮的功能完成。 附上学习代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>商品列表</title> <script ty
vuecli实战商城后台管理系统
03-07
适用人群具有一定javaScript基础具有一定Vuejs基础课程概述本季度基于Vuecli + elementUI实战开发商城后台管理系统完整视频教程，其中包括vuex模块化管理、Vue-router二次封装、使用element-ui库、支付模块、多权限管理、商品多规格实现、对象存储、api接口安全以及部署服务器上线等知识等。课程大纲见以下图！
vue-element项目实战之商品管理系统
William_fang的博客
04-20 2957
商品管理后台系统。（该项目由登录、会员等级、会员列表、商品详情、商品列表、用户中心等页面组成，有登录、注册、重置、增删改查等功能，详细功能前往gitee说明文档查看）
前端项目学习Vue3项目实战商店后台管理系统
Blue_Pepsi_Cola的博客
02-15 1607
https://www.bilibili.com/video/BV15v4y1b7Bw/?vd_source=240d9002f7c7e3da63cd9a975639409a#reply151314916928//TODO
【VUE】微商城（八）----商品列表，商品详情页
Robin的博客
04-11 9815
1、分类页跳转商品列表 1）、在pages文件夹下创建一个goods文件夹，并且在goods文件夹创建一个GoodsListView.vue 2）、打开router文件夹下的index.js配置GoodsListView.vue路由 3）、进入CategoryView.vue修改二级分类中的a标签为 router-link并添加 to属性跳转到商品列表页 4)、通过路由传参的方式传递分类编号 5）、.........
Vue2积分商城PC端项目(一)
qq_44930306的博客
10-31 1454
这里开始将记录vue2.0的一个积分商城PC端项目的过程。这一章节是项目的基本搭建。
Vue项目实战之电商后台管理系统(五) 商品分类模块
小陈工的博客
08-24 2561
今天主要完成了展示商品列表页面，添加商品两大页面的制作，代码较多，逻辑也比较复杂，值得细细品味。
vue电商后台管理系统--商品列表篇
zyyyyyy24的博客
08-15 2417
渲染商品列表数据 <template> <div> <!--面包屑导航区--> <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item>商品管理</el-breadcrumb-item&
使用vue实现一个商品列表页面
03-31
首先，我们需要创建一个Vue实例，并引入Vue和Vue-Router库。然后，我们需要在Vue实例中定义商品列表数据和商品列表组件。接着，我们需要在路由中定义商品列表页面的路径和组件，并在Vue实例中使用Vue-Router库来实现路由跳转。 下面是一个简单的示例代码： ```javascript // 引入Vue和Vue-Router库 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) // 定义商品列表数据 const goodsList = [ {id: 1, name: '商品1', price: 100}, {id: 2, name: '商品2', price: 200}, {id: 3, name: '商品3', price: 300}, {id: 4, name: '商品4', price: 400}, {id: 5, name: '商品5', price: 500} ] // 定义商品列表组件 const GoodsList = { data() { return { goodsList: goodsList } }, template: ` <div> <h1>商品列表</h1> <ul> <li v-for="item in goodsList" :key="item.id"> {{ item.name }} - {{ item.price }}元 </li> </ul> </div> ` } // 定义路由 const routes = [ { path: '/goods', component: GoodsList } ] // 创建Vue-Router实例 const router = new VueRouter({ routes }) // 创建Vue实例 new Vue({ el: '#app', router }) ``` 在HTML中，我们需要添加一个id为app的div，并在其中添加一个router-view标签用于显示路由组件。 ```html <div id="app"> <router-view></router-view> </div> ``` 接着，我们就可以通过访问http://yourdomain.com/#/goods来查看商品列表页面了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值