首页 > 其他分享 >UniApp-CURD

UniApp-CURD

时间：2024-06-05 09:00:06浏览次数：17  
标签：UniApp color data CURD background res border id 

药品添加

<template>
	<view class="content">
		<view class="form-container">
			<view class="form-item">
				<label class="label">药品名称</label>
				<input type="text" class="input" v-model="name">
			</view>
			<view class="form-item">
				<label class="label">价格</label>
				<input type="text" class="input" v-model="price"/>
			</view>
			<view class="form-item">
				<label class="label">分类</label>
				<select v-model="cate">
					<option>感冒药</option>
					<option>咳嗽药</option>
					<option>止疼药</option>
				</select>
			</view>
			<view class="form-item">
				<label class="label">描述</label>
				<input type="text" class="input" v-model="intro"/>
			</view>
			<view class="form-item">
				<button class="btn" @click="Add()">添加</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:"",
				price:"",
				intro:"",
				cate:"",
			}
		},
		methods: {
			Add(){
				var data = {
					name:this.name,
					price:this.price,
					cate:this.cate,
					intro:this.intro,
				}			
				uni.request({
					url:"http://127.0.0.1:8080/add",
					data:data,
					method:"POST",
					header:{
						'content-type':'application/x-www-form-urlencoded'
					},
					success:(res)=>{
						if(res.data.code == 200){
							uni.showToast({
							      title: '添加成功',
							      icon: 'success',
							      duration: 2000,
							      success: function() {
							        setTimeout(function() {
							          uni.reLaunch({
							            url: '/pages/list/list',
							          });
							        }, 2000);
							      }
							    });
						}else{
							alert("添加失败")
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.content {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #f5f5f5;
}

.form-container {
	width: 80%;
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-item {
	margin-bottom: 20px;
}

.label {
	font-size: 16px;
	color: #333;
}

.input {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.btn {
	width: 100%;
	padding: 10px;
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	transition: background-color 0.3s ease;
}

.btn:hover {
	background-color: #0056b3;
}
</style>

药品列表

<template>
	<view>
		<view class="search-container">
			<input type="text" class="search-input" v-model="name"/>
			<button class="search-button" @click="List(1)">搜索</button>
		</view>
		
		<view>
			<table>
				<th>编号</th>
				<th>名称</th>
				<th>价格</th>
				<th>分类</th>
				<th>描述</th>
				<th>操作</th>
				<tr v-for="(v,k) in slice" :key="k">
					<td>{{v.id}}</td>
					<td>{{v.name}}</td>
					<td>{{v.price}}</td>
					<td>{{v.cate}}</td>
					<td>{{v.intro}}</td>
					<td>
						<button class="delete-btn" type="warn" size="mini" @click="Del(k,v.id)">删除</button>
						<button class="update-btn" type="primary" size="mini" @click="Update(v.id)">修改</button>
					</td>
				</tr>
			</table>
			<button class="mini-btn" type="primary" size="mini" @click="List(1)">首页</button>
			<button class="mini-btn" type="primary" size="mini" @click="List(up)">上一页</button>
			<button class="mini-btn" type="primary" size="mini" @click="List(i)" v-for="i in sum" :key="i">{{i}}</button>
			<button class="mini-btn" type="primary" size="mini" @click="List(down)">下一页</button>
			<button class="mini-btn" type="primary" size="mini" @click="List(sum)">尾页</button>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				slice:[],
				sum:"",
				up:"",
				down:"",
				name:"",
			}
		},
		onLoad() {
			this.List(1)
		},
		methods: {
			List(p){
				uni.request({
					url:"http://127.0.0.1:8080/list?p="+p+"&name="+this.name,
					method:"GET",
					success: (res) => {
						this.slice = res.data.data.slice
						this.sum = res.data.data.sum
						this.up = res.data.data.up
						this.down = res.data.data.down
					}
				})
			},
			Del(k,id){
				uni.request({
					url:"http://127.0.0.1:8080/delete?id="+id,
					method:"GET",
					success: (res) => {
						if(res.data.code == 200){
							this.slice.splice(k,1)
						}
					}
				})
			},
			Update(id){
				uni.navigateTo({
				  url: '/pages/update/update?id=' + id,
				});
			}
		}
	}
</script>

<style>
  /* 表格样式 */
	  table {
		width: 100%;
		border-collapse: collapse;
		margin-bottom: 20px;
	  }
	  th, td {
		padding: 10px;
		border: 1px solid #ccc;
	  }
	  th {
		background-color: #f0f0f0;
	  }
	  tr:nth-child(even) {
		background-color: #f9f9f9;
	  }

	  /* 按钮样式 */
	  .mini-btn {
		margin-right: 10px;
		padding: 5px 10px;
		border-radius: 5px;
		background-color: #007bff;
		color: #fff;
		border: none;
		cursor: pointer;
	  }
	  .mini-btn:hover {
		background-color: #0056b3;
	  }
  
.search-container {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
	margin-bottom: 10px;
}
.search-input {
	padding: 8px 12px;
	font-size: 14px;
	border: 1px solid #ccc;
	border-radius: 4px;
}
.search-button {
	padding: 8px 16px;
	font-size: 14px;
	background-color: #007bff;
	color: #fff;
	border: 1px solid #0056b3;
	border-radius: 4px;
	cursor: pointer;
	margin-left: 10px;
}
.search-button:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}
</style>

　　药品修改

 

<template>
	<view class="content">
		<view class="form-container">
			<view class="form-item">
				<label class="label">药品名称</label>
				<input type="text" class="input" v-model="drug.name">
			</view>
			<view class="form-item">
				<label class="label">价格</label>
				<input type="text" class="input" v-model="drug.price"/>
			</view>
			<view class="form-item">
				<label class="label">分类</label>
				<select v-model="drug.cate">
					<option>感冒药</option>
					<option>咳嗽药</option>
					<option>止疼药</option>
				</select>
			</view>
			<view class="form-item">
				<label class="label">描述</label>
				<input type="text" class="input" v-model="drug.intro"/>
			</view>
			<view class="form-item">
				<button class="btn" @click="Update()">修改</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				drug:{}
			}
		},
		onLoad: function(options) {
			var id = options.id;
			uni.request({
				url:"http://127.0.0.1:8080/info?id="+id,
				method:"GET",
				success: (res) => {
					if(res.data.code == 200){
						this.drug = res.data.data
					}
				}
			})
		},
		methods: {
			Update(){
				var data = {
					id:this.drug.id,
					name:this.drug.name,
					price:this.drug.price,
					cate:this.drug.cate,
					intro:this.drug.intro,
				}			
				uni.request({
					url:"http://127.0.0.1:8080/update",
					data:data,
					method:"POST",
					header:{
						'content-type':'application/x-www-form-urlencoded'
					},
					success:(res)=>{
						if(res.data.code == 200){
							uni.showToast({
							      title: '修改成功',
							      icon: 'success',
							      duration: 2000,
							      success: function() {
							        setTimeout(function() {
							          uni.reLaunch({
							            url: '/pages/list/list',
							          });
							        }, 2000);
							      }
							    });
						}else{
							alert("修改失败")
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.content {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #f5f5f5;
}

.form-container {
	width: 80%;
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-item {
	margin-bottom: 20px;
}

.label {
	font-size: 16px;
	color: #333;
}

.input {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.btn {
	width: 100%;
	padding: 10px;
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	transition: background-color 0.3s ease;
}

.btn:hover {
	background-color: #0056b3;
}
</style>

　　




　　

标签：UniApp,color,data,CURD,background,res,border,id
From： https://www.cnblogs.com/superzwb/p/18232220

相关文章

  • uniapp uni-popup弹窗出现禁止底部页面页面滚动
    介绍|uni-app官网(dcloud.net.cn)为兼容各端，事件需使用@的方式绑定，请勿使用小程序端的bind和catch进行事件绑定；也不能在JS中使用event.preventDefault()和event.stopPropagation()方法；若需要禁止蒙版下的页面滚动，可使用@touchmove.stop.prevent="moveHandle"，moveHa......
  • uniapp的h5和微信小程序判断用户设备的位置服务是否开启
    //判断用户是否开启定位-暂时不用 checkOpenGPSServiceByAndroid(){ letthat=this //1、判断手机定位服务【GPS】是否授权 uni.getSystemInfo({ success(res){ //console.log(res) letlocationEnabled=res.locationEnabled;//判断手......
  • uniapp打包Android跟iOS禁用录屏截屏
    1.禁用截屏和录屏的目的保护敏感信息：防止用户截屏或录屏分享应用中的敏感信息，如个人隐私数据、金融信息、商业机密等。版权保护：保护应用中的版权内容，如视频、图片、文本内容，防止未经授权的复制和传播。数据安全：防止恶意用户利用截屏或录屏功能进行信息盗取，增加应用的数据......
  • uniapp微信小程序获取手机号 位置信息
    一.获取手机号获取手机号<template><u-buttonopen-type="getPhoneNumber"@getphonenumber="getNumber">一键登录</u-button></template><script>exportdefault{methods:{getNumber(e){......
  • uniapp开发APP遇到的问题
    图标变成了undefined原因：设置prefix时，在非nvue环境下，需u-input才有效。//旧版<u--inputplaceholder="请输入用户名"type="text"> <templateslot="prefix"> <viewclass="solts"> <viewstyle="padding-top:6upx&qu......
  • 基于uniapp+vue+nodejs高校食堂餐厅点餐系统2x2v4 小程序hbuilderx
    近年来，我国餐饮业发展的质量和内涵发生了重大的变化。行业的经营领域和市场空间不断变化，经营档次和企业管理水平不断提高，经营业态日趋丰富，投资主体和消费需求多元化特点更加突出，网点数量和人员队伍继续扩大；餐饮市场更加繁荣，消费的个性化和特色化的趋势明显，追求健康营养和连锁规......
  • uniapp使用EventBus实现页面间数据传递
    前情最近在做小程序项目，选用是当前比较火的uniapp技术栈，经常会遇到页面间消息传递的需求。为什么要这么做？uniapp页面间数据通信方式有很多：通过url传参，状态管理库vuex/pinia，本地存储，事件通道eventChannel，EventBus等，这次的需求是在A面点击一个按钮跳转到B页面拾取一个数据选项再......
  • uniapp实现图片上传——支持APP、微信小程序
    uniapp实现图片、视频上传文章目录uniapp实现图片、视频上传效果图组件templatejs使用相关文档：结合uView插件+uni.uploadFile实现u-uploaduploadfile效果图组件简单封装，还有很多属性…，自定义样式等…根据个人所需调整template<template> <view>......
  • 微信小程序 uniapp智慧捐赠系统dln9d
    1）通过查阅相关的书籍搜集材料，进行需求调查。（2）写需求分析文档，确定系统的主要模块。 （3）画出ER图，流程图等图示以用来明确模块之间的关系 （4）根据需求分析，建立数据库文档，设计表和字段。 （5）进行系统的界面设计。 （6）通过python+java+node.js+php语言和MySQL数据库实现本系统......
  • uniapp微信小程序使用瀑布流结合z-panging组件显示pexels的图片
    最终效果如下：  瀑布流组件用的：https://ext.dcloud.net.cn/plugin?id=7594下拉刷新组件用的：https://z-paging.zxlee.cn这两个搭配起来省了很多事z-paging中组合custom-waterfalls-flow，可下拉刷新、到底自动加载下一页。下拉刷新效果： 到底自动加载下一页效果： ......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99