wechat微信小程序panda我的界面(登录、我的基本信息的修改和保存)

已于 2022-06-30 09:54:51 修改
阅读量2.3k 收藏 75
点赞数 6
分类专栏： uniapp 文章标签： 微信 微信小程序 前端
于 2022-06-30 09:53:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61504367/article/details/125534376
版权

运行截图

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

登录

登录功能是通过向后端发起POST数据请求，将表单username和password提交到服务器端，在服务器端对账号密码进行验证，如果无误，创建一个token(有效时长为1小时)，在响应数据的时候将其携带返回。将token存入缓存中，以便后续使用。

当用户发送http网络请求的时候，会把token放在请求头Header里面，系统会判断token是否正确，以便判断用户是否合法
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

wxml

<view class="content">
  <!-- <view class="hr"></view> -->
  <image src="../../images/icon/pandaHomeLogo.gif" mode="widthFix" style="width:100%;"></image>
  <form bindsubmit="loginSubmit" bindreset="formReset">
    <view class="bg">
       <view class="item">
          <view class="name">账户</view>
          <view class="value">
            <input type="text" placeholder="手机号/会员名/邮箱" placeholder-class="holder" name="name"/>
          </view>
       </view>
       <view class="line"></view>
       <view class="item">
          <view class="name">密码</view>
          <view class="value">
            <input type="text" password placeholder="请输入密码" placeholder-class="holder" name="password"/>
          </view>
       </view>
    </view>
    <view class="btntwo">
    <button class="btn" form-type="submit" size="default" type="primary">登录</button>
    <button class="rightbtn"  size="default" bindtap="reMePage" type="default">返回</button>
  </view>
  </form>
</view>

wxss

.content{
  font-family: "Microsoft YaHei";
  background-color: #F5F5F5;
  height: 600px;
}
.hr{
  height: 100px;
}
.bg{
  width:100%;
  height: 100px;
  background-color: #ffffff;
}
.item{
  display: flex;
  flex-direction: row;
  height: 50px;
  line-height: 50px;
  align-items: center;
}
.name{
  width:20%;
  margin-left: 10px;
  font-size: 16px;
  font-weight: bold;
}
.value{
  width:80%;
  line-height: 60px;
  margin-left: 10px;
  font-size: 16px;
}
.holder{
  color:#AEAEAE;
  font-size: 16px;
}
.line{
  border:1px solid #cccccc;
  opacity: 0.2;
}

.btntwo{
  display: flex;
}
.btn{
  margin-top:20px;
  margin-left:12%;
  background-color: #FE4E62;
  width: 35%;
  color: #ffffff;
}

.rightbtn{
  margin-right:12%;
  margin-top:20px;
  background-color: #e7b2bf;
  width: 35%;
  color: #7e0707;
}

js

Page({
  data: {
    name: "",
    password: ""
  },

  // 简单从缓存中比对（未调用）
  formSubmit: function (e) {
    var user = e.detail.value;
    var name = user.name;
    var password = user.password;
    var users = wx.getStorageSync("users");
    //  console.log(users)
    //  console.log(name)
    for (var i = 0; i < users.length; i++) {
      if (name == users[i].name && password == users[i].password) {
        wx.setStorageSync("user", user);
        wx.showToast({
          title: '登录成功',
          icon: 'success',
          duration: 1000
        });
        wx.navigateBack({
          delta: 1
        })
        break;
      } else {
        wx.showToast({
          title: '登录失败',
          icon: 'error',
          duration: 1000
        });
      }
    }
  },
// 登录提交表单
  loginSubmit(e) {
    var user = e.detail.value;
    var name = user.name;
    var password = user.password;

    // console.log(name)
    // console.log(password)

    var page = this;
    wx.request({
      // 请求的url
      // http://127.0.0.1:8181/sysUser/login
      // Request Method: POST
      url: 'http://127.0.0.1:8181/sysUser/login',
      data:{"userName":""+name,"password":""+password},
      // 调试用
      // data: {
      //   "userName": "admin",
      //   "password": "123456"
      // },
      method: 'POST',
      header: {
        "Content-Type": "application/json"
      },

      success: function (res) {

        // console.log(res.data.code)
        // res.data.code后端的响应码
        if (res.data.code == 200) {
          wx.showToast({
            title: '登录成功',
            icon: 'success',
            duration: 1000
          });
          // wx.navigateBack({
          //   delta: 1
          // })
        }
        else {
          wx.showToast({
            title: '登录失败',
            icon: 'error',
            duration: 1000
          });
        }

        var userMes = res.data.data
        var sysUser = userMes.sysUser
        var token = userMes.token
        console.log(token)
        console.log(sysUser)
        // 存sysUserInfo
        wx.setStorage({
          key: "sysUser",
          data: sysUser
        })
        // 存token
        wx.setStorage({
          key: "token",
          data: token
        })
        //  wx.navigateBack({
        //     delta: 1
        //   })
        
        
      }
    })
  },
  
  // 返回上一级
  reMePage(){
       wx.navigateBack({
            delta: 1
          })
    }
})

我的基本信息的修改和保存

在加载个人资料界面，进行判断用户是否登录，如果token为空，则表示没有登录；反之，则登录。在登录的时候会把用户的个人信息存入缓存。

在加载个人资料页面，首先从缓存中读取sysUser的数据并回显。

如果用户有更新个人基本信息的需求，便直接修改原来的用户信息，点击保存，把修改的用户信息覆盖原来的sysUser，再发送http请求对后台数据库更新。
在这里插入图片描述
在这里插入图片描述

wxml




<form bindsubmit="saveUserInfo" >
         
         
   <!-- 头像 -->
   <view class="form-item">
    <view class="form-item-hd">头像</view>
    <view class="">
      <image src="http://127.0.0.1:8181/{{userPicture}}" mode="widthFix" bindtap="changeAvatar" style="width: 50px;"></image>
    </view>
   </view>
        <view class="form-item">
            <view class="form-item-hd">用户名</view>
            <view class="form-item-bd">
                <input type="text" name="name" value="{{name}}" placeholder="请输入用户名" maxlength="10"/>
            </view>
        </view>

        <view class="form-item">
            <view class="form-item-hd">邮箱</view>
            <view class="form-item-bd">
                <input type="text" name="email" value="{{email}}" placeholder="请输入邮箱" maxlength="25"/>
            </view>
        </view>
        <view class="form-item">
            <view class="form-item-hd">手机号码</view>
            <view class="form-item-bd">
                <input type="number" name="tel" value="{{tel}}" placeholder="请输入手机号码" maxlength="11"/>
            </view>
        </view>

        <view class="form-item">
        <view class="form-item-hd">性别</view>
            <view class="form-item-bd">
                <picker mode="selector" value="{{genderIndex}}" range="{{genderArray}}" bindchange="changeGender">
                    <block wx:if="{{gender == ''}}">
                        <view class="input input-placeholder">请选择性别</view>
                        <input type="text" name="gender" value="" class="hidden" maxlength="1"/>
                    </block>
                    <block wx:else>
                        <view class="input">{{genderArray[genderIndex]}}</view>
                        <input type="text" name="gender" value="{{genderArray[genderIndex]}}" class="hidden" maxlength="1"/>
                    </block>
                </picker>
            </view>
        </view>
        <view class="form-item">
            <view class="form-item-hd">生日</view>
            <view class="form-item-bd">
                <picker mode="date" value="{{birthday}}" start="1900-01-01" end="{{birthdayEndDate}}" bindchange="changeBirthday">
                    <block wx:if="{{birthday == ''}}">
                        <view class="input input-placeholder">请选择生日</view>
                        <input type="text" name="birthday" value="" class="hidden" maxlength="10"/>
                    </block>
                    <block wx:else>
                        <view class="input">{{birthday}}</view>
                        <input type="text" name="birthday" value="{{birthday}}" class="hidden" maxlength="10"/>
                    </block>
                </picker>
                
            </view>
        </view>
    
    <view class="form-list">
        <view class="form-item">
            <view class="form-item-hd">个性签名</view>
            <view class="form-item-bd">
                <input type="text" name="intro" value="{{intro}}" placeholder="请输入个性签名" maxlength="25"/>
            </view>
        </view>
    </view>
    <!-- <button formType="submit" class="edit-btn"  >保 存</button>
    <button  class="edit-btn">返 回</button> -->

    <view class="btntwo">
    <button class="btn" form-type="submit" size="default" type="primary">保存</button>
    <button class="rightbtn"  size="default" bindtap="reMePage" type="default">返回</button>
  </view>
</form>

wxss

/* pages/modifyUserInfo/modifyUserInfo.wxss */
.form-list {
  position: relative;
  margin-bottom: 20rpx;
}

.form-list:first-child {
  margin-top: 20rpx;
}

.form-list::before, .form-list::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  height: 1px;
  width: 100%;
  transform: scaleY(.5);
  background-color: #e3e3e3;
}

.form-list::before {
  top: 0;
}

.form-list::after {
  bottom: 0;
}

.form-item {
  position: relative;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  padding: 15rpx 40rpx;
}

.form-item::before {
  content: '';
  display: block;
  position: absolute;
  z-index: 99;
  left: 0;
  top: 0;
  height: 1px;
  width: 100%;
  transform: scaleY(.5);
  background-color: #e3e3e3;
}

.form-item:first-child::before {
  display: none;
}

.form-item-hd {
  width: 150rpx;
  height: 60rpx;
  line-height: 60rpx;
}

.form-item-bd {
  flex: 1;
  height: 60rpx;
}

input, .input {
  box-sizing: border-box;
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  background-color: #fff;
  padding: 0 15rpx;
}

.input-placeholder {
  color: #808080;
}

.edit-btn {
  width: 300rpx;
  height: 80rpx;
  margin: 0 auto;
  font-size: 32rpx;
  text-align: center;
  line-height: 80rpx;
  background-color: #47a86c;
  border-radius: 80rpx;
  color: #fff;
}

.hidden {
  display: none;
}


.btntwo{
  display: flex;
}
.btn{
  margin-top:20px;
  margin-left:12%;
  background-color: #FE4E62;
  width: 35%;
  color: #ffffff;
}

.rightbtn{
  margin-right:12%;
  margin-top:20px;
  background-color: #e7b2bf;
  width: 35%;
  color: #7e0707;
}

js

Page({
  data:{
    name: '',
    genderArray: ['男', '女'],
    gender: 0,
    genderIndex: 0,
    age: 18,
    email:'',
    tel: '',
    birthday: '',
    intro: '',
    // imgUrl:'/images/user/2022/06/20/0831f209fe5e4aebb758404d7b3f41de.jpg',
    userPicture:'/images/user/2022/06/20/0831f209fe5e4aebb758404d7b3f41de.jpg'
  },

  onLoad:function(options){

    // 首先判断一下是否登录
    // 如果没有登录(判断token)
    var token = wx.getStorageSync("token");
    if(token.length == 0){
      // 未登录，跳转界面
      wx.navigateTo({
        url: '../login/login'
      })
      // console.log("1111111111111null")
    }else{
      // 已登录，加载User信息
      var sysUser = wx.getStorageSync("sysUser");
      if(sysUser){
        this.setData({name:sysUser.userName});
        this.setData({email:sysUser.email});
        this.setData({tel:sysUser.phoneNumber});
        this.setData({gender:sysUser.sex});
        this.setData({birthday:sysUser.birthday});
        this.setData({intro:sysUser.autograph});
        // JSON.parse(subject.moviePoster)[0]
        this.setData({userPicture:JSON.parse(sysUser.userPicture)[0]});
      //  this.setData({imgUrl:sysUser.userPicture})
      }
      // console.log(2222222222)
      // console.log(token.length)
    }

  
  },
  changeGender: function(e) {
    console.log(e)
    var genderIndex = e.detail.value
    if (genderIndex != "null") {
      this.setData({
        genderIndex: genderIndex,
        gender: this.data.genderArray[this.data.genderIndex]
      })
    }
  },
  changeBirthday: function(e) {
    var birthday = e.detail.value
    if (birthday != "null") {
      this.setData(
        {birthday: birthday}
      )
    }
  },


  saveUserInfo(e) {
    // console.log(11);
    
    var page = this;
    var token = wx.getStorageSync("token");
    var sysUser = wx.getStorageSync("sysUser");

    // userTemp表单里面的数据
    var userTemp = e.detail.value;
    console.log(e);
    console.log(userTemp);
    sysUser.userName = userTemp.name;
    sysUser.email = userTemp.email;
    sysUser.phoneNumber = userTemp.tel;
    sysUser.birthday = userTemp.birthday;
    sysUser.autograph = userTemp.intro;
    // 赋值性别
    if (userTemp.gender == '男') {
      sysUser.sex = true;
      // console.log("man");
      // console.log(userTemp.gender);
    } else {
      sysUser.sex = false;
      // console.log("woman");
      // console.log(userTemp.gender);
    }
    
    // 覆盖原来的sysUser
    wx.setStorageSync("sysUser",sysUser);   
   console.log(sysUser);

    wx.request({
      // 请求的url
     // http://127.0.0.1:8181/sysUser  PUT
      url: 'http://127.0.0.1:8181/sysUser',
      data:{"userId":sysUser.userId,
      "userName":sysUser.userName,
      "password":sysUser.password,
      "salt":sysUser.salt,
      "email":sysUser.email,
      "phoneNumber":sysUser.phoneNumber,
      "sex":sysUser.sex,
      "userPicture":sysUser.userPicture,
      "roleId":sysUser.roleId,
      "birthday":sysUser.birthday,
      "autograph":sysUser.autograph,
      "sysRole":sysUser.sysRole},
      method: 'PUT',
      header: {
        "Content-Type": "application/json",
        "token":token
      },
      success: function (res) {
        console.log(res)
        console.log(res.data.code)
        // res.data.code后端的响应码
        if (res.data.code == 200) {
          wx.showToast({
            title: '保存成功',
            icon: 'success',
            duration: 1000
          });
          // wx.navigateBack({
          //   delta: 1
          // })
        }
        else {
          wx.showToast({
            title: '保存失败',
            icon: 'error',
            duration: 1000
          });
        }

      }
    })
  },

  // 上传图片
  changeAvatar: function() {
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: res => {
        // tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        this.setData({
          imgUrl: tempFilePaths
        })
        console.log(tempFilePaths)
      }
    })
  },
  reMePage(){
    wx.navigateBack({
         delta: 1
       })
  },
  

 /**
   * 下拉刷新
   */
  onPullDownRefresh() {
    // 下拉刷新
    var self = this;
    setTimeout(function () {
      wx.hideLoading()
    }, 500)
    wx.showLoading({
      title: '加载中...',
    })
    
    self.onLoad();
    wx.stopPullDownRefresh();
    
  }

})

json

{
  "usingComponents": {},
    "navigationBarTitleText": "编辑个人资料",
    "enablePullDownRefresh": true
}
汪程序猿
关注
  • 6
    点赞
  • 踩
  • 75
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
微信小程序 我厨 tab 界面设计 (源码)
05-31
微信小程序 我厨 tab 界面设计 (源码)微信小程序 我厨 tab 界面设计 (源码)微信小程序 我厨 tab 界面设计 (源码)微信小程序 我厨 tab 界面设计 (源码)微信小程序 我厨 tab 界面设计 (源码)微信小程序 我厨 tab 界面...
微信小程序个人中心、我的界面（示例四）
最新发布
weixin_45465881的博客
04-30 1938
微信小程序个人中心、我的界面，超简洁的九宫格界面布局，代码粘贴即用。更多微信小程序界面示例，请进入我的主页哦！更多微信小程序示例的分享，请进入我的主页查看哦。
微信小程序云开发——实现 线上注册，登录的逻辑，并保存账号到云数据库（ 三 ）：登录
@Grapefruit的博客
04-02 5512
要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮) 继上一章节柚子完成了注册的逻辑代码，这一章节讲解登录逻辑代码： 下面是柚子写的登录页面，仅供参考： wxml: <view class="container"> <image src="https://7069-pintu-game-52d2a...
微信小程序的动态修改视图层的数据 —— 微信小程序教程系列（3）
michael的博客
02-08 3万+
我们在正常的开发上，一般都比较少把视图层上面的数据写成固定形式的，很多都是通过动态获取数据时并更新页面上的数据显示出来 下面让我们来一些学习，如何动态修改视图层的数据 需求：创建一个按钮，点击这个按钮，改变视图层上面的数据 示例： 新建一个微信小程序的Hello World项目，找到index.wxml文件 index.wxml: 使用一个元素，使用bindta
微信小程序开发之——个人中心-个人资料修改(7)
我的博客
09-25 9364
一 概述 个人资料修改对应的页面为：pages/modify/modify 页面搭建 页面逻辑 二 页面搭建 2.1 布局文件(modify.wml) <form bindsubmit="formSubmit" report-submit="true"> <!--姓名--> <view class="section"> <view class="section-title">姓名：</view> <view>
微信小程序-更改个人信息
d04l12b02的博客
12-27 5818
wxml代码： <view class="user-info" bindtap="authorize"> <view class="info-one"> <view hidden="{{info_hidden}}"> <image src="{{userImg}}" class="pic"></image> </view> <view hidden="{{!info_hidden}}"> &l
微信小程序-获取用户头像信息以及修改用户头像
分享互联网的有趣知识~
02-01 4289
给button设置open-type="chooseAvatar"，来使bindchooseavatar方法生效，在bindchooseavatar指定的函数中获取用户的头像信息
【页面案例汇总】微信小程序个人信息管理页面
weixin_42317757的博客
06-21 1890
【页面案例汇总】微信小程序个人信息管理页面
uniapp开发微信小程序-7.用户填写表单信息
最强的森的博客
06-06 7010
经过编写后，发现与之前章节过程差不多，然后我就在代码中将注释写了出来帮助大家理清逻辑。大家直接看源码研究一下吧：
小程序开发之问题8:页面点击弹出框编辑
张梦兰的博客
09-03 889
这里是常用的编辑个人信息的demo: 这是一个编辑手机号的弹出框 这是小程序页面html部分 <view class='list_item bottom' bindtap='editPhone'> <view class='item_label'>手机号码</view> <view class='item_value'>{{...
微信小程序个人中心、我的界面+源码（示例一）
04-26
界面详情，可点击此链接先进行图片预览： ...1、微信小程序个人中心、我的界面； 2、使用button按钮实现界面布局，更好的将分享好友、获取头像等功能展现出来。 3、界面简单，对于初学者有一定的帮助
微信小程序个人中心、我的界面+源码（示例二）
05-26
1、微信小程序个人中心、我的界面+源码； 2、实现自定义顶部状态栏； 3、实现滚动显示隐藏顶部状态栏效果； 4、超简单、详细； 5、监听方法，根据需求自行修改跳转路径； 6、本内容提供给需要的用户使用，若存在不足...
微信小程序登录注册界面代码，包含当前界面的所有源码，使用手机验证码注册或账号登录
04-21
1、微信小程序登录、注册切换； 2、适用于应用类小程序登录注册需求； 3、节省界面空间，只需要一个界面，切换完成登录和注册功能； 4、界面简单整洁，无需繁杂的逻辑； 5、界面中的发送验证码为示例，如需要更多...
微信小程序登录界面设计（可以登录）
12-14
微信小程序登录界面设计，适合初级学者，可以实现界面登录，简单的登录微信小程序，喜欢的可以看看，微信小程序登录界面设计（可以登录）
【JSP】用户信息界面操作 ---- 用户信息修改
懂得一千零一种,赋予你失败的方法！
02-18 1万+
文章目录用户信息界面操作 ---- 用户信息修改Ⅰ.修改userinfo.jsp 实现修改页面跳转Ⅱ.创建 userUpdate.jsp 修改页面Ⅲ.完善 dbHelper类，添加用户修改方法Ⅳ.创建 upDataServlet，实现用户信息修改功能Ⅴ.效果展示 用户信息界面操作 ---- 用户信息修改 Ⅰ.修改userinfo.jsp 实现修改页面跳转 之前在设计userinfo.jsp中的操作内容时，并没有具体的实现。今天来实现一个简单的用户修改功能。 href="userUpdate.jsp?..
wechat微信小程序panda我的界面(收藏电影、观看电影记录)
汪程序员
06-30 2291
每当用户浏览电影，会把这个电影信息存入数据缓存。在我的界面点击“看过的电影”进入该界面。在页面加载时，从缓存里面读取movieHistory的数据，并储存在shouList中，完成对数据的渲染。当用户点击删除记录，系统会会的这个电影的id，根据id把这个电影从展示列表中移除，并重新覆盖原来的缓存movieHistory。同时在onload监听页面加载，重新获取新的movieHistory。 wxss js 收藏电影 用户在浏览电影时，可对电影进行收藏，并将其数据存入缓存中movieCollect，覆
【微信小程序】制作个人信息页面
热门推荐
Minf的博客
11-04 4万+
题外：也许前端学习也应包括审美。在我学习前端路上，以前模仿视频内容，现在模仿别人成品…我曾想过作为前端是不是也应学习UI设计方向的美术知识，再不济也应具备页面布局的审美。但这个想法被一位大佬否定了，所以这个想法也只好放在心里成为另一种可能。 正题： 先上成品图 1.架构 进行编程前，我们要架构。对整体项目叫架构，对一个页面而言不如说叫整理思路 以本图为例，除去底部 tabBar，头部 navigationStyle 是小程序特有配置，其他都是“前端三剑客”的基础内容。 于是可以简单的划分为两部分： 蓝色
微信小程序授权登录获取用户信息并保存至缓存用于下次登录
m0_60643169的博客
12-15 9335
1.获取用户信息 wx.getUserProfile(Object object) 获取用户信息。页面产生点击事件（例如button上bindtap的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回userInfo。该接口用于替换wx.getUserInfo，详见微信小程序官方文档。 wx.getUserProfile({ desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 success: (...
微信小程序获取用户信息并对用户信息修改
05-11
微信小程序获取用户信息可以通过使用微信提供的 wx.getUserInfo() 方法来实现，该方法会返回用户信息，包括用户昵称、头像、性别等。 修改用户信息需要先获取用户授权，然后通过调用微信提供的 wx.request() 方法向服务器发送请求，修改用户信息。具体的实现步骤如下： 1. 在小程序中引导用户授权，获取用户信息。可以使用 wx.getUserInfo() 方法来获取用户信息。 2. 获取用户信息后，将用户信息传递给服务器。 3. 服务器接收到用户信息后，进行修改操作。可以使用数据库来存储用户信息。 4. 修改完成后，向小程序发送响应，告知用户信息已经修改成功。 需要注意的是，用户信息属于隐私信息，因此在获取用户信息时需要提示用户并获取其授权。同时，在修改用户信息时，要保证用户信息的安全性，防止用户信息被泄露。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汪程序猿

就当请我吃顿饭

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值