一、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>
页面效果如下: