主页与用户管理

weixin_43985399

已于 2022-05-19 19:29:26 修改

阅读量161

点赞数

分类专栏： springboot 文章标签： sass 前端 html vue

于 2022-05-18 20:13:02 首次发布

本文链接：https://blog.csdn.net/weixin_43985399/article/details/124849568

版权

springboot 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、集成通用mapper时使用updateByPrimaryKey不生效

解决：在实体类主键上加@Id注解即可

二、前端页面（查询API：uni-app官网）

查询：常见功能在内置组件，高级功能在扩展组件

注册页面导入表单组件，弹出层（提示用户手机号已被注册）

<template>
	<view >
		<uni-nav-bar backgroundColor="#d3233b" color="#ffffff"
		title="睿智法务注册界面"></uni-nav-bar>
		<view style="width: 350rpx; margin-left: auto;
				margin-right: auto; margin-top: 80rpx;">
			<uni-forms :modelValue="userData" label-position="top">
				<uni-forms-item label="手机号" name="phone">
					<uni-easyinput type="number" placeholder="请输入手机号" v-model="userData.phone"/><!--v-model="formData.name" -->
				</uni-forms-item>
				<uni-forms-item label="密码" name="pwd">
					<uni-easyinput type="password" placeholder="请输入密码" v-model="userData.pwd"/><!--v-model="formData.name" -->
				</uni-forms-item>
				<uni-forms-item label="昵称" name="nickName">
					<uni-easyinput type="text" placeholder="请输入昵称" v-model="userData.nickName"/><!--v-model="formData.name" -->
				</uni-forms-item>
			</uni-forms>
			<uni-file-picker  ref="files" :auto-upload="false" v-model="userData.sculpture" />
			<button @click="upload" style="margin-bottom: 30%;">上传头像</button>
			<button @click="submitForm">提交</button>
			
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-message  title="提示" content="该手机号已被注册"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
	
</template>

<script>
	export default{
		data(){
			//数据
			return{
				userData:{
					phone:'',
					pwd:'',
					nickName:'',
					sculpture:''
				}
			}
		},
		methods:{
			submitForm(){
				uni.request({
				    url: 'http://localhost:8070/auth/user/regedit/'+this.userData.phone + '/' + this.userData.pwd + '/' + this.userData.nickName, //仅为示例，并非真实接口地址。
				    success: (res) => {
				        if(res.data.code == 200){
							this.dorun()
						}else{
							this.$refs.alertDialog.open()
							this.dorun()
						}
				    }
				});
			},
			dorun(){
				uni.redirectTo({
					url:'../login/login'
				})
			},
			upload(){
				this.$refs.files.upload()
			}
		}
	}
</script>

<style>
	
</style>

主界面自定义组件，导入主界面

<template>
	<view>
		<menuDraw></menuDraw>
	</view>
</template>

<script>
	import menuDraw from '../template/menu_draw.vue'
	export default{
		components:{
			menuDraw
		},
		data(){
			return{
				
			}
		},
		methods:{
			
		}
	}
</script>

<style>
</style>

自定义组件添加抽屉组件，折叠面板，列表组件

<template>
	<view>
		<uni-nav-bar left-text="功能列表" right-text="退出系统"
		backgroundColor="#d3233b" color="#ffffff"
		title="睿智法务后台管理系统"
		@clickRight="exitLogin" @clickLeft="showDrawer"></uni-nav-bar>
		<!-- 功能列表-->
		<uni-drawer ref="showLeft">
			<scroll-view style="height: 100%;" scroll-y="true">
				<uni-collapse ref="collapse">
					<uni-collapse-item title="系统管理">
						<uni-list>
							<uni-list-item @click="jump(1)" :showArrow="true"
							 title="用户管理" :clickable="true"></uni-list-item>
							<uni-list-item @click="jump(2)" :showArrow="true"
							 title="角色管理" :clickable="true"></uni-list-item>
							<uni-list-item @click="jump(3)" :showArrow="true"
							 title="资源管理" :clickable="true"></uni-list-item>
						</uni-list>
					</uni-collapse-item>
				</uni-collapse>	
			</scroll-view>
		</uni-drawer>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			//退出登录
			exitLogin(){
				uni.redirectTo({
					url:'../login/login'
				})
			},
			//显示功能列表
			showDrawer(){
				this.$refs.showLeft.open()
			},
			jump(flag){
				if(flag == 1){
					uni.redirectTo({
						url:'../user/user'
					})
				}else if(flag == 2){
					uni.redirectTo({
						url:'../role/role'
					})
				}else if(flag == 3){
					uni.redirectTo({
						url:'../res/res'
					})
				}
			}
		}
	}
</script>

<style>
</style>

用户管理系统导入搜索栏，表格组件，分组组件，分页器，

<template>
	<view>
		<menuDraw></menuDraw>
		<uni-group>
			<uni-search-bar @input="input" @blur="blur" :radius="100"
			style="margin-bottom: 15rpx;" bgColor="Pink" ></uni-search-bar>
			<uni-group title="系统用户管理:用户列表" top="10" mode="card">
				<uni-table  :border="true" type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
					<uni-tr>
						<uni-th width="15%" align="center" >id</uni-th>
						<uni-th width="30%" align="center" >账号</uni-th>
						<uni-th width="30%" align="center" >昵称</uni-th>
						<uni-th width="15%" align="center" >状态</uni-th>
						<uni-th width="10%" align="center">操作</uni-th>
					</uni-tr>
					<uni-tr v-for="user in userList">
						<uni-td>{{user.id}}</uni-td>
						<uni-td>{{user.phone}}</uni-td>
						<uni-td>{{user.nickname}}</uni-td>
						<uni-td align="center">
							<text v-if="user.isactive == 1">已激活</text>
							<text style="color: red;" v-if="user.isactive == 2">未激活</text>
						</uni-td>
						<uni-td align="center">
							<button class="uni-button" size="mini" @click="update(user)" type="primary">修改</button>
							<button class="uni-button" size="mini" @click="delect(user)" type="warn">删除</button>
						</uni-td>
					</uni-tr>
				</uni-table>
			</uni-group>
			<uni-pagination :total="total" :page-size="pageSize" :current="pageIndex"
			 @change="change"/>
		</uni-group>
		<uni-popup ref="popup1" type="message">
			<uni-popup-message message="删除失败" type="warning"></uni-popup-message> 
		</uni-popup>
		<uni-popup ref="popup2" type="message">
			<uni-popup-message message="修改失败" type="warning"></uni-popup-message> 
		</uni-popup>
		<uni-popup ref="popup3" backgroundColor="#ffffff" type="dialog" width='50%'>
			<uni-forms :modelValue="userData" label-position="top">
				<uni-forms-item label="手机号" name="phone">
					<uni-easyinput type="number" placeholder="请输入手机号" v-model="userData.phone"/><!--v-model="formData.name" -->
				</uni-forms-item>
				<uni-forms-item label="密码" name="passwd">
					<uni-easyinput type="password" placeholder="请输入密码" v-model="userData.passwd"/><!--v-model="formData.name" -->
				</uni-forms-item>
				<uni-forms-item label="昵称" name="nickname">
					<uni-easyinput type="text" placeholder="请输入昵称" v-model="userData.nickname"/><!--v-model="formData.name" -->
				</uni-forms-item>
				<uni-forms-item label="状态" name="isactive">
					<uni-easyinput type="text" placeholder="请输入状态代码(1为已激活,2为未激活)" v-model="userData.isactive"/><!--v-model="formData.name" -->
				</uni-forms-item>
			
			<uni-file-picker  ref="files" :auto-upload="false" v-model="userData.sculpture" />
			<button @click="upload" style="margin-bottom: 30%;" type="primary">上传头像</button>
			<button @click="submitForm(userData)" style="margin-bottom: 30%;" type="primary">提交</button>
			</uni-forms>
		</uni-popup>
	</view>
</template>

<script>
	import menuDraw from '../template/menu_draw.vue'
	export default{
		components:{
			menuDraw
		},
		data(){
			return{
				userList: [],
					// 每页数据量
				pageSize: 10,
					// 当前页
				pageIndex: 1,
				total: '',
				userData:''
			}
		},
		onLoad() {
			this.getUserList()
		},
		methods:{
			input(res) {
			},
			blur(res) {
				uni.request({
					url:'http://localhost:8070/auth/user/getUser/'+res.value,
					success: (res) => {
						this.userList = res.data.data
						this.total = res.data.rows
					}
				})
			},
			update(user){
				this.userData = user,
				this.$refs.popup3.open()
				
			},
			submitForm(user){
				uni.request({
					url:'http://localhost:8070/auth/user/modity/'+ user.id +'/'+user.phone +'/'+user.passwd+'/'+ user.nickname,
					success: (res) => {
						this.$refs.popup3.close()
						if(res.data.code == 200){
								this.getUserList()
							}else{
								this.$refs.popup2.open()
							}
						
					}
				})
			},
			delect(user){
				uni.request({
					url:'http://localhost:8070/auth/user/remove/'+ user.id,
					success: (res) => {
						if(res.data.code == 200){
							this.getUserList()
						}else{
							this.$refs.popup1.open()
						}
					}
				})
			},
			// 分页触发
			change(e) {
				this.pageIndex=e.current
				this.getUserList()
			},
			// 获取数据
			getUserList() {
				uni.request({
					url:'http://localhost:8070/auth/user/list/'+this.pageIndex + '/' + this.pageSize,
					success: (res) =>{
						this.userList = res.data.data
						this.total = res.data.rows
						
					}
				})
			},
		}
	}
</script>

<style>
	.uni-button{
		margin-right: 30rpx;
		margin-left: 30rpx;
	}
</style>