• 首页
  • 云服务器
  • 物理服务器
  • 跨境电商
  • 知识库
  • 保障
    信任中心 >>
    • 基础设施与网络
    • 服务保障能力
    • 数据安全
    • 合规资质
    数据中心 >>
    • 中国洛阳国际数据中心
    • 中国香港多线数据中心
    VIP会员服务 >>
    • 7*24小时服务支持
    • 0元快速备案
    • 100倍故障赔偿
    • 5天无理由退款
会员登录 免费注册

帮助中心 / 微信开发中如何实现后台登录

微信开发中如何实现后台登录



来源:辰迅云编辑:chenxun时间:2021/9/10 20:58:33



小编给大家分享一下微信开发中如何实现后台登录,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

效果图

微信开发中如何实现后台登录

微信开发中如何实现后台登录

找到app.js在里面写如下代码

App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  globalData: {
    adminUserViewId: "",
    token: "",
    userInfo: null,
    BaseURL:"http://airb.cakeboss.com.cn"    // BaseURL:"http://192.168.0.107:8080"  },

敲黑板划重点:上图中的代码片段重要的地方就是:“globalData中的 adminUserViewId: "",token: "" ”
这两个参数是前端需要存储的后台参数,用来标记用户的登录状态的。

然后建一个login文件夹,在login.wxml中写如下代码

<import src="../../components/toast.wxml" /><!-- is="toast" 匹配组件中的toast提示  如果用dialog的话这就是dialog --><template is="toast" data="{{ ...$wux.toast }}" /><view class="login_container">  <view class="login_view">    <text class="login_lable">账号:</text>    <input class="login_text" placeholder="请输入登录账号" bindinput="listenerUsernameInput"/>  </view>  <view class="login_view">    <text class="login_lable">密码:</text>    <input class="login_text" placeholder="请输入密码" password="true" bindinput="listenerPasswordInput"/>  </view>  <view>    <button class="login_button" bindtap="loginAction">登录</button>  </view></view>

然后建一个login文件夹,在login.wxss中写如下代码

.login_container {
  margin-top: 30px;
}.login_view {
  width: calc(100% - 40px);
  padding: 0 20px;
  line-height: 45px;
  height: 45px;
  margin-bottom: 20px;
}.login_text {
  float: left;
  height: 45px;
  line-height: 45px;
  font-size: 12px;
  border: 1px solid rgb(241, 242, 243);
  padding: 0 12px;
  width: calc(100% - 70px);
  border-radius: 4px;
}.login_lable {
  float: left;
  font-size: 12px;
  width: 40px;
}.login_button {
  width: 150px;
  background: green;
  color: #fff;
}

在login.js中写如下代码

//login.js//获取应用实例var app = getApp()var util = require('../../utils/util.js');

Page({
  data: {
    motto: 'Hello World',
    username: "",
    password: ""  },
  onLoad(options) {
    // 初始化提示框    this.$wuxToast = app.wux(this).$wuxToast
  },
  /** 监听帐号输入 */  listenerUsernameInput: function (e) {
    this.data.username = e.detail.value;
  },
  /** 监听密码输入 */  listenerPasswordInput: function (e) {
    this.data.password = e.detail.value;
  },
  // 登录按钮点击事件  loginAction: function () {

    var userName = this.data.username;
    var passwords = this.data.password;
    var that = this;

    if (userName === "") {
      that.$wuxToast.show({
        type: 'text',
        timer: 1000,
        color: '#fff',
        text: "用户名不能为空!",
        success: () => console.log('用户名不能为空!')
      })
      return;
    } if (passwords === "") {
      that.$wuxToast.show({
        type: 'text',
        timer: 1000,
        color: '#fff',
        text: "密码不能为空!",
        success: () => console.log('密码不能为空!')
      })
      return;
    }

    //加载提示框    util.showLoading("登录中...");

    var urlStr = app.globalData.BaseURL + '/api/adminUser/login';
    wx.request({
      method: "POST",
      url: urlStr, //仅为示例,并非真实的接口地址      data: util.json2Form({
        username: userName,
        password: passwords
      }),
      header: {
        "Content-Type": "application/x-www-form-urlencoded"      },
      success: function (res) {
        util.hideToast();
        console.log(res.data);
        var code = res.data.code;
        if (code === 200) {
          // 后台传递过来的值          var adminUserViewId = res.data.data.adminUserViewId;
          var token = res.data.data.token;
          // 设置全局变量的值          app.globalData.adminUserViewId = res.data.data.adminUserViewId;
          app.globalData.token = res.data.data.token;
          // 将token存储到本地          wx.setStorageSync('adminUserViewId', adminUserViewId);
          wx.setStorageSync('token', token);
          console.log("登录成功的adminUserViewId:" + adminUserViewId);
          console.log("登录成功的token:" + token);
          // 切换到首页          wx.switchTab({
            url: '/pages/index/index'          })
        } else {
          that.$wuxToast.show({
            type: 'text',
            timer: 1000,
            color: '#fff',
            text: res.data.msg,
            success: () => console.log('登录失败,请稍后重试。' + res.data.msg)
          })
        }
      },
      fail: function () {
        util.hideToast();
        console.log("登录失败");
        that.$wuxToast.show({
          type: 'text',
          timer: 1000,
          color: '#fff',
          text: '服务器君好累

以上是“微信开发中如何实现后台登录”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注辰迅云资讯频道!











    帮助中心

  • 云服务器类
  • 域名类
  • 虚拟主机类
  • 独立服务器
  • 付款类
  • 其他类

现在注册,即刻为您提供最佳上云实践机会

立即注册
辰迅云

400-0666-318 (7*24小时热线)

Copyright 2013 - chenxunyun.com. All RightsReserved. 辰迅云 版权所有
  • 关于辰迅云

    关于我们 发展历程 资质荣誉 新闻公告 诚聘英才 联系我们
  • 辰迅云产品

    云服务器 服务器托管 服务器租用
  • 服务与支持

    域名知识 云服务器问题 SSL证书问题 虚拟主机问题 租用托管 网站备案问题
  • 知识库

    云计算 编程语言 网络安全 智能运维 大数据 深度学习
  • 快速通道

    独立控制面板 忘记密码
乐创云
  • 工信部备案号沪ICP备20007084号
  • 《中华人民共和国增值电信业务经营许可证》编号: B1-20194590号

在线客服

电话咨询

微信客服