完成注册板块

README.md

@@ -1,8 +1,8 @@
-测试用
+## 项目说明
 
+本项目为安徽财经大学20届计算计科学与技术软件工程课程作业
 
-
+内容为商品订货系统开发
-测试分支功能
 
 
 
@@ -22,7 +22,16 @@
 
 前端：Vue3
 
-后端：SpringBoot2 + MybitsPlus + Maven
+后端：SpringBoot2 + MybaitsPlus  + Maven
 
 数据库：mysql8.0
 
+
+
+
+
+
+
+# 开发进度
+
+11月26日 完成注册功能

backend/pom.xml

@@ -51,37 +51,37 @@
             <version>3.5.3</version>
         </dependency>
 
-<!--        <dependency>-->
+        <dependency>
-<!--            <groupId>org.springframework.boot</groupId>-->
+            <groupId>org.springframework.boot</groupId>
-<!--            <artifactId>spring-boot-starter-security</artifactId>-->
+            <artifactId>spring-boot-starter-security</artifactId>
-<!--            <version>2.7.2</version>-->
+            <version>2.7.2</version>
-<!--        </dependency>-->
+        </dependency>
-
+
-<!--        <dependency>-->
+        <dependency>
-<!--            <groupId>io.jsonwebtoken</groupId>-->
+            <groupId>io.jsonwebtoken</groupId>
-<!--            <artifactId>jjwt-api</artifactId>-->
+            <artifactId>jjwt-api</artifactId>
-<!--            <version>0.11.5</version>-->
+            <version>0.11.5</version>
-<!--        </dependency>-->
+        </dependency>
-
+
-<!--        <dependency>-->
+        <dependency>
-<!--            <groupId>io.jsonwebtoken</groupId>-->
+            <groupId>io.jsonwebtoken</groupId>
-<!--            <artifactId>jjwt-impl</artifactId>-->
+            <artifactId>jjwt-impl</artifactId>
-<!--            <version>0.11.5</version>-->
+            <version>0.11.5</version>
-<!--            <scope>runtime</scope>-->
+            <scope>runtime</scope>
-<!--        </dependency>-->
+        </dependency>
-
+
-<!--        <dependency>-->
+        <dependency>
-<!--            <groupId>io.jsonwebtoken</groupId>-->
+            <groupId>io.jsonwebtoken</groupId>
-<!--            <artifactId>jjwt-jackson</artifactId>-->
+            <artifactId>jjwt-jackson</artifactId>
-<!--            <version>0.11.5</version>-->
+            <version>0.11.5</version>
-<!--            <scope>runtime</scope>-->
+            <scope>runtime</scope>
-<!--        </dependency>-->
+        </dependency>
-
+
-<!--        <dependency>-->
+        <dependency>
-<!--            <groupId>org.springframework.boot</groupId>-->
+            <groupId>org.springframework.boot</groupId>
-<!--            <artifactId>spring-boot-starter-websocket</artifactId>-->
+            <artifactId>spring-boot-starter-websocket</artifactId>
-<!--            <version>2.7.3</version>-->
+            <version>2.7.3</version>
-<!--        </dependency>-->
+        </dependency>
 
         <dependency>
             <groupId>com.alibaba</groupId>

backend/src/main/java/com/shangping/backend/config/SecurityConfig.java

@@ -1,5 +1,52 @@
 package com.shangping.backend.config;
 
-public class SecurityConfig {
+import com.shangping.backend.config.filter.JwtAuthenticationTokenFilter;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.http.HttpMethod;
+import org.springframework.security.authentication.AuthenticationManager;
+import org.springframework.security.config.annotation.web.builders.HttpSecurity;
+import org.springframework.security.config.annotation.web.builders.WebSecurity;
+import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
+import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
+import org.springframework.security.config.http.SessionCreationPolicy;
+import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
+import org.springframework.security.crypto.password.PasswordEncoder;
+import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
 
-}
+@Configuration
+@EnableWebSecurity
+public class SecurityConfig extends WebSecurityConfigurerAdapter {
+    @Autowired
+    private JwtAuthenticationTokenFilter jwtAuthenticationTokenFilter;
+
+    @Bean
+    public PasswordEncoder passwordEncoder() {
+        return new BCryptPasswordEncoder();
+    }
+
+    @Bean
+    @Override
+    public AuthenticationManager authenticationManagerBean() throws Exception {
+        return super.authenticationManagerBean();
+    }
+
+    @Override
+    protected void configure(HttpSecurity http) throws Exception {
+        http.csrf().disable()
+                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
+                .and()
+                .authorizeRequests()
+                .antMatchers("/user/token", "/user/register").permitAll()
+                .antMatchers("/pk/start/game/", "/pk/receive/bot/move/").hasIpAddress("127.0.0.1")
+                .antMatchers(HttpMethod.OPTIONS).permitAll()
+                .anyRequest().authenticated();
+
+        http.addFilterBefore(jwtAuthenticationTokenFilter, UsernamePasswordAuthenticationFilter.class);
+    }
+    @Override
+    public void configure(WebSecurity web) throws Exception {
+        web.ignoring().antMatchers("/websocket/**");
+    }
+}

backend/src/main/java/com/shangping/backend/config/filter/JwtAuthenticationTokenFilter.java

@@ -0,0 +1,61 @@
+package com.shangping.backend.config.filter;
+
+import com.shangping.backend.mapper.UserMapper;
+import com.shangping.backend.pojo.User;
+import com.shangping.backend.service.impl.utils.UserDetailsImpl;
+import com.shangping.backend.utils.JwtUtil;
+import io.jsonwebtoken.Claims;
+import org.jetbrains.annotations.NotNull;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.stereotype.Component;
+import org.springframework.util.StringUtils;
+import org.springframework.web.filter.OncePerRequestFilter;
+
+import javax.servlet.FilterChain;
+import javax.servlet.ServletException;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import java.io.IOException;
+
+@Component
+public class JwtAuthenticationTokenFilter extends OncePerRequestFilter {
+    @Autowired
+    private UserMapper userMapper;
+
+    @Override
+    protected void doFilterInternal(HttpServletRequest request, @NotNull HttpServletResponse response, @NotNull FilterChain filterChain) throws ServletException, IOException {
+        String token = request.getHeader("Authorization");
+
+        if (!StringUtils.hasText(token) || !token.startsWith("Bearer ")) {
+            filterChain.doFilter(request, response);
+            return;
+        }
+
+        token = token.substring(7);
+
+        String userid;
+
+        try {
+            Claims claims = JwtUtil.parseJWT(token);
+            userid = claims.getSubject();
+        } catch (Exception e) {
+            throw new RuntimeException(e);
+        }
+
+        User user = userMapper.selectById(Integer.parseInt(userid));
+
+        if (user == null) {
+            throw new RuntimeException("用户名未登录");
+        }
+
+        UserDetailsImpl loginUser = new UserDetailsImpl(user);
+        UsernamePasswordAuthenticationToken authenticationToken =
+                new UsernamePasswordAuthenticationToken(loginUser, null, null);
+
+        SecurityContextHolder.getContext().setAuthentication(authenticationToken);
+
+        filterChain.doFilter(request, response);
+    }
+}

backend/src/main/java/com/shangping/backend/controller/pk/IndexController.java

@@ -1,7 +1,5 @@
 package com.shangping.backend.controller.pk;
 
-import org.springframework.stereotype.Controller;
-import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 

backend/src/main/java/com/shangping/backend/controller/user/LoginController.java

@@ -0,0 +1,22 @@
+package com.shangping.backend.controller.user;
+
+import com.shangping.backend.service.user.LoginService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.Map;
+
+@RestController
+public class LoginController {
+    @Autowired
+    private LoginService loginService;
+
+    @PostMapping("/user/token/")
+    public Map<String, String> getToken(@RequestParam Map<String, String> map) {
+        String username = map.get("username");
+        String password = map.get("password");
+        return loginService.getToken(username, password);
+    }
+}

backend/src/main/java/com/shangping/backend/controller/user/RegisterController.java

@@ -0,0 +1,30 @@
+package com.shangping.backend.controller.user;
+
+import com.shangping.backend.service.user.RegisterService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.Map;
+
+@RestController
+public class RegisterController {
+    @Autowired
+    private RegisterService registerService;
+
+    @PostMapping("/user/register")
+    public Map<String, String> register(@RequestBody Map<String, String> map){
+
+        System.out.println("map: " + map);
+
+        String account = map.get("account");
+        String password = map.get("password");
+        String confirmedPassword = map.get("confirmedPassword");
+        String identity = map.get("identity");
+
+        return registerService.register(account, password, confirmedPassword, identity);
+    }
+}
+

backend/src/main/java/com/shangping/backend/mapper/InvoiceMapper.java

@@ -0,0 +1,4 @@
+package com.shangping.backend.mapper;
+
+public interface InvoiceMapper {
+}

backend/src/main/java/com/shangping/backend/mapper/OrderMapper.java

@@ -0,0 +1,4 @@
+package com.shangping.backend.mapper;
+
+public interface OrderMapper {
+}

backend/src/main/java/com/shangping/backend/mapper/ReimbursementMapper.java

@@ -0,0 +1,4 @@
+package com.shangping.backend.mapper;
+
+public interface ReimbursementMapper {
+}

backend/src/main/java/com/shangping/backend/mapper/StockMapper.java

@@ -0,0 +1,4 @@
+package com.shangping.backend.mapper;
+
+public interface StockMapper {
+}

backend/src/main/java/com/shangping/backend/mapper/UserMapper.java

@@ -0,0 +1,10 @@
+package com.shangping.backend.mapper;
+
+import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+import com.shangping.backend.pojo.User;
+import org.apache.ibatis.annotations.Mapper;
+
+@Mapper
+public interface UserMapper extends BaseMapper<User> {
+
+}

backend/src/main/java/com/shangping/backend/pojo/Invoice.java

@@ -0,0 +1,4 @@
+package com.shangping.backend.pojo;
+
+public class Invoice {
+}

backend/src/main/java/com/shangping/backend/pojo/Order.java

@@ -0,0 +1,4 @@
+package com.shangping.backend.pojo;
+
+public class Order {
+}

backend/src/main/java/com/shangping/backend/pojo/Reimbursement.java

@@ -0,0 +1,4 @@
+package com.shangping.backend.pojo;
+
+public class Reimbursement {
+}

backend/src/main/java/com/shangping/backend/pojo/Stock.java

@@ -0,0 +1,4 @@
+package com.shangping.backend.pojo;
+
+public class Stock {
+}

backend/src/main/java/com/shangping/backend/pojo/User.java

@@ -0,0 +1,16 @@
+package com.shangping.backend.pojo;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+public class User {
+    private String account;
+    private String nickname;
+    private String password;
+    private String identity;
+    private String photo;
+}

backend/src/main/java/com/shangping/backend/service/impl/user/LoginServiceImpl.java

@@ -0,0 +1,40 @@
+package com.shangping.backend.service.impl.user;
+
+import com.shangping.backend.pojo.User;
+import com.shangping.backend.service.impl.utils.UserDetailsImpl;
+import com.shangping.backend.service.user.LoginService;
+import com.shangping.backend.utils.JwtUtil;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.security.authentication.AuthenticationManager;
+import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
+import org.springframework.security.core.Authentication;
+import org.springframework.stereotype.Service;
+
+import java.util.HashMap;
+import java.util.Map;
+
+@Service
+public class LoginServiceImpl implements LoginService {
+    @Autowired
+    private AuthenticationManager authenticationManager;
+
+    @Override
+    public Map<String, String> getToken(String account, String password){
+        UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(account, password);
+
+        Authentication authenticate = authenticationManager.authenticate(authenticationToken); //登录失败会自动处理
+
+        UserDetailsImpl loginUser = (UserDetailsImpl) authenticate.getPrincipal();
+        User user = loginUser.getUser();
+
+        String jwt = JwtUtil.createJWT(user.getAccount().toString());
+
+        Map<String, String> map = new HashMap<>();
+        map.put("error_message", "success");
+        map.put("token", jwt);
+
+        return map;
+
+    }
+
+}

backend/src/main/java/com/shangping/backend/service/impl/user/RegisterServiceImpl.java

@@ -0,0 +1,84 @@
+package com.shangping.backend.service.impl.user;
+
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.shangping.backend.mapper.UserMapper;
+import com.shangping.backend.pojo.User;
+import com.shangping.backend.service.user.RegisterService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.security.crypto.password.PasswordEncoder;
+import org.springframework.stereotype.Service;
+
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+@Service
+public class RegisterServiceImpl implements RegisterService {
+    @Autowired
+    private UserMapper userMapper;
+
+    @Autowired
+    private PasswordEncoder passwordEncoder;
+
+    @Override
+    public Map<String, String> register(String account, String password, String confirmedpassword, String identity) {
+        Map<String, String> map = new HashMap<>();
+
+//        System.out.println("account_impl: " + account);
+//        System.out.println("password_impl: " + password);
+//        System.out.println("confirmedpassword_impl: " + confirmedpassword);
+//        System.out.println("identity_impl: " + identity);
+
+        if (account == null) {
+            map.put("error_message", "用户名不能为空");
+            return map;
+        }
+
+        if (password == null || confirmedpassword == null){
+            map.put("error_message", "密码不能为空");
+            return map;
+        }
+
+        account = account.trim();
+        if (account.length() == 0){
+            map.put("error_message", "用户名不能为空");
+            return map;
+        }
+
+        if (password.length() == 0 || confirmedpassword.length() == 0){
+            map.put("error_message", "密码不能为空");
+            return map;
+        }
+
+        if (account.length() > 20){
+            map.put("error_message", "用户名长度不能大于20");
+            return map;
+        }
+        if(password.length() > 10 ||confirmedpassword.length() > 10){
+            map.put("error_message", "密码长度不能大于10");
+            return map;
+        }
+
+        if (!password.equals(confirmedpassword)){
+            map.put("error_message", "两次输入的密码不一致");
+            return map;
+        }
+
+        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
+        queryWrapper.eq("account", account);
+        List<User> users = userMapper.selectList(queryWrapper);
+        if(!users.isEmpty()){
+            map.put("error_message", "用户名已存在");
+            return map;
+        }
+
+        String encodedPassword = passwordEncoder.encode(password);
+        String photo = "https://cdn.acwing.com/media/user/profile/photo/81680_lg_6a90272086.jpg";
+        String nickname = "用户" + account.toString();
+        User user = new User(account, nickname, encodedPassword, identity, photo);
+        userMapper.insert(user);
+        map.put("code", "200");
+        map.put("error_message", "success");
+        return map;
+    }
+}

backend/src/main/java/com/shangping/backend/service/impl/utils/UserDetailsImpl.java

@@ -0,0 +1,53 @@
+package com.shangping.backend.service.impl.utils;
+
+import com.shangping.backend.pojo.User;
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+import org.springframework.security.core.GrantedAuthority;
+import org.springframework.security.core.userdetails.UserDetails;
+
+import java.util.Collection;
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+public class UserDetailsImpl implements UserDetails {
+
+    private User user;
+
+    @Override
+    public Collection<? extends GrantedAuthority> getAuthorities() {
+        return null;
+    }
+
+    @Override
+    public String getPassword() {
+        return user.getPassword();
+    }
+
+    @Override
+    public String getUsername() {
+        return user.getAccount();
+    }
+
+    @Override
+    public boolean isAccountNonExpired() {
+        return true;
+    }
+
+    @Override
+    public boolean isAccountNonLocked() {
+        return true;
+    }
+
+    @Override
+    public boolean isCredentialsNonExpired() {
+        return true;
+    }
+
+    @Override
+    public boolean isEnabled() {
+        return true;
+    }
+}

backend/src/main/java/com/shangping/backend/service/user/LoginService.java

@@ -0,0 +1,7 @@
+package com.shangping.backend.service.user;
+
+import java.util.Map;
+
+public interface LoginService {
+    public Map<String, String> getToken(String account, String password);
+}

backend/src/main/java/com/shangping/backend/service/user/RegisterService.java

@@ -0,0 +1,8 @@
+package com.shangping.backend.service.user;
+
+import java.util.Map;
+
+public interface RegisterService {
+
+    public Map<String, String> register(String account, String password, String confirmedpassword, String indentity);
+}

backend/src/main/java/com/shangping/backend/utils/JwtUtil.java

@@ -0,0 +1,62 @@
+package com.shangping.backend.utils;
+
+import io.jsonwebtoken.Claims;
+import io.jsonwebtoken.JwtBuilder;
+import io.jsonwebtoken.Jwts;
+import io.jsonwebtoken.SignatureAlgorithm;
+import org.springframework.stereotype.Component;
+
+import javax.crypto.SecretKey;
+import javax.crypto.spec.SecretKeySpec;
+import java.util.Base64;
+import java.util.Date;
+import java.util.UUID;
+
+@Component
+public class JwtUtil {
+    public static final long JWT_TTL = 60 * 60 * 1000L * 24 * 14;  // 有效期14天
+    public static final String JWT_KEY = "SDFGjhdsfalshdfHFdsjkdsfds121232131afasdfac";
+
+    public static String getUUID() {
+        return UUID.randomUUID().toString().replaceAll("-", "");
+    }
+
+    public static String createJWT(String subject) {
+        JwtBuilder builder = getJwtBuilder(subject, null, getUUID());
+        return builder.compact();
+    }
+
+    private static JwtBuilder getJwtBuilder(String subject, Long ttlMillis, String uuid) {
+        SignatureAlgorithm signatureAlgorithm = SignatureAlgorithm.HS256;
+        SecretKey secretKey = generalKey();
+        long nowMillis = System.currentTimeMillis();
+        Date now = new Date(nowMillis);
+        if (ttlMillis == null) {
+            ttlMillis = JwtUtil.JWT_TTL;
+        }
+
+        long expMillis = nowMillis + ttlMillis;
+        Date expDate = new Date(expMillis);
+        return Jwts.builder()
+                .setId(uuid)
+                .setSubject(subject)
+                .setIssuer("sg")
+                .setIssuedAt(now)
+                .signWith(signatureAlgorithm, secretKey)
+                .setExpiration(expDate);
+    }
+
+    public static SecretKey generalKey() {
+        byte[] encodeKey = Base64.getDecoder().decode(JwtUtil.JWT_KEY);
+        return new SecretKeySpec(encodeKey, 0, encodeKey.length, "HmacSHA256");
+    }
+
+    public static Claims parseJWT(String jwt) throws Exception {
+        SecretKey secretKey = generalKey();
+        return Jwts.parserBuilder()
+                .setSigningKey(secretKey)
+                .build()
+                .parseClaimsJws(jwt)
+                .getBody();
+    }
+}

web/src/components/NavBar.vue

@@ -38,8 +38,6 @@ export default {
         const router = useRouter();
         const currentpage = router.currentRoute.value.name;
         store.commit("updatecurrentpage", currentpage);
-        console.log(currentpage)
-        console.log("store: ", store.state.currentpage)
 
         const theme1 = reactive({
             color: 'rgb(141, 139, 139)'

web/src/router/index.js

@@ -1,8 +1,12 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import LoginIndexView from "../views/LoginRegister/LoginIndexView.vue"
+import RegisterIndexView from "../views/LoginRegister/RegisterIndexView.vue"
+
 import HomeIndexView from '../views/home/HomeIndexView'
 import KucunIndexView from "../views/kucun/KucunIndexView.vue"
 import DinghuoIndexView from "../views/dinghuo/DinghuoIndexView.vue"
 
+
 import NotFound from '../views/error/NotFound'
 
 const routes = [
@@ -11,6 +15,16 @@ const routes = [
     name: 'home',
     redirect:"/home/",
   },
+  {
+    path:"/login",
+    name:"login_index",
+    component: LoginIndexView,
+  },
+  {
+    path: "/register",
+    name:"register_index",
+    component: RegisterIndexView,
+  },
   {
     path: "/home/",
     name: 'home_index',

web/src/views/LoginRegister/LoginIndexView.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="allpage">
+    <div class="motto">
+      <div>Think Different</div>
+      <div style="height:16px;"></div>
+      <div>Here's to the crazy ones.</div>
+      <div>The misfits.</div>
+      <div>The rebels.</div>
+      <div>The troublemakers.</div>
+      <div>The round pegs in the square holes.</div>
+      <div>The ones who see things differently.</div>
+      <div>They're not fond of rules </div>
+      <div>And they have no respect for the status quo.</div>
+      <div>You can praise them, quote them, disagree with them, disbelieve them, glorify or vilify them.</div>
+      <div>About the only thing that you can't do is ignore them.</div>
+      <div>Because they change things.</div>
+      <div>They invent. </div>
+      <div>They imagine. </div>
+      <div>They heal.</div>
+      <div>They explore.</div>
+      <div>They create.</div>
+      <div>They inspire.</div>
+      <div>They push the human race forward.</div>
+      <div>Maybe they have to be crazy.</div>
+      <div>How else can you stare at an empty canvas and see a work of art? Or sit in silence and hear a song that's never been written? </div>
+      <div>Or gaze at a red planet and see a laboratory on wheels?</div>
+      <div>We make tools for these kinds of people.</div>
+      <div>While some may see them as the crazy ones, we see genius.</div>
+      <div>Because the people who are crazy enough to think that they can change the world, are the ones who do.</div>
+      <div style="height:16px;"></div>
+      <div style="margin-left:350px"> Apple   --1997</div>
+    </div>
+
+    <div class="panel">
+      <div class="content">
+        <div class="switch">
+          <h1 id="login">登录</h1>
+        </div>
+
+        <form>
+          <div id="userName" class="input" aria-placeholder="用户名">
+            <input v-model="account" type="text" />
+          </div>
+          <div id="password" class="input" aria-placeholder="密码">
+            <input v-model="password" type="password" />
+          </div>
+
+          <p>
+            <router-link id="signUp" replace to="/register" class="input"
+              >注册</router-link
+            >>
+            <span>|</span>
+            <a id="forget" href="/index/Retrieve" class="input">忘记密码？</a>
+          </p>
+          <button class="button" @click.prevent="login">登录</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+export default {
+    setup(){
+      function login(){
+        axios({
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded",
+          },
+          method: "POST",
+          url: "http://127.0.0.1:3000/user/login/",
+          data: {
+            account: this.account,
+            password: this.password,
+          },
+        }).then((response) => {
+          if (response.data.code == 200) {
+            window.localStorage.setItem("aufelife_token",response.data.data.token);
+            window.localStorage.setItem("aufelife_account",response.data.account);
+            window.localStorage.setItem("aufelife_avatar",response.data.data.avatar);
+            window.localStorage.setItem("aufelife_username",response.data.data.username);
+            this.$router.push({
+              path: `/home/`,
+            });
+            location.reload(true);
+          } else {
+              this.account = "";
+              this.password = "";
+            console.log(response.data.error);
+          }
+        });
+
+      }
+
+
+      return{
+        account: "",
+        password: "",
+        login,
+      }
+    }
+
+
+
+};
+</script>
+
+<style scoped>
+.allpage {
+  width: 100%;
+  height: 100%;
+}
+.motto{
+  float: left;
+  width: 500px;
+  margin-left: 30px;
+  margin-top: 10px;
+  font-size: 16px;
+}
+.motto .span{
+  display: block;
+  margin-left: 20px;
+}
+
+.panel {
+  float: left;
+  margin-top: 250px;
+  margin-left: 250px;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  width: 400px;
+  padding: 40px;
+  box-sizing: border-box;
+  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+}
+
+.switch h1 {
+  text-align: center;
+  font-size: 1.4rem;
+  color: rgba(125, 116, 255, 0.8);
+  border-bottom: rgba(125, 116, 255, 0.8) solid 2px;
+  cursor: default;
+}
+
+.input input {
+  outline: none;
+  width: 100%;
+  border: none;
+  background: none;
+  border-bottom: 0.1rem solid #7d74ff;
+  color: rgba(37, 215, 202, 0.84);
+  font-size: 1rem;
+}
+
+.input::after {
+  content: attr(aria-placeholder);
+  position: absolute;
+  left: 0;
+  top: -20%;
+  font-size: 1.1rem;
+  color: rgba(125, 116, 255, 0.44);
+  transition: 0.3s;
+}
+
+.input.focus::after {
+  top: -70%;
+  font-size: 1rem;
+}
+
+.input#forget {
+  color: #7d74ff;
+  font-size: 0.8rem;
+  text-decoration: none;
+}
+
+.input#forget:hover {
+  color: rgba(138, 143, 255, 0.4);
+}
+
+.input#signUp {
+  color: #7d74ff;
+  font-size: 0.8rem;
+  text-decoration: none;
+}
+
+.input#signUp:hover {
+  color: rgba(138, 143, 255, 0.4);
+}
+
+form p {
+  text-align: center;
+}
+
+form span {
+  color: #7d74ff;
+  font-size: 0.8rem;
+  cursor: default;
+}
+
+form {
+  width: 12rem;
+  margin: 1rem 0 0;
+}
+
+form .input {
+  position: relative;
+  opacity: 1;
+  width: 100%;
+  margin: 2rem 0 0;
+  height: 42px;
+}
+
+form .input#userName {
+  margin: 3rem 0 0;
+}
+
+form .input#password {
+  height: 1.6rem;
+}
+
+form button {
+  display: block;
+  border: none;
+  outline: none;
+  margin: 2rem 61px 0;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: linear-gradient(90deg, #8a8fff, rgb(216, 174, 255));
+  box-shadow: 0 0 8px #8a8fff;
+  cursor: pointer;
+}
+
+form button:hover {
+  border: none;
+  outline: none;
+  margin: 2rem -7px 0;
+  width: 100%;
+  height: 3.5rem;
+  border-radius: 3rem;
+  background: linear-gradient(
+    90deg,
+    rgba(138, 143, 255, 0.75),
+    rgba(216, 174, 255, 0.75)
+  );
+  box-shadow: 0 0 8px #8a8fff;
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.6);
+  transition: 0.4s;
+}
+</style>

web/src/views/LoginRegister/RegisterIndexView.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="container">
+    <div class="panel">
+      <div class="content">
+
+        <div class="switch">
+          <h1 id="signUp">注册</h1>
+        </div>
+
+        <form>
+          <div id="userName" class="input" aria-placeholder="账号">
+            <input v-model="account" type="text" />
+          </div>
+          <div id="password" class="input" aria-placeholder="密码">
+            <input v-model="password_1" type="password" />
+          </div>
+          <div id="repeat" class="input" aria-placeholder="确认密码">
+            <input v-model="password_2" type="password" />
+          </div>
+
+          <router-link id="forget" replace to="/login" class="input">
+            <p>已有账户？点击登录</p>
+          </router-link>
+
+          <button @click="register" type="button">注册</button>
+        </form>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import router from '../../router'
+
+export default {
+    setup(){
+
+      function check(str){
+          if(str.length < 3 || str.length >10){
+            alert("账号建议使用3-12位的阿拉伯数字")
+            return false;
+          }
+          if (this.account === '' || this.password_1 === '' || this.password_2 === ''){
+            alert("账号或密码不能为空")
+            return false;
+          }
+          
+          for(let i = 0; i < str.length; i ++)
+            if(str[i] > '9' || str[i] < '0'){
+              alert("账号建议使用3-12位的阿拉伯数字")
+              return false;
+            }
+
+          return true;
+      }
+
+      function register(){
+
+        let state = false;
+        console.log("测试", this.account)
+        state = this.check(this.account);
+        console.log("状态", state)
+
+        if(state){
+          console.log("account", this.account)
+          console.log("password_1", this.password_1)
+          console.log("password_2", this.password_2)
+
+        axios({
+            header:{
+              'Content-Type':'application/x-www-form-urlencoded'
+            },
+            method: 'POST',
+            url: "http://127.0.0.1:3000/user/register",
+            data: {
+                'account': this.account,
+                'password': this.password_1,
+                'confirmedPassword': this.password_2,
+                'identity': "管理员",
+            }
+            }).then(response => {
+                if(response.data.code == 200){
+                    //  window.localStorage.setItem("account", response.data.account);
+                    //  window.localStorage.setItem("avatar", response.data.data.avatar);
+                    console.log(response)
+                    router.push({name:"home_index"});
+                    // location.reload(true);
+                }
+                else{
+                  this.account = "";
+                  this.password = "";
+                  console.log(response)
+                }
+            });
+        }
+
+      }
+
+
+
+
+      return{
+        account: '',
+        password_1:'',
+        password_2:'',
+        check,
+        register,
+      }
+
+    }
+
+
+
+};
+</script>
+
+<style scoped>
+.container {
+  margin-left: 550px;
+  position: relative;
+  width: 24rem;
+}
+
+.panel {
+  position: absolute;
+  top: 40%;
+  left: 55%;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  width: 400px;
+  padding: 40px;
+  box-sizing: border-box;
+  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+  margin-top: 300px;
+}
+
+.switch h1 {
+  text-align: center;
+  font-size: 1.4rem;
+  color: rgba(125, 116, 255, 0.8);
+  border-bottom: rgba(125, 116, 255, 0.8) solid 2px;
+  cursor: default;
+}
+
+.input input {
+  outline: none;
+  width: 100%;
+  border: none;
+  background: none;
+  border-bottom: 0.1rem solid #7d74ff;
+  color: rgba(37, 215, 202, 0.84);
+  font-size: 1rem;
+}
+
+.input::after {
+  content: attr(aria-placeholder);
+  position: absolute;
+  left: 0;
+  top: -20%;
+  font-size: 1.1rem;
+  color: rgba(125, 116, 255, 0.44);
+  transition: 0.3s;
+}
+
+.input.focus::after {
+  top: -70%;
+  font-size: 1rem;
+}
+
+.input#forget {
+  color: #7d74ff;
+  font-size: 0.8rem;
+  text-decoration: none;
+}
+
+.input#forget:hover {
+  color: rgba(138, 143, 255, 0.4);
+}
+
+.input#login {
+  color: #7d74ff;
+  font-size: 0.8rem;
+  text-decoration: none;
+}
+
+.input#login:hover {
+  color: rgba(138, 143, 255, 0.4);
+}
+
+form p {
+  text-align: center;
+}
+
+form span {
+  color: #7d74ff;
+  font-size: 0.8rem;
+  cursor: default;
+}
+
+form {
+  width: 12rem;
+  margin: 1rem 0 0;
+}
+
+form .input {
+  position: relative;
+  opacity: 1;
+  width: 100%;
+  margin: 2rem 0 0;
+  height: 42px;
+}
+
+form .input#userName {
+  margin: 3rem 0 0;
+}
+
+form .input#password {
+  height: 2rem;
+}
+
+form button {
+  display: block;
+  border: none;
+  outline: none;
+  margin: 2rem 61px 0;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: linear-gradient(90deg, #8a8fff, rgb(216, 174, 255));
+  box-shadow: 0 0 8px #8a8fff;
+  cursor: pointer;
+}
+
+form button:hover {
+  border: none;
+  outline: none;
+  margin: 2rem -7px 0;
+  width: 100%;
+  height: 3.5rem;
+  border-radius: 3rem;
+  background: linear-gradient(
+    90deg,
+    rgba(138, 143, 255, 0.75),
+    rgba(216, 174, 255, 0.75)
+  );
+  box-shadow: 0 0 8px #8a8fff;
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.6);
+  transition: 0.4s;
+}
+</style>