uniapp-含有后端的登录注册页面编写（二）

{
    "username": "user-13",
    "password": "pass-13",
    "nickname": "小李"
}

{
    "code": 200,
    "message": "更新成功",
    "data": {
        "id": 1,
        "username": "user-13",
        "password": "pass-13",
        "nickname": "小李"
    }
}

{
    "code": 500,
    "message": "更新失败"
}

{
    "code": 200,
    "message": "删除成功"
}

{
    "code": 500,
    "message": "删除失败"
}

{
  "name": "LoginAndRegister",
  "appid" : "",
  "description" : "",
  "versionName" : "1.0.0",
  "versionCode" : "100",
  "transformPx" : false,
  /* 5+App特有相关 */
  "app-plus" : {
      "usingComponents" : true,
      "nvueStyleCompiler" : "uni-app",
      "compilerVersion" : 3,
      "splashscreen" : {
          "alwaysShowBeforeRender" : true,
          "waiting" : true,
          "autoclose" : true,
          "delay" : 0
      },
      /* 模块配置 */
      "modules" : {},
      /* 应用发布信息 */
      "distribute" : {
          /* android打包配置 */
          "android" : {
              "permissions" : [
                  "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                  "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                  "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
                  "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
                  "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
                  "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
                  "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
                  "<uses-permission android:name=\"android.permission.CAMERA\"/>",
                  "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
                  "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
                  "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
                  "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
                  "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
                  "<uses-feature android:name=\"android.hardware.camera\"/>",
                  "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
              ]
          },
          /* ios打包配置 */
          "ios" : {},
          /* SDK配置 */
          "sdkConfigs" : {}
      }
  },
  /* 快应用特有相关 */
  "quickapp" : {},
  /* 小程序特有相关 */
  "mp-weixin" : {
      "appid" : "",
      "setting" : {
          "urlCheck" : false
      },
      "usingComponents" : true
  },
  "mp-alipay" : {
      "usingComponents" : true
  },
  "mp-baidu" : {
      "usingComponents" : true
  },
  "mp-toutiao" : {
      "usingComponents" : true
  },
  "uniStatistics" : {
      "enable" : false
  },
  "vueVersion" : "2",
      "h5" : {
          "devServer" : {
               "port" : 8080, //浏览器运行端口
                "disableHostCheck" : true, //设置跳过host检查
                "proxy" : {
                    "/api" : {
                        "target" : "http://localhost:8081", //目标接口域名
                         "changeOrigin" : true,  //是否跨域
                         "secure" : false,  // 设置支持https协议的代理
                         "pathRewrite":{"^/api":""}
                   }
              }
          }
      }
}

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{title}}</text>
      <button @click="handleClick">点击我</button>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        title: 'Hello'
      }
    },
    onLoad() {
    },
    methods: {
      handleClick() {
        console.log('您点击了该按钮！')
      }
    }
  }
</script>
<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }
  .text-area {
    display: flex;
    justify-content: center;
  }
  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>

<template>
    <view class="login">
        <image class="logo" src="/static/logo.png"></image>
        <view class="input-item">
            <input type="text" v-model="username" placeholder="请输入用户名">
        </view>
        <view class="input-item">
            <input type="password" v-model="password" placeholder="请输入密码">
        </view>
        <button @click="login" class="login-btn">登录</button>
        <button @click="goToRegister" class="register-btn">注册</button>
    </view>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      if (!this.username || !this.password) {
        uni.showToast({
          title: '请填写用户名和密码',
          icon: 'none'
        })
        return
      }
      // 发送请求验证用户
      axios.post('/api/users/login', {
        username: this.username,
        password: this.password
      }).then(res => {
    console.log(res.data.code)
        if (res.data.code === 200) {
          // 将用户信息保存到客户端本地缓存中
          uni.setStorageSync('userInfo', {
            id: res.data.data.id,
            username: res.data.data.username,
            password: res.data.data.password,
            nickname: res.data.data.nickname
          })
          // 跳转到首页
          uni.navigateTo({
            url: '/pages/index/index'
          })
        } else {
          uni.showToast({
            title: res.data.message,
            icon: 'none'
          })
        }
      }).catch(err => {
        uni.showToast({
          title: '网络请求失败，请重试',
          icon: 'none'
        })
      })
    },
    goToRegister() {
      uni.navigateTo({
        url: '/pages/register/register'
      })
    }
  }
}
</script>
<style scoped>
.login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 100rpx;
}
.logo {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}
.login-form {
  width: 90%;
  padding: 40rpx;
  background-color: #fff;
  border-radius: 5rpx;
}
.input-item {
  width: 80%;
  margin: 10rpx 0;
  border-bottom: 1rpx solid #ddd;
}
input {
  width: 100%;
  height: 50rpx;
  padding: 10rpx;
  font-size: 16rpx;
  outline: none;
  border: none;
}
.login-btn {
  display: block;
  margin: 30rpx auto 0;
  width: 80%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #007aff;
  color: #fff;
  border-radius: 5rpx;
  font-size: 20rpx;
}
.register-btn {
  margin-top: 20rpx;
  color: #007aff;
  width: 60%;
  height: 80rpx;
}
</style>

<template>
  <view class="register">
    <image class="logo" src="/static/logo.png"></image>
    <form class="register-form">
  <view class="input-item">
    <input type="text" v-model="nickname" placeholder="请输入昵称">
  </view>
      <view class="input-item">
        <input type="text" v-model="username" placeholder="请输入用户名">
      </view>
      <view class="input-item">
        <input type="password" v-model="password" placeholder="请输入密码">
      </view>
      <view class="input-item">
        <input type="password" v-model="confirmPassword" placeholder="请确认密码">
      </view>
      <button type="button" class="register-btn" @click="register">注册</button>
    </form>
    <button class="back-btn" @click="goBack">返回</button>
  </view>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: '',
      nickname: ''
    };
  },
  methods: {
    async register() {
      if(!this.username || !this.password || !this.nickname) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
        return;
      }
      if(this.password !== this.confirmPassword) {
        uni.showToast({
          title: '两次输入密码不一致',
          icon: 'none'
        });
        return;
      }
      try {
        const response = await axios.post('/api/users/register', {
          username: this.username,
          password: this.password,
          nickname: this.nickname
        });
        const responseData = response.data;
        if(responseData.code === 200) {
          uni.showToast({
            title: responseData.message,
            icon: 'success'
          });
          uni.navigateTo({
            url: '/pages/login/login'
          });
        } else {
          uni.showToast({
            title: responseData.message,
            icon: 'none'
          });
        }
      } catch (error) {
        let errorMessage = '注册失败，请稍后再试';
        if(error.response) {
          if(error.response.status === 500) {
            errorMessage = error.response.data.message;
          }
        }
        uni.showToast({
          title: errorMessage,
          icon: 'none'
        });
      }
    },
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>
<style scoped>
.register {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 100rpx;
}
.logo {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}
.register-form {
  width: 90%;
  padding: 40rpx;
  background-color: #fff;
  border-radius: 5rpx;
}
.input-item {
  margin: 10rpx 0;
  border-bottom: 1rpx solid #ddd;
}
input {
  width: 100%;
  height: 50rpx;
  padding: 10rpx;
  font-size: 16rpx;
  outline: none;
  border: none;
}
.register-btn {
  display: block;
  margin: 30rpx auto 0;
  width: 90%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #007aff;
  color: #fff;
  border-radius: 5rpx;
  font-size: 20rpx;
}
.back-btn {
  margin-top: 20rpx;
  color: #007aff;
  width: 60%;
  height: 80rpx;
}
</style>