第01讲：基于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组件绘制表格

参考uni-table的API帮助文档：https://uniapp.dcloud.io/component/uniui/uni-table.html#%E4%BB%8B%E7%BB%8D

 打开文件：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());
	}
}

3.5、源码下载

https://download.csdn.net/download/qzc70919700/85089062

 四、将表格数据改为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;
    }
}

用浏览器访问该Controller

 

 五、将表格数据改为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;
			}
		});
	}
}

浏览器访问后的效果：

 源代码下载：

https://download.csdn.net/download/qzc70919700/85089264