第04讲：跨端开发权限分配

一、根据用户ID分配用户角色

1.1  在原本03讲的基础上进行权限分配，首先在用户界面的UI部分添加分配按钮

<uni-td align="center">
	<view class="uni-group">
		<button style="margin-right: 20rpx;" class="uni-button" size="mini" type="primary" @click="doupdate(authuser.id)">修改</button>
		<button class="uni-button" size="mini" type="warn" @click="dodelete(authuser.id)">删除</button>
		<button style="margin-right: 20rpx;" class="uni-button" size="mini" type="default" @click="doassign(authuser.id)">分配</button>
	</view>
</uni-td>

1.2  script中添加相对应的函数

//分配角色
	doassign(id){
		uni.navigateTo({
		url: './user_role?id='+id
	})
	}

1.3  新建一张user_role表，所有页面跳转的传参都进入到onLoad里的options中，相对应的代码如下：

data() {
	return {
		uid: null,
		pageIndex: 1,//分页器页码
		pageSize: 6,//分页器每页显示数据的条数
		pageTotal: 0 ,
	}
},
onLoad(options) {
			this.uid = options.id;  //接收页面跳转传参
			console.log("分配:用户id="+this.uid);  //打印看看是否接收到
}

此时页面效果如下：

1.4  获取全部角色

data() {
	return {
		uid: null,  //用户
		roleList: null, //全部角色
		pageIndex: 1,//分页器页码
		pageSize: 6,//分页器每页显示数据的条数
		pageTotal: 0 ,
	}
},

/**
 * 获取全部角色
 */
	requestRoleList(){
		uni.request({
		url: 'http://localhost:8070/role/show',
		data: {
			pageIndex: this.pageIndex,
			pageSize: this.pageSize
		},
		success: (res) => {   //不需要传参，直接回调函数
			console.log(res.data.data);  //将数据打印出来
			this.roleList = res.data.data;  //给数据进行赋值
			this.pageTotal = res.data.total
		}
	    })
	}

用onShow来填充网页

onShow() {
	this.requestRoleList();//调用请求用户列表的函数，通过HTTP请求微服务的用户列表
}

1.5  数据显示在表格中

1.5.1  template（UI）写法：

<uni-nav-bar title="分配角色" leftText="返回" rightText="保存" @clickLeft="doBack" @clickRight="doSave"></uni-nav-bar>
	<uni-table :border="true" type="selection">
		<uni-tr>
			<uni-th>角色名称</uni-th>
		</uni-tr>
		<uni-tr v-for="role in roleList">
			<uni-td>{{role.name}}</uni-td>
		</uni-tr>
	</uni-table>

1.5.2  script写法：

doBack(){
	uni.navigateBack();
},
doSave(){
				
}

页面效果如下：

1.6 根据用户ID获取角色列表

AuthRoleController

@GetMapping("/user_role_list")
    @ResponseBody
    @CrossOrigin(origins = "*")
    public HttpResult getUserRolesByUid(int uid){
        List<AuthRole> list = authRoleService.selectUserRolesByUid(uid);
        return new HttpResult(200,null,list,0);
    }

 script写法：

data() {
	return {
	msg: null,  //对话框的提示字符串
	tableCheckIndex: [],  //表格复选框被选中的的索引列表
	uid: null,  //用户
	roleList: null, //全部角色
	userRoleList: null //用户所拥有的角色列表
	}
}
/**
 * 获取用户所拥有的角色列表
 */
requestUserRoles(){
	uni.request({
	url: 'http://localhost:8070/role/user_role_list?uid='+this.uid,
	success: (res) => {
		console.log(res.data.data);
		this.userRoleList = res.data.data;
		//相应的业务逻辑判断，比对用户所拥有的角色，如果比对成功，就让该条记录的复选框选中
		//第一步，遍历总角色列表
		for(var i=0;i<this.roleList.length;i++){
			for(var j=0;j<this.userRoleList.length;j++){
				//如果两个ID相同,这条记录就被选中
				if(this.roleList[i].id == this.userRoleList[j].id){
					//让该纪录的复选框被选中
					this.$refs.roleTable.toggleRowSelection(i,true);
                    //i表示表格的哪一行被选中
				}
			}
		}
	}
	})
},
/* 当表格行的状态变化时触发*/
	selectionChange(e) {
		console.log(e)
		this.tableCheckIndex = e.detail.index;  //将表格选中项的索引赋值给变量
	}

  template（UI）写法：

<uni-table :border="true" type="selection" ref="roleTable" @selection-change="selectionChange">
			<uni-tr>
				<uni-th>角色名称</uni-th>
			</uni-tr>
			<uni-tr v-for="role in roleList">
				<uni-td>{{role.name}}</uni-td>
			</uni-tr>
		</uni-table>

 此时原本数据库分配的用户角色在页面通过复选框展示出来

1.7 保存功能

doSave(){
				var ids = [];
				for (var i=0;i<this.tableCheckIndex.length;i++) {
					ids[i] = this.roleList[this.tableCheckIndex[i]].id;
				}
				uni.request({
					url: 'http://localhost:8070/user/assign_roles',
					data: {
						uid: this.uid,
						roleIds: ids
					},
					success: (res) => {
						if(res.data.code == 200){  //登录成功
							this.msg = res.data.data;
						}else{
							this.msg = res.data.msg; //授权失败失败
						}
						this.open();
					}
				})
			}

二、根据角色ID分配资源

完整代码如下：

<template>
	<view>
		<menuDraw></menuDraw>
		<uni-nav-bar title="分配资源" leftText="返回" rightText="保存" @clickLeft="doBack" @clickRight="doSave"></uni-nav-bar>
		<uni-table :border="true" type="selection">
			<uni-tr>
				<uni-th>资源名称</uni-th>
			</uni-tr>
			<uni-tr v-for="res in resList">
				<uni-td>{{res.name}}</uni-td>
			</uni-tr>
		</uni-table>
		<!--分页器-->
		<uni-pagination
			:current="pageIndex"
			:pageSize="pageSize"
			:total="pageTotal"
			@change="pageChanged"
		/>
	</view>
</template>

<script>
	import menuDraw from "../template/menu_draw.vue";
	export default {
		components: {
			menuDraw //第二步，组件的声明，如果有多个组件用逗号隔开
		},
		data() {
			return {
				rid: null,
				resList: null,
				pageIndex: 1,//分页器页码
				pageSize: 6,//分页器每页显示数据的条数
				pageTotal: 0 ,
			}
		},
		onLoad(options) {
			this.rid = options.id;  //接收页面跳转传参
			console.log("分配:用户id="+this.rid);
		},
		onShow() {
			this.requestResList();//调用请求用户列表的函数，通过HTTP请求微服务的用户列表
		},
		methods: {
			/**
			 * 获取全部角色
			 */
			requestResList(){
				uni.request({
					url: 'http://localhost:8070/res/show',
					data: {
						pageIndex: this.pageIndex,
						pageSize: this.pageSize
					},
					success: (res) => {
						console.log(res.data.data);
						this.resList = res.data.data;
						this.pageTotal = res.data.total
					}
				})
			},
			//当分页器被点击时触发
			pageChanged(e){
				console.log(e.current); //打印出当前点击的页码
				this.pageIndex = e.current; //给变量赋值
				this.requestResList();
			},
			doBack(){
				uni.navigateBack();
			},
			doSave(){
				
			}
		}
	}
</script>

<style>

</style>

三、附录（常用组件及API）

http://t.csdn.cn/0dcjc