Uniapp数据展示

简介: Uniapp数据展示

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":"添加表单"
      }
    },
相关文章
|
10天前
|
小程序 API
微信小程序如何利用createIntersectionObserver实现图片懒加载
微信小程序如何利用createIntersectionObserver实现图片懒加载
|
10天前
|
小程序 定位技术 API
微信小程序引入地图
微信小程序引入地图
103 0
|
6月前
|
前端开发 JavaScript
前端电子屏数字展示效果组件开发
前端电子屏数字展示效果组件开发
39 0
|
9月前
|
JavaScript 前端开发 数据可视化
Vue 引入高德地图:实现地图展示与交互
本文将介绍如何在Vue项目中引入高德地图,以及如何实现地图的展示和交互功能。我们将从安装依赖开始,然后配置高德地图的密钥和相关插件,最后演示如何在Vue组件中使用地图组件和实现基本的交互功能。通过本文的指导,您将能够轻松地在Vue项目中集成高德地图,实现地图的展示与交互。
422 1
|
10月前
|
小程序 定位技术
记录一款基于地图标注点展示的微信小程序开发过程纪要
记录整理一款基于地图的微信小程序开发过程,主要涉及标注点展示,可视范围内标注点动态更新,标注点自定义气泡,气泡点击及气泡内容实时更新
102 0
|
10月前
|
前端开发 小程序 API
微信小程序2.9.0基础库canvas2D新API,生成海报保存到手机功能实现
微信小程序2.9.0基础库canvas2D新API,生成海报保存到手机功能实现
272 0
|
移动开发 JSON API
h5调起原生分享面板,展示更多功能方案
h5调起原生分享面板,展示更多功能方案
202 0
|
前端开发
前端学习案例3-瀑布流方式3
前端学习案例3-瀑布流方式3
45 0
前端学习案例3-瀑布流方式3
|
前端开发
前端学习案例1-瀑布流方式1
前端学习案例1-瀑布流方式1
68 0
前端学习案例1-瀑布流方式1
|
前端开发
前端学习案例4-瀑布流方式4
前端学习案例4-瀑布流方式4
53 0
前端学习案例4-瀑布流方式4