Introduction to the separation of front and rear platforms of predecessors

Introduction to the development of front and rear platform separation

 

1. Big front end development

​ First of all, it should be clear , Now the front-end development is completely separated from the background , and Java Medium jsp And the c# Medium asp It doesn't matter . before , Traditional development uses jsp perhaps asp Development , I think Java As the leading factor of the . Now we advocate the complete separation of front and back offices , All major companies are implementing , Make front-end development more independent .

​ Therefore, it is much simpler for everyone to study background development or front-end development . Because technology is more centralized . You don't need to think too much , Just focus on your own learning direction .

​ Then someone will ask , How can a project be completed after the separation and development of the front desk . Of course , There will also be cross , In most cases, crossover only occurs during data interaction , For example , The front end wants to display all student information , The student information is stored in the database , How do we deal with it ？

• First ： Someone will tell the front and back developers what they need , Why show all student information , What information is displayed （ Field , such as ： full name , Gender , cell-phone number ）, At this time, the front end begins to draw table, Then set the table-header. Data can simulate .
• meanwhile , Background developers are not idle , They will design databases , Then write JDBC The code completes the database operation CURD operation , Finally through servlet/springmvc/struts2 etc. mvc Technology exposure interface
• When the background interface is exposed , At this time, the front end has data sources , Directly call the background interface to obtain student data , Then replace the data simulated by the table with the data obtained from the background

That is to say, to complete an enterprise level project , We need to maintain a team , In this team , A clear division of responsibilities , The front end is responsible for page display , The back end is responsible for data supply . Cooperate with each other .

Front end learning route

• The first stage 【 restructure 】

  Three elements of front end

  1. Html5（ Don't work api call , Such as dragging , canvas , Local storage, etc ）
  2. css3 （ Focus on learning box model , Layout （ Floating layout , Expansion box layout , Responsive layout ）, Animation ）
  3. Javascript Basics （ That is to say ECMAScript5, Focus on grammar , Regular expressions , function , data , Algorithm ,JS Object oriented, etc ）
  4. DOM ( Document object model )
  5. BOM ( Browser object model , The key is Ajax)

• The second stage 【DOM Drive frame 】

  This stage is the very basic framework learning of the front end

  1. jQuery （ Study jquery How to deal with DOM Of , Including how to package ajax）
  2. Bootstrap ( The simplest and most popular front-end component library , For quickly building responsive pages )
  3. Highcharts ( Data visualization framework , For chart display , Like a pie chart , Histogram , Broken line diagram , Spiders, etc )
  4. Animate.css ( classical CSS3 Animation library , It can easily realize animation without writing a lot of low-level code )
  5. FontAwesome/ IconFont （ Font Icon Library , Icons can be used just like Fonts ）
  6. axios( Pure ajax frame , although jquery There are also , But we use more axios)

• The third stage 【 Data driven framework 】（ Enterprise level framework stage ）

  So far, it's simple , Here comes the really complicated thing 、、、 If we use the traditional html/css/js Develop front-end code , Too tired , And teamwork is difficult , There is no concept of modularity . Now ECMAScript6 There is , That is to say ES6. But this version JS Many grammar browsers do not support , Who supports it ？NodeJS Support , All we can do is NodeJS In the development , Then after the development is completed ES6 Convert to ES5 Finally run on the browser . Toss around and return to html/css/js Yes .

  In order to develop efficient , We use ES6, In order for such code to run on browsers, we need to use a number of dazzling technologies ：

  1. ES6 （javascript Advanced version of , Contains classes , promise , Asynchronous functions and so on JS function ）

  2. babel ( Is used to ES6 Convert to ES5)

  3. webpack ( Building tools ,babel Can be integrated into webpack in )

  4. sass ( new generation css Development technology , Can be in sass Fast build in css Code . Of course, browsers do not support , have access to webpack Plug-ins in )​

This stage is also the most difficult , General learning Vue Series frame or react Series frame or Angular Series frame . These three series of frameworks provide core technologies , Routing solutions , State management solutions ,hybird app Solution , Common component libraries . General enterprise level development requirements react/vue/angular Just be familiar with one of them . Here I will focus on the first two learning routes

1. Vue (vue At the heart of )

2. VueRouter ( Routing management )

3. vuex ( Data state management )

4. Elementui（ Hungry? It's open source by the team VUE Component library ）

5. weex （ Alibaba team open source byhird app Solution , For utilization vue Technology development mobile phones APP）

Actually, that's all , Basically, it can meet the employment needs of most enterprises . Then some large companies use react, As a beginner, we only need to vue/react Choose a system to learn . Let's talk about react, His study is more difficult ：

1. react （react The core , Other modules depend on it , Be similar to vue）
2. react-dom ( Professional processing dom Of .vue Directly in vue Integration in the framework , Not listed separately )
3. react-router ( Routing management , Be similar to vue-router)
4. redux ( Data state management , Be similar to vuex, Some students may have heard of mobx And redux Similar but relatively simple )
5. redux-thunk/redux-saga (redux Encapsulation , Bottom redux It is relatively complicated to use , Choose one of these two frameworks )
6. react-native （ And weex similar , For developing mobile phones APP, But it will be more efficient ）
7. react-electron ( And electron Cooperate with the development of cross platform desktop applications )

• The fourth stage 【 Wechat development 】

  In fact, there is no need to learn much at this stage , Just use it directly

  1. WeChat official account
  2. Wechat applet 、 Alipay applet

• The fifth stage 【NodeJS】

  If the front is done, then you are basically the front-end God . But if you want to be a real architect , In addition to understanding the front end , Backstage must also know . But how can those who learn from the front learn from the back ？ Backstage is not Java/python/c#/php Did you do it , Ha , Tell you to put ,nodejs It's fine too , But this code must run in nodejs On , Instead of running on the browser

  1. NodeJS Built-in module （File,Http Equal module ）
  2. Express (mvc frame , Be similar to Java Medium servlet)
  3. Mysql ( Inside Mysql refer to nodeJS Medium mysql frame , Of course, you should study in advance Mysql This database )

Almost , If your pursuit of technology is endless , Then look at this time Java Learning real server development is not a bad thing . And then look at it Python, For example, I like to use Python To read some sensor data , To drive a hardware

 

2. JavaEE Enterprise development

Conventional JavaEE Enterprise level development is Java Mainly , Dynamic pages are also generally composed of Java Used by the Engineer JSP Technology to complete . But this development method has great disadvantages , Background engineers need to consider page layout , Such front-end technologies as style adjustment and even page optimization make it impossible for background engineers to really concentrate on background development （ For example, database operation , File operations ,excel Operation etc. ）, Besides , This kind of development efficiency is also very low , The later maintenance cost is also relatively high . Therefore, more and more companies adopt the method of completely separating the front and back platforms for development , In this mode , Backstage engineers only need to concentrate on dealing with backstage business , adopt swagger Expose the interface to the front end . Then the front end focuses on the page and user experience , adopt swagger To view the interfaces exposed in the background , And then through ajax To access these interfaces to obtain data , Then these data are dynamically displayed on the page .

So how to learn Java Technology ？

• The first stage 【Java Basics 】

1. Linux （ Tencent cloud registered student account , Purchase Tencent cloud server , install ubuntu Mirror image ）

2. CoreJava （ stay linux Complete under the operating system CoreJava Study , grammar , Array , object-oriented , aggregate , Threads ,IO, abnormal , Network programming ,Java8 New characteristics ）

3. XML （ master Java operation XML And parsing XML Technology SAX、DOM4J）

4. database ORACLE/MYSQL （ master DDL and DML That is, database definition language and database modification language ; The database can be operated through the terminal ）

5. JDBC （ Database connection technology ）

• The second stage 【JavaWeb Basics 】

1. Html /css （ Simple learning html Labels and CSS Selector and style , Just clarify its grammar ）

2. Servlet/jsp ( This is Javaweb Basics , Be sure to master http agreement ,request ,response Principle and api,session cookie Principle and Application )

3. Application of enterprise development tools （ Focus on mastering maven/git/github）

• The third stage 【 Enterprise level framework application 】

1. spring Basics （ Master dependency injection , Basic technology of aspect oriented programming ）

2. springboot ( master springboot How to create architecture projects )

3. springmvc （ be based on servlet Of mvc frame ）

4. mybatis (JDBC frame )

5. mybatis generator ( A framework for quickly generating code according to the database )

6. spring security (spring The authentication framework for )

7. swagger (API frame , Can be produced quickly swagger file , Facilitate the front and back data docking )

• The fourth stage 【 Microservice architecture 】

1. fastdfs ( Distributed image storage )
2. OAuth2 （ Authentication framework ）
3. rabbitmq （ Message queue ）
4. redis ( Data caching technology )
5. springcloud The overall solution of microservices