首先
创造标题导栏
rigthText="" //为右侧事件 title="" 为标题 @clickRigth 为右侧事件的点击事件通过@clickRigth里的 saveUser 在下方写出监听代码
saveUser(){
//console.log("添加用户");可在网页F12调试点击事件
uni.redirectTo({
url: '../user/user_add'
});
},
页面显示效果
这段 通点击 进入 url:' ../user/user_add '的页面也就是我们的添加用户的页面
创造添加用户页面
也是先声明组件
如图其中页面弹窗代码需好好看看 都是对样式的调整需要记住
<input v-model="nickname" singleline="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" singlelinr="true" placeholder="请输入手机号" type="text" style="border: 1px solid #000000;height: 30rpx;line-height: 30rpx;padding: 10rpx;border-radius: 5rpx;margin-bottom: 15rpx;"/>效果
会让更加美观
之后在 pages文件中写入地址
{
"path":"pages/user/user_add"
}template 文件写完写入script文件
<script>
import menuDraw from '../template/menu_draw.vue';
export default{
components:{
menuDraw
},
onLoad(options) {
var id = options.id;//获取请求传参
this.uid=id;
this.requestUserInfo(id);
},
data(){
return{
uid:null,
pwd:null,
msg:null,//提示的文字
nickname:null,//昵称
phone:null//手机号
}
},
methods:{
//返回
daBack(){
uni.navigateTo({
url:'user_list'
})
},
//保存用户
daSave(){
//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){//添加成功
this.msg = res.data.msg;
this.open();
} else{
uni.redirectTo({
url: 'user_list'
});
};
}
});
},
open() {
this.$refs.popup.open();
},
/**
* 点击取消按钮触发
* @param {Object} done
*/
close() {
// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
// ...popup为抓手可以和他后面的绑定
this.$refs.popup.close();
},
//请求用户信息
requestUserInfo(id){
uni.request({
url: 'http://localhost:8070/user/info/'+id, //仅为示例，并非真实接口地址。
success: (res) => {
console.log(res.data);
this.nickname=res.data.data.nickname;
this.phone=res.data.data.phone;
this.pwd=res.data.data.passwd;
}
});
}
}
}
</script>
上方代码重点也进行了标注
其他重点
options 获取页面值进行封装保存
return{ }里作为中转站存放变量以便在methods{}中的触发时进行传递
添加用户也基本结束
继续删除
删除功能最重要的就是如何获取要删除的ID 这是这个功能的难度
首先写出删除功能的点击按钮
<button style="margin-right:80rpx;" @click="remove(user.id)" class="uni-button" size="mini" type="warn">删除</button>进入监听事件
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'
});
};
}
});
},ID 如何获取 答案：因为删除功能是在分页器上的一个功能 分页器是有用户的集合的我们只需要直接获取用户集合里 我们所需的ID再调用删除方法后再次跳转到用户展示页面就可以完成删除操作
多了个 msg 这个是我们所自创造的 变量 是一个提示
删除功能也结束继续
修改
修改所需要的就比较多了 首先他要通过点击事件进入一个全新的页面再通过之前页面获取用户ID调用程序的查找方法 获取用户所有信息再返回修改页面所要展示的用户的未改的信息
用户修改后 通过双向绑定 成功修改用户
首先
<button style="margin-left:80rpx;margin-right: 10rpx;" @click="modify(user.id)" class="uni-button" size="mini" type="primary">修改</button>创造修改的点击按钮
点击进入
我们点哪个就获取哪个信息同时进入修改页面
其实与添加没有太大区别 进行改动一下就好了
<template>
<view>
<menuDraw>
</menuDraw>
<uni-nav-bar @clickLeft="daBack" @clickRight="daSave" leftText="< 返回" rightText="保存" title="修改用户"></uni-nav-bar>
<uni-group title="用户管理:修改用户" model="card" top="10">
<view style="width: 350rpx; margin-left: auto;margin-right: auto;">
<input v-model="nickname" singleline="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" singlelinr="true" placeholder="请输入手机号" type="text" 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>
<script>
import menuDraw from '../template/menu_draw.vue';
export default{
components:{
menuDraw
},
onLoad(options) {
var id = options.id;//获取请求传参
this.uid=id;
this.requestUserInfo(id);
},
data(){
return{
uid:null,
pwd:null,
msg:null,//提示的文字
nickname:null,//昵称
phone:null//手机号
}
},
methods:{
//返回
daBack(){
uni.navigateTo({
url:'user_list'
})
},
//保存用户
daSave(){
//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){//添加成功
this.msg = res.data.msg;
this.open();
} else{
uni.redirectTo({
url: 'user_list'
});
};
}
});
},
open() {
this.$refs.popup.open();
},
/**
* 点击取消按钮触发
* @param {Object} done
*/
close() {
// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
// ...popup为抓手可以和他后面的绑定
this.$refs.popup.close();
},
//请求用户信息
requestUserInfo(id){
uni.request({
url: 'http://localhost:8070/user/info/'+id, //仅为示例，并非真实接口地址。
success: (res) => {
console.log(res.data);
this.nickname=res.data.data.nickname;
this.phone=res.data.data.phone;
this.pwd=res.data.data.passwd;
}
});
}
}
}
</script>
<style>
</style>这是全部的代码我们可以很清晰的看到这个页面所有的东西其中重点
我以图片形式展示
分为了1 2 3步
获取到了ID 1获取了页面的值2保存中转 3使用
结构非常清晰
最终展示结果也在上面的图片放出
到这里今天也结束
但是我们在去idea里去看看我们的方法会有些收获
其中的接口 实现代码就不放出了重点看数据库如何操作
<select id="selectByPhone" parameterType="String" resultMap="BaseResultMap">
select * from auth_user where phone like '%' #{phone} '%'
</select>很简单这是一个数据库的模糊查通过什么 就是通过
like
和
'%' #{phone} '%'
这个也就表示了 我们的条件phone是我们输入的东西 也是我们要让程序要用这个去模糊查找
需要好好记住
*********************************
&characterEncoding=utf-8&useSSL=false
这串代码的含义
表示强制转换为UTF-8 格式并且不适应useSSL这个相对安全的
是加在yml文件中的
好了 结束再见
谢谢观看！！！
419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
