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

￡神魔★判官ぃ 2024-03-22 15:36 192阅读 0赞

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

创建数据库

数据库结构

表名：user































列名 数据类型 描述
id int 自增ID
username varchar 用户名
password varchar 密码
nickname varchar 昵称

这个方案只保留了id、username、password和nickname四个字段，以最简单的方式存储用户基本信息。需要注意的是，密码应该进行安全处理（如加密），避免泄露敏感信息。如果后续有新增信息需求，则可以随时更改表结构，添加相应的列即可。

数据库代码

  1. -- 创建 usertable 数据库
  2. CREATE DATABASE IF NOT EXISTS usertable;
  4. -- 切换至 usertable 数据库
  5. USE usertable;
  7. -- 创建 user 表
  8. CREATE TABLE IF NOT EXISTS user (
  9.   id INT(11) NOT NULL AUTO_INCREMENT,
  10.   username VARCHAR(100) NOT NULL UNIQUE,
  11.   password VARCHAR(100) NOT NULL,
  12.   nickname VARCHAR(100) NOT NULL,
  13.   PRIMARY KEY (id)
  14. ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
  16. -- 添加一些测试数据
  17. INSERT INTO user (username, password, nickname) VALUES ('user1', 'password1', '张三');
  18. INSERT INTO user (username, password, nickname) VALUES ('user2', 'password2', '李四');
  19. INSERT INTO user (username, password, nickname) VALUES ('user3', 'password3', '王五');

这段SQL代码用于创建一个名为user的表格，并且添加了一些简单的测试数据。其中，id列使用了自增主键约束，保证数据的唯一性。username列使用了unique约束，确保用户名的唯一性。请注意，utf8mb4是一种更高效和更通用的字符编码，支持更广泛的Unicode字符集，所以它比utf-8更推荐使用。

后端编写

创建项目（准备工作）

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

pom.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  4.     <modelVersion>4.0.0</modelVersion>
  5.     <parent>
  6.         <groupId>org.springframework.boot</groupId>
  7.         <artifactId>spring-boot-starter-parent</artifactId>
  8.         <version>2.7.11</version>
  9.         <relativePath/> <!-- lookup parent from repository -->
  10.     </parent>
  11.     <groupId>com.example</groupId>
  12.     <artifactId>userTable</artifactId>
  13.     <version>0.0.1-SNAPSHOT</version>
  14.     <name>userTable</name>
  15.     <description>userTable</description>
  16.     <properties>
  17.         <java.version>1.8</java.version>
  18.     </properties>
  19.     <dependencies>
  20.         <dependency>
  21.             <groupId>org.springframework.boot</groupId>
  22.             <artifactId>spring-boot-starter-web</artifactId>
  23.             <version>2.7.6</version>
  24.         </dependency>
  25.         <dependency>
  26.             <groupId>org.springframework.data</groupId>
  27.             <artifactId>spring-data-jpa</artifactId>
  28.             <version>2.5.6</version>
  29.         </dependency>
  31.         <dependency>
  32.             <groupId>org.hibernate</groupId>
  33.             <artifactId>hibernate-core</artifactId>
  34.             <version>5.6.3.Final</version>
  35.         </dependency>
  38.         <dependency>
  39.             <groupId>javax.persistence</groupId>
  40.             <artifactId>javax.persistence-api</artifactId>
  41.             <version>2.2</version>
  42.         </dependency>
  44.         <dependency>
  45.             <groupId>org.mybatis.spring.boot</groupId>
  46.             <artifactId>mybatis-spring-boot-starter</artifactId>
  47.             <version>2.3.0</version>
  48.         </dependency>
  49.         <dependency>
  50.             <groupId>org.mybatis.spring.boot</groupId>
  51.             <artifactId>mybatis-spring-boot-starter</artifactId>
  52.             <version>2.3.0</version>
  53.         </dependency>
  54.         <dependency>
  55.             <groupId>com.mysql</groupId>
  56.             <artifactId>mysql-connector-j</artifactId>
  57.             <scope>runtime</scope>
  58.         </dependency>
  59.         <dependency>
  60.             <groupId>org.projectlombok</groupId>
  61.             <artifactId>lombok</artifactId>
  62.             <optional>true</optional>
  63.         </dependency>
  64.         <dependency>
  65.             <groupId>org.springframework.boot</groupId>
  66.             <artifactId>spring-boot-starter-test</artifactId>
  67.             <scope>test</scope>
  68.         </dependency>
  69.         <dependency>
  70.             <groupId>com.baomidou</groupId>
  71.             <artifactId>mybatis-plus-boot-starter</artifactId>
  72.             <version>3.4.2</version>
  73.         </dependency>
  75.         <dependency>
  76.             <groupId>org.apache.shiro</groupId>
  77.             <artifactId>shiro-core</artifactId>
  78.             <version>1.8.0</version>
  79.         </dependency>
  81.         <dependency>
  82.             <groupId>io.jsonwebtoken</groupId>
  83.             <artifactId>jjwt-api</artifactId>
  84.             <version>0.11.2</version>
  85.         </dependency>
  87.         <!-- 如果要使用 jjwt 的实现，还需要添加以下依赖 -->
  88.         <dependency>
  89.             <groupId>io.jsonwebtoken</groupId>
  90.             <artifactId>jjwt-impl</artifactId>
  91.             <version>0.11.2</version>
  92.             <scope>runtime</scope>
  93.         </dependency>
  94.         <dependency>
  95.             <groupId>io.jsonwebtoken</groupId>
  96.             <artifactId>jjwt-jackson</artifactId>
  97.             <version>0.11.2</version>
  98.             <scope>runtime</scope>
  99.         </dependency>
  100.         <!-- Hibernate Validator -->
  101.         <dependency>
  102.             <groupId>org.springframework.boot</groupId>
  103.             <artifactId>spring-boot-starter-validation</artifactId>
  104.         </dependency>
  105.         <dependency>
  106.             <groupId>org.apache.shiro</groupId>
  107.             <artifactId>shiro-core</artifactId>
  108.             <version>1.8.0</version>
  109.         </dependency>
  110.     </dependencies>
  113.     <build>
  114.         <plugins>
  115.             <plugin>
  116.                 <groupId>org.springframework.boot</groupId>
  117.                 <artifactId>spring-boot-maven-plugin</artifactId>
  118.                 <configuration>
  119.                     <excludes>
  120.                         <exclude>
  121.                             <groupId>org.projectlombok</groupId>
  122.                             <artifactId>lombok</artifactId>
  123.                         </exclude>
  124.                     </excludes>
  125.                 </configuration>
  126.             </plugin>
  127.         </plugins>
  128.     </build>
  130. </project>

application.properties

  1. # ?????
  2. spring.datasource.url=jdbc:mysql://localhost:3306/usertable?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai
  3. spring.datasource.username=root
  4. spring.datasource.password=123456
  5. spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
  7. # ???????
  8. server.port=8081
  10. # MyBatis-Plus ??
  11. mybatis-plus.mapper-locations=classpath:/mapper/*.xml
  12. mybatis-plus.type-aliases-package=com.example.demo.entity
  13. mybatis-plus.global-config.db-config.id-type=auto
  14. mybatis-plus.configuration.map-underscore-to-camel-case=true
  15. mybatis-plus.configuration.use-generated-keys=true
  16. mybatis-plus.configuration.map-enum-as-ordinal=false
  17. mybatis-plus.configuration.enum-handler=com.baomidou.mybatisplus.extension.handlers.MybatisEnumTypeHandler

Bean

User
  1. import com.baomidou.mybatisplus.annotation.TableName;
  2. import lombok.AllArgsConstructor;
  3. import lombok.Data;
  4. import lombok.NoArgsConstructor;
  6. @Data
  7. @AllArgsConstructor
  8. @NoArgsConstructor
  9. @TableName("user")  // 声明对应的数据库表名（user）
  10. public class User {
  13.     private Long id;
  15.     private String username;
  17.     private String password;
  19.     private String nickname;
  20. }
Result
  1. import lombok.AllArgsConstructor;
  2. import lombok.Builder;
  3. import lombok.Data;
  4. import lombok.NoArgsConstructor;
  6. @Data
  7. @Builder
  8. @AllArgsConstructor
  9. @NoArgsConstructor
  10. public class Result {
  13.     private Integer code;   // 状态码
  15.     private String message; // 状态信息
  17.     private Object data;    // 数据
  18. }

config

CorsConfig
  1. import org.springframework.context.annotation.Bean;
  2. import org.springframework.context.annotation.Configuration;
  3. import org.springframework.web.servlet.config.annotation.CorsRegistry;
  4. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
  5. import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
  7. @Configuration
  8. public class CorsConfig {
  10.     @Bean
  11.     public WebMvcConfigurer corsConfigurer() {
  13.         return new WebMvcConfigurerAdapter() {
  15.             @Override
  16.             public void addCorsMappings(CorsRegistry registry) {
  18.                 // 允许来自本地的8080端口发起的跨域请求
  19.                 registry.addMapping("/api/**")
  20.                     .allowedOrigins("*")
  21.                     .allowedMethods("GET", "POST", "PUT", "DELETE")
  22.                     .allowCredentials(true).maxAge(3600);
  23.             }
  24.         };
  25.     }
  26. }

Mapper

UserMapper
  1. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  2. import com.example.usertable.Bean.User;
  3. import org.apache.ibatis.annotations.Mapper;
  5. @Mapper
  6. public interface UserMapper extends BaseMapper<User> {
  8. }

Service

UserService
  1. import com.baomidou.mybatisplus.core.metadata.IPage;
  2. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  3. import com.baomidou.mybatisplus.extension.service.IService;
  4. import com.example.usertable.Bean.User;
  6. public interface UserService extends IService<User> {
  9.     /**
  10.      * 分页查询用户列表
  11.      */
  12.     IPage<User> selectPage(Page<User> page);
  14.     /**
  15.      * 用户注册
  16.      */
  17.     boolean register(User user);
  19.     /**
  20.      * 用户登录
  21.      */
  22.     User login(String username, String password);
  24. }

ServiceImpl

UserServiceImpl
  1. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  2. import com.baomidou.mybatisplus.core.metadata.IPage;
  3. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  4. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  5. import com.example.usertable.Bean.User;
  6. import com.example.usertable.Mapper.UserMapper;
  7. import com.example.usertable.Service.UserService;
  8. import lombok.AllArgsConstructor;
  9. import org.springframework.stereotype.Service;
  10. import org.springframework.util.StringUtils;
  12. @Service
  13. @AllArgsConstructor
  14. public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
  17.     @Override
  18.     public IPage<User> selectPage(Page<User> page) {
  20.         return baseMapper.selectPage(page, null);
  21.     }
  23.     /**
  24.      * 注册新用户（需先检查用户名是否已被使用）
  25.      */
  26.     @Override
  27.     public boolean register(User user) {
  29.         String username = user.getUsername();
  30.         // 根据用户名查询用户
  31.         User u = this.getOne(new QueryWrapper<User>().eq("username", username));
  32.         if (u != null) {
  34.             // 用户名已存在
  35.             return false;
  36.         } else {
  38.             // 将用户保存到数据库
  39.             return this.save(user);
  40.         }
  41.     }
  43.     /**
  44.      * 用户登录（根据用户名和密码查询用户）
  45.      */
  46.     @Override
  47.     public User login(String username, String password) {
  49.         if (StringUtils.isEmpty(username) || StringUtils.isEmpty(password)) {
  51.             // 用户名和密码不能为空
  52.             return null;
  53.         }
  54.         return this.getOne(new QueryWrapper<User>()
  55.                 .eq("username", username)
  56.                 .eq("password", password));
  57.     }
  59. }

Controller

UserController
  1. import com.baomidou.mybatisplus.core.metadata.IPage;
  2. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  3. import com.example.usertable.Bean.Result;
  4. import com.example.usertable.Bean.User;
  5. import com.example.usertable.Service.UserService;
  6. import lombok.AllArgsConstructor;
  7. import org.springframework.validation.annotation.Validated;
  8. import org.springframework.web.bind.annotation.*;
  10. @AllArgsConstructor
  11. @RestController
  12. @RequestMapping("/users")
  13. public class UserController {
  16.     private final UserService userService;
  18.     /**
  19.      * 获取用户列表（分页）
  20.      */
  21.     @GetMapping("/")
  22.     public Result list(@RequestParam(defaultValue = "1") Integer pageNum,
  23.                        @RequestParam(defaultValue = "10") Integer pageSize) {
  25.         // 构建分页对象
  26.         Page<User> page = new Page<>(pageNum, pageSize);
  27.         // 分页查询用户数据
  28.         IPage<User> userPage = userService.page(page, null);
  29.         return Result.builder()
  30.                 .code(200)
  31.                 .message("获取成功")
  32.                 .data(userPage)
  33.                 .build();
  34.     }
  36.     /**
  37.      * 根据 ID 获取用户信息
  38.      */
  39.     @GetMapping("/{id}")
  40.     public Result detail(@PathVariable Long id) {
  42.         // 查询用户信息
  43.         User user = userService.getById(id);
  44.         if (user != null) {
  46.             return Result.builder()
  47.                     .code(200)
  48.                     .message("获取成功")
  49.                     .data(user)
  50.                     .build();
  51.         } else {
  53.             return Result.builder()
  54.                     .code(404)
  55.                     .message("用户不存在")
  56.                     .build();
  57.         }
  58.     }
  60.     /**
  61.      * 注册
  62.      */
  63.     @PostMapping("/register")
  64.     public Result register(@RequestBody @Validated User user) {
  66.         boolean success = userService.register(user);
  67.         if (success) {
  69.             return Result.builder()
  70.                     .code(200)
  71.                     .message("注册成功")
  72.                     .data(user)
  73.                     .build();
  74.         } else {
  76.             return Result.builder()
  77.                     .code(500)
  78.                     .message("用户名已存在")
  79.                     .build();
  80.         }
  81.     }
  83.     /**
  84.      * 登录
  85.      */
  86.     @PostMapping("/login")
  87.     public Result login(@RequestBody User user) {
  89.         String username = user.getUsername();
  90.         String password = user.getPassword();
  92.         // 查询用户
  93.         User loginUser = userService.login(username, password);
  95.         if (loginUser != null) {
  97.             return Result.builder()
  98.                     .code(200)
  99.                     .message("登录成功")
  100.                     .data(loginUser)
  101.                     .build();
  102.         } else {
  104.             return Result.builder()
  105.                     .code(401)
  106.                     .message("用户名或密码错误")
  107.                     .build();
  108.         }
  109.     }
  111.     /**
  112.      * 新增用户
  113.      */
  114.     @PostMapping("/")
  115.     public Result add(@RequestBody @Validated User user) {
  117.         boolean success = userService.save(user);
  118.         if (success) {
  120.             return Result.builder()
  121.                     .code(200)
  122.                     .message("新增成功")
  123.                     .data(user)
  124.                     .build();
  125.         } else {
  127.             return Result.builder()
  128.                     .code(500)
  129.                     .message("新增失败")
  130.                     .data(user)
  131.                     .build();
  132.         }
  133.     }
  135.     /**
  136.      * 更新用户信息
  137.      */
  138.     @PutMapping("/{id}")
  139.     public Result update(@PathVariable Long id, @RequestBody @Validated User user) {
  141.         user.setId(id);
  142.         boolean success = userService.updateById(user);
  143.         if (success) {
  145.             return Result.builder()
  146.                     .code(200)
  147.                     .message("更新成功")
  148.                     .data(user)
  149.                     .build();
  150.         } else {
  152.             return Result.builder()
  153.                     .code(500)
  154.                     .message("更新失败")
  155.                     .data(user)
  156.                     .build();
  157.         }
  158.     }
  160.     /**
  161.      * 删除用户
  162.      */
  163.     @DeleteMapping("/{id}")
  164.     public Result delete(@PathVariable Long id) {
  166.         boolean success = userService.removeById(id);
  167.         if (success) {
  169.             return Result.builder()
  170.                     .code(200)
  171.                     .message("删除成功")
  172.                     .build();
  173.         } else {
  175.             return Result.builder()
  176.                     .code(500)
  177.                     .message("删除失败")
  178.                     .build();
  179.         }
  180.     }
  182. }

Postman测试

测试所有的接口
以下是基于8081端口号的 Postman 测试：

1. 获取用户列表（分页）

请求地址：http://localhost:8081/users/

请求方法：GET

请求参数：



























参数名称 参数类型 是否必须 默认值 参数说明
pageNum Integer 否 1 当前页码
pageSize Integer 否 10 每页记录数

成功响应：

  1. {
  3.     "code": 200,
  4.     "message": "获取成功",
  5.     "data": {
  7.         "records": [
  8.             {
  10.                 "id": 1,
  11.                 "username": "user1",
  12.                 "password": "password1",
  13.                 "nickname": "张三"
  14.             },
  15.             {
  17.                 "id": 2,
  18.                 "username": "user2",
  19.                 "password": "password2",
  20.                 "nickname": "李四"
  21.             },
  22.             {
  24.                 "id": 3,
  25.                 "username": "user3",
  26.                 "password": "password3",
  27.                 "nickname": "王五"
  28.             }
  29.         ],
  30.         "total": 0,
  31.         "size": 10,
  32.         "current": 1,
  33.         "orders": [],
  34.         "optimizeCountSql": true,
  35.         "hitCount": false,
  36.         "countId": null,
  37.         "maxLimit": null,
  38.         "searchCount": true,
  39.         "pages": 0
  40.     }
  41. }

2. 根据 ID 获取用户信息

请求地址：http://localhost:8081/users/{id}

请求方法：GET

请求路径参数：




















参数名称 参数类型 是否必须 示例值 参数说明
id Long 是 1 用户 ID

成功响应：

  1. {
  3.     "code": 200,
  4.     "message": "获取成功",
  5.     "data": {
  7.         "id": 1,
  8.         "username": "user1",
  9.         "password": "password1",
  10.         "nickname": "张三"
  11.     }
  12. }

3. 注册

请求地址：http://localhost:8081/users/register

请求方法：POST

请求参数：


































参数名称 参数类型 是否必须 示例值 参数说明
username String 是 user-11 用户名
password String 是 pass-11 密码
nickname String 否 lihua 昵名

请求示例：

  1. {
  3.     "username": "user-11",
  4.     "password": "pass-11",
  5.     "nickname":"lihua"
  6. }

成功响应：

  1. {
  3.     "code": 200,
  4.     "message": "注册成功",
  5.     "data": {
  7.         "id": 4,
  8.         "username": "user-11",
  9.         "password": "pass-11",
  10.         "nickname": "lihua"
  11.     }
  12. }

失败响应：

  1. {
  3.     "code": 500,
  4.     "message": "用户名已存在"
  5. }

4. 登录

请求地址：http://localhost:8081/users/login

请求方法：POST

请求参数：



























参数名称 参数类型 是否必须 示例值 参数说明
username String 是 user-1 用户名
password String 是 pass-1 密码

请求示例：

  1. {
  3.     "username": "user2",
  4.     "password": "password2"
  5. }

成功响应：

  1. {
  3.     "code": 200,
  4.     "message": "登录成功",
  5.     "data": {
  7.         "password": "password2",
  8.         "nickname": "李四",
  9.         "id": 2,
  10.         "username": "user2"
  11.     }
  12. }

失败响应：

  1. {
  3.     "code": 401,
  4.     "message": "用户名或密码错误",
  5.     "data": null
  6. }

5. 新增用户

请求地址：http://localhost:8081/users/

请求方法：POST

请求参数：


































参数名称 参数类型 是否必须 示例值 参数说明
username String 是 user-12 用户名
password String 是 pass-12 密码
nickname String 否 小李 昵名

请求示例：

  1. {
  3.     "username": "user-12",
  4.     "password": "pass-12",
  5.     "nickname": "小李"
  6. }

成功响应：

  1. {
  3.     "code": 200,
  4.     "message": "新增成功",
  5.     "data": {
  7.         "id": 5,
  8.         "username": "user-12",
  9.         "password": "pass-12",
  10.         "nickname": "小李"
  11.     }
  12. }

失败响应：

  1. {
  3.     "code": 500,
  4.     "message": "新增失败"
  5. }

6. 更新用户信息

请求地址：http://localhost:8081/users/{id}

请求方法：PUT

请求路径参数：









































参数名称 参数类型 是否必须 示例值 参数说明
username String 否 user-12-update 用户名
password String 否 pass-12-update 密码
email String 否 user-12-update@example.com 邮箱
phone String 否 12345678901 手机号

请求示例：

  1. {
  3.     "username": "user-13",
  4.     "password": "pass-13",
  5.     "nickname": "小李"
  6. }

成功响应：

  1. {
  3.     "code": 200,
  4.     "message": "更新成功",
  5.     "data": {
  7.         "id": 1,
  8.         "username": "user-13",
  9.         "password": "pass-13",
  10.         "nickname": "小李"
  11.     }
  12. }

失败响应：

  1. {
  3.     "code": 500,
  4.     "message": "更新失败"
  5. }

7. 删除用户

请求地址：http://localhost:8081/users/{id}

请求方法：DELETE

请求路径参数：




















参数名称 参数类型 是否必须 示例值 参数说明
id Long 是 12 用户 ID

成功响应：

  1. {
  3.     "code": 200,
  4.     "message": "删除成功"
  5. }

失败响应：

  1. {
  3.     "code": 500,
  4.     "message": "删除失败"
  5. }

前端编写

在这里插入图片描述

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

页面编写

效果展示

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

文件目录

在这里插入图片描述

pages.json

在这里插入图片描述

manifest.json

  1. {
  3.   "name": "LoginAndRegister",
  4.   "appid" : "",
  5.   "description" : "",
  6.   "versionName" : "1.0.0",
  7.   "versionCode" : "100",
  8.   "transformPx" : false,
  9.   /* 5+App特有相关 */
  10.   "app-plus" : {
  12.       "usingComponents" : true,
  13.       "nvueStyleCompiler" : "uni-app",
  14.       "compilerVersion" : 3,
  15.       "splashscreen" : {
  17.           "alwaysShowBeforeRender" : true,
  18.           "waiting" : true,
  19.           "autoclose" : true,
  20.           "delay" : 0
  21.       },
  22.       /* 模块配置 */
  23.       "modules" : {
  24.     },
  25.       /* 应用发布信息 */
  26.       "distribute" : {
  28.           /* android打包配置 */
  29.           "android" : {
  31.               "permissions" : [
  32.                   "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
  33.                   "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
  34.                   "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
  35.                   "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
  36.                   "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
  37.                   "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
  38.                   "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
  39.                   "<uses-permission android:name=\"android.permission.CAMERA\"/>",
  40.                   "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
  41.                   "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
  42.                   "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
  43.                   "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
  44.                   "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
  45.                   "<uses-feature android:name=\"android.hardware.camera\"/>",
  46.                   "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
  47.               ]
  48.           },
  49.           /* ios打包配置 */
  50.           "ios" : {
  51.     },
  52.           /* SDK配置 */
  53.           "sdkConfigs" : {
  54.     }
  55.       }
  56.   },
  57.   /* 快应用特有相关 */
  58.   "quickapp" : {
  59.     },
  60.   /* 小程序特有相关 */
  61.   "mp-weixin" : {
  63.       "appid" : "",
  64.       "setting" : {
  66.           "urlCheck" : false
  67.       },
  68.       "usingComponents" : true
  69.   },
  70.   "mp-alipay" : {
  72.       "usingComponents" : true
  73.   },
  74.   "mp-baidu" : {
  76.       "usingComponents" : true
  77.   },
  78.   "mp-toutiao" : {
  80.       "usingComponents" : true
  81.   },
  82.   "uniStatistics" : {
  84.       "enable" : false
  85.   },
  86.   "vueVersion" : "2",
  87.           "h5" : {
  89.               "devServer" : {
  91.                    "port" : 8080, //浏览器运行端口
  92.                     "disableHostCheck" : true, //设置跳过host检查
  93.                     "proxy" : {
  95.                         "/api" : {
  97.                             "target" : "http://localhost:8081", //目标接口域名
  98.                              "changeOrigin" : true,  //是否跨域
  99.                              "secure" : false,  // 设置支持https协议的代理
  100.                                                "pathRewrite":{
  101.     "^/api":""}
  102.                        }
  103.                   }
  104.               }
  105.           }
  107. }

index.vue

  1. <template>
  2.     <view class="content">
  3.         <image class="logo" src="/static/logo.png"></image>
  4.         <view class="text-area">
  5.             <text class="title">{
  6.    {title}}</text>
  7.             <button @click="handleClick">点击我</button>
  8.         </view>
  9.     </view>
  10. </template>
  12. <script>
  13.     export default {
  15.         data() {
  17.             return {
  19.                 title: 'Hello'
  20.             }
  21.         },
  22.         onLoad() {
  25.         },
  26.         methods: {
  28.             handleClick() {
  30.                 console.log('您点击了该按钮！')
  31.             }
  32.         }
  33.     }
  34. </script>
  37. <style>
  38.     .content {
  40.         display: flex;
  41.         flex-direction: column;
  42.         align-items: center;
  43.         justify-content: center;
  44.     }
  46.     .logo {
  48.         height: 200rpx;
  49.         width: 200rpx;
  50.         margin-top: 200rpx;
  51.         margin-left: auto;
  52.         margin-right: auto;
  53.         margin-bottom: 50rpx;
  54.     }
  56.     .text-area {
  58.         display: flex;
  59.         justify-content: center;
  60.     }
  62.     .title {
  64.         font-size: 36rpx;
  65.         color: #8f8f94;
  66.     }
  67. </style>

login.vue

  1. <template>
  2.     <view class="login">
  3.         <image class="logo" src="/static/logo.png"></image>
  4.         <view class="input-item">
  5.             <input type="text" v-model="username" placeholder="请输入用户名">
  6.         </view>
  7.         <view class="input-item">
  8.             <input type="password" v-model="password" placeholder="请输入密码">
  9.         </view>
  10.         <button @click="login" class="login-btn">登录</button>
  11.         <button @click="goToRegister" class="register-btn">注册</button>
  12.     </view>
  13. </template>
  15. <script>
  16. import axios from 'axios'
  17. export default {
  19.   data() {
  21.     return {
  23.       username: '',
  24.       password: ''
  25.     }
  26.   },
  27.   methods: {
  29.     login() {
  32.       if (!this.username || !this.password) {
  34.         uni.showToast({
  36.           title: '请填写用户名和密码',
  37.           icon: 'none'
  38.         })
  39.         return
  40.       }
  41.       // 发送请求验证用户
  42.       axios.post('/api/users/login', {
  44.         username: this.username,
  45.         password: this.password
  46.       }).then(res => {
  48.         console.log(res.data.code)
  49.         if (res.data.code === 200) {
  51.           // 将用户信息保存到客户端本地缓存中
  52.           uni.setStorageSync('userInfo', {
  54.             id: res.data.data.id,
  55.             username: res.data.data.username,
  56.             password: res.data.data.password,
  57.             nickname: res.data.data.nickname
  58.           })
  60.           // 跳转到首页
  61.           uni.navigateTo({
  63.             url: '/pages/index/index'
  64.           })
  65.         } else {
  67.           uni.showToast({
  69.             title: res.data.message,
  70.             icon: 'none'
  71.           })
  72.         }
  73.       }).catch(err => {
  75.         uni.showToast({
  77.           title: '网络请求失败，请重试',
  78.           icon: 'none'
  79.         })
  80.       })
  81.     },
  82.     goToRegister() {
  84.       uni.navigateTo({
  86.         url: '/pages/register/register'
  87.       })
  88.     }
  89.   }
  90. }
  91. </script>
  92. <style scoped>
  93. .login {
  95.   display: flex;
  96.   flex-direction: column;
  97.   justify-content: center;
  98.   align-items: center;
  99.   margin-top: 100rpx;
  100. }
  102. .logo {
  104.   width: 200rpx;
  105.   height: 200rpx;
  106.   margin-bottom: 20rpx;
  107. }
  109. .login-form {
  111.   width: 90%;
  112.   padding: 40rpx;
  113.   background-color: #fff;
  114.   border-radius: 5rpx;
  115. }
  117. .input-item {
  119.   width: 80%;
  120.   margin: 10rpx 0;
  121.   border-bottom: 1rpx solid #ddd;
  122. }
  124. input {
  126.   width: 100%;
  127.   height: 50rpx;
  128.   padding: 10rpx;
  129.   font-size: 16rpx;
  130.   outline: none;
  131.   border: none;
  132. }
  134. .login-btn {
  136.   display: block;
  137.   margin: 30rpx auto 0;
  138.   width: 80%;
  139.   height: 80rpx;
  140.   line-height: 80rpx;
  141.   text-align: center;
  142.   background-color: #007aff;
  143.   color: #fff;
  144.   border-radius: 5rpx;
  145.   font-size: 20rpx;
  146. }
  148. .register-btn {
  150.   margin-top: 20rpx;
  151.   color: #007aff;
  152.   width: 60%;
  153.   height: 80rpx;
  154. }
  155. </style>

register.vue

  1. <template>
  2.   <view class="register">
  3.     <image class="logo" src="/static/logo.png"></image>
  4.     <form class="register-form">
  5.     <view class="input-item">
  6.       <input type="text" v-model="nickname" placeholder="请输入昵称">
  7.     </view>
  8.       <view class="input-item">
  9.         <input type="text" v-model="username" placeholder="请输入用户名">
  10.       </view>
  11.       <view class="input-item">
  12.         <input type="password" v-model="password" placeholder="请输入密码">
  13.       </view>
  14.       <view class="input-item">
  15.         <input type="password" v-model="confirmPassword" placeholder="请确认密码">
  16.       </view>
  18.       <button type="button" class="register-btn" @click="register">注册</button>
  19.     </form>
  20.     <button class="back-btn" @click="goBack">返回</button>
  21.   </view>
  22. </template>
  24. <script>
  25. import axios from 'axios';
  26. export default {
  28.   data() {
  30.     return {
  32.       username: '',
  33.       password: '',
  34.       confirmPassword: '',
  35.       nickname: ''
  36.     };
  37.   },
  38.   methods: {
  40.     async register() {
  42.       if(!this.username || !this.password || !this.nickname) {
  44.         uni.showToast({
  46.           title: '请填写完整信息',
  47.           icon: 'none'
  48.         });
  49.         return;
  50.       }
  52.       if(this.password !== this.confirmPassword) {
  54.         uni.showToast({
  56.           title: '两次输入密码不一致',
  57.           icon: 'none'
  58.         });
  59.         return;
  60.       }
  62.       try {
  64.         const response = await axios.post('/api/users/register', {
  66.           username: this.username,
  67.           password: this.password,
  68.           nickname: this.nickname
  69.         });
  71.         const responseData = response.data;
  72.         if(responseData.code === 200) {
  74.           uni.showToast({
  76.             title: responseData.message,
  77.             icon: 'success'
  78.           });
  79.           uni.navigateTo({
  81.             url: '/pages/login/login'
  82.           });
  83.         } else {
  85.           uni.showToast({
  87.             title: responseData.message,
  88.             icon: 'none'
  89.           });
  90.         }
  91.       } catch (error) {
  93.         let errorMessage = '注册失败，请稍后再试';
  94.         if(error.response) {
  96.           if(error.response.status === 500) {
  98.             errorMessage = error.response.data.message;
  99.           }
  100.         }
  102.         uni.showToast({
  104.           title: errorMessage,
  105.           icon: 'none'
  106.         });
  107.       }
  108.     },
  109.     goBack() {
  111.       uni.navigateBack();
  112.     }
  113.   }
  114. };
  115. </script>
  120. <style scoped>
  121. .register {
  123.   display: flex;
  124.   flex-direction: column;
  125.   justify-content: center;
  126.   align-items: center;
  127.   margin-top: 100rpx;
  128. }
  130. .logo {
  132.   width: 200rpx;
  133.   height: 200rpx;
  134.   margin-bottom: 20rpx;
  135. }
  137. .register-form {
  139.   width: 90%;
  140.   padding: 40rpx;
  141.   background-color: #fff;
  142.   border-radius: 5rpx;
  143. }
  145. .input-item {
  147.   margin: 10rpx 0;
  148.   border-bottom: 1rpx solid #ddd;
  149. }
  151. input {
  153.   width: 100%;
  154.   height: 50rpx;
  155.   padding: 10rpx;
  156.   font-size: 16rpx;
  157.   outline: none;
  158.   border: none;
  159. }
  161. .register-btn {
  163.   display: block;
  164.   margin: 30rpx auto 0;
  165.   width: 90%;
  166.   height: 80rpx;
  167.   line-height: 80rpx;
  168.   text-align: center;
  169.   background-color: #007aff;
  170.   color: #fff;
  171.   border-radius: 5rpx;
  172.   font-size: 20rpx;
  173. }
  175. .back-btn {
  177.   margin-top: 20rpx;
  178.   color: #007aff;
  179.   width: 60%;
  180.   height: 80rpx;
  181. }
  182. </style>

发表评论

表情：
评论列表 （有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读