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":"添加表单" } },
