Uniapp数据展示

Posted on 2022-11-24 21:20 梦中千秋阅读(623) 评论(0) 编辑收藏举报

uniapp

后端以ssm框架拟写接口

前端利用uniapp调用接口,实现数据的展示以及基本的增删改查.

1.状态码POJO类

public class DataStatus {
    private Integer StatusCode;  //状态码
    private String StatusDescription;  //提示信息

    public Integer getStatusCode() {
        return StatusCode;
    }

    public void setStatusCode(Integer statusCode) {
        StatusCode = statusCode;
    }

    public String getStatusDescription() {
        return StatusDescription;
    }

    public void setStatusDescription(String statusDescription) {
        StatusDescription = statusDescription;
    }
}

2.控制类

列举增删改查各一个

service 业务逻辑层与

dao 数据访问层省略

自己想办法

@CrossOrigin  //解决跨域问题
@Controller
public class BillController {
    @Autowired
    private BillService billService;
    @ResponseBody
    @RequestMapping("/findAllBill")
    public JSONObject findAllBill() {
        List<Bill> bill = billService.findAllBill();
        JSONObject jo = new JSONObject();
        DataStatus ds = new DataStatus();
        if (bill != null){
            ds.setStatusCode(100);
            ds.setStatusDescription("查询全部成功");
            jo.put("DataStatus",ds);
            jo.put("Data",bill);
            return jo;
        }else{
            ds.setStatusCode(104);
            ds.setStatusDescription("查询全部失败");
            jo.put("DataStatus",ds);
            return jo;
        }
    }
    
    @ResponseBody
    @RequestMapping("/findBill")
    public JSONObject findBill(String search) {
        List<Bill> bill = billService.findBill(search);
        JSONObject jo = new JSONObject();
        DataStatus ds = new DataStatus();
        if (bill != null && bill.size()>0){
            ds.setStatusCode(100);
            ds.setStatusDescription("查询成功");
            jo.put("DataStatus",ds);
            jo.put("Data",bill);
            return jo;
        }else{
            ds.setStatusCode(104);
            ds.setStatusDescription("查询不到相关信息");
            jo.put("DataStatus",ds);
            return jo;
        }
    }
    
    @ResponseBody
    @RequestMapping("/deleteBill")
    public DataStatus deleteBill(Integer id){
        int row = this.billService.deleteBill(id);
        DataStatus ds = new DataStatus();
        if (row > 0){
            ds.setStatusCode(100);
            ds.setStatusDescription("删除成功");
            return ds;
        }else{
            ds.setStatusCode(104);
            ds.setStatusDescription("删除失败");
            return ds;
        }
    }
    @ResponseBody
    @RequestMapping("/addBill")
    public DataStatus addBill(@RequestBody Bill bill){
        int row = this.billService.addBill(bill);
        DataStatus ds = new DataStatus();
        if (row > 0){
            ds.setStatusCode(100);
            ds.setStatusDescription("新增成功");
            return ds;
        }else{
            ds.setStatusCode(104);
            ds.setStatusDescription("新增失败");
            return ds;
        }
    }
    @ResponseBody
    @RequestMapping("/updateBill")
    public DataStatus updateBill(@RequestBody Bill bill){
        int row = this.billService.updateBill(bill);
        DataStatus ds = new DataStatus();
        if (row>0){
            ds.setStatusCode(100);
            ds.setStatusDescription("数据更新成功");
            return ds;
        }else{
            ds.setStatusCode(104);
            ds.setStatusDescription("数据更新失败");
            return ds;
        }
    }
    
}

注意一点 Dao层接口@Param

//@Param("search")表示为参数search命名，命名后，在映射文件SQL中才可使用#{search}获取到search的值
public List<Bill> findBill(@Param("search") String search);

3.前端界面展示

onLoad表示进入页面加载getList()函数，然后getList（）函数调用后端接口获取数据，res.data.Data为获取到的数据，存储到pls数组对象中。

		onLoad() {
			this.getList();
		},
		methods: {
			getList() {
				uni.request({
					url: 'http://localhost:8080/findAllBill',
					success: (res) => {
						this.bills = res.data.Data;
						console.log(this.bills)
					}
				});
			},

需先定义数据类型

		data() {
			return {
				bills: [],
			}
		},

通过循环渲染，展示在表格中

key 标识主键

			<tr v-for="bill in bills" :key="bill.id">
				<td>{{bill.id}}</td>
				<td>{{bill.name}}</td>
				<td>{{bill.cname}}</td>
				<td>{{bill.amountb}}</td>
				<td>{{bill.time}}</td>
				<td>{{bill.price}}</td>
			</tr>

**注意:**控制类中的JSONOBJECT对象

jo.put(“DataStatus”,ds);
jo.put(“Data”,bill);

与前端j接收成功返回的参数

res.data.Data

res.data.DataStatus

相互对应

4.查询

输入表单

		<view id="search">
			<form @submit="Search">
				<input type="text" name="search" placeholder="请输入要查询的信息">
				<button confirm-type="search" form-type="submit" size="mini">模糊查询</button>
			</form>
		</view>

点击调用查询

调用–>Search

参数–>search

相对应

			//点击查询
			Search: function(e) {
				uni.request({
					url: 'http://localhost:8080/findBill?search=' + e.detail.value.search,
					success: (res) => {
						this.bills = res.data.Data; //将查询到的数据输出到表格中
						console.log(res.data.DataStatus);
						if (res.data.DataStatus.statusCode == 100) {
							uni.showToast({
								title: '查询成功',
								icon: 'success'
							})
						} else {
							uni.showToast({
								title: '查询不到相关信息',
								icon: 'none'
							});
							this.getList();
						}
					}
				});
			},

5.删除

点击按钮触发点击事件,传递参数id

<button v-on:click="deleteb(bill.id)" type="warn" size="mini">删除</button>

形式参数delid,接收id，调用接口删除数据

success成功返回调用函数

this.getList();

this.tips()

重新加载界面和给出提示信息.

			//点击删除
			deleteb: function(delid) {
				uni.request({
					url: 'http://localhost:8080/deleteBill?id=' + delid,
					success: (res) => {
						console.log(res.data);
						this.getList();
						this.tips()
					}
				});
			},
			//消息提示框
			tips() {
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				})
			}

6.添加

navigator 进行页面跳转，进入到添加表单界面

					<navigator url="/pages/add_b/add" hover-class="other-navigator-hover">
						<button type="default" size="mini">添加</button>
					</navigator>

表单

<template>
	<view>
		<form @submit="add">
			<input type="text" name="id" placeholder="请输入商品编号" />
			<input type="text" name="name" placeholder="请输入商品名" />
			<input type="text" name="cname" placeholder="请输入客户姓名" />
			<input type="number" name="amountb" placeholder="请输入商品数量" />
			<input type="text" name="time" placeholder="请输入下单时间" />
			<input type="number" name="price" placeholder="请输入订单金额" />
			<button type="primary" form-type="submit">确定添加</button>
		</form>
	</view>
</template>

点击添加调用函数接口

POST方法，使用data属性，将表单填入的是数据，传入接口，而不使用在url后面拼接的方式。

成功调用

uni.navigateBack({
delta: 1
});

退回一级，即–》退回到表单展示界面

但是此时表单中显示的数据并没有刚刚所添加的，因为退回没有刷新表单，所以不会展示数据，再执行一次查询空或者刷新浏览器，可展示数据。

思考：如何改进？

			add: function(e) {
				uni.request({
					url: 'http://localhost:8080/addBill',
					method: 'POST',
					header: {
						'Content-Type': 'application/json'
					},
					data: {
						id: e.detail.value.id,
						name: e.detail.value.name,
						cname: e.detail.value.cname,
						amountb: e.detail.value.amountb,
						time: e.detail.value.time,
						price: e.detail.value.price
					},
					success: (res) => {
						console.log(res.data); //返回成功的状态									
						console.log(e.detail.value); //获取到表单填入的数据						
						uni.navigateBack({
							delta: 1
						});						
					}
				});			
			},

7.修改

<navigator :url="'/pages/update_b/update?bill='+ encodeURIComponent(JSON.stringify(bill))"
		hover-class="other-navigator-hover">
		<button type="primary" size="mini">修改</button>
</navigator>

一般情况下，修改都是最难搞定的

难点:

按钮点击，带参跳转页面。

:url="’/pages/update_b/update?bill=’+ encodeURIComponent(JSON.stringify(bill))"

加载页面时,将参数填充到表单中,

onLoad: function(option) {
			const bill = JSON.parse(decodeURIComponent(option.bill));
			console.log(bill); //获取的数据
			//填充数据
			this.id = bill.id;
			this.name = bill.name;
			this.cname = bill.cname;
			this.amountb = bill.amountb;
			this.time = bill.time;
			this.price = bill.price;
		},

表单显示数据,自动获取焦点

focus=“true”

<template>
	<view>
		<form @submit="upb">
			<input v-model="id" type="text" name="id" disabled />
			<input v-model="name" type="text" name="name" placeholder="请输入商品名" focus="true" />
			<input v-model="cname" type="text" name="cname" placeholder="请输入客户姓名" />
			<input v-model="amountb" type="number" name="amountb" placeholder="请输入商品数量" />
			<input v-model="time" type="text" name="time" placeholder="请输入下单时间" />
			<input v-model="price" type="number" name="price" placeholder="请输入订单金额" />
			<button type="primary" form-type="submit">确定修改</button>
		</form>
	</view>
</template>

点击调用方法，传递表单数据。

e.detail.value

同样使用data属性传递参数

method: ‘POST’,
data: {
id: e.detail.value.id,
name: e.detail.value.name,
cname: e.detail.value.cname,
amountb: e.detail.value.amountb,
time: e.detail.value.time,
price: e.detail.value.price
},

最后返回页面到表单界面

缺点:

不过也需要再次刷新，才能展示被修改后的数据。

			upb: function(e) {
				uni.request({
					url: 'http://localhost:8080/updateBill',
					method: 'POST',
					data: {
						id: e.detail.value.id,
						name: e.detail.value.name,
						cname: e.detail.value.cname,
						amountb: e.detail.value.amountb,
						time: e.detail.value.time,
						price: e.detail.value.price
					},
					success: (res) => {
						console.log(res.data); //返回成功的状态									
						console.log(e.detail.value); //获取到表单填入的数据						
						//返回页面
						uni.navigateBack({
							delta: 1
						});

					}
				})
			}

8.页面

同微信小程序一样，uniapp中新增的页面也需要注册才能使用。

在pages.json中"pages":属性注册界面，第一个默认为主界面。

		{
			"path":"pages/add_b/add",
			"style":{
				"navigationBarTitleText":"添加表单"
			}
		},

刷新页面返回顶部

JustBloom