Download: SpringBoot+Uniapp real development of the new imitation jitter short video App "tiktok"

Why use SpringBoot+Uniapp development

Prestige ❤ Exchange and learn together with itspcool

I believe that for a Java back-end development, there should be no doubt about the selection of the technology stack at the back-end and the front-end of the management platform, which is the current mainstream.
As for why wechat applet development based on vue chose Uniapp instead of frameworks such as wechat native, mpvue and vant, I can only say that the problem of not rich components is not very friendly to a half hanging front-end user, let alone rapid development. It can be said that I hate to meet each other late when I met such a magic thing as uni app when I was confused, The following text will prove through practice that Uniapp is by no means a false name.

In fact, wechat applet development does not need to tangle with using a specific framework. It is good to directly introduce which component is easy to use. It can also be described as "a great achievement in the world". In short, it is good for yourself.

Analyze the underlying principle of Uniapp multi terminal development

In fact, the bottom layer of uni app probably integrates three technologies, namely mpvue framework, vue syntax and native applet syntax, so its bottom principle is also based on the above three frameworks.

vue files are different from applet directory structure files. Therefore, uni app divides the original vue files into four files for applet development, which is compatible with the advantages of vue in data binding. Because the syntax of the original applet does not support two-way data binding, uni app realizes the application of two-way data binding through a runtime method with the help of vue.

The data rendering and processing are also optimized accordingly. When updating data, the native applet updates too frequently and makes too many method calls, so it has a high performance loss. Therefore, the underlying layer of uni app also uses the vue mechanism to update the page with one call.

SpringBoot+Uniapp real development project "imitation tiktok short video App"

SpringBoot wechat authorized login to the authentication center

private Result handleForWxAppAuth(Principal principal, Map<String, String> parameters) throws WxErrorException, HttpRequestMethodNotSupportedException {

        String code = parameters.get("code");
        if (StrUtil.isBlank(code)) {
            throw new BizException("code Cannot be empty");
        }

        WxMaJscode2SessionResult session = wxService.getUserService().getSessionInfo(code);
        String openid = session.getOpenid();
        String sessionKey = session.getSessionKey();

        Result<MemberDTO> result = remoteUmsMemberService.loadMemberByOpenid(openid);
        if (!ResultCode.SUCCESS.getCode().equals(result.getCode())) {
            throw new BizException("Failed to get member information");
        }
        MemberDTO memberDTO = result.getData();
        String username;
        if (memberDTO == null) { // Register a member when the wechat authorized login member information does not exist
            String encryptedData = parameters.get("encryptedData");
            String iv = parameters.get("iv");

            WxMaUserInfo userInfo = wxService.getUserService().getUserInfo(sessionKey, encryptedData, iv);
            if (userInfo == null) {
                throw new BizException("Failed to get user information");
            }
            UmsMember member = new UmsMember()
                    .setNickname(userInfo.getNickName())
                    .setAvatar(userInfo.getAvatarUrl())
                    .setGender(Integer.valueOf(userInfo.getGender()))
                    .setOpenid(openid)
                    .setUsername(openid) 
                    .setPassword(passwordEncoder.encode(openid).replace(AuthConstants.BCRYPT, Strings.EMPTY)) // Encryption password remove prefix encryption method {bcrypt}
                    .setStatus(Constants.STATUS_NORMAL_VALUE);

            Result res = remoteUmsMemberService.add(member);
            if (!ResultCode.SUCCESS.getCode().equals(res.getCode())) {
                throw new BizException("Failed to register member");
            }
            username = openid;
        } else {
            username = memberDTO.getUsername();
        }

        // The oauth2 authentication parameter corresponds to the username and password information of the registered member when authorized to log in, simulating the password Mode authentication through oauth2
        parameters.put("username", username);
        parameters.put("password", username);

        OAuth2AccessToken oAuth2AccessToken = tokenEndpoint.postAccessToken(principal, parameters).getBody();
        Oauth2Token oauth2Token = Oauth2Token.builder()
                .token(oAuth2AccessToken.getValue())
                .refreshToken(oAuth2AccessToken.getRefreshToken().getValue())
                .expiresIn(oAuth2AccessToken.getExpiresIn())
                .build();
        return Result.success(oauth2Token);

    }

. . .