使用邮件验证码进行用户注册

.idea/compiler.xml

@@ -11,18 +11,20 @@
         <module name="sec-kill" />
         <module name="pay-service" />
         <module name="common" />
-        <module name="provider-goods-search" />
         <module name="provider-order-service" />
         <module name="web" />
         <module name="api-gateway" />
         <module name="user-service" />
         <module name="eureka-server" />
         <module name="provider-pay-service" />
+        <module name="goods-search" />
       </profile>
     </annotationProcessing>
     <bytecodeTargetLevel>
       <module name="goods-consumer" target="8" />
+      <module name="provider-goods-search" target="8" />
       <module name="user-consumer" target="8" />
+      <module name="web" target="8" />
     </bytecodeTargetLevel>
   </component>
 </project>

.idea/dataSources.xml

@@ -5,7 +5,7 @@
       <driver-ref>mysql.8</driver-ref>
       <synchronize>true</synchronize>
       <jdbc-driver>com.mysql.cj.jdbc.Driver</jdbc-driver>
-      <jdbc-url>jdbc:mysql://localhost:3308</jdbc-url>
+      <jdbc-url>jdbc:mysql://localhost:3306</jdbc-url>
       <working-dir>$ProjectFileDir$</working-dir>
     </data-source>
   </component>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/web/web.iml" filepath="$PROJECT_DIR$/web/web.iml" />
+    </modules>
+  </component>
+</project>

common/pom.xml

@@ -20,6 +20,40 @@
             <groupId>org.projectlombok</groupId>
             <artifactId>lombok</artifactId>
         </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-data-jpa</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>mysql</groupId>
+            <artifactId>mysql-connector-java</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>com.alibaba</groupId>
+            <artifactId>druid-spring-boot-starter</artifactId>
+        </dependency>
+
+
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-test</artifactId>
+            <scope>test</scope>
+            <exclusions>
+                <exclusion>
+                    <groupId>org.junit.vintage</groupId>
+                    <artifactId>junit-vintage-engine</artifactId>
+                </exclusion>
+            </exclusions>
+        </dependency>
+        <dependency>
+            <groupId>junit</groupId>
+            <artifactId>junit</artifactId>
+            <scope>test</scope>
+        </dependency>
     </dependencies>
 
 </project>

common/src/main/java/org/example/shop/CommonApplication.java

@@ -0,0 +1,11 @@
+package org.example.shop;
+
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+
+//@SpringBootApplication
+public class CommonApplication {
+    public static void main(String[] args) {
+        SpringApplication.run(CommonApplication.class,args);
+    }
+}

common/src/main/java/org/example/shop/dao/UserDao.java

@@ -0,0 +1,13 @@
+package org.example.shop.dao;
+
+import org.example.shop.pojo.UserInfo;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+/**
+ * 用户数据操作
+ */
+@Repository
+public interface UserDao extends JpaRepository<UserInfo, Integer> {
+    UserInfo findByUsername(String username);
+}

common/src/main/java/org/example/shop/pojo/UserInfo.java

@@ -0,0 +1,21 @@
+package org.example.shop.pojo;
+
+import lombok.Data;
+import lombok.ToString;
+import lombok.experimental.Accessors;
+
+import javax.persistence.*;
+
+@Data
+@Accessors(chain = true)
+@Entity
+@Table(name = "users") // 设置类对应的表名
+@ToString
+public class UserInfo {
+    @Id
+    @GeneratedValue(strategy= GenerationType.IDENTITY)
+    private Integer id;
+    private String username;
+    private String password;
+    private Integer status;
+}

common/src/main/java/org/example/shop/service/UserService.java

@@ -0,0 +1,19 @@
+package org.example.shop.service;
+
+import org.example.shop.pojo.UserInfo;
+
+public interface UserService {
+    /**
+     * 根据名称查询是否存在
+     * @param name
+     * @return
+     */
+    UserInfo findByName(String name);
+
+    /**
+     * 新增用户信息
+     * @param userInfo
+     * @return
+     */
+    UserInfo save(UserInfo userInfo);
+}

common/src/main/java/org/example/shop/service/UserServiceImpl.java

@@ -0,0 +1,30 @@
+package org.example.shop.service;
+
+import org.example.shop.dao.UserDao;
+import org.example.shop.pojo.UserInfo;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+@Service
+public class UserServiceImpl implements UserService {
+
+    private UserDao userDao;
+
+    @Autowired
+    public void setUserDao(UserDao userDao) {
+        this.userDao = userDao;
+    }
+
+    @Override
+    public UserInfo findByName(String name) {
+        return userDao.findByUsername(name);
+    }
+
+    @Override
+    public UserInfo save(UserInfo userInfo) {
+        if (findByName(userInfo.getUsername()) != null) {
+            throw new RuntimeException("用户名已经存在了");
+        }
+        return userDao.save(userInfo);
+    }
+}

common/src/main/resources/application.yaml

@@ -0,0 +1,15 @@
+server:
+    port: 9001
+spring:
+    datasource:
+        url: jdbc:mysql://localhost:3306/shop_demo
+        username: root
+        password: 123456
+        driver-class-name: com.mysql.cj.jdbc.Driver
+    jpa:
+        show-sql: true
+
+    redis: # redis的配置
+        database: 1
+        host: localhost
+        port: 6379

common/src/test/java/org/example/shop/UserServiceTest.java

@@ -0,0 +1,31 @@
+package org.example.shop;
+
+import org.example.shop.pojo.UserInfo;
+import org.example.shop.service.UserService;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.test.context.junit4.SpringRunner;
+import org.springframework.util.Assert;
+
+@SpringBootTest
+@RunWith(SpringRunner.class)
+public class UserServiceTest {
+
+    private UserService userService;
+
+    @Autowired
+    public void setUserService(UserService userService) {
+        this.userService = userService;
+    }
+
+    @Test
+    public void testFindUser() {
+        UserInfo zhangsan = userService.findByName("zhangsan");
+        Assert.notNull(zhangsan, "查找张三失败");
+        System.out.println(zhangsan);
+        UserInfo lisi = userService.findByName("lisi");
+        Assert.isNull(lisi, "李四应该未null");
+    }
+}

pom.xml

@@ -19,7 +19,6 @@
         <module>provider-goods-search</module>
         <module>provider-order-service</module>
         <module>provider-pay-service</module>
-        <module>web</module>
     </modules>
 
     <properties>

user-service/pom.xml

@@ -60,5 +60,13 @@
             <groupId>org.projectlombok</groupId>
             <artifactId>lombok</artifactId>
         </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-mail</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-data-redis</artifactId>
+        </dependency>
     </dependencies>
 </project>

user-service/reg.puml

@@ -0,0 +1,12 @@
+@startuml
+'https://plantuml.com/sequence-diagram
+actor User
+
+autonumber
+
+User -> Server: 获取验证码
+Server --> Mail: 服务将验证码发送到对应邮箱(服务需要保存code)
+User -> Mail: 接收验证码
+User -> Server: 使用用户名、密码和验证码进行注册(验证code)
+Server -> User: 注册结果
+@enduml

user-service/src/main/java/org/example/shop/config/RabbitConfig.java

@@ -9,6 +9,11 @@ import org.springframework.context.annotation.Configuration;
 
 @Configuration
 public class RabbitConfig {
+    /**
+     * 实际消费队列
+     *
+     * @return
+     */
     @Bean
     public Queue rabbitmqDemoDirectQueue() {
         /**
@@ -20,12 +25,22 @@ public class RabbitConfig {
         return new Queue(RabbitMQConfig.RABBITMQ_DEFAULT_TOPIC, true, false, false);
     }
 
+    /**
+     * 消息实际消费队列所绑定的交换机
+     *
+     * @return
+     */
     @Bean
     public DirectExchange rabbitmqDemoDirectExchange() {
         //Direct交换机
         return new DirectExchange(RabbitMQConfig.RABBITMQ_DEFAULT_DIRECT_EXCHANGE, true, false);
     }
 
+    /**
+     * 将消息队列绑定到交换机
+     *
+     * @return
+     */
     @Bean
     public Binding bindDirect() {
         //链式写法，绑定交换机和队列，并设置匹配键

user-service/src/main/java/org/example/shop/controller/UserController.java

@@ -0,0 +1,109 @@
+package org.example.shop.controller;
+
+import org.example.shop.pojo.UserInfo;
+import org.example.shop.service.MailService;
+import org.example.shop.service.UserService;
+import org.example.shop.vo.ApiResponse;
+import org.example.shop.vo.UserReg;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.data.redis.core.StringRedisTemplate;
+import org.springframework.util.StringUtils;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.Random;
+import java.util.concurrent.TimeUnit;
+
+@RestController
+@RequestMapping("/user")
+@CrossOrigin // 允许跨域
+public class UserController {
+    private UserService userService;
+    private MailService mailService;
+    private StringRedisTemplate stringRedisTemplate;
+
+    @Autowired
+    public void setUserService(UserService userService) {
+        this.userService = userService;
+    }
+
+    @Autowired
+    public void setMailService(MailService mailService) {
+        this.mailService = mailService;
+    }
+
+    @Autowired
+    public void setStringRedisTemplate(StringRedisTemplate stringRedisTemplate) {
+        this.stringRedisTemplate = stringRedisTemplate;
+    }
+
+    @GetMapping("/query")
+    public ApiResponse query(String name) {
+        UserInfo userInfo = userService.findByName(name);
+        if (null != userInfo) {
+            // 将密码职位null
+            userInfo.setPassword(null);
+        }
+        return new ApiResponse().setCode(0).setData(userInfo);
+    }
+
+    @GetMapping("/send-code")
+    public ApiResponse sendCode(String email) {
+        ApiResponse res = new ApiResponse().setCode(0);
+        if (StringUtils.isEmpty(email)) {
+            return res.setCode(1).setMessage("邮箱地址为空");
+        }
+        StringBuffer code = new StringBuffer();
+        Random r = new Random();
+        for (int i = 0; i < 6; i++) {
+            code.append(r.nextInt(10));
+        }
+        // 保存code到redis 过期时间设为 3min
+        stringRedisTemplate.opsForValue().set("code:" + email, code.toString(), 3, TimeUnit.MINUTES);
+
+        if (mailService.sendVerifyCode(email, code.toString())) {
+            return res;
+        }
+        return res.setCode(2).setMessage("发送邮件失败");
+    }
+
+    @PostMapping("/create-with-code")
+    public ApiResponse createWithCode(@RequestBody UserReg userReg) {
+        ApiResponse res = new ApiResponse().setCode(1);
+        if (StringUtils.isEmpty(userReg.getCode())) {
+            return res.setMessage("验证码为空");
+        }
+        if (StringUtils.isEmpty(userReg.getUsername()) || !StringUtils.hasLength(userReg.getPassword())) {
+            return res.setMessage("参数用户名和密码都允许为空");
+        }
+        // 验证 验证码是否正确
+        String code = stringRedisTemplate.opsForValue().get("code:" + userReg.getUsername());
+        if (code == null || !code.equals(userReg.getCode())) {
+            return res.setMessage("验证码不正确");
+        }
+        UserInfo userInfo = new UserInfo();
+        userInfo.setUsername(userReg.getUsername()).setPassword(userReg.getPassword());
+        userInfo = userService.save(userInfo);
+        if (null != userInfo) {
+            userInfo.setPassword(null);
+        }
+        return res.setCode(0).setData(userInfo);
+    }
+
+    @PostMapping("/create")
+    public ApiResponse create(@RequestBody UserReg userReg) {
+        ApiResponse res = new ApiResponse().setCode(1);
+        if (StringUtils.isEmpty(userReg.getUsername()) || !StringUtils.hasLength(userReg.getPassword())) {
+            return res.setMessage("参数用户名和密码都允许为空");
+        }
+        UserInfo userInfo = new UserInfo();
+        userInfo.setUsername(userReg.getUsername()).setPassword(userReg.getPassword());
+        userInfo.setStatus(1);
+        userInfo = userService.save(userInfo);
+        if (null != userInfo) {
+            userInfo.setPassword(null);
+        }
+        return res.setCode(0).setData(userInfo);
+    }
+
+
+}

user-service/src/main/java/org/example/shop/service/MailService.java

@@ -0,0 +1,5 @@
+package org.example.shop.service;
+
+public interface MailService {
+    boolean sendVerifyCode(String to,String code);
+}

user-service/src/main/java/org/example/shop/service/RabbitMQService.java

@@ -0,0 +1,11 @@
+package org.example.shop.service;
+
+public interface RabbitMQService {
+    /**
+     * 发送消息
+     *
+     * @param message
+     * @return
+     */
+    boolean sendMessage(String message,int delay);
+}

user-service/src/main/java/org/example/shop/service/impl/MailServiceImpl.java

@@ -0,0 +1,38 @@
+package org.example.shop.service.impl;
+
+import org.example.shop.service.MailService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.mail.MailException;
+import org.springframework.mail.SimpleMailMessage;
+import org.springframework.mail.javamail.JavaMailSender;
+import org.springframework.stereotype.Service;
+
+@Service
+public class MailServiceImpl implements MailService {
+    private JavaMailSender javaMailSender;
+    @Value("${spring.mail.from}")
+    private String from;
+
+    @Autowired
+    public void setJavaMailSender(JavaMailSender javaMailSender) {
+        this.javaMailSender = javaMailSender;
+    }
+
+    @Override
+    public boolean sendVerifyCode(String to, String code) {
+        SimpleMailMessage message = new SimpleMailMessage();
+        message.setFrom(from);//谁发的
+        message.setTo(to); //谁要接收
+        message.setSubject("验证码");//邮件标题
+        message.setText("当前的验证码为:" + code);//邮件内容
+        try {
+            // 发送邮件
+            javaMailSender.send(message);
+            return true;
+        } catch (MailException e) {
+            e.printStackTrace();
+        }
+        return false;
+    }
+}

user-service/src/main/java/org/example/shop/service/impl/RabbitMQServiceImpl.java

@@ -0,0 +1,54 @@
+package org.example.shop.service.impl;
+
+import org.example.shop.config.RabbitMQConfig;
+import org.example.shop.service.RabbitMQService;
+import org.springframework.amqp.AmqpException;
+import org.springframework.amqp.core.Message;
+import org.springframework.amqp.core.MessagePostProcessor;
+import org.springframework.amqp.rabbit.core.RabbitTemplate;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.text.SimpleDateFormat;
+import java.util.Date;
+import java.util.HashMap;
+import java.util.Map;
+import java.util.UUID;
+
+@Service
+public class RabbitMQServiceImpl implements RabbitMQService {
+
+    private RabbitTemplate rabbitTemplate;
+
+    @Autowired
+    public void setRabbitTemplate(RabbitTemplate rabbitTemplate) {
+        this.rabbitTemplate = rabbitTemplate;
+    }
+
+
+    @Override
+    public boolean sendMessage(String message, int delay) {
+        try {
+            String msgId = UUID.randomUUID().toString().replace("-", "").substring(0, 32);
+
+            Map<String, Object> map = new HashMap<>();
+            map.put("id", msgId);
+            map.put("sendTime", System.currentTimeMillis());
+            map.put("message", message);
+            // 发送
+            rabbitTemplate.convertAndSend(RabbitMQConfig.RABBITMQ_DEFAULT_DIRECT_EXCHANGE,
+                    RabbitMQConfig.RABBITMQ_DEFAULT_DIRECT_ROUTING, map, new MessagePostProcessor() {
+                        @Override
+                        public Message postProcessMessage(Message message) throws AmqpException {
+                            //给消息设置延迟毫秒值
+                            message.getMessageProperties().setExpiration(String.valueOf(delay));
+                            return message;
+                        }
+                    });
+            return true;
+        } catch (Exception e) {
+            e.printStackTrace();
+            return false;
+        }
+    }
+}

user-service/src/main/java/org/example/shop/vo/ApiResponse.java

@@ -0,0 +1,12 @@
+package org.example.shop.vo;
+
+import lombok.Data;
+import lombok.experimental.Accessors;
+
+@Data
+@Accessors(chain = true)
+public class ApiResponse {
+    private int code;
+    private String message;
+    private Object data;
+}

user-service/src/main/java/org/example/shop/vo/UserReg.java

@@ -0,0 +1,10 @@
+package org.example.shop.vo;
+
+import lombok.Data;
+
+@Data
+public class UserReg {
+    private String username;
+    private String password;
+    private String code;
+}

user-service/src/main/resources/application.yaml

@@ -0,0 +1,40 @@
+server:
+    port: 9001
+spring:
+    datasource:
+        url: jdbc:mysql://localhost:3306/shop_demo
+        username: root
+        password: 123456
+        driver-class-name: com.mysql.cj.jdbc.Driver
+    jpa:
+        show-sql: true
+    rabbitmq:
+        host: 127.0.0.1
+        port: 5672
+        username: client
+        password: 123123
+    redis: # redis的配置
+        database: 1
+        host: localhost
+        port: 6379
+# 配置邮件发送信息
+    mail:
+        # 填写邮箱供应的SMTP地址
+        # smtp.yandex.com
+        host: smtp.qq.com
+        # 用户名
+        username: 3094651170@qq.com
+        # 填写密码 / 授权码 Qw!212er
+        password: xotopefxpuytdghg
+        from: 3094651170@qq.com
+        port: 465
+        properties:
+            mail:
+                smtp:
+                    auth: true
+                    starttls:
+                        enable: true
+                    ssl:
+                        enable: true
+
+

user-service/src/test/java/org/example/shop/TestEmailSend.java

@@ -0,0 +1,26 @@
+package org.example.shop;
+
+import org.example.shop.service.MailService;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.test.context.junit4.SpringRunner;
+import org.springframework.util.Assert;
+
+@SpringBootTest
+@RunWith(SpringRunner.class)
+public class TestEmailSend {
+    private MailService mailService;
+
+    @Autowired
+    public void setMailService(MailService mailService) {
+        this.mailService = mailService;
+    }
+
+    @Test
+    public void testSend() {
+        boolean b = mailService.sendVerifyCode("yaclty@qq.com", "123323");
+        Assert.isTrue(b,"发送邮件失败");
+    }
+}

web/package-lock.json

@@ -8,6 +8,8 @@
       "name": "shop-web",
       "version": "0.0.0",
       "dependencies": {
+        "ant-design-vue": "^2.2.8",
+        "axios": "^0.23.0",
         "vue": "^3.2.16",
         "vue-router": "^4.0.12"
       },
@@ -20,6 +22,33 @@
         "vue-tsc": "^0.3.0"
       }
     },
+    "node_modules/@ant-design/colors": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npm.taobao.org/@ant-design/colors/download/@ant-design/colors-5.1.1.tgz",
+      "integrity": "sha1-gAshhrHifmZDLmfQPtlq8+IdiUA=",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.3.1"
+      }
+    },
+    "node_modules/@ant-design/icons-svg": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/download/@ant-design/icons-svg-4.2.1.tgz",
+      "integrity": "sha1-hjDajrRHGkqr2u19H/apfcss8Fo="
+    },
+    "node_modules/@ant-design/icons-vue": {
+      "version": "6.0.1",
+      "resolved": "https://registry.nlark.com/@ant-design/icons-vue/download/@ant-design/icons-vue-6.0.1.tgz",
+      "integrity": "sha1-nYBMPHTSz6+XyxjlgtO5QAk09f0=",
+      "dependencies": {
+        "@ant-design/colors": "^5.0.0",
+        "@ant-design/icons-svg": "^4.0.0",
+        "@types/lodash": "^4.14.165",
+        "lodash": "^4.17.15"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.3"
+      }
+    },
     "node_modules/@babel/helper-validator-identifier": {
       "version": "7.15.7",
       "resolved": "https://registry.nlark.com/@babel/helper-validator-identifier/download/@babel/helper-validator-identifier-7.15.7.tgz",
@@ -41,6 +70,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.15.4",
+      "resolved": "https://registry.nlark.com/@babel/runtime/download/@babel/runtime-7.15.4.tgz?cache=0&sync_timestamp=1630618785994&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.15.4.tgz",
+      "integrity": "sha1-/RfRa/34eObdAtGXU6OfqKjZyEo=",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/types": {
       "version": "7.15.6",
       "resolved": "https://registry.nlark.com/@babel/types/download/@babel/types-7.15.6.tgz",
@@ -54,6 +94,14 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npm.taobao.org/@ctrl/tinycolor/download/@ctrl/tinycolor-3.4.0.tgz",
+      "integrity": "sha1-w8WuVDyJfKqcKmhjC+01W+X5mQ8=",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@emmetio/abbreviation": {
       "version": "2.2.2",
       "resolved": "https://registry.nlark.com/@emmetio/abbreviation/download/@emmetio/abbreviation-2.2.2.tgz",
@@ -78,6 +126,15 @@
       "integrity": "sha1-Blsq9iM/50dNRII+PeuJckr0K18=",
       "dev": true
     },
+    "node_modules/@simonwep/pickr": {
+      "version": "1.8.2",
+      "resolved": "https://registry.nlark.com/@simonwep/pickr/download/@simonwep/pickr-1.8.2.tgz",
+      "integrity": "sha1-ltyGZ1lA18rWPWnCIIPdHLuXl8s=",
+      "dependencies": {
+        "core-js": "^3.15.1",
+        "nanopop": "^2.1.0"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "7.28.1",
       "resolved": "https://registry.npmmirror.com/@types/eslint/download/@types/eslint-7.28.1.tgz",
@@ -115,6 +172,12 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.176",
+      "resolved": "https://registry.npmmirror.com/@types/lodash/download/@types/lodash-4.14.176.tgz?cache=0&sync_timestamp=1634769339682&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Flodash%2Fdownload%2F%40types%2Flodash-4.14.176.tgz",
+      "integrity": "sha1-ZBFQ/BzaNvv6Mp3mA7uxddfuIMA=",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "16.11.1",
       "resolved": "https://registry.npmmirror.com/@types/node/download/@types/node-16.11.1.tgz?cache=0&sync_timestamp=1634443414534&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fnode%2Fdownload%2F%40types%2Fnode-16.11.1.tgz",
@@ -537,6 +600,38 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/ant-design-vue": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmmirror.com/ant-design-vue/download/ant-design-vue-2.2.8.tgz",
+      "integrity": "sha1-+ofPaELY7poNivOT/0CZ7MQHLys=",
+      "dependencies": {
+        "@ant-design/icons-vue": "^6.0.0",
+        "@babel/runtime": "^7.10.5",
+        "@simonwep/pickr": "~1.8.0",
+        "array-tree-filter": "^2.1.0",
+        "async-validator": "^3.3.0",
+        "dom-align": "^1.12.1",
+        "dom-scroll-into-view": "^2.0.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.15",
+        "moment": "^2.27.0",
+        "omit.js": "^2.0.0",
+        "resize-observer-polyfill": "^1.5.1",
+        "scroll-into-view-if-needed": "^2.2.25",
+        "shallow-equal": "^1.0.0",
+        "vue-types": "^3.0.0",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "@vue/compiler-sfc": ">=3.1.0",
+        "vue": ">=3.1.0"
+      }
+    },
+    "node_modules/array-tree-filter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.nlark.com/array-tree-filter/download/array-tree-filter-2.1.0.tgz",
+      "integrity": "sha1-hzrAD+yDdJ8lWsjdCDgUtPYykZA="
+    },
     "node_modules/asap": {
       "version": "2.0.6",
       "resolved": "https://registry.nlark.com/asap/download/asap-2.0.6.tgz",
@@ -549,6 +644,20 @@
       "integrity": "sha1-EfDjY78UYgX7CBk7XHuQ9NHPRP4=",
       "dev": true
     },
+    "node_modules/async-validator": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmmirror.com/async-validator/download/async-validator-3.5.2.tgz?cache=0&sync_timestamp=1634529574100&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fasync-validator%2Fdownload%2Fasync-validator-3.5.2.tgz",
+      "integrity": "sha1-aOhmqWgk6LJpT/eoMcGiXETV5QA="
+    },
+    "node_modules/axios": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmmirror.com/axios/download/axios-0.23.0.tgz?cache=0&sync_timestamp=1634053131158&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Faxios%2Fdownload%2Faxios-0.23.0.tgz",
+      "integrity": "sha1-sPpdCUio0ddePVY1I4tsRiWwUUk=",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "node_modules/babel-walk": {
       "version": "3.0.0-canary-5",
       "resolved": "https://registry.nlark.com/babel-walk/download/babel-walk-3.0.0-canary-5.tgz",
@@ -649,6 +758,11 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/compute-scroll-into-view": {
+      "version": "1.0.17",
+      "resolved": "https://registry.npm.taobao.org/compute-scroll-into-view/download/compute-scroll-into-view-1.0.17.tgz",
+      "integrity": "sha1-aojxis2dQunPS6pr7H4FImB6t6s="
+    },
     "node_modules/constantinople": {
       "version": "4.0.1",
       "resolved": "https://registry.nlark.com/constantinople/download/constantinople-4.0.1.tgz",
@@ -668,6 +782,17 @@
         "is-what": "^3.12.0"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.18.3",
+      "resolved": "https://registry.npmmirror.com/core-js/download/core-js-3.18.3.tgz?cache=0&sync_timestamp=1634062619940&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fcore-js%2Fdownload%2Fcore-js-3.18.3.tgz",
+      "integrity": "sha1-hqC7otjsPfhg/vzAeo0Rl3nwFQk=",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/csstype": {
       "version": "2.6.18",
       "resolved": "https://registry.nlark.com/csstype/download/csstype-2.6.18.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcsstype%2Fdownload%2Fcsstype-2.6.18.tgz",
@@ -689,6 +814,16 @@
       "integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=",
       "dev": true
     },
+    "node_modules/dom-align": {
+      "version": "1.12.2",
+      "resolved": "https://registry.nlark.com/dom-align/download/dom-align-1.12.2.tgz",
+      "integrity": "sha1-D4Fk69DJwhsMeQMQSTzYVYkqzUs="
+    },
+    "node_modules/dom-scroll-into-view": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npm.taobao.org/dom-scroll-into-view/download/dom-scroll-into-view-2.0.1.tgz",
+      "integrity": "sha1-DezIUigB/Y0/HGujVadNOCxfmJs="
+    },
     "node_modules/dom-serializer": {
       "version": "1.3.2",
       "resolved": "https://registry.nlark.com/dom-serializer/download/dom-serializer-1.3.2.tgz?cache=0&sync_timestamp=1621256858583&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdom-serializer%2Fdownload%2Fdom-serializer-1.3.2.tgz",
@@ -1161,6 +1296,14 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.14.4",
+      "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.4.tgz?cache=0&sync_timestamp=1631622534118&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.4.tgz",
+      "integrity": "sha1-g4/fSKi73XnlLuUfsclOPtmLk3k=",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npm.taobao.org/fsevents/download/fsevents-2.3.2.tgz",
@@ -1305,6 +1448,14 @@
         "object-assign": "^4.1.1"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npm.taobao.org/is-plain-object/download/is-plain-object-3.0.1.tgz",
+      "integrity": "sha1-Zi2S0kwKpDAkB7DUXSHyJRyF+Fs=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-promise": {
       "version": "2.2.2",
       "resolved": "https://registry.npm.taobao.org/is-promise/download/is-promise-2.2.2.tgz",
@@ -1352,6 +1503,11 @@
       "integrity": "sha1-Fzb939lyTyijaCrcYjCufk6Weds=",
       "dev": true
     },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.nlark.com/js-tokens/download/js-tokens-4.0.0.tgz?cache=0&sync_timestamp=1619345098261&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fjs-tokens%2Fdownload%2Fjs-tokens-4.0.0.tgz",
+      "integrity": "sha1-GSA/tZmR35jjoocFDUZHzerzJJk="
+    },
     "node_modules/json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/json-parse-better-errors/download/json-parse-better-errors-1.0.2.tgz",
@@ -1456,6 +1612,27 @@
         "node": ">=6.11.5"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.21.tgz?cache=0&sync_timestamp=1613835817439&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.21.tgz",
+      "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.nlark.com/lodash-es/download/lodash-es-4.17.21.tgz",
+      "integrity": "sha1-Q+YmxG5lkbd1C+srUBFzkMYJ4+4="
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.nlark.com/loose-envify/download/loose-envify-1.4.0.tgz",
+      "integrity": "sha1-ce5R+nvkyuwaY4OffmgtgTLTDK8=",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npm.taobao.org/lru-cache/download/lru-cache-6.0.0.tgz?cache=0&sync_timestamp=1615982572805&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flru-cache%2Fdownload%2Flru-cache-6.0.0.tgz",
@@ -1544,6 +1721,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.nlark.com/moment/download/moment-2.29.1.tgz",
+      "integrity": "sha1-sr52n6MZQL6e7qZGnAdeNQBvo9M=",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmmirror.com/ms/download/ms-2.1.3.tgz?cache=0&sync_timestamp=1632788512775&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fms%2Fdownload%2Fms-2.1.3.tgz",
@@ -1563,6 +1748,11 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/nanopop": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npm.taobao.org/nanopop/download/nanopop-2.1.0.tgz",
+      "integrity": "sha1-I0dlE87iQFiIr9LopLVAZrcLnmA="
+    },
     "node_modules/needle": {
       "version": "2.9.1",
       "resolved": "https://registry.nlark.com/needle/download/needle-2.9.1.tgz",
@@ -1605,6 +1795,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/omit.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npm.taobao.org/omit.js/download/omit.js-2.0.2.tgz",
+      "integrity": "sha1-3ZuENvq5R6Xz/yFMslOGMeMT7C8="
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.nlark.com/p-limit/download/p-limit-3.1.0.tgz?cache=0&sync_timestamp=1628812721654&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fp-limit%2Fdownload%2Fp-limit-3.1.0.tgz",
@@ -1827,12 +2022,22 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.nlark.com/regenerator-runtime/download/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha1-iSV0Kpj/2QgUmI11Zq0wyjsmO1I="
+    },
     "node_modules/request-light": {
       "version": "0.5.4",
       "resolved": "https://registry.npmmirror.com/request-light/download/request-light-0.5.4.tgz",
       "integrity": "sha1-SXqYxtiuSVNkF6Xi1/ODuTTz44w=",
       "dev": true
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
+    },
     "node_modules/resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.20.0.tgz",
@@ -1898,6 +2103,14 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/scroll-into-view-if-needed": {
+      "version": "2.2.28",
+      "resolved": "https://registry.nlark.com/scroll-into-view-if-needed/download/scroll-into-view-if-needed-2.2.28.tgz",
+      "integrity": "sha1-WhWy9YpSZCyIyOylhGROAXA9ZFo=",
+      "dependencies": {
+        "compute-scroll-into-view": "^1.0.17"
+      }
+    },
     "node_modules/semver": {
       "version": "7.3.5",
       "resolved": "https://registry.nlark.com/semver/download/semver-7.3.5.tgz?cache=0&sync_timestamp=1618847119601&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsemver%2Fdownload%2Fsemver-7.3.5.tgz",
@@ -1923,6 +2136,11 @@
         "randombytes": "^2.1.0"
       }
     },
+    "node_modules/shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npm.taobao.org/shallow-equal/download/shallow-equal-1.2.1.tgz",
+      "integrity": "sha1-TBar+lYEOqINBQMk76aJQLDaedo="
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.nlark.com/source-map/download/source-map-0.6.1.tgz",
@@ -2340,6 +2558,28 @@
         "typescript": "*"
       }
     },
+    "node_modules/vue-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/vue-types/download/vue-types-3.0.2.tgz?cache=0&sync_timestamp=1634179982853&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvue-types%2Fdownload%2Fvue-types-3.0.2.tgz",
+      "integrity": "sha1-7BbgXUEsA4Ji/B76TOuWR+f7YB0=",
+      "dependencies": {
+        "is-plain-object": "3.0.1"
+      },
+      "engines": {
+        "node": ">=10.15.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.nlark.com/warning/download/warning-4.0.3.tgz?cache=0&sync_timestamp=1624607899338&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwarning%2Fdownload%2Fwarning-4.0.3.tgz",
+      "integrity": "sha1-Fungd+uKhtavfWSqHgX9hbRnjKM=",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.2.0",
       "resolved": "https://registry.nlark.com/watchpack/download/watchpack-2.2.0.tgz",
@@ -2470,6 +2710,30 @@
     }
   },
   "dependencies": {
+    "@ant-design/colors": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npm.taobao.org/@ant-design/colors/download/@ant-design/colors-5.1.1.tgz",
+      "integrity": "sha1-gAshhrHifmZDLmfQPtlq8+IdiUA=",
+      "requires": {
+        "@ctrl/tinycolor": "^3.3.1"
+      }
+    },
+    "@ant-design/icons-svg": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/download/@ant-design/icons-svg-4.2.1.tgz",
+      "integrity": "sha1-hjDajrRHGkqr2u19H/apfcss8Fo="
+    },
+    "@ant-design/icons-vue": {
+      "version": "6.0.1",
+      "resolved": "https://registry.nlark.com/@ant-design/icons-vue/download/@ant-design/icons-vue-6.0.1.tgz",
+      "integrity": "sha1-nYBMPHTSz6+XyxjlgtO5QAk09f0=",
+      "requires": {
+        "@ant-design/colors": "^5.0.0",
+        "@ant-design/icons-svg": "^4.0.0",
+        "@types/lodash": "^4.14.165",
+        "lodash": "^4.17.15"
+      }
+    },
     "@babel/helper-validator-identifier": {
       "version": "7.15.7",
       "resolved": "https://registry.nlark.com/@babel/helper-validator-identifier/download/@babel/helper-validator-identifier-7.15.7.tgz",
@@ -2481,6 +2745,14 @@
       "resolved": "https://registry.npmmirror.com/@babel/parser/download/@babel/parser-7.15.8.tgz",
       "integrity": "sha1-e6zcvnG9w/+TbVEMFdzqfPC5kBY="
     },
+    "@babel/runtime": {
+      "version": "7.15.4",
+      "resolved": "https://registry.nlark.com/@babel/runtime/download/@babel/runtime-7.15.4.tgz?cache=0&sync_timestamp=1630618785994&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.15.4.tgz",
+      "integrity": "sha1-/RfRa/34eObdAtGXU6OfqKjZyEo=",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
     "@babel/types": {
       "version": "7.15.6",
       "resolved": "https://registry.nlark.com/@babel/types/download/@babel/types-7.15.6.tgz",
@@ -2491,6 +2763,11 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@ctrl/tinycolor": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npm.taobao.org/@ctrl/tinycolor/download/@ctrl/tinycolor-3.4.0.tgz",
+      "integrity": "sha1-w8WuVDyJfKqcKmhjC+01W+X5mQ8="
+    },
     "@emmetio/abbreviation": {
       "version": "2.2.2",
       "resolved": "https://registry.nlark.com/@emmetio/abbreviation/download/@emmetio/abbreviation-2.2.2.tgz",
@@ -2515,6 +2792,15 @@
       "integrity": "sha1-Blsq9iM/50dNRII+PeuJckr0K18=",
       "dev": true
     },
+    "@simonwep/pickr": {
+      "version": "1.8.2",
+      "resolved": "https://registry.nlark.com/@simonwep/pickr/download/@simonwep/pickr-1.8.2.tgz",
+      "integrity": "sha1-ltyGZ1lA18rWPWnCIIPdHLuXl8s=",
+      "requires": {
+        "core-js": "^3.15.1",
+        "nanopop": "^2.1.0"
+      }
+    },
     "@types/eslint": {
       "version": "7.28.1",
       "resolved": "https://registry.npmmirror.com/@types/eslint/download/@types/eslint-7.28.1.tgz",
@@ -2551,6 +2837,11 @@
       "dev": true,
       "peer": true
     },
+    "@types/lodash": {
+      "version": "4.14.176",
+      "resolved": "https://registry.npmmirror.com/@types/lodash/download/@types/lodash-4.14.176.tgz?cache=0&sync_timestamp=1634769339682&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Flodash%2Fdownload%2F%40types%2Flodash-4.14.176.tgz",
+      "integrity": "sha1-ZBFQ/BzaNvv6Mp3mA7uxddfuIMA="
+    },
     "@types/node": {
       "version": "16.11.1",
       "resolved": "https://registry.npmmirror.com/@types/node/download/@types/node-16.11.1.tgz?cache=0&sync_timestamp=1634443414534&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fnode%2Fdownload%2F%40types%2Fnode-16.11.1.tgz",
@@ -2945,6 +3236,34 @@
       "peer": true,
       "requires": {}
     },
+    "ant-design-vue": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmmirror.com/ant-design-vue/download/ant-design-vue-2.2.8.tgz",
+      "integrity": "sha1-+ofPaELY7poNivOT/0CZ7MQHLys=",
+      "requires": {
+        "@ant-design/icons-vue": "^6.0.0",
+        "@babel/runtime": "^7.10.5",
+        "@simonwep/pickr": "~1.8.0",
+        "array-tree-filter": "^2.1.0",
+        "async-validator": "^3.3.0",
+        "dom-align": "^1.12.1",
+        "dom-scroll-into-view": "^2.0.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.15",
+        "moment": "^2.27.0",
+        "omit.js": "^2.0.0",
+        "resize-observer-polyfill": "^1.5.1",
+        "scroll-into-view-if-needed": "^2.2.25",
+        "shallow-equal": "^1.0.0",
+        "vue-types": "^3.0.0",
+        "warning": "^4.0.0"
+      }
+    },
+    "array-tree-filter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.nlark.com/array-tree-filter/download/array-tree-filter-2.1.0.tgz",
+      "integrity": "sha1-hzrAD+yDdJ8lWsjdCDgUtPYykZA="
+    },
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.nlark.com/asap/download/asap-2.0.6.tgz",
@@ -2957,6 +3276,19 @@
       "integrity": "sha1-EfDjY78UYgX7CBk7XHuQ9NHPRP4=",
       "dev": true
     },
+    "async-validator": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmmirror.com/async-validator/download/async-validator-3.5.2.tgz?cache=0&sync_timestamp=1634529574100&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fasync-validator%2Fdownload%2Fasync-validator-3.5.2.tgz",
+      "integrity": "sha1-aOhmqWgk6LJpT/eoMcGiXETV5QA="
+    },
+    "axios": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmmirror.com/axios/download/axios-0.23.0.tgz?cache=0&sync_timestamp=1634053131158&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Faxios%2Fdownload%2Faxios-0.23.0.tgz",
+      "integrity": "sha1-sPpdCUio0ddePVY1I4tsRiWwUUk=",
+      "requires": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "babel-walk": {
       "version": "3.0.0-canary-5",
       "resolved": "https://registry.nlark.com/babel-walk/download/babel-walk-3.0.0-canary-5.tgz",
@@ -3036,6 +3368,11 @@
       "dev": true,
       "peer": true
     },
+    "compute-scroll-into-view": {
+      "version": "1.0.17",
+      "resolved": "https://registry.npm.taobao.org/compute-scroll-into-view/download/compute-scroll-into-view-1.0.17.tgz",
+      "integrity": "sha1-aojxis2dQunPS6pr7H4FImB6t6s="
+    },
     "constantinople": {
       "version": "4.0.1",
       "resolved": "https://registry.nlark.com/constantinople/download/constantinople-4.0.1.tgz",
@@ -3055,6 +3392,11 @@
         "is-what": "^3.12.0"
       }
     },
+    "core-js": {
+      "version": "3.18.3",
+      "resolved": "https://registry.npmmirror.com/core-js/download/core-js-3.18.3.tgz?cache=0&sync_timestamp=1634062619940&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fcore-js%2Fdownload%2Fcore-js-3.18.3.tgz",
+      "integrity": "sha1-hqC7otjsPfhg/vzAeo0Rl3nwFQk="
+    },
     "csstype": {
       "version": "2.6.18",
       "resolved": "https://registry.nlark.com/csstype/download/csstype-2.6.18.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcsstype%2Fdownload%2Fcsstype-2.6.18.tgz",
@@ -3076,6 +3418,16 @@
       "integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=",
       "dev": true
     },
+    "dom-align": {
+      "version": "1.12.2",
+      "resolved": "https://registry.nlark.com/dom-align/download/dom-align-1.12.2.tgz",
+      "integrity": "sha1-D4Fk69DJwhsMeQMQSTzYVYkqzUs="
+    },
+    "dom-scroll-into-view": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npm.taobao.org/dom-scroll-into-view/download/dom-scroll-into-view-2.0.1.tgz",
+      "integrity": "sha1-DezIUigB/Y0/HGujVadNOCxfmJs="
+    },
     "dom-serializer": {
       "version": "1.3.2",
       "resolved": "https://registry.nlark.com/dom-serializer/download/dom-serializer-1.3.2.tgz?cache=0&sync_timestamp=1621256858583&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdom-serializer%2Fdownload%2Fdom-serializer-1.3.2.tgz",
@@ -3378,6 +3730,11 @@
       "dev": true,
       "peer": true
     },
+    "follow-redirects": {
+      "version": "1.14.4",
+      "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.4.tgz?cache=0&sync_timestamp=1631622534118&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.4.tgz",
+      "integrity": "sha1-g4/fSKi73XnlLuUfsclOPtmLk3k="
+    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npm.taobao.org/fsevents/download/fsevents-2.3.2.tgz",
@@ -3494,6 +3851,11 @@
         "object-assign": "^4.1.1"
       }
     },
+    "is-plain-object": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npm.taobao.org/is-plain-object/download/is-plain-object-3.0.1.tgz",
+      "integrity": "sha1-Zi2S0kwKpDAkB7DUXSHyJRyF+Fs="
+    },
     "is-promise": {
       "version": "2.2.2",
       "resolved": "https://registry.npm.taobao.org/is-promise/download/is-promise-2.2.2.tgz",
@@ -3534,6 +3896,11 @@
       "integrity": "sha1-Fzb939lyTyijaCrcYjCufk6Weds=",
       "dev": true
     },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.nlark.com/js-tokens/download/js-tokens-4.0.0.tgz?cache=0&sync_timestamp=1619345098261&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fjs-tokens%2Fdownload%2Fjs-tokens-4.0.0.tgz",
+      "integrity": "sha1-GSA/tZmR35jjoocFDUZHzerzJJk="
+    },
     "json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/json-parse-better-errors/download/json-parse-better-errors-1.0.2.tgz",
@@ -3604,6 +3971,24 @@
       "dev": true,
       "peer": true
     },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.21.tgz?cache=0&sync_timestamp=1613835817439&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.21.tgz",
+      "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw="
+    },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.nlark.com/lodash-es/download/lodash-es-4.17.21.tgz",
+      "integrity": "sha1-Q+YmxG5lkbd1C+srUBFzkMYJ4+4="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.nlark.com/loose-envify/download/loose-envify-1.4.0.tgz",
+      "integrity": "sha1-ce5R+nvkyuwaY4OffmgtgTLTDK8=",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
     "lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npm.taobao.org/lru-cache/download/lru-cache-6.0.0.tgz?cache=0&sync_timestamp=1615982572805&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flru-cache%2Fdownload%2Flru-cache-6.0.0.tgz",
@@ -3672,6 +4057,11 @@
         "mime-db": "1.50.0"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.nlark.com/moment/download/moment-2.29.1.tgz",
+      "integrity": "sha1-sr52n6MZQL6e7qZGnAdeNQBvo9M="
+    },
     "ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmmirror.com/ms/download/ms-2.1.3.tgz?cache=0&sync_timestamp=1632788512775&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fms%2Fdownload%2Fms-2.1.3.tgz",
@@ -3684,6 +4074,11 @@
       "resolved": "https://registry.npmmirror.com/nanoid/download/nanoid-3.1.30.tgz?cache=0&sync_timestamp=1634166241996&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fnanoid%2Fdownload%2Fnanoid-3.1.30.tgz",
       "integrity": "sha1-Y/k8xUjSoRPcXfvGO/oJ4rm2Q2I="
     },
+    "nanopop": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npm.taobao.org/nanopop/download/nanopop-2.1.0.tgz",
+      "integrity": "sha1-I0dlE87iQFiIr9LopLVAZrcLnmA="
+    },
     "needle": {
       "version": "2.9.1",
       "resolved": "https://registry.nlark.com/needle/download/needle-2.9.1.tgz",
@@ -3716,6 +4111,11 @@
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
       "dev": true
     },
+    "omit.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npm.taobao.org/omit.js/download/omit.js-2.0.2.tgz",
+      "integrity": "sha1-3ZuENvq5R6Xz/yFMslOGMeMT7C8="
+    },
     "p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.nlark.com/p-limit/download/p-limit-3.1.0.tgz?cache=0&sync_timestamp=1628812721654&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fp-limit%2Fdownload%2Fp-limit-3.1.0.tgz",
@@ -3917,12 +4317,22 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.nlark.com/regenerator-runtime/download/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha1-iSV0Kpj/2QgUmI11Zq0wyjsmO1I="
+    },
     "request-light": {
       "version": "0.5.4",
       "resolved": "https://registry.npmmirror.com/request-light/download/request-light-0.5.4.tgz",
       "integrity": "sha1-SXqYxtiuSVNkF6Xi1/ODuTTz44w=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
+    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.20.0.tgz",
@@ -3975,6 +4385,14 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "scroll-into-view-if-needed": {
+      "version": "2.2.28",
+      "resolved": "https://registry.nlark.com/scroll-into-view-if-needed/download/scroll-into-view-if-needed-2.2.28.tgz",
+      "integrity": "sha1-WhWy9YpSZCyIyOylhGROAXA9ZFo=",
+      "requires": {
+        "compute-scroll-into-view": "^1.0.17"
+      }
+    },
     "semver": {
       "version": "7.3.5",
       "resolved": "https://registry.nlark.com/semver/download/semver-7.3.5.tgz?cache=0&sync_timestamp=1618847119601&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsemver%2Fdownload%2Fsemver-7.3.5.tgz",
@@ -3994,6 +4412,11 @@
         "randombytes": "^2.1.0"
       }
     },
+    "shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npm.taobao.org/shallow-equal/download/shallow-equal-1.2.1.tgz",
+      "integrity": "sha1-TBar+lYEOqINBQMk76aJQLDaedo="
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.nlark.com/source-map/download/source-map-0.6.1.tgz",
@@ -4317,6 +4740,22 @@
         "vscode-vue-languageservice": "^0.27.0"
       }
     },
+    "vue-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/vue-types/download/vue-types-3.0.2.tgz?cache=0&sync_timestamp=1634179982853&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvue-types%2Fdownload%2Fvue-types-3.0.2.tgz",
+      "integrity": "sha1-7BbgXUEsA4Ji/B76TOuWR+f7YB0=",
+      "requires": {
+        "is-plain-object": "3.0.1"
+      }
+    },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.nlark.com/warning/download/warning-4.0.3.tgz?cache=0&sync_timestamp=1624607899338&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwarning%2Fdownload%2Fwarning-4.0.3.tgz",
+      "integrity": "sha1-Fungd+uKhtavfWSqHgX9hbRnjKM=",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.2.0",
       "resolved": "https://registry.nlark.com/watchpack/download/watchpack-2.2.0.tgz",

web/package.json

@@ -7,6 +7,8 @@
     "serve": "vite preview"
   },
   "dependencies": {
+    "ant-design-vue": "^2.2.8",
+    "axios": "^0.23.0",
     "vue": "^3.2.16",
     "vue-router": "^4.0.12"
   },

web/src/App.vue

@@ -26,10 +26,5 @@ import HelloWorld from './components/HelloWorld.vue'
     color: #2c3e50;
     margin-top: 60px;
 }
-.a{
-    .b{
-        height: 200px;
-        background-color: #ff0;
-    }
-}
+
 </style>

web/src/main.ts

@@ -1,7 +1,12 @@
 import { createApp } from 'vue'
 import router from './routes'
+// 导入AntDesign库
+import AntD from 'ant-design-vue'
+import 'ant-design-vue/dist/antd.css'
 import App from './App.vue'
 
+
 const app = createApp(App) // 创建vue app
 app.use(router) // 使用路由
+app.use(AntD)
 app.mount('#app') // 将vue app绑定到index.html中的 div#app 元素上

web/src/pages/a.vue

@@ -1,10 +1,77 @@
 <template>
     <h1>首页 aaaaaaaaaaaa</h1>
+    <div style="width: 400px;margin:auto">
+        <a-form-item label="邮箱地址">
+            <a-input v-model:value="username"/>
+        </a-form-item>
+        <a-form-item label="密码">
+            <a-input v-model:value="password"/>
+        </a-form-item>
+        <a-form-item label="验证码">
+            <a-input v-model:value="code"/>
+            <a-button @click="sendCode" :loading="sendLoading">发送验证码</a-button>
+        </a-form-item>
+        <a-button @click="create">注册</a-button>
+    </div>
+
+
 </template>
 
 <script>
+import {message} from 'ant-design-vue'
+import axios from 'axios'
+
 export default {
-    name: "PageA"
+    name: "PageA",
+    data() {
+        return {
+            username: 'yaclty@qq.com',
+            password: '123123',
+            code: '983584',
+            sendLoading: false,
+            saveLoading: false
+        }
+    },
+    methods: {
+        sendCode() {
+            if (!this.username) {
+                message.info("邮箱地址不能为空")
+            } else {
+                this.sendLoading = true
+                fetch('http://localhost:9001/user/send-code?email=' + this.username)
+                    .then(res => res.json())
+                    .then(result => {//获取到结果
+                        if (result.code == 0) {
+                            message.info("发送验证码成功", 5)
+                        } else {
+                            message.error(result.message, 5)
+                        }
+                    })
+                    .catch(e => message.error(e.message, 5))
+                    .finally(() => this.sendLoading = false)
+            }
+        },
+        create() {
+            this.saveLoading = true
+            axios.post('http://localhost:9001/user/create-with-code', {
+                username: this.username,
+                password: this.password,
+                code: this.code
+            })
+                .then(function (response) {
+                    const result = response.data;
+                    if (result.code == 0) {
+                        message.info("注册成功", 5)
+                    } else {
+                        message.error("注册失败:" + result.message, 5)
+                    }
+                })
+                .catch(function (e) {
+                    message.error(e.message, 5)
+                })
+                .finally(() => this.saveLoading = false)
+        }
+    }
 }
 </script>