基于JAVA宠物管理系统的设计与实现

一、设计需求

本系统主要是由RFID自动识别技术，通过无线射频方式对宠物的电子标签进行读取，获取宠物的基本信息和在店内的所有消费，然后将数据通过网络传输至服务器。在应用层开发一个管理系统，对宠物信息、店内消费等各种行为进行管理。同时系统需有登录注册功能，宠物信息管理，店内消费管理等功能。

宠物店管理系统主要分为以下模块:

1.RFID模块:由天线和射频电路组成，通过自动识别电子标签，采集数据，采用RFID封装技术将其封装，并传输给服务器。

2.电子标签模块:接收外部信号和发送信号

3.店铺管理模块:管理员可以对店铺商品进行增删改操作，修改、删除顾客宠物信息以及店内消费行为。

4.登录注册模块:新用户可以进行注册和登录5.用户管理模块:对注册用户进行管理

二、设计需求总结

整个系统的设计:

(1). 宠物店每来一个新的宠物，就在软件端进行注册、注册时填入宠物的名称，宠物的类型，主人的电话号码、选择一张宠物的图片方便后面展示(图片可以预存几张猫、狗即可)、如果宠物后面在店里有消费也会记录包含时间，这些数据都保存在软件端的数据库里。

(2). 开卡: 新宠物注册之后，需要为这个宠物办理一张电子标签卡，这个卡里存放着这个宠物主人的电话号码，后面要查询这个宠物的信息，就读取整个电子标签里的电话号码，到数据库里查询。

(3). 开卡和查询的数据传输: 设备端与软件端采用 TCP网络方式进行通信；设备端当做TCP客户端，软件端当做TCP服务器；当设备端查询宠物的电子标签时，设备端读取电话号码之后，会通过约定的数据格式通过网络传递给软件端。 当软件端开卡注册时，也会用约定好的数据格式传递给设备端，如果设备端收到数据，开发板上的LED会点亮；这时把IC拿到RC522射频模块上刷一下即可；如果成功写入LED灯就会关闭。

(4). 软件端的设计(这个软件是给店家用的，功能都是针对店家这边方向开发):

有注册界面、登录界面；

主界面上显示店内有所有注册过的宠物信息，每个宠物有图片进行显示、宠物图片下面就显示宠物的名称；

商品界面: 展示一些狗粮、猫粮、药剂、一些宠物周边物品。 用于演示消费功能。 可以预定几个商品即可。 用户可以自己动态添加修改。

管理员界面: 可以对店内的商品进行添加、设计价格、修改宠物的信息等。

查询页面: 输入宠物信息可以查询这个宠物在店里的所有详细信息。

设备硬件部分:

这里的硬件刷卡部分采用的使用STM32开发的，更加灵活方便，完成对IC卡读写通过网络与JAVA服务器通信，也可以换成扫码枪之类的其他设备。

1. RC522刷卡模块负责对卡进行读写。 2. ESP8266WIFI初始化工作在STA模式，连接到指定WIFI，与软件所在的电脑处于同一个局域网，方便连接软件端的服务器进行数据通信，每次设备开机将会自动连接到程序里设置好WIFI热点和服务器。 3. 设备端上有一个LED灯，用来显示刷卡的状态—成功与否。

完整资料包下载地址: https://download.csdn.net/download/xiaolong1126626497/20687600

三、硬件设备效果图与部分核心代码

代码语言：javascript复制

#include "esp8266.h"
u8 ESP8266_IP_ADDR[16]; //255.255.255.255
u8 ESP8266_MAC_ADDR[18]; //硬件地址
/*
函数功能: ESP8266命令发送函数
函数返回值:0表示成功  1表示失败
*/
u8 ESP8266_SendCmd(char *cmd)
{
    u8 i,j;
    for(i=0;i<10;i  ) //检测的次数--发送指令的次数
    {
        USARTx_StringSend(USART3,cmd);
        for(j=0;j<100;j  ) //等待的时间
        {
            delay_ms(50);
            if(USART3_RX_FLAG)
            {
                USART3_RX_BUFFER[USART3_RX_CNT]='';
                USART3_RX_FLAG=0;
                USART3_RX_CNT=0;
                if(strstr((char*)USART3_RX_BUFFER,"OK"))
                {
                    return 0;
                }
            }
        }
    }
    return 1;
}

/*
函数功能: ESP8266硬件初始化检测函数
函数返回值:0表示成功  1表示失败
*/
u8 ESP8266_Init(void)
{
    //退出透传模式
    USARTx_StringSend(USART3,"   ");
    delay_ms(50);
    return ESP8266_SendCmd("ATrn");
}

/*
函数功能: 一键配置WIFI为AP TCP服务器模式
函数参数:
char *ssid  创建的热点名称
char *pass  创建的热点密码 （最少8位）
u16 port    创建的服务器端口号
函数返回值: 0表示成功 其他值表示对应错误值
*/
u8 ESP8266_AP_TCP_Server_Mode(char *ssid,char *pass,u16 port)
{
    char *p;
    u8 i;
    char ESP8266_SendCMD[100]; //组合发送过程中的命令
    /*1. 测试硬件*/
    if(ESP8266_SendCmd("ATrn"))return 1;
    /*2. 关闭回显*/
    if(ESP8266_SendCmd("ATE0rn"))return 2;
    /*3. 设置WIFI模式*/
    if(ESP8266_SendCmd("AT CWMODE=2rn"))return 3;
    /*4. 复位*/
    ESP8266_SendCmd("AT RSTrn");
    delay_ms(1000);
    delay_ms(1000);
    delay_ms(1000);
    /*5. 关闭回显*/
    if(ESP8266_SendCmd("ATE0rn"))return 5;
    /*6. 设置WIFI的AP模式参数*/
    sprintf(ESP8266_SendCMD,"AT CWSAP="%s","%s",1,4rn",ssid,pass);
    if(ESP8266_SendCmd(ESP8266_SendCMD))return 6;
    /*7. 开启多连接*/
    if(ESP8266_SendCmd("AT CIPMUX=1rn"))return 7;
    /*8. 设置服务器端口号*/
    sprintf(ESP8266_SendCMD,"AT CIPSERVER=1,%drn",port);
    if(ESP8266_SendCmd(ESP8266_SendCMD))return 8;
    /*9. 查询本地IP地址*/
    if(ESP8266_SendCmd("AT CIFSRrn"))return 9;
    //提取IP地址
    p=strstr((char*)USART3_RX_BUFFER,"APIP");
    if(p)
    {
        p =6;
        for(i=0;*p!='"';i  )
        {
            ESP8266_IP_ADDR[i]=*p  ;
        }
        ESP8266_IP_ADDR[i]='';
    }
    //提取MAC地址
    p=strstr((char*)USART3_RX_BUFFER,"APMAC");
    if(p)
    {
        p =7;
        for(i=0;*p!='"';i  )
        {
            ESP8266_MAC_ADDR[i]=*p  ;
        }
        ESP8266_MAC_ADDR[i]='';
    }
    
    //打印总体信息
    USART1_Printf("当前WIFI模式:AP TCP服务器n");
    USART1_Printf("当前WIFI热点名称:%sn",ssid);
    USART1_Printf("当前WIFI热点密码:%sn",pass);
    USART1_Printf("当前TCP服务器端口号:%dn",port);
    USART1_Printf("当前TCP服务器IP地址:%sn",ESP8266_IP_ADDR);
    USART1_Printf("当前TCP服务器MAC地址:%sn",ESP8266_MAC_ADDR);
    return 0;
}

/*
函数功能: TCP服务器模式下的发送函数
发送指令: 
*/
u8 ESP8266_ServerSendData(u8 id,u8 *data,u16 len)
{
    u8 i,j,n;
    char ESP8266_SendCMD[100]; //组合发送过程中的命令
    for(i=0;i<10;i  )
    {
        sprintf(ESP8266_SendCMD,"AT CIPSEND=%d,%drn",id,len);
        USARTx_StringSend(USART3,ESP8266_SendCMD);
        for(j=0;j<10;j  )
        {
            delay_ms(50);
            if(USART3_RX_FLAG)
            {
                USART3_RX_BUFFER[USART3_RX_CNT]='';
                USART3_RX_FLAG=0;
                USART3_RX_CNT=0;
                if(strstr((char*)USART3_RX_BUFFER,">"))
                {
                    //继续发送数据
                    USARTx_DataSend(USART3,data,len);
                    //等待数据发送成功
                    for(n=0;n<200;n  )
                    {
                        delay_ms(50);
                        if(USART3_RX_FLAG)
                        {
                            USART3_RX_BUFFER[USART3_RX_CNT]='';
                            USART3_RX_FLAG=0;
                            USART3_RX_CNT=0;
                            if(strstr((char*)USART3_RX_BUFFER,"SEND OK"))
                            {
                                return 0;
                            }
                         }            
                    }   
                }
            }
        }
    }
    return 1;
}

/*
函数功能: 配置WIFI为STA模式 TCP客户端模式
函数参数:
char *ssid  创建的热点名称
char *pass  创建的热点密码 （最少8位）
char *p     将要连接的服务器IP地址
u16 port    将要连接的服务器端口号
u8 flag     1表示开启透传模式 0表示关闭透传模式
函数返回值:0表示成功  其他值表示对应的错误
*/
u8 ESP8266_STA_TCP_Client_Mode(char *ssid,char *pass,char *ip,u16 port,u8 flag)
{
    char ESP8266_SendCMD[100]; //组合发送过程中的命令
    //退出透传模式
    //USARTx_StringSend(USART3,"   ");
    //delay_ms(50);
    /*1. 测试硬件*/
    if(ESP8266_SendCmd("ATrn"))return 1;
    /*2. 关闭回显*/
    if(ESP8266_SendCmd("ATE0rn"))return 2;
    /*3. 设置WIFI模式*/
    if(ESP8266_SendCmd("AT CWMODE=1rn"))return 3;
    /*4. 复位*/
    ESP8266_SendCmd("AT RSTrn");
    delay_ms(1000);
    delay_ms(1000);
    delay_ms(1000);
    /*5. 关闭回显*/
    if(ESP8266_SendCmd("ATE0rn"))return 5;
    /*6. 配置将要连接的WIFI热点信息*/
    sprintf(ESP8266_SendCMD,"AT CWJAP="%s","%s"rn",ssid,pass);
    if(ESP8266_SendCmd(ESP8266_SendCMD))return 6;
    /*7. 设置单连接*/
    if(ESP8266_SendCmd("AT CIPMUX=0rn"))return 7;
    /*8. 配置要连接的TCP服务器信息*/
    sprintf(ESP8266_SendCMD,"AT CIPSTART="TCP","%s",%drn",ip,port);
    if(ESP8266_SendCmd(ESP8266_SendCMD))return 8;
    /*9. 开启透传模式*/
    if(flag)
    {
       if(ESP8266_SendCmd("AT CIPMODE=1rn"))return 9; //开启
       if(ESP8266_SendCmd("AT CIPSENDrn"))return 10;  //开始透传
       if(!(strstr((char*)USART3_RX_BUFFER,">")))
       {
            return 11;
       }
        //如果想要退出发送:  "   "
    }
    
     //打印总体信息
    USART1_Printf("当前WIFI模式:STA TCP客户端n");
    USART1_Printf("当前连接的WIFI热点名称:%sn",ssid);
    USART1_Printf("当前连接的WIFI热点密码:%sn",pass);
    USART1_Printf("当前连接的TCP服务器端口号:%dn",port);
    USART1_Printf("当前连接的TCP服务器IP地址:%sn",ip);
    return 0;
}


/*
函数功能: TCP客户端模式下的发送函数
发送指令: 
*/
u8 ESP8266_ClientSendData(u8 *data,u16 len)
{
    u8 i,j,n;
    char ESP8266_SendCMD[100]; //组合发送过程中的命令
    for(i=0;i<10;i  )
    {
        sprintf(ESP8266_SendCMD,"AT CIPSEND=%drn",len);
        USARTx_StringSend(USART3,ESP8266_SendCMD);
        for(j=0;j<10;j  )
        {
            delay_ms(50);
            if(USART3_RX_FLAG)
            {
                USART3_RX_BUFFER[USART3_RX_CNT]='';
                USART3_RX_FLAG=0;
                USART3_RX_CNT=0;
                if(strstr((char*)USART3_RX_BUFFER,">"))
                {
                    //继续发送数据
                    USARTx_DataSend(USART3,data,len);
                    //等待数据发送成功
                    for(n=0;n<200;n  )
                    {
                        delay_ms(50);
                        if(USART3_RX_FLAG)
                        {
                            USART3_RX_BUFFER[USART3_RX_CNT]='';
                            USART3_RX_FLAG=0;
                            USART3_RX_CNT=0;
                            if(strstr((char*)USART3_RX_BUFFER,"SEND OK"))
                            {
                                return 0;
                            }
                         }            
                    }   
                }
            }
        }
    }
    return 1;
}

四、JAVA端效果图与部分代码示例

完整资料包下载地址: https://download.csdn.net/download/xiaolong1126626497/20687600

代码语言：javascript复制

package com.controller;

import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.common.bean.MySessionContext;
import com.common.bean.ResultData;
import com.entity.User;
import com.mapper.UserMapper;

@RestController()
@RequestMapping("/user")
public class UserController {
	@Autowired
	private UserMapper um;
	
	@PostMapping("changepswd.action")
	ResultData changePswd(String token,@RequestBody Map<String,String> map) {
		 HttpSession ss = MySessionContext.getSession(  token );
		 if( ss == null ) {
			 return ResultData.fail("请先登录！");
		 }
		 User uu = (User) ss.getAttribute("login_user");
		 if( uu == null )  return ResultData.fail("请先登录！");
		 String password = map.get("password");
		 String newpassword = map.get("password2");
		 int num = um.updatePassword(uu.getId(), password, newpassword);
		 if( num > 0) return ResultData.success();
		  return ResultData.fail("原始密码错误");
	}
	
	
	@PostMapping("adduser.action")
	ResultData addUser(String token,@RequestBody User user) {
		 HttpSession ss = MySessionContext.getSession(  token );
		 if( ss == null ) {
			 return ResultData.fail("请先登录！");
		 }
		 
		 User uu = (User) ss.getAttribute("login_user");
		 System.out.println( uu );
		 if( uu == null )  return ResultData.fail("请先登录！");
		 
		 if( !("admin".equalsIgnoreCase(uu.getRole()) ||
				    "root".equals( uu.getRole() )    )  )   {
			 return ResultData.fail("请用管理员账号登录再添加");
		 }
		 um.addUser(user);
		 return ResultData.success();
	}
	
	@PostMapping("delete.action")
	ResultData deleteUser(String token,@RequestBody User user) {
		 System.out.println( user);
		 HttpSession ss = MySessionContext.getSession(  token );
		 if( ss == null ) {
			 return ResultData.fail("请先登录！");
		 }
		 
		 User uu = (User) ss.getAttribute("login_user");
		 if( uu == null )  return ResultData.fail("请先登录！");
		 if("admin".equalsIgnoreCase(user.getRole()) || "root".equals( user.getRole() ))  return ResultData.fail("无法删除管理员用户！");
		 
		 if( !("admin".equalsIgnoreCase(uu.getRole()) ||
				    "root".equals( uu.getRole() )    )  )   {
			 return ResultData.fail("请用管理员账号登录再删除");
		 }
		 um.deleteUser(user);
		return ResultData.success();
	}
	
	
	
	@PostMapping("getall.action")
	ResultData getAll(String token) {
		 HttpSession ss = MySessionContext.getSession(  token );
		 if( ss == null ) {
			 return ResultData.fail("请先登录！");
		 }
		List<User> list = um.getAll();
		for(User u:list) {
			u.setPassword(null);
		}
		return ResultData.success().setData( list );
	}
	
	 
	@PostMapping("logout.action")
	ResultData getAllUser(String token) {
		 HttpSession ss = MySessionContext.getSession(  token );
		 if( ss != null ) {
			 ss.invalidate();
		 }
		return  ResultData.success();
	}
	
	@PostMapping("login.action")
	ResultData login(@RequestBody User user,HttpSession ss) {
		User rs = um.Login( user );
		if(rs != null ) {
			rs.setPassword( null );
			ss.setAttribute("login_user", rs );
			MySessionContext.AddSession( ss );
			return  ResultData.success().setData( rs ).setToken(ss.getId() );
		}else {
			return ResultData.fail("用户名或密码错误！");
		}
	}
	
	
}

代码语言：javascript复制

package com.common.wx;

import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import com.common.bean.WebSocketProductHolder;

public class WebSocketServerService extends TextWebSocketHandler{
	 
	@Override
	public void afterConnectionEstablished(WebSocketSession session) throws Exception {
		WebSocketProductHolder.setSession( session );
	}

} 

代码语言：javascript复制

package com.common.bean;
import java.io.IOException;
import java.net.ServerSocket;
import java.net.Socket;

import org.springframework.beans.BeansException;
import org.springframework.context.ApplicationContext;
import org.springframework.context.ApplicationContextAware;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;

import com.alibaba.fastjson.JSONObject;
import com.entity.Product;
import com.mapper.ProductMapper;

@Component
public class WebSocketProductHolder implements ApplicationContextAware{
	private volatile static WebSocketSession oneSession;
	private volatile static Socket client;
	
	public WebSocketProductHolder() {
		initServer();
	}
	public static void setSession(WebSocketSession ss) {
		oneSession = ss;
	}
	 
	private static void initServer()   {
		new Thread() {
			public void run() {
				ServerSocket ss = null;
				try {
					ss = new ServerSocket(9988);
					System.out.println("初始化");
					while(true) {
						client = ss.accept();
						byte [] b = new byte[128];
						try {
							while(true) {
								int num = client.getInputStream().read(b);//数据少，一次读完就阻塞。
								if(num != -1 ) {
									String cmd = new String(b,0,num);
									parseCMD( cmd);
								}
							}
						}catch (Exception e) {
							 System.out.println("连接断开...");
						}
					}
				}catch (Exception e) {
				}
			}
		}.start();
	}
	public static void register(String cardid)throws IOException {
		if(cardid!=null && cardid.length() >0 && 
				client!=null && client.isConnected()) {
			client.getOutputStream().write(("register:" cardid "rn").getBytes());
		}
	}
 
	private static void parseCMD(String cmd) {
		 if(cmd.startsWith("query")) {
			try {
				 String cardid = cmd.split(":")[1].trim();
				 if(  oneSession != null ) {
					 oneSession.sendMessage( new TextMessage( cardid ) );
				 } 
			}catch (Exception e) {
				 System.out.println("数据错误：" cmd);
			}
			  
		 }
	}
	@Override
	public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
		initServer();
	}
}

代码语言：javascript复制

<template>
	<view>
		<Menu></Menu>
		<view  class="view_content mc" >
			<view style="width:400px;">
				<view class="commonrow v_center">
					<text class="simpletitle">商品名称</text>
					<uni-easyinput v-model="addModel.name" />
				</view>
				
				<view class="commonrow v_center mt_5">
					<text class="simpletitle">商品价格</text>
					<uni-easyinput type="number" v-model="addModel.price" placeholder="单位为分,例如,16元请填写1600" />
				</view>
				
				<view class="commonrow v_center mt_5">
					<text class="simpletitle">商品数量</text>
					<uni-easyinput type="number" v-model="addModel.num" />
				</view>
				<view class="commonrow v_center mt_5">
					<text class="simpletitle">商品分类</text>
					<uni-easyinput    v-model="addModel.sortname" />
				</view>
				<view class="commonrow v_center mt_5">
					<text class="simpletitle">商品描述</text>
					<uni-easyinput type="textarea" v-model="addModel.detail" />
				</view>
				<view class="commonrow v_center mt_5">
					<text class="simpletitle">商品图片</text>
					<uni-upload-one-image v-model="addModel.imgurl" />
				</view>
				<view class="commonrow v_center mt_5">
					<text class="simpletitle"></text>
					<text class="submitbtn hand_point" @click="submit">提交</text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
import Menu from '@/pages/common/Menu.vue'
export default {
	components:{Menu},
	data() {
		return {
			addModel:{
				
			}
		}
	},
	methods: {
		async submit(){
			if(!this.addModel.name){
				return this.$api.alert("请填写商品名称！");
			}
			if(!this.addModel.price){
				return this.$api.alert("请填写商品价格！");
			}
			if(!this.addModel.num){
				return this.$api.alert("请填写商品数量！");
			}
			if(!this.addModel.sortname){
				return this.$api.alert("请填写商品分类！");
			}
			if(!this.addModel.detail){
				return this.$api.alert("请填写商品描述！");
			}
			if(!this.addModel.imgurl){
				return this.$api.alert("请填上传商品图片！");
			}
			console.info( this.addModel );
			let res = await this.$api.request("product/add.action",this.addModel);
			console.info( res );
			this.$api.alert("添加成功！");
		}
	}
}
</script>

<style>

</style>

代码语言：javascript复制

<template>
	<view>
		<Menu></Menu>
		<view class="view_content mc">
			<view v-show="mode=='query'">
				<view class="commonrow h_center" style="width:600px;">
					 <uni-easyinput v-model="query.id" placeholder="请输入商品编号" />
					 <uni-easyinput v-model="query.name"placeholder="请输入商品名称" class="ml_10" />
					 <text class="submitbtn ml_10" @click="queryPro">查询</text>
				</view>
				<view class="up_down_content h_center commonrow">
					当前共 {{datalist.length}} 件商品
				</view>
				<uni-table border stripe emptyText="暂无更多数据" type="checkbox" style="width:100%;max-height: 700px;overflow: auto;">
				    <!-- 表头行 -->
				    <uni-tr>
						<uni-th align="center" width="150">商品编号</uni-th>
				        <uni-th align="center" width="150">商品名称</uni-th>
						<uni-th align="left" width="150">商品分类</uni-th>
						<uni-th align="left" width="100">商品价格</uni-th>
						<uni-th align="left" width="100">商品数量</uni-th>
						<uni-th align="left" width="100">商品图片</uni-th>
					    <uni-th align="left"  >操作</uni-th>
				    </uni-tr>
					  <uni-tr v-for="(item , index ) in datalist" style="width: 100%;"  >
						  <uni-td align="center" > 
							  <uni-easyinput v-model="item.id"  :disabled="true"   />
						</uni-td>
						  <uni-td align="center" >
							  {{item.name}}
						  </uni-td>
						  <uni-td>
							   {{item.sortname}}
						  </uni-td>
						  <uni-td>
								 {{item.price|priceText}}
						  </uni-td>
						  <uni-td>
						  		 {{item.num}}
						  </uni-td>
						  <uni-td>
						  		<uni-img :src="item.imgurl"></uni-img>
						  </uni-td>
						  <uni-td>
							  <view class="commonrow">
								    <text class="submitbtn hand_point" @click="showdetail(item)">详情</text>
								   <text class="deletebtn hand_point ml_10" @click="del(item)">删除</text>
								   <text class="submitbtn hand_point ml_10" @click="edit(item)">修改</text>
							  </view>
						  </uni-td>
					  </uni-tr>
				</uni-table>
				
			</view>
			<view v-show="mode=='detail'" style="padding-left: 50px;">
				 <view class="commonrow">
					 <text class="cancelbtn" @click="mode='query';">返回</text>
				 </view>
				 <view class="commonrow v_center" style="margin-top: 30px;">
				 	<text class="simpletitle">商品编号</text>
				 	 {{detail.id}}
				 </view>
				 <view class="commonrow v_center mt_5">
				 	<text class="simpletitle">商品名称</text>
				 	 {{detail.name}}
				 </view>
				 
				 <view class="commonrow v_center mt_5">
				 	<text class="simpletitle">商品价格</text>
					{{detail.price|priceText}}
				 </view>
				 
				 <view class="commonrow v_center mt_5">
				 	<text class="simpletitle">商品数量</text>
				 	  {{detail.num}}
				 </view>
				 <view class="commonrow v_center mt_5">
				 	<text class="simpletitle">商品分类</text>
				 	  {{detail.sortname}}
				 </view>
				 <view class="commonrow v_center mt_5">
				 	<text class="simpletitle">商品描述</text>
					 {{detail.detail}}
				 </view>
				 <view class="commonrow v_center mt_5">
				 	<text class="simpletitle">商品图片</text>
				 	<uni-img :src="detail.imgurl"></uni-img>
				 </view>
				 
			</view>
		</view>
	</view>
</template>

<script>
import Menu from '@/pages/common/Menu.vue'
export default {
	components:{Menu},
	data() {
		return {
			query:{},
			datalist:[],
			detail:{},
			mode:"query"
		}
	},
	onLoad() {
		this.load();
	},
	methods: {
	 showdetail( item ){
			this.mode = "detail";
			this.detail = item;
		},
		async edit(item){
			this.navTo("/pages/product/update?id=" item.id);
		},
		async queryPro(){
			if(!this.query.id)delete this.query.id;
			if(!this.query.name)delete this.query.name;
			if(this.query.id){
				this.query.id = Number(this.query.id);
			}
			let res = await this.$api.request("product/query.action",this.query);
			this.datalist = res.data;
		},
		async load(){
			let res = await this.$api.request("product/all.action");
			this.datalist = res.data;
		},
	   del(item){
			this.$api.confirm(async ()=>{
				let res = await this.$api.request("product/delete.action",item);
				this.$api.alert("删除成功！");
				await this.load();
			},"删除后不可恢复，确认删除吗？")
		}
	}
}
</script>

<style>

</style>

代码语言：javascript复制

<template>
	<view>
		<Menu></Menu>
		<view class="view_content mc" >
			<view style="width:400px;" v-if="model">
				<view class="commonrow v_center">
					<text class="simpletitle">商品名称</text>
					<uni-easyinput v-model="model.name" />
				</view>
				
				<view class="commonrow v_center mt_5">
					<text class="simpletitle">商品价格</text>
					<uni-easyinput type="number" v-model="model.price" placeholder="单位为分,例如,16元请填写1600" />
				</view>
				
				<view class="commonrow v_center mt_5">
					<text class="simpletitle">商品数量</text>
					<uni-easyinput type="number" v-model="model.num" />
				</view>
				<view class="commonrow v_center mt_5">
					<text class="simpletitle">商品分类</text>
					<uni-easyinput    v-model="model.sortname" />
				</view>
				<view class="commonrow v_center mt_5">
					<text class="simpletitle">商品描述</text>
					<uni-easyinput type="textarea" v-model="model.detail" />
				</view>
				<view class="commonrow v_center mt_5">
					<text class="simpletitle">商品图片</text>
					<uni-upload-one-image v-model="model.imgurl" />
				</view>
				<view class="commonrow v_center mt_5">
					<text class="simpletitle"></text>
					<text class="submitbtn hand_point" @click="submit">提交</text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
import Menu from '@/pages/common/Menu.vue'
export default {
	components:{Menu},
	data() {
		return {
			model:null
		}
	},
	onLoad({id}){
		if(!id)return this.$api.alert("参数错误！");
		this.loadProduct(id);
	},
	methods: {
		async loadProduct(id){
			let res = await this.$api.request("product/byid.action",{id});
			if(res.data ){
				this.model = res.data;
			}
			
			console.info(this.model);
		},
		async submit(){
			if(!this.model.name){
				return this.$api.alert("请填写商品名称！");
			}
			if(!this.model.price){
				return this.$api.alert("请填写商品价格！");
			}
			if(!this.model.num){
				return this.$api.alert("请填写商品数量！");
			}
			if(!this.model.sortname){
				return this.$api.alert("请填写商品分类！");
			}
			if(!this.model.detail){
				return this.$api.alert("请填写商品描述！");
			}
			if(!this.model.imgurl){
				return this.$api.alert("请填上传商品图片！");
			}
			console.info( this.model );
			let res = await this.$api.request("product/update.action",this.model);
			this.$api.alert("修改成功！");
			this.navTo("/pages/product/search");
		}
	}
}
</script>

<style>

</style>

java stm32 wifi 软件

0 人点赞