一、我们通过使用uni-app组件进行操作
uni-app网页链接：uni-app官网
1.1、新建完成项目后安装插件
1.2、进入插件市场后选择scss/sass翻译这款插件
1.3、单击进入然后点击下载，会跳转到HTML进行自动下载
1.4、下载完成后所需要的插件就会生成到我们的项目中
二、HTML设计具体操作
2.1、搭建类的设计
template中是写HTML前端代码的区域
script中是写idea后端代码块儿的区域，所有js的功能都在里面
view是子标签，所有标签都写在view中，可以嵌套，但不可以写两个
三、页面效果设计
leftText="（内容）"-----------------------------左边按钮
rightText="（内容）"---------------------------右边按钮
效果展示代码
<!--写页面UI-->
<view>
<uni-nav-bar backgroundColor="#D3233B" color="#FFFFFF" title="睿智法务" leftText="返回" rightText="设置"></uni-nav-bar>
<view style="width: 350rpx; margin-left: auto; margin-right: auto;margin-top: 80rpx;">
<uni-forms :modelValue="userData">
<input v-model="userData.phone" singleline="true" type="number" placeholder="请输入手机号" class="input_str"/>
<input v-model="userData.pwd" singleline="true" type="password" placeholder="请输入密码" class="input_str"/>
</uni-forms>
<button @click="doLogin()" type="primary" size="mini">登录</button>
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog mode="base" title="通知" content="手机号或密码错误" :duration="2000" :before-close="true" @close="close" @confirm="close">
</uni-popup-dialog>
</uni-popup>
</view>
</view>3.1、我们有了登录界面后还需要连接我们的idea的程序来执行它
执行代码如下，解读一下代码块儿
data中是用来存放数据的地方，它也可以作为一个中转站来存放数据，以便调用
methods中是用来写实现的功能，每一个功能之间都要使用逗号隔开
<script>
//写一些Js的业务流程代码
export default{
//data里写数据
data(){
return{
userData:{
phone:'',
pwd:''
}
}
},
//methods里写功能
methods:{
//登录按钮点击事件
doLogin(){
// console.log("我被点击了");
// console.log(this.userData.phone);
// console.log(this.userData.pwd);
uni.request({
url: 'http://localhost:8070/user/login/'+this.userData.phone+'/'+this.userData.pwd, //仅为示例，并非真实接口地址。
success: (res) => {
console.log(res.data);
if(res.data.code!=200){
this.open();
}else{
uni.redirectTo({
url: "../main/main"
});
}
}
});
},
/*弹出模态对话框*/
open(){
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
this.$refs.popup.open()
},
/*关闭模态对话框*/
close() {
// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
// ...
this.$refs.popup.close()
}
}
}
</script>
这段代码是获取到我们要访问的网页连接，方便我们执行操作，参数需要和idea中所写的 数据相同
uni.request({
url: 'http://localhost:8070/user/login/'+this.userData.phone+'/'+this.userData.pwd, //仅为示例，并非真实接口地址。
success: (res) => {四、登录成功后进入一个新的页面
4.1、成功登录进来后点击左侧或者右侧的文字可以弹出操作框，如下图展示
源代码解读：
<uni-nav-bar>中是我们的标题栏的内容，其中@clickleft代表的是在最左侧的点击事件，@clickright代表的是标题栏最右边的点击事件，title则是表达居中显示。
<uni-daawer>是指弹出窗在哪边弹出，<uni-collapse-item>相当于一个大抽屉，而下面的<uni-list-item>则相当于一个个的小抽屉，能够下拉
<uni-collapse>表示可以折叠展开的区域
<uni-collapse-item>表是列表折叠面板子组件
ps:注意clickable事件它的参数设置为true，表示为列表点击事件，true表示可以点击触发事件
<template>
<view>
<!--标题栏-->
<uni-nav-bar @clickLeft="showDrawer" @clickRight="exitLogin" leftText="功能列表" rightText="退出系统" backgroundColor="#D3233B" color="#FFFFFF" title="睿智法务后台管理系统" ></uni-nav-bar>
<!--功能列表抽屉-->
<uni-drawer ref="showLeft" mode="left" :mask-click="true">
<scroll-view style="height: 100%;" scroll-y="true">
<uni-collapse ref="collapse" >
</uni-collapse-item>
<uni-collapse-item title="系统管理":showArrow="true" >
<uni-list>
<uni-list-item title="用户管理" showArrow="true" @click="jump(1)" :clickable="true">
</uni-list-item>
<uni-list-item title="角色管理" showArrow="true" @click="jump(2)" :clickable="true">
</uni-list-item>
<uni-list-item title="资源管理" showArrow="true" @click="jump(3)" :clickable="true">
</uni-list-item>
</uni-list>
</uni-collapse-item>
</uni-collapse>
</scroll-view>
</uni-drawer>
</view>
</template>
<script>
export default{
data(){
return{
}
},methods:{
//打开功能列表
showDrawer(){
//console.log("功能列表打开了");
this.$refs.showLeft.open();
},
//退出登录
exitLogin(){
//console.log("退出登录")
uni.redirectTo({
url: "../login/login"
});
},
//关闭功能列表
closeDrawer() {
this.$refs.showLeft.close();
},
//跳转
jump(flag){
if(flag==1){//用户管理
//console.log("跳转到用户管理")
uni.redirectTo({
url: "../user/user_list"
});
}else if(flag==2){//角色管理
console.log("跳转到角色管理")
}else if(flag==3){//资源管理
console.log("跳转到资源管理")
}
}
}
}
</script>
<style>
</style>
在methods中我们建立了四个按钮事件，分别是打开列表功能，退出登录功能，关闭列表功能以及跳转页面的功能，可以根据需求进行修改（仅供参考）
五、增加、修改、删除以及查询的方法
代码展示：
<template>
<view>
<menuDraw></menuDraw>
<uni-nav-bar title="用户管理" rightText="添加用户" @clickRight="saveUser"></uni-nav-bar>
<uni-group title="系统用户管理用户列表" top="10" mode="card">
<uni-table type="selection" :border="true">
<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="user in userList">
<uni-td>{{user.nickname}}</uni-td>
<uni-td>{{user.phone}}</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 style="margin-left:80rpx; margin-right: 100rpx;" @click="modify(user.id)" class="uni-button" size="mini" type="primary">修改</button>
<button style="margin-right:80rpx;" @click="remove(user.id)" class="uni-button" size="mini" type="warn">删除</button>
</uni-td>
</uni-tr>
</uni-table>
<uni-pagination @change="pageChanged" :current="pageIndex" :pageSize="pageSize" :total="pageTotle"/>
</uni-group>
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog mode="base" title="通知" :content="msg" :duration="2000" :before-close="true" @close="close" @confirm="close">
</uni-popup-dialog>
</uni-popup>
</view>
</template>
<script>
import menuDraw from '../template/menu_draw.vue'
export default{
//主键
components:{
menuDraw
},
data(){
return{
msg:null,//提示文字
userList:[],
pageIndex:1,//分页器页码
pageSize:10,//分页器每页显示数据的条数
pageTotle:0//分页器数据总条数
}
},
//当页面显示时触发
onShow(){
this.requsetUserList();
},
methods:{
//请求用户列表
requsetUserList(){
uni.request({
url: 'http://localhost:8070/user/list/'+this.pageIndex+'/'+this.pageSize, //仅为示例，并非真实接口地址。
success: (res) => {
console.log(res.data);
this.userList=res.data.data;
this.pageTotle=res.data.rows;
}
});
},
//点击分页器的监听函数
pageChanged(e){
console.log(e.current);
this.pageIndex=e.current;
this.requsetUserList();
},
//删除的方法
remove(id){
uni.request({
url: 'http://localhost:8070/user/remove/'+id, //仅为示例，并非真实接口地址。
success: (res) => {
console.log(res.data);
if(res.data.code!=200){//删除失败
this.msg=res.data.msg;
this.open();
}else{//删除成功
uni.redirectTo({
url: "user_list"
});
}
}
});
},
//修改的方法
modify(id){
uni.navigateTo({
url:'user_update?id='+id
});
},
//添加用户
saveUser(){
//console.log("添加用户")
uni.redirectTo({
url: "../user/user_add"
});
},
open(){
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
this.$refs.popup.open()
},
/*关闭模态对话框*/
close() {
// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
// ...
this.$refs.popup.close()
}
}
}
</script>
<style>
</style>
新增效果展示:
ps: 通过使用import引入方法其他类的数据
import menuDraw from '../template/menu_draw.vue'
export default{
//主键
components:{
menuDraw
},5.1、新增方法
页面UI:
<uni-nav-bar title="用户管理" rightText="添加用户" @clickRight="saveUser"></uni-nav-bar>JS功能代码：
doSave(){
//console.log("保存")
// console.log(this.nickname)
// console.log(this.phone)
uni.request({
url: 'http://localhost:8070/user/regedit/'+this.phone+'/123456/'+this.nickname, //仅为示例，并非真实接口地址。
success: (res) => {
console.log(res.data);
if(res.data.code!=200){//添加失败
this.msg=res.data.msg;
this.open();
}else{//添加成功
uni.redirectTo({
url: "user_list"
});
}
}
});
}通过使用uni.request来请求网页路径，url所对应的就是idea中所写的网页路径，后面的参数是读取data（）中的数据来进行操作，通过if判断是否成功添加
5.2、修改功能
页面UI:
<template>
<view>
<menuDraw></menuDraw>
<uni-nav-bar @clickLeft="daBack" @clickRight="doSave" leftText="返回" rightText="保存" title="修改用户"></uni-nav-bar>
<uni-group title="用户管理:修改用户" mode="card" top="10rpx">
<view style="width: 350rpx; margin-left: auto; margin-right: auto;">
<input v-model="nickname" singlelin="true" placeholder="请输入姓名" type="text" style="border: 1px solid #000000; height: 30rpx; line-height: 30rpx; padding: 10rpx; border-radius: 5rpx; margin-bottom: 15rpx;" />
<input v-model="phone" singlelin="true" placeholder="请输入手机号" type="number" style="border: 1px solid #000000; height: 30rpx; line-height: 30rpx; padding: 10rpx; border-radius: 5rpx; margin-bottom: 15rpx;"/>
</view>
</uni-group>
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog mode="base" title="通知" :content="msg" :duration="2000" :before-close="true" @close="close" @confirm="close">
</uni-popup-dialog>
</uni-popup>
</view>
</template>js页面:
doSave(){
//console.log("保存")
// console.log(this.nickname)
// console.log(this.phone)
uni.request({
url: 'http://localhost:8070/user/modify/'+this.uid+'/'+this.phone+'/'+this.pwd+'/'+this.nickname, //仅为示例，并非真实接口地址。
success: (res) => {
console.log(res.data);
if(res.data.code!=200){//X修改失败
this.msg=res.data.msg;
this.open();
}else{//修改成功
uni.redirectTo({
url: "user_list"
});
}
}
});
}5.3、删除的功能
页面UI:
<button style="margin-right:80rpx;" @click="remove(user.id)" class="uni-button" size="mini" type="warn">删除</button>
js页面：
remove(id){
uni.request({
url: 'http://localhost:8070/user/remove/'+id, //仅为示例，并非真实接口地址。
success: (res) => {
console.log(res.data);
if(res.data.code!=200){//删除失败
this.msg=res.data.msg;
this.open();
}else{//删除成功
uni.redirectTo({
url: "user_list"
});
}
}
});
},5.4、open以及close的使用（通过open以及close来实现弹出对话框以及关闭）
open(){
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
this.$refs.popup.open()
},
/*关闭模态对话框*/
close() {
// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
// ...
this.$refs.popup.close()
}六、因为我们在HTML中在网页对数据进行操作，会将中文转换为符号，所以我们需要在ideaction.yml中加入这段代码
&characterEncoding=utf-8&useSSL=false
ps:当我们要在Mapper中解析一个字符串参数，我们需要这样操作
根据手机号进行模糊查询
<select id="selectByPhone" parameterType="String" resultMap="BaseResultMap">
SELECT * FROM auth_user WHERE phone LIKE '%' #{phone} '%'
</select>
扫一扫
248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
