Vue+ElementUI+Springboot에 대한 기본 지식은 무엇입니까?

1. 옛날 웹

Backend

(1) 처음에는 웹 백엔드가 기본적으로 HTML에 삽입하기 매우 편리한 스크립트 언어인 PHP로 작성되었습니다.

(2) 그러다가 Java가 탄력을 받기 시작했고 JSP+Servlet이 주류가 되었습니다.

(3) Java가 냄새가 나고 길다는 것을 알았기 때문에 일반적으로 사용되는 몇 가지 아이디어를 클래스로 캡슐화하기 시작했고 Spring은 성장하여 AOP 측면과 IoC 제어 반전이라는 두 가지 핵심 개념을 갖게 되었습니다. 이 두 가지 아이디어는 단순히 무적입니다.

AOP: 예를 들어, 우리 프로그램의 모든 곳에서 예외가 발생할 수 있습니다. 과거에는 모든 곳에서 try and catch가 필요했는데 이는 매우 번거롭고 사후 처리도 비슷했습니다. 웹의 종료를 가로채는 측면이 있으면 모든 트래픽이 이 측면을 통과하게 됩니다. 일단 예외가 가로채서 발생하면 해당 오류 코드가 반환됩니다. 이런 방식으로 많은 곳에서 예외만 발생하면 됩니다. 코드는 말할 것도 없고 예외 처리 방법도 통일되어 있습니다. 이것은 AOP의 가장 간단한 응용 프로그램입니다.

IoC: Spring은 인스턴스화해야 하는 모든 클래스에 대해 Bean이라고 하는 새 객체를 생성하는 컨테이너 개념을 제공합니다(Wandou의 이 사이트와 유사). 클래스 A에 클래스 B가 필요할 때 관리되는 클래스 B 객체. 이 웹사이트처럼 클래스 A에 주입됩니다. 이렇게 하면 클래스 간의 결합이 분리됩니다. 원하는 것은 무엇이든 얻을 수 있습니다. 클래스 A를 얻으면 클래스 A의 생성자에 대해 걱정할 필요가 없습니다. B. 클래스 C... 물론 클래스 사이에는 실제로 많은 복잡한 참조 관계가 있으며 인스턴스화 순서와 종속성 순환 예외는 Spring에서 관리할 수 있습니다.

(4) 사람들이 계속 게으르게 되면서 Spring XML은 더 이상 작성하고 싶지 않아 "Convention is great than Configuration"이라는 슬로건이 탄생했습니다. 변경 필요 pom을 직접 참조하려면 이를 사용하면 됩니다. 변경하려면 application.yml 파일에서 선택적 매개변수만 구성하면 됩니다. 더 깊게 사용자 정의하려면 작성하면 됩니다. config bean. 모두 config bean과 application.yml이 모두 자동으로 주입됩니다. 클래스 이름이 무엇인지, ID가 무엇인지, 초기화 방법 등을 알려주기 위해 XML을 작성할 필요가 없습니다. Jetbrains의 IDEA 통합 개발 환경을 사용하면 Java 작성이 매우 간단해지고 코딩량이 줄어들며 유지 관리가 쉬워집니다.

(5) 미래: 틀림없이 바둑의 세계가 될 것입니다.

Front-end

(1) 초기: HTML+CSS+JS, 3대 왕

(2) JS로는 내 욕구를 충족시킬 수 없다는 것을 알고, 좀 더 편리한 스크립트를 개발하고 싶어서 Jquery가 왔습니다. 밖으로.

HTML에는 반복문이 너무 많기 때문에 JSP와 같은 프론트엔드와 백엔드 결합 언어가 등장했습니다. Thymeleaf는 여전히 Springboot에서 사용할 수 있으며 백엔드 개발자에게 프런트엔드 초보자에게 특별히 소개된 도구를 제공합니다.

프론트엔드 전문가들은 프런트엔드 임계값이 너무 낮다는 사실을 발견하고 "컴포넌트" 사고를 사용하여 중복 코드를 관리하고 임계값을 높였습니다. 예를 들어 HTML+CSS+JS를 사용하여 드디어 아주 아름다운 테이블을 작성했는데, 사용할 때마다 코드를 조금 변경하면 복사된 부분을 모두 변경해야 합니다. 이 테이블이 구성 요소인 경우 이를 참조한 다음 데이터를 전달하기만 하면 자동으로 HTML로 렌더링되고 관련 CSS 및 JS를 참조할 수 있습니다. 게다가 어떤 브라우저가 호환되는지 매번 고민해야 하는 번거로움이 있는데, 스크립트가 있으면 어떤 버전과 브라우저를 지원해야 하는지 입력하고 좀 더 고급 언어로 작성하면 자동으로 다양한 브라우저와 호환되도록 변환해 주기도 한다. 브라우저의 기본 HTML+CSS+JS, 정말 멋지지 않나요? 이는 현대적인 프런트엔드 언어로 이어집니다. 현대 프론트엔드 언어의 기초는 React이며 모든 것이 JS로 짜여져 있습니다. React는 여전히 상대적으로 네이티브이므로 그 위에 다양한 프레임워크가 파생되었습니다. 유명한 프레임워크는 JS 생성 HTML과 같은 몇 가지 일반적인 아이디어와 기본 작업을 캡슐화한 것입니다. 시작하기가 너무 어렵다고 꼭 말씀드리고 싶습니다...

2. Vue의 새로운 세계를 여세요

1. 기본 개념

• Node.js는 특별히 설계된 JavaScript 런타임 환경입니다. JavaScript 코드를 실행합니다. node xxx.js

• npm 실행과 같은 java -jar xxx.jar과 유사한 명령: node.js 패키지 관리. Java의 Maven 및 Gradle과 유사하게 JavaScript에도 npm이 있는데, 이는 버전 제어 및 이미 작성된 JavaScript 코드 참조에 사용됩니다.

• ES6: ECMAScript 6은 새로운 버전의 javascript로, 기본 javascript보다 작성하기 쉽습니다.

• Babel: ES6, ES7 등 상위 버전 js를 하위 버전 js 언어로 변환하여 다양한 실행 플랫폼에서 스크립트와의 호환성을 용이하게 하는 데 사용됩니다.

• vue-cli: 의 명령줄 도구입니다. vue

• vue -router: 프런트 엔드에는 "라우팅"이라는 중요한 개념이 있는데, 이는 페이지 URL이 점프하는 방식을 실제로 관리합니다. 이것이 Vue의 라우팅 구성 요소입니다.

• webpack: 모든 프런트엔드 프로젝트 코드를 함께 패키지 및 압축하고, 고급 언어(예: CSS 고급 언어 SCSS, LESS)를 컴파일하고, 코드 중복을 줄이고, 요청 시 파일을 로드할 수 있으며, 또한 여러 환경 구성을 구분할 수 있고, 이미지, 글꼴 및 기타 파일을 압축할 수도 있으며, 핫 로드도 가능합니다(서비스를 다시 시작하지 않고 저장 후 브라우저에 즉시 코드 표시)

2, npm

비교항목	npm	maven
Repository name	registry	repository
공식 저장소	http://registry.npmjs. org	https://mvnrepository.com
국내 창고	https://registry.npm.taobao.org	http://maven.aliyun.com/nexus/content/groups/ public
구성 파일	package.json	pom.xml
구성 파일 콘텐츠	"종속성": {"vue": "^1.0.0"}	...
패키지에서 생성된 디렉터리	dist	target

npm이 매우 인기가 있기 때문에 node.js의 상위 버전에서는 npm

3 및 Vue

가 통합 vue란 무엇인가요?

• 구문: ​​Vue는 구문론적으로 JSP 동적 웹 페이지 언어의 태그 버전과 유사하거나 themeleaf와 매우 유사합니다.

• 구성 요소: Vue의 모든 것은 구성 요소를 사용자 정의하기 위해 HTML+CSS+JS를 함께 캡슐화할 수 있습니다.

• 라우팅: 핵심은 주어진 URL에서 어떤 구성 요소를 반환해야 하는지입니다.

• 일부 캡슐화된 함수: 예를 들어 마운트된 함수는 웹 페이지가 로드될 때 콘텐츠를 처리할 수 있고, 데이터는 일부 변수를 정의하고 변경 시 자동으로 로컬 구성 요소를 렌더링할 수 있으며, 메서드는 일부 js 함수를 정의할 수 있습니다.

CSS SCSS 및 다른 언어로 작성 시, range 키워드를 추가하여 CSS의 범위를 제한할 수 있으며, 정의된 구성요소는 HTML 태그 형태로 직접 작성하는 것만으로 다른 구성요소를 참조할 수 있습니다. 매개변수는 데이터를 통해 전달됩니다. 예:

<mytitle></mytitle>

핵심은 고급 언어를 사용하여 HTML+CSS+JS를 더 느리게 작성하는 것입니다...

4.element-ui는 전면-입니다. Ele.me가 제작한 최종 UI가 설정되었습니다. 여기에는 몇 가지 정교한 구성 요소가 포함되어 있습니다. 구성 요소를 처음부터 하나씩 작성하는 대신 이러한 구성 요소를 웹 페이지에 모으기만 하면 됩니다.

라디오 버튼, 테이블, 진행률 표시줄 등과 같은 이러한 구성 요소는 매우 아름답게 디자인되었으며 간단히 데이터를 전달하여 표시할 수 있습니다. 보기 흉한 부분이 있다고 생각되면 CSS를 덮어써서 직접 교체할 수 있습니다. 이는 기능적 요구 사항이 강하고 인터페이스 디자인에 신경 쓰지 않는 중간 페이지와 백엔드 페이지에 매우 편리합니다.

5.layui를 사용하면 안되는 이유

저는 프론트엔드를 접한 이후부터 항상 Layui를 사용하고 있습니다. 나중에 나는 이것이 기본 HTML+CSS+JS/Jquery를 기반으로 한 페이지 표시 효과를 최적화하는 데 더 적합하지만 최신 프런트엔드 언어의 아이디어와는 그다지 호환되지 않는다는 것을 발견했습니다. Vue의 작성 방법과 호환되지 않는 일부 미리 설정된 jQuery 초기화 및 이벤트 트리거 방법이 함께 제공됩니다. 또한, 툴팁, 팝오버 등 일부 구성요소는 포함되지 않습니다.

위 내용은 Vue+ElementUI+Springboot에 대한 기본 지식은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!