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

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;
            }
        });
    }
}

浏览器访问后的效果：