uniapp-login and registration page writing with backend

uniapp-login and registration page writing with backend

create database

database structure

Table name: user

column name	type of data	describe
id	int	auto-increment ID
username	varchar	username
password	varchar	password
nickname	varchar	Nick name

This scheme only retains four fields of id, username, password and nickname, and stores basic user information in the simplest way. It should be noted that passwords should be handled securely (such as encrypted) to avoid leaking sensitive information. If there is a need for new information in the future, you can change the table structure at any time and add the corresponding columns.

database code

-- 创建 usertable 数据库
CREATE DATABASE IF NOT EXISTS usertable;

-- 切换至 usertable 数据库
USE usertable;

-- 创建 user 表
CREATE TABLE IF NOT EXISTS user (
  id INT(11) NOT NULL AUTO_INCREMENT,
  username VARCHAR(100) NOT NULL UNIQUE,
  password VARCHAR(100) NOT NULL,
  nickname VARCHAR(100) NOT NULL,
  PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- 添加一些测试数据
INSERT INTO user (username, password, nickname) VALUES ('user1', 'password1', '张三');
INSERT INTO user (username, password, nickname) VALUES ('user2', 'password2', '李四');
INSERT INTO user (username, password, nickname) VALUES ('user3', 'password3', '王五');

This SQL code is used to create a usertable called and add some simple test data. Among them, idthe column uses the auto-increment primary key constraint to ensure the uniqueness of the data. usernameThe columns use uniqueconstraints to ensure the uniqueness of usernames. Note that UTF- utf8mb48 is a more efficient and versatile character encoding that supports a wider range of Unicode characters, so it is recommended over UTF-8.

backend writing

Create a project (preparation work)

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.7.11</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>userTable</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>userTable</name>
	<description>userTable</description>
	<properties>
		<java.version>1.8</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
			<version>2.7.6</version>
		</dependency>
		<dependency>
			<groupId>org.springframework.data</groupId>
			<artifactId>spring-data-jpa</artifactId>
			<version>2.5.6</version>
		</dependency>

		<dependency>
			<groupId>org.hibernate</groupId>
			<artifactId>hibernate-core</artifactId>
			<version>5.6.3.Final</version>
		</dependency>


		<dependency>
			<groupId>javax.persistence</groupId>
			<artifactId>javax.persistence-api</artifactId>
			<version>2.2</version>
		</dependency>

		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>2.3.0</version>
		</dependency>
		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>2.3.0</version>
		</dependency>
		<dependency>
			<groupId>com.mysql</groupId>
			<artifactId>mysql-connector-j</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>com.baomidou</groupId>
			<artifactId>mybatis-plus-boot-starter</artifactId>
			<version>3.4.2</version>
		</dependency>

		<dependency>
			<groupId>org.apache.shiro</groupId>
			<artifactId>shiro-core</artifactId>
			<version>1.8.0</version>
		</dependency>

		<dependency>
			<groupId>io.jsonwebtoken</groupId>
			<artifactId>jjwt-api</artifactId>
			<version>0.11.2</version>
		</dependency>

		<!-- 如果要使用 jjwt 的实现，还需要添加以下依赖 -->
		<dependency>
			<groupId>io.jsonwebtoken</groupId>
			<artifactId>jjwt-impl</artifactId>
			<version>0.11.2</version>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>io.jsonwebtoken</groupId>
			<artifactId>jjwt-jackson</artifactId>
			<version>0.11.2</version>
			<scope>runtime</scope>
		</dependency>
		<!-- Hibernate Validator -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-validation</artifactId>
		</dependency>
		<dependency>
			<groupId>org.apache.shiro</groupId>
			<artifactId>shiro-core</artifactId>
			<version>1.8.0</version>
		</dependency>
	</dependencies>


	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
				<configuration>
					<excludes>
						<exclude>
							<groupId>org.projectlombok</groupId>
							<artifactId>lombok</artifactId>
						</exclude>
					</excludes>
				</configuration>
			</plugin>
		</plugins>
	</build>

</project>

application.properties

# ?????
spring.datasource.url=jdbc:mysql://localhost:3306/usertable?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

# ???????
server.port=8081

# MyBatis-Plus ??
mybatis-plus.mapper-locations=classpath:/mapper/*.xml
mybatis-plus.type-aliases-package=com.example.demo.entity
mybatis-plus.global-config.db-config.id-type=auto
mybatis-plus.configuration.map-underscore-to-camel-case=true
mybatis-plus.configuration.use-generated-keys=true
mybatis-plus.configuration.map-enum-as-ordinal=false
mybatis-plus.configuration.enum-handler=com.baomidou.mybatisplus.extension.handlers.MybatisEnumTypeHandler

Bean

User

import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName("user")  // 声明对应的数据库表名（user）
public class User {
    
    

    private Long id;

    private String username;

    private String password;

    private String nickname;
}

Result

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class Result {
    
    
 
    private Integer code;   // 状态码
    
    private String message; // 状态信息
    
    private Object data;    // 数据
}

config

CorsConfig

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class CorsConfig {
    
    
    @Bean
    public WebMvcConfigurer corsConfigurer() {
    
    
        return new WebMvcConfigurerAdapter() {
    
    
            @Override
            public void addCorsMappings(CorsRegistry registry) {
    
    
                // 允许来自本地的8080端口发起的跨域请求
                registry.addMapping("/api/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "POST", "PUT", "DELETE")
                    .allowCredentials(true).maxAge(3600);
            }
        };
    }
}

Mapper

UserMapper

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.usertable.Bean.User;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface UserMapper extends BaseMapper<User> {
    
    
}

Service

UserService

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.IService;
import com.example.usertable.Bean.User;

public interface UserService extends IService<User> {
    
    

    /**
     * 分页查询用户列表
     */
    IPage<User> selectPage(Page<User> page);

    /**
     * 用户注册
     */
    boolean register(User user);

    /**
     * 用户登录
     */
    User login(String username, String password);

}

ServiceImpl

UserServiceImpl

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.usertable.Bean.User;
import com.example.usertable.Mapper.UserMapper;
import com.example.usertable.Service.UserService;
import lombok.AllArgsConstructor;
import org.springframework.stereotype.Service;
import org.springframework.util.StringUtils;

@Service
@AllArgsConstructor
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
    
    

    @Override
    public IPage<User> selectPage(Page<User> page) {
    
    
        return baseMapper.selectPage(page, null);
    }

    /**
     * 注册新用户（需先检查用户名是否已被使用）
     */
    @Override
    public boolean register(User user) {
    
    
        String username = user.getUsername();
        // 根据用户名查询用户
        User u = this.getOne(new QueryWrapper<User>().eq("username", username));
        if (u != null) {
    
    
            // 用户名已存在
            return false;
        } else {
    
    
            // 将用户保存到数据库
            return this.save(user);
        }
    }

    /**
     * 用户登录（根据用户名和密码查询用户）
     */
    @Override
    public User login(String username, String password) {
    
    
        if (StringUtils.isEmpty(username) || StringUtils.isEmpty(password)) {
    
    
            // 用户名和密码不能为空
            return null;
        }
        return this.getOne(new QueryWrapper<User>()
                .eq("username", username)
                .eq("password", password));
    }

}

Controller

UserController

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.usertable.Bean.Result;
import com.example.usertable.Bean.User;
import com.example.usertable.Service.UserService;
import lombok.AllArgsConstructor;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;

@AllArgsConstructor
@RestController
@RequestMapping("/users")
public class UserController {
    
    

    private final UserService userService;

    /**
     * 获取用户列表（分页）
     */
    @GetMapping("/")
    public Result list(@RequestParam(defaultValue = "1") Integer pageNum,
                       @RequestParam(defaultValue = "10") Integer pageSize) {
    
    
        // 构建分页对象
        Page<User> page = new Page<>(pageNum, pageSize);
        // 分页查询用户数据
        IPage<User> userPage = userService.page(page, null);
        return Result.builder()
                .code(200)
                .message("获取成功")
                .data(userPage)
                .build();
    }

    /**
     * 根据 ID 获取用户信息
     */
    @GetMapping("/{id}")
    public Result detail(@PathVariable Long id) {
    
    
        // 查询用户信息
        User user = userService.getById(id);
        if (user != null) {
    
    
            return Result.builder()
                    .code(200)
                    .message("获取成功")
                    .data(user)
                    .build();
        } else {
    
    
            return Result.builder()
                    .code(404)
                    .message("用户不存在")
                    .build();
        }
    }

    /**
     * 注册
     */
    @PostMapping("/register")
    public Result register(@RequestBody @Validated User user) {
    
    
        boolean success = userService.register(user);
        if (success) {
    
    
            return Result.builder()
                    .code(200)
                    .message("注册成功")
                    .data(user)
                    .build();
        } else {
    
    
            return Result.builder()
                    .code(500)
                    .message("用户名已存在")
                    .build();
        }
    }

    /**
     * 登录
     */
    @PostMapping("/login")
    public Result login(@RequestBody User user) {
    
    
        String username = user.getUsername();
        String password = user.getPassword();

        // 查询用户
        User loginUser = userService.login(username, password);

        if (loginUser != null) {
    
    
            return Result.builder()
                    .code(200)
                    .message("登录成功")
                    .data(loginUser)
                    .build();
        } else {
    
    
            return Result.builder()
                    .code(401)
                    .message("用户名或密码错误")
                    .build();
        }
    }

    /**
     * 新增用户
     */
    @PostMapping("/")
    public Result add(@RequestBody @Validated User user) {
    
    
        boolean success = userService.save(user);
        if (success) {
    
    
            return Result.builder()
                    .code(200)
                    .message("新增成功")
                    .data(user)
                    .build();
        } else {
    
    
            return Result.builder()
                    .code(500)
                    .message("新增失败")
                    .data(user)
                    .build();
        }
    }

    /**
     * 更新用户信息
     */
    @PutMapping("/{id}")
    public Result update(@PathVariable Long id, @RequestBody @Validated User user) {
    
    
        user.setId(id);
        boolean success = userService.updateById(user);
        if (success) {
    
    
            return Result.builder()
                    .code(200)
                    .message("更新成功")
                    .data(user)
                    .build();
        } else {
    
    
            return Result.builder()
                    .code(500)
                    .message("更新失败")
                    .data(user)
                    .build();
        }
    }

    /**
     * 删除用户
     */
    @DeleteMapping("/{id}")
    public Result delete(@PathVariable Long id) {
    
    
        boolean success = userService.removeById(id);
        if (success) {
    
    
            return Result.builder()
                    .code(200)
                    .message("删除成功")
                    .build();
        } else {
    
    
            return Result.builder()
                    .code(500)
                    .message("删除失败")
                    .build();
        }
    }

}

Postman test

Test all interfaces
The following is the Postman test based on port 8081:

1. Get user list (pagination)

Request address:http://localhost:8081/users/

Request method: GET

Request parameters:

parameter name	Parameter Type	Is it necessary	Defaults	Parameter Description
pageNum	Integer	no	1	current page number
pageSize	Integer	no	10	records per page

Successful response:

{
    
    
    "code": 200,
    "message": "获取成功",
    "data": {
    
    
        "records": [
            {
    
    
                "id": 1,
                "username": "user1",
                "password": "password1",
                "nickname": "张三"
            },
            {
    
    
                "id": 2,
                "username": "user2",
                "password": "password2",
                "nickname": "李四"
            },
            {
    
    
                "id": 3,
                "username": "user3",
                "password": "password3",
                "nickname": "王五"
            }
        ],
        "total": 0,
        "size": 10,
        "current": 1,
        "orders": [],
        "optimizeCountSql": true,
        "hitCount": false,
        "countId": null,
        "maxLimit": null,
        "searchCount": true,
        "pages": 0
    }
}

2. Get user information based on ID

Request address:http://localhost:8081/users/{id}

Request method: GET

Request path parameters:

parameter name	Parameter Type	Is it necessary	example value	Parameter Description
id	Long	yes	1	User ID

Successful response:

{
    
    
    "code": 200,
    "message": "获取成功",
    "data": {
    
    
        "id": 1,
        "username": "user1",
        "password": "password1",
        "nickname": "张三"
    }
}

3. Registration

Request address:http://localhost:8081/users/register

Request method: POST

Request parameters:

parameter name	Parameter Type	Is it necessary	example value	Parameter Description
username	String	yes	user-11	username
password	String	yes	pass-11	password
nickname	String	no	boring	nickname

Example request:

{
    
    
    "username": "user-11",
    "password": "pass-11",
    "nickname":"lihua"
}

Successful response:

{
    
    
    "code": 200,
    "message": "注册成功",
    "data": {
    
    
        "id": 4,
        "username": "user-11",
        "password": "pass-11",
        "nickname": "lihua"
    }
}

Failure response:

{
    
    
    "code": 500,
    "message": "用户名已存在"
}

4. Login

Request address:http://localhost:8081/users/login

Request method: POST

Request parameters:

parameter name	Parameter Type	Is it necessary	example value	Parameter Description
username	String	yes	user-1	username
password	String	yes	pass-1	password

Example request:

{
    
    
    "username": "user2",
    "password": "password2"
}

Successful response:

{
    
    
    "code": 200,
    "message": "登录成功",
    "data": {
    
    
        "password": "password2",
        "nickname": "李四",
        "id": 2,
        "username": "user2"
    }
}

Failure response:

{
    
    
    "code": 401,
    "message": "用户名或密码错误",
    "data": null
}

5. Add new users

Request address:http://localhost:8081/users/

Request method: POST

Request parameters:

parameter name	Parameter Type	Is it necessary	example value	Parameter Description
username	String	yes	user-12	username
password	String	yes	pass-12	password
nickname	String	no	Xiao Li	nickname

Example request:

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

Successful response:

{
    
    
    "code": 200,
    "message": "新增成功",
    "data": {
    
    
        "id": 5,
        "username": "user-12",
        "password": "pass-12",
        "nickname": "小李"
    }
}

Failure response:

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

6. Update user information

Request address:http://localhost:8081/users/{id}

Request method: PUT

Request path parameters:

parameter name	Parameter Type	Is it necessary	example value	Parameter Description
username	String	no	user-12-update	username
password	String	no	pass-12-update	password
email	String	no	[email protected]	Mail
phone	String	no	12345678901	Phone number

Example request:

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

Successful response:

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

Failure response:

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

7. Delete user

Request address:http://localhost:8081/users/{id}

Request method: DELETE

Request path parameters:

parameter name	Parameter Type	Is it necessary	example value	Parameter Description
id	Long	yes	12	User ID

Successful response:

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

Failure response:

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

front-end writing

page writing

Show results

File Directory

pages.json

manifest.json

{
    
    
  "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":""}
  		             }
  		        }
  		    }
  		}

}

index.view

<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>

login.vue

<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>

register.view

<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>