Vue + SpringCloud front and rear end separation project 3 months of actual project experience sharing

1. Separate the front and rear ends

Last year, the project of the project team was implemented by SpringMVC+Dwz. Due to the increase of business, such a SpringMVC project has become very bloated. Once a problem occurs, the service will crash, which is too flexible. At the beginning of this year, in order to adapt to the development of the company’s business, the company’s senior management decided to restructure the project and adopt the front and back end separation. Today I’m going to start with the back-end development.

The benefits at the front and back end are obvious:

1. Front-end JS can do a large part of the data processing work, reducing the pressure on the server to the minimum.

2. Background errors are not directly reflected to the foreground.

3. The development difficulty can be reduced to the greatest extent if the front and back offices do their respective duties.

2. Technology stack

  1. SpringBoot: A new framework from the Pivotal team designed to simplify the initial setup and development process for new Spring applications. The framework uses a specific way to configure so that developers no longer need to define boilerplate configurations.
  2. SpringCloud: Is an ordered collection of frameworks. It takes advantage of the development convenience of Spring Boot to subtly simplify the development of distributed system infrastructure, such as service discovery registry, configuration center, message bus, load balancing, circuit breakers, data monitoring, etc., which can be started and deployed with one click using Spring Boot’s development style.
  3. Docker: is an open source application container engine that allows developers to package their applications and dependencies into portable containers and distribute them to any popular Linux machine, as well as virtualization. Containers are completely sandboxed and have no interface with each other.
  4. Jenkins: A popular continuous integration tool. Continuous integration is the integration of multiple software functions into one piece of software, or the combination of software parts.
  5. RabbitMQ: An open source message broker and queue server for sharing data between disparate applications over a common protocol, or simply queuing jobs for distributed servers to process.
  6. Redis is an open source, high-performance key-value database.

3. Back-end project summary

  1. Project microservices four basic services, the other is business services.

Eurake: Mainly responsible for registration and discovery of services.

Admin: authenticates users and generates user tokens.

System: basic System data service.

Zuul: network management service.

2. Independently developed springBoot project

While completing the business functions, the project also has swagger (a framework of API documents) built in to facilitate the debugging of front and back interfaces.

  1. Interservice invocation

    We use Feign to make inter-service calls. It only needs to create an interface and configure it with annotations to complete the interface binding to the service provider, which greatly simplifies the amount of code development. Other methods have restTemplates as well.

  2. Continuous integration tool Jenkins

    Project team members submitted the code to GitLab, Jenkins detected the code update, and it would be automatically packaged and deployed. The project realizes deployment automation and reduces labor costs.

  3. Distributed transaction

    The core function of LCN distributed transaction framework is to coordinate and control local transactions. The framework itself does not create transactions, but only coordinate and control local transactions.

  4. SpringBoot project architecture optimization

    As some services need to provide multiple call interfaces externally, our group leader made some improvements to the micro-service. Split a springBoot project into three modules: Entity, Server, and Client. Entity is the entity, server is the business logic, and client is FeignClient. Other services need to invoke the interface of the service, and only need to reference entity and client in the POM. There is no need to define entities and FeignClients in their own microservices to decouple calls between services.

  5. Use RabbitMQ to record logs

    RabbitMQ is a type of messaging middleware that implements AMQP (Advanced Message Queuing Protocol). RabbitMQ is mainly used in the project for logging.

  6. Use the new Java8 syntax

    Some new Java8 syntax has been used in springBoot project development, such as lambda expressions, Steam,Optional, method references, date handling, etc.

  7. In the pit of

1. The inter-service invocation cannot be invoked

When we needed to debug a microservice, we registered our microservice on the Eurake service of the development test environment, but the service we registered was often automatically inaccessible. Add a URL attribute to the FeignClient annotation to specify the service address. Example: @feignClient (name = “test-client”, URL = “api.github.com”)

2.FeiginClient implements the file upload function

As far as the service provider is concerned, you need to add Consumes. @postmapping (value = “/uploadFile”, Consumes = MediaType.MULTIPART_FORM_DATA_VALUE), as far as the service provider is concerned. The consumer of the service needs to add the SpringFormEncoder coder to FeignClient. Add the following code:

@Configuration
    class MultipartSupportConfig {
        @Bean
        public Encoder feignFormEncoder() {
            returnnew SpringFormEncoder(); }}Copy the code

3. Specify the database dialect

Automatic generation of paging queries using Mybitas Plus can be problematic if the database dialect is not specified.

4. The difference between the date type and time is 8 hours

The reason is that the foreground passes UTC time, UTC + time zone difference = local time. There are two backend solutions: use Java8’s LocalDateTime type, or use Date with an annotation @jsonFormat (pattern=” YYYY-MM-DD “,timezone=”GMT+8”) on the property.

5. Conclusion

I was excited to start the project with a new architecture, using the popular Vue front end and SpringBoot convenience back end. I do Java development, the back end for me is no problem. But the front end felt a little difficult, because at that time, we decided to separate the front end from the back end. We didn’t have a front end yet, so it felt very empty.

With the support of the company, we had a three-person front-end development team in the first two weeks of development, and then we went into the crazy coding phase. The project team is all young people, we for a common goal, common struggle, beyond the self. From the beginning of not confident, slowly towards confidence. Although has been working overtime, but also has been growing, young should suffer!

I have been so busy that I have no time to summarize. Today I will sort it out. The article is mainly about my personal experiences and thoughts. There are a lot of potholes in front and back end separation projects. We can discuss those potholes that you have encountered in project development.

Restless ape man
Continuous technology sharing!