第03讲：跨端开发增删改查

一、vue写法中如何引入组件并且将其封装起来

1.在pages文件夹下新建template文件夹，新建menu_draw.vue文件

2.uni-nav-bar自定义导航栏

2.1 template（UI）写法：

<!--导航栏 -->
		<uni-nav-bar backgroundColor="#d3233b" color="#ffffff" title="律行法务后台管理系统"
		leftText="功能列表" @clickLeft="showDraw"></uni-nav-bar>

 使用API和点击事件：

leftText

String

-

左侧按钮文本

@clickLeft

左侧按钮点击时触发

-

 2.2  script写法：

/**
 * 点击标题栏功能列表
 */
showDraw(){
  console.log("侧拉显示菜单列表");
}

 此时页面效果如下：

2.3  引入此文件实现导航栏功能（如何导入？）

• 通过import关键字导入

import menuDraw from "../template/menu_draw.vue";//第一步，导入外部文件

• components处放置组件

/* 组件的声明*/
	components: {
		menuDraw //第二步，组件的声明，如果有多个组件用逗号隔开
	}

• 在UI上使用，使用组件

<!-- 第三步，使用组件-->
<menuDraw></menuDraw>
欢迎使用律行法务后台管理系统

页面效果发生改变：

3.uni-drawer抽屉

3.1 template（UI）写法：

<!--功能列表抽屉 -->
		<uni-drawer ref="showLeft" mode="left" mask-click="true">
			<scroll-view scroll-y="true" style="height: 100%;">
				
			</scroll-view>
		</uni-drawer>

       要想让抽屉功能实现还需要一个抓手，在method里需要两个函数，一个将抽屉拉出来一个将抽屉推进去。

3.2  script写法：

/**
 * 点击标题栏功能列表
 */
	showDraw(){
		this.showDrawer();
	},
	//拉开抽屉
	showDrawer(){
		this.$refs.showLeft.open();
	},
	//推回抽屉
	closeDrawer(){
		this.$refs.showLeft.close();
	}

此时页面效果如下：

点击功能列表弹出抽屉，点击右侧空白页面收回抽屉

4.uni-collapse折叠面板，uni-list列表

4.1  template（UI）写法：

<uni-collapse>
	<uni-collapse-item title="用户管理">
		<uni-list>
			<uni-list-item title="用户列表" showArrow="true" :clickable="true" @click="jump(1)"></uni-list-item>
			<uni-list-item title="添加用户" showArrow="true" :clickable="true" @click="jump(2)"></uni-list-item>
		</uni-list>
</uni-collapse-item>
    <uni-collapse-item title="角色管理"></uni-collapse-item>
    <uni-collapse-item title="资源管理"></uni-collapse-item>
</uni-collapse>

4.2  script写法：

jump(flag){
	if(flag == 1){ //跳转到用户列表
	//console.log("跳转到用户列表");
		uni.redirectTo({
			url: '../authuser/authuser'
		})
		}else if(flag == 2){ //跳转到用户列表
			console.log("跳转到增加用户");
		}
	}

4.3  页面效果如下：

 5.删除修改

 5.1 template（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>
		</view>
</uni-td>

 5.2  script写法：

// 修改
	doupdate(id){
	console.log("修改:用户id="+id);
	},
// 删除
	dodelete(id){
	console.log("删除:用户id="+id);
	}

5.3  页面显示

 5.4  数据回显

   // 点击列表修改按钮时触发
		doupdate(id){
			uni.redirectTo({
				url: './user_update?id='+id
			})
		}

/* 当页面加载成功之后触发，用于接收跳转页面传参*/
		onLoad(options) {
			this.id = options.id;
			console.log("接受页面传参ID："+this.id);
		},
data() {
	return {
	id: null,  //页面传参的用户ID
	FormData:{
		username: null,  //用户名
		phone: null  //手机号
	},
	msg: null,  //警告对话框提示的信息
	}
}

 5.5  通过用户ID获取用户信息

 IAuthUserService

public AuthUser getinfo(int id);

AuthUserServiceImpl

public AuthUser getinfo(int id) {
        AuthUser parm = new AuthUser();
        parm.setId(id);
        List<AuthUser> list = authUserMapper.select(parm);
        return list != null ? list.get(0) : null;  //三元运算符
    }

AuthUserController

@GetMapping("/info") //resultfull写法
@ResponseBody
@CrossOrigin(origins = "*")
public HttpResult getinfo(int id){
   return new HttpResult(200,null,authUserService.getinfo(id),0);
}

requesrUserInfo(){
	uni.request({
	url: 'http://localhost:8070/user/info?id='+this.id,
		success: (res) => {
			console.log(res.data)
			this.FormData = res.data.data;
		}
	})
}

/* 当页面渲染成功之后触发*/
		onShow() {
			this.requesrUserInfo();
		},

5.6  修改成功页面

5.7  删除功能

// 删除
	dodelete(id){
		uni.request({
		url: 'http://localhost:8070/user/delete?id='+id,
		success: (res) => {
			if(res.data.code = 200){  //删除成功
			this.authuserList = res.data.data;
		}
	}
})
}

6.  用户添加

写法与修改类似，源代码如下：

<template>
	<view>
		<menuDraw></menuDraw>
		<view style="width: 350rpx; margin-top: 80rpx; margin-left: auto; margin-right: auto;">
			<!-- <view>相当于<div> -->
			<uni-forms :modelValue="FormData">
				<uni-forms-item label="手机号" name="phone">
					<uni-easyinput type="text" v-model="FormData.phone" placeholder="请输入手机号"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="用户名" name="username">
					<uni-easyinput type="text" v-model="FormData.username" placeholder="请输入用户名"></uni-easyinput>
				</uni-forms-item>
				<button type="primary" size="mini" @click="doSave">添加用户</button>
			</uni-forms>
		</view>
		<!--弹出层：弹出警告对话框 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="base" title="通知" :content="msg" :beforeClose="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import menuDraw from '../template/menu_draw.vue';
	export default {
		components: {
			menuDraw
		},
		data() {
			return {
				FormData:{
					username: null,  //用户名
					phone: null  //手机号
				},
				msg: null,
			}
		},
		methods: {
			/* 保存用户*/
			doSave(){
				// console.log("手机号："+this.FormData.phone);
				// console.log("用户名："+this.FormData.username)
				
				uni.request({
				    url: 'http://localhost:8070/user/add', //仅为示例，并非真实接口地址。
					method: "GET",
					data: {
						phone: this.FormData.phone,
						username: this.FormData.username,
						passwd: '123456'
					},
				    success: (res) => {
						if(res.data.code == 200){  //添加成功
							//console.log("添加成功，跳转到主页");
							//跳转之前保存用户信息
							uni.redirectTo({
								url: 'authuser',
							})
						}else{
							this.msg = res.data.msg;
							this.open(); //登录失败
						}
				    }
				});
			},
			/**
			 * 点击对话框关闭按钮执行的操作
			 */
			close(){
				this.$refs.popup.close();
			},
			/**
			 * 弹出警告对话框
			 */
			open() {
				this.$refs.popup.open();
			}
		}
	}
</script>

<style>

</style>

页面效果如下：