un6.28：基于UniAPP的小程序跨端开发

男娘i 2023-10-11 17:40 57阅读 0赞

UniAPP官方网站：https://uniapp.dcloud.io/component/view.html

安装scss/sass编译插件：https://ext.dcloud.net.cn/plugin?id=2046

一、常见的软件开发模式  
1.1、MVC模式  
1.2、MVVM模式  
1.3、什么是VUE  
二、创建项目  
文件 > 新建 > 项目

安装uni-ui插件：https://ext.dcloud.net.cn/plugin?id=55

使用HBuilder导入

选择刚刚创建好的项目，关联uni-ui插件

关联成功后项目中会多出来一个uni\_modules的模块，至此我们就可以使用uni\_ui提供的功能了。

运行项目：运行 > 运行到浏览器 > Firefox

三、使用uni-table组件绘制表格

打开文件：pages/index/index.vue

3.1、初始化数据

cityList: [
        {"date": "2020-09-01","name": "Dcloud1","address": "上海市普陀区金沙江路 1518 弄"}, 
        {"date": "2020-09-02","name": "Dcloud2","address": "上海市普陀区金沙江路 1517 弄"}, 
        {"date": "2020-09-03","name": "Dcloud3","address": "上海市普陀区金沙江路 1519 弄"}, 
        {"date": "2020-09-04","name": "Dcloud4","address": "上海市普陀区金沙江路 1516 弄"}
    ]

3.2、初始化表格

<uni-table 
        ref="cityTable" 
        type="selection" 
        border 
        stripe 
        @selection-change="selectionChange">
        <uni-tr>
            <uni-th align="center">名称</uni-th>
            <uni-th align="center">日期</uni-th>
            <uni-th align="center">地址</uni-th>
            <uni-th align="center">操作</uni-th>
        </uni-tr>
        <uni-tr v-for="(city, index) in cityList" :key="index">
            <uni-td>{
       {city.name}}</uni-td>
            <uni-td>{
       {city.date}}</uni-td>
            <uni-td>{
       {city.address}}</uni-td>
            <uni-td>
                <view class="uni-group">
                    <button class="uni-button" size="mini" type="primary" @click="updateCity(city)">修改</button>
                    <button class="uni-button" size="mini" type="warn" @click="deleteCity(city)">删除</button>
                </view>
            </uni-td>
        </uni-tr>
    </uni-table>

3.3、实现多选

HTML:
    
    <template>
        <view>
            <view class="uni-group">
                <button class="uni-button" size="mini" type="primary" @click="tableSelectAll()">全选</button>
                <button class="uni-button" size="mini" type="primary" @click="tableToggleAllSelection()">反选</button>
                <button class="uni-button" size="mini" type="primary" @click="tableClearSelection()">清除选择</button>
                <button class="uni-button" size="mini" type="primary" @click="delTable()">删除选中</button>
            </view>
            <uni-table ref="cityTable" type="selection" border stripe emptyText="没有更多数据" @selection-change="selectionChange">
                ...
            </uni-table>
        </view>
    </template>
    JS:
    
    methods: {
        // 全选
        tableSelectAll(){
            this.$refs.cityTable.selectionAll();
        },
        // 反选
        tableToggleAllSelection(){
            this.$refs.cityTable.toggleAllSelection();
        },
        // 清空用户的选择
        tableClearSelection(){
            this.$refs.cityTable.clearSelection();
        }
    }

3.4、修改、删除、实现多选删除

methods: {
        // 修改
        updateCity(item){
            console.log(item);
        },
        // 删除
        deleteCity(item){
            console.log(item);
        },
        // 多选
        selectionChange(e) {
            // console.log(e.detail.index)
            this.selectedIndexs = e.detail.index;
        },
        // 多选处理
        selectedItems() {
            return this.selectedIndexs.map(i => this.cityList[i]); //返回匹配的城市数组
        },
        // 批量删除
        delTable() {
            console.log(this.selectedItems());
        }
    }

四、将表格数据改为Web获取（微服务开发）  
4.1、什么是IDEA  
4.2、使用IDEA创建基于Web的SpringBoot项目  
File > New > Project

使用Spring Initializr创建项目

设置项目名称及jdk版本

选择Web依赖

选择项目的工作空间

4.3、创建TestController并启动项目

package com.example.tabledemo.controller;
     
    import com.example.tabledemo.entity.City;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.bind.annotation.RestController;
     
    import java.text.SimpleDateFormat;
    import java.util.ArrayList;
    import java.util.Date;
    import java.util.List;
     
    @RestController
    @RequestMapping("test")
    public class TestController {
        @CrossOrigin(origins = "*")
        @GetMapping("/tableData")
        @ResponseBody
        public List<City> getCityList(){
            List<City> list = new ArrayList<City>();
            list.add(new City(1, "北京办事处", new Date(), "北京市海淀区"));
            list.add(new City(2, "上海办事处", new Date(), "上海市闵行区"));
            list.add(new City(3, "杭州办事处", new Date(), "杭州市西湖区"));
            return list;
        }
    }

五、将表格数据改为Web获取（UniAPP开发）  
JS：

onLoad() {
        this.httpGetCityList();
    },
    methods: {
        // 请求表格数据
        httpGetCityList(){
            uni.request({
                url: 'http://localhost:8081/test/tableData',
                success: (res) => {
                    console.log(res.data)
                    this.cityList = res.data;
                }
            });
        }
    }

浏览器访问后的效果：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5aSn5Z2P6JuLXl9e_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5aSn5Z2P6JuLXl9e_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/532770893a65487c8ac109be61764622.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aSn5Z2P6JuLXl9e,size_20,color_FFFFFF,t_70,g_se,x_16