The first day of learning online (back-end development)

After learning the following technology stacks, you can
start learning in this project:

A brief introduction to the project

From the popularity of online education to today, there are various modes of online education, including: B2C, C2C, B2B2C and other business models. Xuecheng Online adopts a B2B2C business model , that is, it provides teaching services to enterprises or individual online education platforms. Teachers and students complete the entire teaching and learning process through the platform. Similar platforms in the market include: NetEase Cloud Classroom, Tencent Classroom, etc. The online feature is the online teaching of IT vocational courses.

​Xuecheng Online includes online education platform, business support system, and basic services to build the entire functional architecture .

Architecture Diagram:
Technology Stack List:

Module function list:

1. Online education platform

Function module name Function Description
portal Provide course learning entry on the home page, event page, special page and other pages.
Teaching management platform The entrance of the teaching institution login system, through which the data related to the courses in the institution are managed.
Operation platform Teachers log in to the Teaching Management Center to conduct teaching activities such as course management, resource management, and examination management.

2. Business system support

Function module name Function Description
Content Management System In content management, the courses, course plans, course teachers, and course marketing data of teaching institutions are managed
Teaching Management Center Manage and review the platform’s admission and teaching institution data, as well as the coursework designed in the course.
Learning centre Manage the record data of the students in the course.
social system Forum system, question and answer system, message system, comment system and other information management
Media Asset Management Manage the course streaming media resource data associated with the course plan (live broadcast, recorded broadcast).

3. Basic Services

Function module name Function Description
System Management Provide the basic data of the system to the Xuecheng online back-end service.
payment system Manage transaction history and order data for fee-based courses.
file service Manage file resources in the system, including course pictures, teacher pictures, etc.
Verification code service Generate the verification code in the system and send the verification code through the short message service, verify the verification code, etc.
Unified Authentication Service Manage all user resources in the system and provide authentication functions for user resources in the service
live video You need to use this service to play video resources during course study.

I will not introduce the rest of the flow chart and UML, and start the actual combat directly.

Environment construction

Import the linux image, and use the docker container to start the component:
Start nginx to import the front-end page:
In the configuration access host
front-end project, each page jump is composed of domain names. For convenience, you need to modify the host address of the machine.

Enter the C:\Windows\System32\drivers\etcdirectory and modify the hosts file. Add the following. Reminder: make a backup

#Portal domain name
127.0.0.1 www.xuecheng.com
#enterprise management background
127.0.0.1 admin.xuecheng.com
#Organization management background
127.0.0.1 manage.xuecheng.com

After the configuration is successful, open http://admin.xuecheng.com in the browser to enter the enterprise management background page

Back-end environment construction

The project is developed based on the front-end and back-end separation [architecture] . The front-end and back-end separation architecture generally includes front-end and server-side, usually multi-person collaborative development

  • Front-end and back-end separated development based on HTTP+JSON interaction

  • Specifications are defined through an interface document (API document)

  • The front-end and back-end define request and response data according to the document

Here we use the YAPI interface document management

Login function

Before writing code, we can recall how authentication was done in the past?
Yes, cookies or sessions, but for the front-end, there are mobile pages, h5 pages, and VUE pages. For mobile pages, there may be no session, so using these two to store login information and permission verification will not work
. Identity verification tool – JWT
small example:
first import dependencies:

<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt</artifactId>
    <version>0.9.1</version>
</dependency>

Test class:

@Test
public void testCreateToken() {
     //Generate token 
    //1 Prepare data 
    Map map = new HashMap();
    map.put("id",1);
    map.put( "mobile" , "13800138000" );
     //2 Generate token using JWT tool class 
    long now = System.currentTimeMillis();
    String token = Jwts.builder()
            .signWith(SignatureAlgorithm.HS512, "zjf" ) //Specify encryption algorithm.setClaims 
            (map) //Write 
            data.setExpiration( new Date(now + 30000 )) //Expiration time
            .compact();
    System.out.println(token);
}

//parse token

/**
 * SignatureException : token is invalid
 * ExpiredJwtException: token has expired
 */
@Test
public void testParseToken() {
    String token = "..." ; //This is replaced by the token printed in the above test 
    try {
        Claims claims = Jwts.parser()
                .setSigningKey("zjf")
                .parseClaimsJws(token)
                .getBody();
        Object id = claims.get("id");
        Object mobile = claims.get("mobile");
        System.out.println(id + "--" + mobile);
    }catch (ExpiredJwtException e) {
        System.out.println ( " token has expired" );
    }catch (SignatureException e) {System.out 
        .println ( "token is invalid" );
    }
}

After the basic introduction is completed, the login function is completed as follows:

Interface documentation:
Data table to be used: The
backend code shows:

web layer:

package com.xuecheng.system.controller;

import com.xuecheng.commons.model.dto.LoginDto;
import com.xuecheng.commons.model.vo.ResponseResult;
import com.xuecheng.system.service.UserService;
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.RestController;

@RestController
public class LoginController {
    @Autowired
    private UserService userService;

    @PostMapping("/login")
    public ResponseResult organizationLogin(@RequestBody LoginDto loginDto){
        return userService.organizationLogin(loginDto);
    }

}

service layer:

public interface UserService extends IService<User> {

    ResponseResult organizationLogin(LoginDto loginDto);
}

serviceImpl layer:

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

    @Autowired
    private UserMapper userMapper;

    @Override
    public ResponseResult organizationLogin(LoginDto loginDto) {
        if (StrUtil.isBlank(loginDto.getUsername())) {
            throw new BusinessException(ErrorCode.DATAERROR);
        }
        if (StrUtil.isBlank(loginDto.getPassword())) {
            throw new BusinessException(ErrorCode.DATAERROR);
        }
        if (StrUtil.isBlank(loginDto.getUtype())) {
            throw new BusinessException(ErrorCode.DATAERROR);
        }
        LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
        wrapper.eq(User::getPhone, loginDto.getUsername());
        wrapper.eq(User::getUtype, loginDto.getUtype());
        User user = userMapper.selectOne(wrapper);
        if (BeanUtil.isEmpty(user)){
            User u = new User();
            u.setPhone(loginDto.getUsername());
            u.setPassword(DigestUtil.md5Hex(loginDto.getPassword()));
            u.setUtype(loginDto.getUtype());
            userMapper.insert(u);
        }
        if (!StrUtil.equals(DigestUtil.md5Hex(loginDto.getPassword()), user.getPassword())) {
            throw new BusinessException(ErrorCode.LOGINERROR);
        }
        HashMap<String, Object> map = new HashMap<>();
        map.put("userId",user.getId());
        map.put("companyId",user.getCompanyId());
        map.put("companyName",user.getCompanyName());
        String token = JwtUtils.createToken(map, 180);

        LoginVo loginVo = new LoginVo();
        loginVo.setAccess_token(token);
        loginVo.setUsername(user.getPhone());

        return ResponseResult.okResult(loginVo);

    }
}

mapper layer:

public interface UserMapper extends BaseMapper<User> {

}

Build a gateway

Unified exception handling

package com.xuecheng.web.exception;


import com.xuecheng.commons.enums.ErrorCode;
import lombok.Data;

@Data
public class BusinessException extends RuntimeException{

    private ErrorCode errorCode;

    public BusinessException(ErrorCode errorCode) {
        super(errorCode.getDesc());
        this.errorCode = errorCode;
    }
}

package com.xuecheng.web.exception;

import com.xuecheng.commons.enums.ErrorCode;
import com.xuecheng.commons.model.vo.ResponseResult;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;

@RestControllerAdvice
public class GlobalException {
    @ExceptionHandler(RuntimeException.class)
    public ResponseResult exception(RuntimeException e){
         e.printStackTrace();
         return ResponseResult.errorResult(ErrorCode.ERROR);
    }

    @ExceptionHandler(BusinessException.class)
    public ResponseResult  BusinessException(BusinessException e){
        ErrorCode errorCode = e.getErrorCode();
        return ResponseResult.errorResult(errorCode);
    }
}

Result display:
successful login will enter the business page

Create git, use days as a branch, and submit it to gitee to practice git operations

First day mission completed

Leave a Comment

Your email address will not be published. Required fields are marked *