찾다
Javajava지도 시간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가 설정되었습니다. 여기에는 몇 가지 정교한 구성 요소가 포함되어 있습니다. 구성 요소를 처음부터 하나씩 작성하는 대신 이러한 구성 요소를 웹 페이지에 모으기만 하면 됩니다.

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

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

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

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

성명
이 기사는 亿速云에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
Vue常见面试题汇总(附答案解析)Vue常见面试题汇总(附答案解析)Apr 08, 2021 pm 07:54 PM

本篇文章给大家分享一些Vue面试题(附答案解析)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

5 款适合国内使用的 Vue 移动端 UI 组件库5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库,希望对大家有所帮助!

vue中props可以传递函数吗vue中props可以传递函数吗Jun 16, 2022 am 10:39 AM

vue中props可以传递函数;vue中可以将字符串、数组、数字和对象作为props传递,props主要用于组件的传值,目的为了接收外面传过来的数据,语法为“export default {methods: {myFunction() {// ...}}};”。

手把手带你利用vue3.x绘制流程图手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

利用vue3.x怎么绘制流程图?下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法,希望对大家有所帮助!

聊聊vue指令中的修饰符,常用事件修饰符总结聊聊vue指令中的修饰符,常用事件修饰符总结May 09, 2022 am 11:07 AM

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何覆盖组件库样式?React和Vue项目的解决方法浅析如何覆盖组件库样式?React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

通过9个Vue3 组件库,看看聊前端的流行趋势!通过9个Vue3 组件库,看看聊前端的流行趋势!May 07, 2022 am 11:31 AM

本篇文章给大家分享9个开源的 Vue3 组件库,通过它们聊聊发现的前端的流行趋势,希望对大家有所帮助!

react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!