서문 : 이전 두 기사는 일부 기본 형식 구성 요소를 캡슐화 하며이 기사는 부트 스트랩을 기반으로 다른 여러 구성 요소를 계속 캡슐화합니다. 이전 기사와 달리이 기사에는 특정 JS 파일에 대한 지원이 필요한 여러 구성 요소가 있습니다.
Bootstraphelper 시리즈 기사 카탈로그
C# Advanced Series- 자체 htmlhelper 구성 요소 단계별 캡슐화 : bootstraphelper
C# Advanced Series- 자체 HTMLHELPER 구성 요소 단계별 캡슐화 : Bootstraphelper (II)
C# Advanced Series- 자체 HTMLHELPER 구성 요소 단계별로 캡슐화 : BootStraphelper (3 : 소스 코드 포함)
1. 번호 boxextensions
숫자 boxextensions는 부트 스트랩 스타일을 기반으로 한 디지털 텍스트 상자입니다. 블로거가 도입 한 자체 증가자 디지털 구성 요소 인 Spinner가 캡슐화합니다. 스피너 구성 요소를 이해하지 못하는 사람들은 http://www.vevb.com/article/88490.htm에 소개 된 두 번째 구성 요소를 확인할 수 있습니다.
이전 소개를 통해 자체 증가 구성 요소 스피너의 초기화는 JS 코드를 작성할 필요가 없다는 것을 알고 있습니다. HTML에서 데이터 속성을 구성하여 직접 초기화 할 수 있습니다. 이것은 우리의 캡슐화에 큰 편의를 제공합니다. 일반적으로 사용되는 초기화 매개 변수를 확장 방법의 매개 변수로 전달한 다음 백그라운드에서 해당 데이터 속성으로 전환하고 프론트 엔드로 반환하면됩니다.
더 이상 고민하지 않고 캡슐화 된 소스 코드를 먼저 넣으십시오.
System.collections.generic; System.Web; System.Web; System.Web 사용; System.Web.Web.Mvc; 네임 스페이스 BootStraPextensions {public static class numboxextensions {/// <summary> /// 사용 name = "id"> id </param> /// <returns> 번호 텍스트 상자를 반환 </returns> public static mvchtmlstring numbertextbox (이 bootstraphelper html, string id) {return numbertextbox (id, id, null, null, null, null); } /// <summary> /// 숫자 텍스트 상자 생성 /// </summary> /// <param name = "html"> 확장 메소드 예제 </param> /// <param name = "id"> id </param> // <param name = "value"> text box value </param> /// <returns> 숫자 텍스트 상자를 반환합니다. bootstraphelper html, 문자열 ID, 객체 값) {return numberTextBox (html, id, value, null, null, null); } /// <summary> /// 숫자 텍스트 상자 생성 /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> // <param name = "value"> 텍스트 상자의 값 </param> // <param name = "min"> self value> // <Returns> 숫자 텍스트 상자를 반환 </returns> public static mvchtmlstring numbertextbox (이 bootstraphelper html, 객체 값, int? min, int? max) {return numbertextbox (html, null, value, min, max, null, null); } /// <moldary> /// 숫자 텍스트 상자 생성 /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> // <param name = "id"> id </param> // <param name = "value"> text box value </param> /// <param name nam "> min min"> min min whowth self-rowth </param> /// <returns> 번호 텍스트 상자를 반환 </returns> public static mvchtmlstring numbertextbox (이 bootstraphelper html, 문자열 ID, 객체 값, int? min, int? max) {return numbertextbox (html, id, value, min, max, null, null); } /// <summary> /// 숫자 텍스트 상자 생성 /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> // <param name = "id"> id </param> // <param name = "value"> 텍스트 상자 </param> /// <min "> min min self-Growth </param grow </param nam"> name = "max"> max imum self-rowth </param> /// <param name = "step"> 숫자 자체 성장 </param> /// <returns> 번호 텍스트 상자 </returns> public static mvchtmlstring numbertextbox (이 bootstraphelper html, string id, 객체 값, int? max, int? int, min) 맥스, 단계, 널); } /// <summary> /// 숫자 텍스트 상자 생성 /// </summary> /// <param name = "html"> 확장 메소드 예 </param> /// <param name = "id"> id </param> // <param name = "value"> 텍스트 상자 값 </param> /// <param name = "> min-mingrowth <"max "> // // // // // self-rowth </param> /// <param name = "step"> number self-rowth </param> /// <param name = "rule"> self-rowth rul </param> // <returns> 숫자 텍스트 상자를 반환합니다 </returns> public mvchtmlstring numbertextbox (이 bootstraphelper html, string vals, int? int? int? int, int, int, int, int, int, int, int, int) {tagbuilder tag = 새 tagbuilder ( "div"); tag.mergeattribute ( "클래스", "입력 그룹 스피너"); tag.mergeattribute ( "data-trigger", "spinner"); System.Text.StringBuilder SB = New System.text.stringBuilder (); //sb.append("<Input type = 'text'class = 'form-control text-center'value = '1'data-min = '-10'data-max = '10 'data-step ='2 'data-rule ='Quantity '> "); sb.append ( "<input type = 'text'class = 'form-control text-center'"); if (! string.isnullorEmpty (id)) {sb.append ( "id = '"). Append (id) .append ( "'"); } if (value! = null) {sb.append ( "value = '"). append (value.toString ()). Append ( "'"); } else {sb.append ( "value = '1'"); } if (min! = null) {sb.append ( "data-min = '"). append (min) .append ( "'"); } if (max! = null) {sb.append ( "data-max = '"). Append (max) .append ( "'"); } if (step! = null) {sb.append ( "data-step = '"). append (step) .append ( "'"); } if (rule! = null) {sb.append ( "data-rule = '"). append (rule.toString ()). Append ( "'"); } else {sb.append ( "data-rule = 'Quantity'"); } sb.append ( "/>"); sb.append ( "<span class = 'input-group-addon'>"); sb.append ( "<a href = 'javaScript ;;'class = 'spin-up'data-spin = 'up'> <i class = 'fa-caret-up'> </i> </a>"); sb.append ( "<a href = 'javaScript :;'class = 'spin-down'data-spin = 'down'> <i class = 'fa fa-caret-down'> </i> </a>"); sb.append ( "</span>"); tag.innerhtml = sb.toString (); return mvchtmlstring.create (tag.toString ()); }} public enum spinningrule {기본값, 통화, 수량, 백분율, 월, 일, 시간, 분, 두 번째,}}}ID 및 값 외에도 구성 요소의 초기화에 필요한 매개 변수는 주로 최소, 최대, 단계, 규칙 등이며, 구성 요소의 Data-Min, Data-Max, Data-Step, Data-rule 및 기타 매개 변수에 해당합니다.
사용은 매우 간단합니다. 먼저 해당 페이지의 관련 JS 및 CSS 파일을 참조한 다음 CSHTML에서 다음과 같이 호출하십시오.
다음과 같이 코드를 복사하십시오. @bootstrap.numberTextBox (NULL, "1", 1, 10, 2, NULL)
결과를 얻으십시오 :
이것은 매번 큰 HTML 코드를 복사하는 것보다 훨씬 편리합니다. 조금 감동을 받고 있습니까?
2. DateTimeBoxExtensions
위의 디지털 구성 요소를 기본으로 사용하면 다음 단계는 시간 구성 요소를 캡슐화하는 것입니다. 블로거는 또한 데이터 속성을 사용하여 초기화 할 계획이지만 오랫동안 검색 한 후에는 DataTimePicker의 데이터 속성을 초기화 할 방법이 없습니다. 방법이 없으므로 블로거는 데이터 속성을 스스로 초기화합니다.
1. 초기 계획
새 파일을 만들어 봅시다 : bootstrap-datetimepicker-helper.js. 내부의 코드는 다음과 같습니다
$ (function () {var dateTimedeFault = {locale : 'zh-cn', // Chinese Culture}; $ .Each ($ ( ". date"), function (index, item) {var data = $ (item) .data (); var param = $ .extend ({{}, dateTimedeFault, data || {}); });});그런 다음 이와 같이 HTML 코드를 작성하십시오
<div class = 'input-group date'data-format = "yyyy-mm-dd"data-maxdate = "2017-01-10"data-mindate = "2010-01-10"> <입력 유형 = 'text'/> <span> <span> </span> </span> </div>
문제가없는 것 같습니다. 처음에는 블로거가 문제가 없다고 생각했습니다. 그러나 상황이 내 소원에 위배되었습니다! 블로거가 고려하지 않은 한 가지, 즉 jQuery의 data () 메소드에 의해 얻은 속성 이름은 소문자로 변환됩니다. 즉, HTML로 작성된 Data-MaxDate이지만 Data () 메소드를 통해 얻은 결과는 아래 그림과 같이 MaxDate가됩니다.
그런 다음 DateTimePicker가 초기화되면 JS 예외 가보고됩니다. 이 방법은 작동하지 않습니다.
2. 개선 계획
위의 방법은 작동하지 않으므로 개선해야합니다. Data () 메소드에 소문자가되지 않도록하는 매개 변수가 있습니까? 검색 후 답변을 찾을 수 없었습니다. 결국, 블로거는 스스로 전환 할 계획이 없었기 때문에 JS 코드는 다음과 같습니다.
$ () {var dateTimedeFault = {형식 : 'yyyy-mm-dd', // 날짜 형식, 날짜 형식 만, 'zh-cn', // 중국 문화 maxDate : '2017-01-01', // // 최대 날짜 마음 : '2010-01-01', // minimum date viloin : 'DefaultDate :'DefaultDate : 'DefaultDate :'DefaultDate : 'DefaultDate :'DefaultDate : 'DefaultDate :'DefaultDate : 'DefaultDate :'2017-01-01 ', // enableddates : false,}; $ .Each ($ ( ". date"), function (index, item) {var data = $ (item) .data (); $ .Each (dateTimedeFault (IN DATETIMEDEFAULT)) {key == I.TOLOWER CASE ()) {datetImedefault [i] =}}); $ .extend ({}, dateMeDefault, data || {});원리는 Data () 메소드로 얻은 결과를 소문자 변환 후 DateTimedeFault의 속성 이름과 비교하는 것입니다. 마찬가지로 동일하면 HTML의 데이터 속성이 덮어 씁니다. 여러 번 디버깅을 한 후 기본적으로 문제가 없었습니다.
이와 같이 코드를 작성하면 실제로 위의 문제를 해결할 수 있지만 DateTimedeFault 변수는 적용 범위의 목적을 달성하기에 충분한 기본 매개 변수를 포함해야합니다. 물론 프로젝트에서 일반적으로 수정되는 매개 변수는 몇 가지 뿐이며, 종종 변경 해야하는 기본 속성 만 여기에 추가됩니다.
좋아, 위의 이론적 기준으로, 우리의 데이터 타임 박스는 쉽게 캡슐화 될 것이다. 코드를 업로드하십시오.
System.collections.generic; System.Web; System.Web 사용; System.Web; System.Web.MVC 사용 사용 텍스트 상자 태그 </param> /// <returns> 날짜 컨트롤을 렌더링하는 HTML 태그를 반환합니다. } /// <summary> /// 날짜 제어 생성 /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> // <param name = "id"> 텍스트 상자 태그의 ID </param> // <param name = "value"> 텍스트 상자 태그의 기본 값 </param> // <return> return </returns the renders the renders renders renders renders rend t the rends mvchtmlstring dateTimebox (이 bootstraphelper html, 문자열 ID, 객체 값) {return dateTimebox (html, id, value, null, null, null, null); } /// <summary> /// 날짜 컨트롤 생성 /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> // <param name = "id"> 텍스트 상자 레이블의 ID </param> /// <param name = "value"> 텍스트 상자 레이블의 값 </param name = ///param "> 형식"> 형식 "> 이름 = "형식"> <param name = "maxdate"> 최소 날짜 value </param> /// <param name = "mindate"> 날짜의 최대 값 </param> /// <returns> 날짜 컨트롤 </returns> public static mvchtmlstring dateTimebox (객체 가치, string, string, string, string, string, string, string) Mindate) {return dateTimebox (html, id, value, format, maxdate, mindate, null, null); } /// <summary> /// 날짜 제어 생성 /// </summary> /// <param name = "html"> 확장 메소드 예 </param> // <param name = "id"> 텍스트 상자 레이블의 id </param> // <param name = "value"> 텍스트 상자 레이블의 기본 값 </param name = "format"> format "> 이름 = "maxDate"> 최소 값 </param> /// <param name = "mindate"> 날짜의 최대 값 </param> /// <param name = "viewMode"> 날짜 모드 브라우즈 날짜 모드 제어 모드 </param> // <param name = "showclear"> 명확한 버튼이 표시됩니다 </param> // <return> retatic retats retml the renders renders renders renders renders renders renders control MVCHTMLSTRING DATETIMEBOX (이 bootstraphelper html, 문자열 ID, 객체 값, 문자열 형식, 문자열 maxDate, String Mindate, String viewMode, bool? showclear) {tagbuilder tag = new tagbuilder ( "div"); tag.mergeattribute ( "클래스", "입력 그룹 날짜"); if (! string.isnullorEmpty (format)) {tag.mergeattribute ( "data-format", format); } if (! string.isnullorEmpty (maxDate)) {tag.mergeattribute ( "data-maxdate", maxdate); } if (! string.isnullorEmpty (Mindate)) {tag.mergeattribute ( "data-mindate", mindate); } if (! string.isnullorEmpty (viewMode)) {tag.MerGeatTribute ( "data-viewMode", viewMode); } if (showclear! = null) {tag.mergeattribute ( "data-showclear", showclear.toString ()); } system.text.stringBuilder sb = new System.text.stringBuilder (); sb.append ( "<input type = 'text'class = 'form-control'"); if (! string.isnullorEmpty (id)) {sb.append ( "id = '"). Append (id) .append ( "'"); } if (value! = null) {sb.append ( "value = '"). append (value.toString ()). Append ( "'"); } sb.append ( "/>"). Append ( "<span class = 'input-group-addon'>") .append ( "<span class = 'glyphicon glyphicon-calendar'> </span>") .append ( "</span>"); tag.innerhtml = sb.toString (); return mvchtmlstring.create (tag.toString ()); }}}그런 다음 CSHTML 페이지는 JS 및 CSS 만 참조하면됩니다.
<link href = "~/content/bootstrap-datetimepicker/css/bootstrap-dateTimepicker.css"rel = "Stylesheet"/> <script src = "~/content/bootstrap-dateTimepicker/js/moment-with-locales.js "> <cript> src = "~/content/bootstrap-dateTimepicker/js/bootstrap-datetimepicker-helper.js"> </script>
그런 다음 직접 사용하십시오
<div> @bootstrap.datetimebox ( "starttime", null, null, null, null, null) </div> <div> @bootstrap.datetimebox ( "endtime", null, null, null, null, null, null) </div>
결과를 얻으십시오
3. Textareextensions
Textarea 텍스트 필드의 캡슐화는 텍스트 상자의 구조와 유사하기 때문에 비교적 간단합니다. 캡슐화 소스 코드를 직접 제공합시다.
System.collections.generic; System.Web; System.Web 사용; System.Web; System.Web.MVC 사용 사용 name = "id"> id </param> /// <returns> html tag </returns> public static mvchtmlstring textareabox (이 bootstraphelper html, string id) {return textAreabox (html, id, null, null, null); } /// <summary> /// textarea text field /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> // <param name = "id"> id </param> // <param name = "value"> value </param> /// <param name = "csssclass"> public> // // param> // 정적 mvchtmlstring textAreabox (이 bootstraphelper html, 문자열 ID, 객체 값, 문자열 cssclass) {return textAreabox (html, id, value, cssclass, null, null); } /// <summary> /// textarea text field /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> // <param name = "id"> id </param> // <param name = "value"> value </param> // <param name = "cssclass"> number "> // // param> // 행 </param> /// <returns> html tag </returns> public static mvchtmlstring textareabox (이 bootstraphelper html, 문자열 ID, 객체 값, 문자열 cssclass, int? rows) {return textareabox (html, id, value, cssclass, rows, rows); } /// <summary> /// textarea text field /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> // <param name = "id"> id </param> // <param name = "value"> value </param> // <param name = "cssclass"> number "> // // param> // 행 </param> /// <param name = "cols"> 열 수 </param> /// <returns> html tag </returns> public static mvchtmlstring textareabox (이 bootstraphelper html, 문자열 ID, 객체 값, 문자열 csSclass, int? rows, int? cols) {new tagbuilder (new tagbuilder) "; tag.addcssclass ( "form-control"); if (! string.isnullorempty (id)) {tag.mergeattribute ( "id", id); } if (value! = null) {tag.mergeattribute ( "value", value.toString ()); } if (! string.isnullorEmpty (cssclass)) {tag.addcssclass (cssclass); } if (rows! = null) {tag.mergeattribute ( "rows", rows.toString ()); } if (cols! = null) {tag.mergeattribute ( "cols", cols.toString ()); } return mvchtmlstring.create (tag.toString ()); }}}가장 간단한 매개 변수 행과 col 만 지원됩니다. 프로젝트에 풍부한 텍스트 편집 상자를 초기화하는 것과 같은 특별한 요구가있는 경우 직접 개선 할 수도 있습니다.
사용 방법
<div> @bootstrap.textAreabox ( "id", "", "", 3, 5) </div>
여기서 언급 할 질문이 있습니다. 즉, 직접 작성하지만 결과는 다음과 같습니다.
우리의 cols 속성은 작동하지 않는 것 같습니다. 클래스 = 'Form-Control'스타일로 태그가 추가되는 한 전체 DIV를 채우고 솔루션도 매우 간단합니다. 예를 들어, DIV에서 일부 처리를 수행 할 수 있습니다.
다음과 같이 코드를 복사하십시오 : <div> @bootstrap.textAreabox ( "", "", "", 3, 5) </div>
COLS 속성이 작동하지 않기 때문에 매개 변수의 COL은 제거되는 것으로 간주 될 수 있습니다.
4. SelectExtensions
얽힌 선택 드롭 다운 상자를 다시 할 시간입니다. 왜 엉키 았다고 말합니까? 다음과 같이 캡슐화 할 때 고려해야 할 많은 문제가 있기 때문입니다.
정적 옵션 값을 처리하는 방법은 무엇입니까? 배경으로 전달하는 방법? 특정 구성 요소 (예 : Select2)를 기반으로 선택된 메소드 및 이벤트로 원래 선택 또는 캡슐화 된 캡슐화 되었습니까?
나중에, 나는 그것에 대해 생각했습니다. 캡슐화의 목적은 무엇입니까? 사용하기가 더 편리하지 않습니까? 너무 세게 밀봉되면 사용하기 편리합니까? 다행히도 가장 간단한 선택으로 직접 캡슐화되었습니다. 블로거는 다음을 수행하려고합니다.
정적 옵션 인 경우 기본 선택 태그를 직접 작성하십시오. 동적 옵션 인 경우 해당 URL을 배경으로 전달하고 데이터를 얻은 후 옵션을 생성하십시오. 캡슐화 된 코드는 다음과 같습니다.
System.Collections.generic; System.Web; System.Web 사용; System.Web; System.Web.MVC 사용 사용 id </param> /// <returns> tag </returns> public static mvchtmlstring selectbox (이 bootstraphelper html, string id) {return selectbox (html, id, null, null, null, null, null); } /// <summary> /// return sleel select tag /// </summary> // <param name = "html"> 확장 메소드 인스턴스 </param> /// <param name = "id"> tag id </param> // <param name = "value"> tag selected value </param> /// <returns> public stath selectbox selectbox selectbox selectbox </returns> html, 문자열 ID, 객체 값) {return selectbox (html, id, value, null, null, null, null); } /// <summary> /// return tag /// </summary> // </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> /// <param name = "id"> tag id </param> // <param name = "vale"> tag selected value </param> /// <param name = "csssclass"> tag> selep> // // public retory " static mvchtmlstring selectbox (이 bootstraphelper html, 문자열 ID, 객체 값, 문자열 cssclass) {return selectbox (html, id, value, cssclass, null, null, null); } /// <summary> /// return return tag /// </summary> // </summary> // <param name = "html"> 확장 메소드 인스턴스 </param> /// <param name = "id"> tag id </param> // <param name = "value"> tag selected value </param> /// <param name = "csssclass"> tag styspt <// // // // // // 데이터 요청 </param> /// <param name = "url"> 데이터 요청에 대한 URL </param> /// <param name = "textfield"> show field </param> /// <param name = "valuefield"> value field </param> /// <returns> select </returns> public mvchtmlstring selectbox (html html, string, string, string, string, string, string, string, string, string, string, string, string) 문자열 URL, 문자열 텍스트 필드, 문자열 valuefield) {return selectbox (html, id, value, cssclass, url, null, textfield, valuefield); } /// <summary> /// return select tag /// </summary> // </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> /// <param name = "id"> tag id </param> // <param name = "vale"> tag selected value </param> /// <param name = "csssclass"> param> // // // // url </param> /// <param name = "param"> 요청 된 매개 변수 </param> /// <param name = "textfield"> show fields </param> /// <param name = "valuefield"> value fields </param> // <param name = "valuefield"> value fields </param> // <valuefield "> value fields </param value"> name = "multiple">은 다중 선택 </param> /// <returns> 태그 선택 </returns> public static mvchtmlstring selectbox (이 bootstraphelper html, 문자열 ID, 객체 값, 문자열 cssclass, 문자열 URL, 문자열 텍스트 필드, 문자열 valuefield, bool multiple = false) {tagbuilder tag = new TagBuil ( "Select"); tag.addcssclass ( "form-control"); if (! string.isnullorempty (id)) {tag.mergeattribute ( "id", id); } if (value! = null) {tag.mergeattribute ( "value", value.toString ()); } if (! string.isnullorEmpty (cssclass)) {tag.addcssclass (cssclass); } if (! string.isnullorEmpty (url)) {tag.mergeattribute ( "data-url", url); } if (! string.isnullorEmpty (param)) {tag.mergeattribute ( "data-param", param); } if (! string.isnullorEmpty (param)) {tag.mergeattribute ( "data-param", param); } if (! string.isnullorEmpty (Valuefield)) {tag.mergeattribute ( "data-value-field", Valuefield); } if (! string.isnullorEmpty (textfield)) {tag.mergeattribute ( "data-text-field", textfield); } if (multiple) {tag.mergeattribute ( "Multiple", "Multiple"); } return mvchtmlstring.create (tag.toString ()); }}}그런 다음 프론트 엔드는 JS를 사용하여 초기화되며 JS 파일 유틸리티 .combobox.js가 있어야합니다.
(function ($) {// 1. jQuery 확장 메소드 정의 combobox $ .fn.combobox = function (옵션, param) {if (typeof 옵션 == 'string') {return $ .fn.combobox.methods [옵션] (this, param); .fn.com.defa는 {}를 추가합니다. 옵션 (옵션). 옵션. var 옵션 = '옵션', 옵션 옵션 (target.val); $ .getJson (url, function (data) {jq.empty (); var 옵션 = $ ( '<plooct> </옵션>'); 옵션 .attr ( 'value', ''); 옵션 .text ( 'please'); 항목 [valuefield '). }}; // 6. 기본 매개 변수 목록 $ .fn.combobox.defaults = {url : null, param : null, null, data : null, valuefield : 'valuefield :'value ', textfield :'text ','select ','select ', onbeforeLoad : onjeforEload : ontail (param)}, onloadsuccess : function () {{value (value)}}; //이 단락은 새로 추가되고 초기화 메소드 $ (document) .ready (function () {$ ( 'select'). 각 (function () {var $ combobox = $ (this); $ .fn.combobox.call ($ combobox, $ combobox.data ())}) (jquery);이 JS 파일은 Blogger //www.vevb.com/article/92595.htm의 이전 기사에서 나온 것입니다.
그런 다음 프론트 엔드 호출
<div> @bootstrap.selectbox ( "sel", null, null, "/home/getdept", null, "name", "id") </div>
5. 요약
이 시점에서 Bootstraphelper의 첫 번째 버전은 기본적으로 완료되었으며 기본 패키지 구성 요소는 다음과 같습니다.
물론, 모두는 소스 코드를 가장 좋아합니다. 소스 코드 주소
이 기사가 도움이 될 수 있다고 생각되면 추천하십시오.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.