1、 summary

  • Vue ( pronunciation /vjuː/, Be similar to view) Is a set of incremental methods for building user interfaces JavaScript frame , Published on 2014 year 2 month .
  • Unlike other large frameworks ,Vue Designed to be applied layer by layer from the bottom up .
  • Vue The core library focuses only on the view layer , Convenient with third party libraries ( Such as :vue-router: Jump ,vue-resource: signal communication ,vuex: management ) Or integration of existing projects .

2、 Front end knowledge system

Want to be real “ Internet Java Full stack engineer ” There is a long way to go , Among them, the front end is a compulsory course that cannot be bypassed . The main purpose of this stage is to lead Java Background programmers know the front end 、 Understand the front end 、 Master the front end , To become “ Internet Java Full stack engineer ” Take it one step further .

2.1、 Three elements of front end

  • HTML( structure ): Hypertext markup language (Hyper Text Markup Language), Determine the structure and content of a web page
  • CSS( performance ): Cascading style sheets (Cascading Style Sheets), Set the presentation style of the web page .
  • JavaScript( Behavior ): Is a weakly typed scripting language , Its source code does not need to be compiled , It's interpreted and run by the browser , Used to control the behavior of web pages

2.2、 The structure layer (HTML)

2.3、 The presentation layer (CSS)

CSS Cascading style sheets is a markup language , It's not a programming language , So you can't customize variables , Can't quote, etc , In other words, it doesn't have any syntax support , Its main defects are as follows :

  • Grammar is not strong enough , For example, you can't nest writing , As a result, many repetitive selectors need to be written in modular development ;
  • There is no variable and reasonable style reuse mechanism , So that the logically related attribute values must be repeated in the form of literal quantity , Makes it difficult to maintain ;
  • As a result, we have increased a lot of workload in our work for no reason . To solve this problem , Front end developers use a method called **【CSS The preprocessor 】** Tools for , Provide CSS Missing style layer reuse mechanism 、 Reduce redundant code , Improve the maintainability of style code . Greatly improve the front-end development efficiency in style .

What is? CSS The preprocessor

CSS Preprocessor defines a new language , The basic idea is this , In a special programming language , by CSS Added some programming features , take CSS Generate files as targets , Then developers just need to use this language to do CSS Coding of . In plain English, it means “ In a special programming language , Conduct Web Page style design , And then through the compiler to normal CSS file , For project use ”.

frequently-used CSS What are the preprocessors

  • SASS: be based on Ruby , Through server processing , Powerful . The resolution efficiency is high . Need to learn Ruby Language , It's more difficult to get started than LESS.
  • LESS: be based on NodeJS, Through client processing , Easy to use . Functional ratio SASS Simple , The analytical efficiency is also lower than SASS, But it's enough in actual development , So if our back office staff need to , It is recommended to use LESS.

2.4、 Behavior layer (JavaScript)

  • JavaScript A weakly typed scripting language , The source code does not need to be compiled before it is sent to the client to run , Instead, it sends the character code in text format to the browser , Interpreted by the browser to run .
    Native Native JS Development
    Native JS Development , That is, let's follow 【ECMAScript】 Standard development methods , abbreviation ES, The feature is that all browsers support . So far ,ES Standard to be released in the following versions :

    The difference is to gradually add new features .

    TypeScript Microsoft standards

    • TypeScript Is a free and open source programming language developed by Microsoft . It is JavaScript A superset of , And it essentially adds optional static typing and class-based object-oriented programming to the language . By Anders · hejlsberg (C#、Delphi、TypeScript The father of ; .NET founder ) The dominant .

    • The characteristic of the language is that besides having ES There are many new features that are not in the scope of the standard , So many browsers can't support it directly TypeScript grammar , It needs to be compiled ( Translate it into JS) To be executed correctly by the browser .

    • ES3
    • ES4( Inside , Not officially released )
    • ES5( Full browser support )
    • ES6( Commonly used , Current mainstream version :webpack Package as ES5 Support )
    • ES7
    • ES8
    • ES9( Draft stage )

JavaScript frame

  • JQuery: You know JavaScript library , The advantage is that it simplifies DOM operation , Weakness is DOM Too often , Affect front end performance ; In the eyes of the front end, it's only used for compatibility IE6,7,8;
  • Angular:Google The front end framework of the acquisition , By a group of Java Programmer development , Its characteristic is that the backstage MVC Pattern moved to the front end and added the concept of modular development , Working with Microsoft , Adopted TypeScript Grammar development ; Friendly to back office programmers , Not very friendly to front end programmers ; The biggest drawback is that the version iteration is unreasonable ( Such as 1 generation –>2 generation , Except for the name , It's basically two things ; By the time I posted my blog, I had Angular6)
  • React:Facebook Produce , A high-performance JS The front frame ; It's characterized by new concepts 【 fictitious DOM】 Used to reduce real DOM operation , Simulate... In memory DOM operation , Effectively improve the front-end rendering efficiency ; The disadvantage is that it's complicated to use , Because you need to learn an extra course 【JSX】 Language ;
  • Vue: A progressive JavaScript frame , The so-called progressive means to gradually realize new features , Such as modular development 、 route 、 New features like state management . It is characterized by a combination of Angular( modularization ) and React( fictitious DOM) The advantages of ;
  • Axios: Front end communication framework ; because Vue The boundaries are clear , Just to deal with DOM, So they don't have the ability to communicate , At this point, you need to use an additional communication framework to interact with the server ; Of course, you can also choose to use jQuery Provided AJAX Communications functions ;

UI frame

  • Ant-Design: Produced by Alibaba , be based on React Of UI frame
  • ElementUI、iview、ice: Are you hungry , be based on Vue Of UI frame
  • BootStrap:Teitter Launched an open source toolkit for front-end development
  • AmazeUI: Also called “ sister UI”, a HTML5 Cross screen front frame

JavaScript Building tools

  • Babel:JS Compiler tools , It's mainly used for things that browsers don't support ES New characteristics , For example, for compiling TypeScript
  • WebPack: Module packer , The main function is to pack 、 Compress 、 Merge and load in order

2.5、 The three ends are the same

Hybrid development (Hybrid App)

The main purpose is to realize the unification of three ends of a set of code (PC、Android:.apk、iOS:.ipa) And can call the underlying hardware of the device ( Such as : sensor 、GPS、 Cameras, etc ), There are two main ways to pack :

  • Cloud packaging :HBuild -> HBuildX,DCloud Produce ;API Cloud
  • Local packaging : Cordova( Formerly known as PhoneGap)

Wechat applet

See wechat official website for details , Here is a convenient wechat app UI Development framework :WeUI

2.6、 back-end technology

In order to facilitate development, front-end staff also need to master certain back-end technology, but we Java The backstage staff know that the backstage knowledge system is extremely huge and complex , So in order to facilitate the front-end staff to develop background applications , And that's what happened Node JS Technology like this .

Node JS The author of has claimed to give up Node JS( It is said that the architecture is not well done, coupled with the cumbersome node modules, Maybe the author is upset ) Start developing new architecture De no

Since it's backstage Technology , It certainly needs frameworks and project management tools , Node JS The framework and project management tools are as follows :

  • Express:Node JS frame
  • Koa:Express Simplified edition
  • NPM: Integrated project management tools , Be similar to Maven
  • YARN:NPM alternatives , Be similar to Maven and Gradle The relationship between

2.7、 Mainstream front end framework



iview It's a powerful base on Vue Of UI library , There are many practical basic components than element ui The components are richer , Mainly for PC The middle and back products of the interface . Use single file Vue Component development model is based on npm+webpack+babel Development , Support ES 2015 High-quality 、 Feature rich and friendly API, Use space freely and flexibly .

  • Official website address
  • Github
  • iview-admin

remarks : Belongs to the front-end mainstream framework , It can be considered to use , The main feature is that the mobile terminal supports more

Element UI

Element Is the front-end open source maintenance hungry Vue UI Component library , The components are complete , It basically covers all the components needed in the background , The document is explained in detail , There are plenty of examples . Mainly used for development PC End page , It's a high quality Vue UI Component library .

  • Official website address
  • Github
  • vue-element-admin

remarks : Belongs to the front-end mainstream framework , It can be considered to use , The main feature is that the desktop side supports more


Feibing is based on React/Angular/Vue In the background application solutions , Inside Alibaba , There has been a 270 Many come from almost all BU The project is using . Flying ice contains a complete link from the design end to the development end , Help users quickly build their own background applications .

  • Official website address

  • Github

remarks : The main components are React Mainly , end 2019 year 02 month 17 Before I update my blog on Vue Our support is not perfect , It's still in the wait-and-see stage


Vant UI It's implemented by youzan front-end team based on the unified specification of youzan Vue Component library , Provides - A complete set of UI Basic and business components . adopt Vant, Can quickly build a unified style page , Improve development efficiency .

  • Official website address
  • Github


at-ui It's based on Vue 2.x The front end of the UI Component library , Mainly used for rapid development PC Website products . It provides a set of n pm+web pack+babel Front end development workflow , CSS The style is independent , Even with different frameworks, the implementation can be unified UI style .

  • Official website address
  • Github

Cube Ul

cube-ui It is based on Vue js Implementation of the elegant mobile component library . Support on-demand introduction and post compilation , Lightweight and flexible ; Extensibility is strong , It is convenient to realize secondary development based on existing components .

  • Official website address
  • Github

Hybrid development


Flutter It's the mobile end of Google UI frame , It can be built in a very short time Android and iOS High quality primary applications .Flutter Works with existing code , It's used by developers and organizations around the world , also Flutter It's free and open source .

  • Official website address
  • Github

remarks :Google Produce , The main feature is to quickly build native APP Applications , For mixed applications, the framework is required


lonic Is both a CSS The framework is also a Javascript UI library , lonic It is the most potential one at present HTML 5 Mobile application development framework . adopt SASS Building the application , It provides a lot of UI Components to help developers develop powerful applications . It USES JavaScript MV VM The framework and Angular JS/Vue To enhance the application . Provide two-way binding of data , Use it to become Web Common choice with mobile developers .

  • Official website address
  • Official document
  • Github

Wechat applet


mpvue It's a use developed by meituan Vue.js Develop a front-end framework for applets , At present, wechat applets are supported 、 Baidu smart applet , Headline applet and Alipay applet . Based on the framework of Vue.js, Modified runtime framework runtime And code compilers compiler Realization , Make it run in a small program environment , Thus, it introduces Vue.js Development experience .

  • Official website address
  • Git hub

remarks : complete Vue Development experience , Well and support multi platform small program development , Recommended


WeUI It is a set of basic style library consistent with wechat native visual experience , Designed by wechat official design team for wechat internal web pages and wechat small programs , Make the user's use perception more unified . contain button、cell、dialog、toast、article、icon All kinds of elements .

  • Official website address
  • Github

3、 Understand the history of the separation of the front and the back

Why do we need to separate front and back

3.1、 Back end oriented MVC Time

To reduce the complexity of development , The starting point is the back end , such as :Struts、Spring MVC And so on , It's the back end MVC Time ;
With SpringMVC Process as an example :

 Insert picture description here

  • Initiate request to front end controller (Dispatcher Servlet)
  • Front end controller request HandlerMapping lookup Handler, According to xml To configure 、 Annotation to find
  • Processor mapper HandlerMapping Return to the front controller Handler
  • The front-end controller calls the processor adapter to execute Handler
  • Processor adapter to execute Handler
  • Handler Execution complete returns... To the adapter ModelAndView
  • The processor adapter returns... To the front controller ModelAndView,ModelAndView yes SpringMvc One of the underlying objects of the framework , Include Model and View
  • The front-end controller requests the view parser to parse the view , Resolves to the real view according to the logical view name (JSP)
  • The view parser returns... To the front controller View
  • The front controller renders the view , View rendering will model data ( stay ModelAndView In the object ) Fill in request Domain
  • The front controller responds to the user's results


  • MVC It's a very good collaboration model , It can effectively reduce the coupling degree of code, and enable developers to understand where the code should be written from the perspective of architecture . In order to make View More pure , You can also use Thyme leaf、Frree marker And the template engine , Make it impossible to write in the template Java Code , Make the division of labor between the front end and the back end clearer .


  • Front end development relies heavily on development environment , Low development efficiency , Under this structure , There are two modes of front-end and back-end collaboration :
    • The first is front-end writing DEMO, After writing , Let the back end cover the template . The advantage is DEMO It can be developed locally , Very efficient . The disadvantage is that the back-end template is also needed , It's possible to get it wrong , It needs to be confirmed by the front end , It costs a lot to communicate back and forth ;
    • Another collaboration mode is that the front end is responsible for all the development of the browser side and the server side View Layer template development . The advantage is UI The relevant code is written by the front end , Don't pay too much attention to the back end , The disadvantage is that the front-end development is heavily bound to the back-end environment , Environment becomes an important factor affecting the efficiency of front-end development .
  • The responsibilities of the front and back are intertwined : The template engine is powerful , You can still implement various business logic through the context variables you get . such , As long as the front-end is a little weak , Often will be back-end requirements in the template layer to write a lot of business code , There is also a big gray area Controller, Page routing and other functions should be the most concerned of the front end , But it's implemented by the back end .Controller Nothing to do with Model Often also entangled , After reading the biting business code, it often appears in Controller layer . These problems can't all be attributed to the quality of programmers , otherwise JSP That's enough .
  • The limitations of the front end play : Performance optimization if only in the front-end space is very limited , So we often need back-end cooperation , But due to back-end framework limitations , It's hard for us to use 【Comet】、【Big Pipe】 Wait for technical solutions to optimize performance .

notes : in the meantime (2005 Years ago ) , Including the early JSP、PHP It can be called Web 1.0 Time . Here I want to say , If you are a Java beginner , Please don't take some old technology seriously any more , such as JSP, Because times are changing 、 Technology is changing 、 Everything is changing ( To quote Zuckerberg : The only constant is the change itself ); Contemporary college students are still learning some old things in the classroom and taking these knowledge as the focus , dried food , It's not , It can only be said that the dry goods in your cognition have long been out of date for the market

3.2、 be based on AJAX It brings SPA Time

Time to go back to 2005 year AJAX(Asynchronous JavaScript And XML, asynchronous JavaScript and XML, Old technology, new usage ) Was formally proposed and put into use CDN As a static resource store , And there it is JavaScript Return of the king ( before this JS It's all used to post dog skin plaster advertisements on the website ) Of SPA(Single Page Application) Single page application era .

 Insert picture description here

In this mode , ** The division of labor at the front and back is very clear , The key collaboration point at the front and back is AJAX Interface .** It looks so wonderful , But if you look back , This is related to JSP There is little difference in times . The complexity comes from the server side JSP Moved to the browser's JavaScript, The browser side becomes very complex . similar Spring MVC, In this era, the layered architecture of browser began to appear :

 Insert picture description here


  • Conventions of front and back interfaces : If the back-end interface is a mess , If the back-end business model is not stable enough , So front end development can be painful ; Many teams have tried to do the same , Through interface rules 、 Interface platform and so on . There are interface rules that precipitate with the backend , It can also be used to simulate data , So that the front and back end can achieve efficient parallel development after the interface is agreed .
  • Complexity control of front-end development :SPA Most applications are functional interactive ,JavaScript Code over 100000 lines is normal . A lot of JS Organization of code , And View Layer binding, etc , It's not easy .

3.3、 Front end oriented MVC Time

Here MVC The pattern is as follows :

  • MVC( Synchronous communication ) :Model、View、Controller
  • MVP( Asynchronous communication ) :Model、View、Presenter
  • MVVM( Asynchronous communication ):Model、View、View Model To reduce the complexity of front-end development , A lot of front-end frameworks have sprung up , such as :Angular JS、React、Vue.js、Ember JS etc. , The general principle of these frameworks is to stratify by type first , such as Templates、Controllers、Models, And then do the segmentation in the layer , Here's the picture :

 Insert picture description here


  • The front and back responsibilities are clear : The front end works on the browser side , The back end works on the server . Clear division of labor , You can make development parallel , Simulation of test data is not difficult , The front end can be developed locally . The back end can focus on the processing of business logic , Output RESTful Such as the interface .
  • The complexity of front end development is controllable : The front-end code is heavy , But reasonable stratification , Let the front-end code do its job . This one is very interesting , Simple as the selection of template features , There are a lot of things to pay attention to . It's not that the stronger the better , What limits , What freedom is left , How code should be organized , All this design , It takes the thickness of a book to explain .
  • Deployment is relatively independent : Can quickly improve the product experience


  • Code cannot be reused . For example, the back end still needs to do all kinds of verification on the data , Verification logic cannot reuse browser side code . If it can be reused , So the back-end data verification can be relatively simple .
  • The asynchronous , Yes SEO adverse . The server is often required to do synchronous rendering degradation scheme .
  • Performance is not the best , Especially in the mobile Internet environment .
  • SPA Can't meet all the needs , There are still a lot of multi page applications .URL Design Need back-end cooperation , The front end doesn't have full control .

3.4、Node JS The era of the whole stack

Front end oriented MVC Patterns solve a lot of problems , But as mentioned above , There are still many shortcomings . With Node JS The rise of , JavaScript Start to have the ability to run on the server . This means that there can be a new R & D model :

 Insert picture description here

In this R & D model , The responsibilities of the front and back end are clear . For the front end , Two UI Each layer performs its duties :

  • Front-end Ul layer Handle the presentation logic of the browser layer . adopt CSS Rendering style , adopt JavaScript Add interactive functions , HTML The generation of can also be put on this layer , See the application scenario .
  • Back-end Ul layer Processing route 、 Templates 、 Data acquisition 、Cookie etc. . By routing , The front end can finally control itself URL Design, In this way, whether it is a single page application or a multi page application , The front end can be adjusted freely . The back end can finally get rid of the strong focus on presentation , Instead, you can focus on the development of the business logic layer .

adopt Node, WebServer So are the layers JavaScript Code , This means that part of the code can be reused back and forth , need SEO The scene can be rendered synchronously on the server , The performance problems caused by too many asynchronous requests can also be alleviated by the server . Shortcomings of the former model , Almost all of them can be solved perfectly through this mode .

And JSP Compared to model , Full stack mode seems to be a return , It is indeed a return to the original development mode , It's just a spiral return .

be based on Node JS Full stack mode of , There are still many challenges :

  • We need the front end to have a further understanding of the server side programming . such as TCP/IP And so on network knowledge grasps .
  • Node JS Layer and Java Efficient communication between layers .Node JS In mode , All on the server side , RESTful HTTP Communication may not be efficient , adopt SOAP And so on . Everything needs to move forward in validation .
  • Yes, it is 、 Proficiency in operation and maintenance , Need more knowledge and practical experience .
  • A large number of problems left over by history, how to make the transition . It's probably the biggest resistance .
    notes : See here , I believe many students can understand , Why do I always say in class :“ It's hard for the front end to learn backstage , And it's easy for us back-end programmers to learn anything ”; It's because our back-end programmers have a relatively complete knowledge system .
  • The whole stack !So Easy!

3.5、 summary

in summary , The model is good , Technology , There is no difference between good and bad , Only fit not fit ; The development idea of separation of front and back is mainly based on Soc( The separation principle of attention ), The patterns above , It's all about making the responsibilities of the front and back more clear , Division of labor is more reasonable and efficient .