머리말:
때문에 최근의 연구 관련 프론트 엔드 기술, 프레임의 프론트 엔드 우수한 뷰 , 몇 가지 문제를 학습하는 과정에서 개인적인 만남은 이민자를 그릴 개인적인 용도 뷰 약간의 경험이 여기 그래서이 합계 최대의 온라인 관련 정보를 제한 !
공식 문서 : Vue.js
뷰는 ASP.NET MVC의 상호 작용의 전면 및 후면 끝을 사용하여 수행
하면 이전과 플러그인의 상호 작용이 끝난 후 추천 뷰 관계자 볼 필요가 다음 문서를 읽기 전에 :
(버전 2.0 플러그인에 대한 유지 보수의 공식 폐지 후) 1.resource
2.axios
참고 :이 물론, 당신은 또한 jQuery와 같은 다른 JS 라이브러리를 사용하여 프로젝트에서 의미있는 사용을해야하기 때문에 바와 같이, 비동기 플러그에, 여기에 사용 등 가져 오기 ...
예:
제어 장치
1 사용 Demo.Models;
이 시스템을 이용하여;
System.Collections.Generic 3을 사용함;
을 System.Linq 4를 사용함;
System.Web 5를 사용함;
System.Web.Mvc 6을 사용함;
7
8 스페이스 Demo.Controllers
9 {
10 // [RoutePrefix ( "API / 제품")]
11 Public 클래스 GoodsController : 컨트롤러
12 {
13 일람 <GoodsEntity> = goosdList 새로운 목록을 <GoodsEntity>
14 {
15 새로운 GoodsEntity () {ID = 001, NAME = "水"타입 = 1, 가격 = 3},
16 새로운 GoodsEntity () {ID = 002, NAME = "牛奶"타입 = 1, 가격 = 10}
17 새로운 GoodsEntity () {ID = 003, 이름 = "面包", 유형 = 2, 가격 = 15}
18};
(19)
(21) 공공 ActionResult 지수 ()
(22) {
23 반환보기 ();
24}
25
(26) 공공 ActionResult 검사 ()
27 {
28 반환보기 ();
} 29
30
31 [HttpGet]
32 공용 JsonResult GetGoodsType ()
33 {
34 일람 <INT> = goodsType 새로운 목록 <INT> ();
35의 foreach (goosdList VAR의 항목)
36 {
37의 경우 (goodsType.Contains (item.Type)!)
38 {
39 goodsType.Add (item.Type);
40}
41}
42 창 JSON (goodsType, JsonRequestBehavior.AllowGet);
43}
44
45 HttpGet]
(46)의 공개 JsonResult GetAllGoods ()
47 {
48 반환 JSON (goosdList, JsonRequestBehavior.AllowGet);
49}
50
51 HttpPost]
(52)의 공개 JsonResult GetGoods (INT 자료)
53 {
54 VAR 엔티티 = goosdList.Where (g => g.ID == ID) .FirstOrDefault ();
55의 경우 (엔티티 = NULL!)
56 {
57 반환 JSON (새 ReturnJsonInfo (500 "성공!", 엔티티));
58}
59 반환 JSON (새 ReturnJsonInfo (400 "에러!", NULL));
60}
61
62 HttpPost]
63 공용 JsonResult UpdateGoods (GoodsEntity 엔티티)
64 {
65의 경우 (엔티티 = NULL!)
66 {
67 VAR goodsEntiy = goosdList.FirstOrDefault (g => g.ID == entity.ID);
68의 경우 (goodsEntiy = NULL!)
(69) {
70 = goodsEntiy 엔티티;
71 창 JSON (새 ReturnJsonInfo (500 "성공!"goosdList));
72}
73 goosdList.Add (엔티티);
(74) 반환 JSON (새 ReturnJsonInfo (500, "성공!", goosdList));
75}
76 반환 JSON (새 ReturnJsonInfo (400 "에러!", NULL));
77}
78
79 HttpPost]
(80)의 공개 JsonResult DelectGoods (INT 자료)
81 {
82 VAR 엔티티 = goosdList.Where (g => g.ID == ID) .FirstOrDefault ();
83의 경우 (엔티티 = NULL!)
84 {
85 goosdList.Remove (엔티티);
86 반환 JSON (새 ReturnJsonInfo (500, "성공!", goosdList));
87}
88 반환 JSON (새 ReturnJsonInfo (400 "에러!", NULL));
} 89
90
91}
92}
상기 제어부로드 일부 샘플 데이터와 전단이 직접 데이터를 사용할 수 있도록하는 것이, 전단 JSON 포맷으로 반환된다.
주 : 선단에 JSON 제어기 복귀 표적 서열에 반환 "ReturnJsonInfo"위 사용 "ReturnJsonInfo"코드는 다음이다.
(1) 시스템을 이용하는 단계;
System.Collections.Generic 2를 사용함;
3을 System.Linq을 사용함;
System.Web 4를 사용함;
5
6 네임 스페이스 Demo.Models
7 {
8 개 공용 클래스 ReturnJsonInfo
9 {
10 공공 INT 코드 {얻으십시오; 세트; }
(11) 공공 문자열 메시지 {얻을; 세트; }
(12) 공공 목적 법인 {얻으십시오; 세트; }
13 공용 ReturnJsonInfo (INT 코드 스트링 메시지 오브젝트 OBJ)
14 {
15 = this.Code 코드;
16 = this.Message 메시지;
17 this.Entity = OBJ;
18}
19}
20}
전망
1. 프론트 엔드 리소스 플러그인
1 @ {
2 ViewBag.Title = "제품 IndexPage";
3}
</ SCRIPT> 4 <= "~ / 자원 / 스크립트 / vue.js"스크립트 유형 = "텍스트 / 자바 스크립트"SRC>
5 <스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "~ / 자원 / 스크립트 / VUE -resource.js "> </ script>
6 <H2> 색인 </ H2>
7 <DIV ID ="데모 ">
8 <표>
9 <TR>
(10) <TD> <레이블>编号: </ 라벨> < / TD>
11 <TD> <input 타입 = "문자"V 모델 = "newGoods.id"/> </ TD>
14 <TD> <input 타입 = "문자"V 모델 = "newGoods.name"/> </ TD>
16 <TD> <라벨>类型</ 라벨> </ TD>
17 <TD> <input 타입 = "문자"V 모델 = "newGoods.type"/> </ TD>
18
19 <TD> <라벨>售价</ 라벨> </ TD>
20 <TD> <input 타입 = "문자"V - 모델 = "newGoods.price"/> </ TD>
21
22 <TD> <input 타입 = "제출"값 = "查询"V 기능 : 클릭 = "GetGoods (newGoods.id)"/> </ TD >
23 </ TR>
24 </ 테이블>
25 <표 5 쇼 = "goodsList.length">
26 <TR>
27 <TD>编号</ TD>
28 <TD>名称</ TD>
29 <TD>类型</ TD>
30 <TD>售价</ TD>
31 </ TR>
32 <TR-V 대 = "항목에 goodsList">
33 <TD> item.ID {{}} </ TD>
34 <TD> item.Name {{}} </ TD>
35 <TD> item.Type {{}} </ TD>
36 <TD> {{item.Price }} </ TD>
37 </ TR>
38 </ 테이블>
39 </ DIV>
(40) <스크립트 유형 = "텍스트 / 자바 스크립트">
41 VAR 뷰는 새로운 뷰 (=
42 {
43 엘 "#demo를"
데이터 44 : {
45 goodsList []
46 newGoods {ID : '이름' '타입' '가격' '}
47}
48 작성 : 함수 () {
49 this.InIt () ;
50}
51 방법 {
52 INIT : 함수 () {
53 //初始化
54 this.GetAllGoods ();
55}
56 GetAllGoods : 함수 () {
57 VAR _self이 =;
58 _self. $ http.get ( "../ 제품 / GetAllGoods을"). 다음 (
59 // 람다写法
60 (대응) => {
61 successCallback //
62 (VAR 난 = 0; I <response.data.length; I ++) {
63 _self.goodsList.push (response.data은 [I]);
64}
65}
66 (대응) => {
67 errorCallback //
68}
69);
70}
71 GetGoods : 함수 (_id) {
_self이 VAR = 72;
73 _self.goodsList = [];
74의 경우 (_id.length> 0) {
. 75 _self $ http.post ( "../ 제품 / GetGoods을"{ID : _id}). 다음 (
76 //传统写法
77 함수 (대응) {
78 // successCallback
(79)의 경우 (= response.data.Code = 500) {
80 _self.goodsList.push (response.data.Entity);
81}
82 {다른
83 알림 (response.data.Message);
84}
85},
86 함수 (대응) {
87 errorCallback //
88}
89)
90 .catch (함수 (대응) {
91 CONSOLE.LOG (대응),
92});
93}
94 {다른
95 _self.GetAllGoods ();
96}
97}
98}
99}
100);
101 </ script>
2. 프론트 엔드 플러그 Axios의
@ 1 {
2 레이아웃 = NULL;
3}
4
5 <! DOCTYPE HTML>
6
7 <HTML>
8 <head>
9 <메타 이름 = "뷰포트"내용 = "폭 = 기기 폭"/>
10 <TITLE> 확인 </ TITLE>
11 <script 형 = "텍스트 / 자바 스크립트"SRC = "~ / 자원 / 스크립트 / vue.js"> </ script>
(12) <스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "~ / 자원 / 스크립트 / axios.min.js"> </ script>
13 </ head>
14 <body>
15 <div의 ID = "민주당">
16 <div>
17 <표>
18 <TR>
23 <TD> <input 타입 = "문자"V 모델 = "newGoods.name"/> </ TD>
24
25 <TD> <라벨>类型</ 라벨> </ TD>
26 <TD>
27 < V-모델 = "newGoods.type"> 선택
28 <옵션 값을 = ""> --- 모든 --- </ 옵션>
(29) <옵션 V-에 대한 = "유형 goodsType에서"V-바인드 : 값 = "유형 "> 유형 {{}} </ 옵션>
30 </ 선택>
31 </ TD>
32
33 <TD> <라벨>售价</ 라벨> </ TD>
34 <TD> <input 타입 = "문자"V 모델 = "newGoods.price"/> </ TD>
35
36 <TD>
37 <input 타입 = 값 = "查询"V-의 "제출"클릭 = "GetGoods (newGoods.id)"/>
"更新"= 값 '제출'38 <input 타입 = V 기능 : 클릭 = "UpdateGoods (newGoods.id, newGoods.name, newGoods.type, newGoods.price) "/>
39 <input 타입 =" "V 기능 : 클릭 =" "값 ="删除제출 DelectGoods (newGoods.id) "/>
40 </ TD>
41 </ TR>
42 </ 테이블>
43 </ div>
44 <div>
45 <표 5 쇼 = "goodsList.length">
46 <TR>
47 <TD>行号</ TD>
48 <TD> ID </ TD>
49 <TD> 이름 </ TD>
50 <TD>类型</ TD>
51 <TD>售价</ TD>
52 </ TR>
53 <TR "은 goodsList에서 (항목, 인덱스)"= V - 대>
54 <TD> {{인덱스 + 1 }} </ TD>
55 <TD> item.ID {{}} </ TD>
56 <TD> item.Name {{}} </ TD>
57 <TD> item.Type {{}} </ TD >
58 <TD> item.Price {{}} </ TD>
59 </ TR>
60 </ 테이블>
61 </ div>
62 </ div>
63
64
65 <script 타입 = "텍스트 / 자바 스크립트">
66 VAR의 VM은 새로운 뷰 ({=
"#demo"67 엘
68 개 데이터 {
69 goodsType [],
70 goodsList []
71 newGoods {ID : '이름' '타입' '가격' '}
72}
(73)가 실장 () {
74 this.GetGoodsType () ;
75 this.GetAllGoods ();
76}
77 방법 :
78 {
79 GetGoodsType : 함수 () {
. 80 axios.get ( "../ 제품 / GetGoodsType")을 (
81 (대응) => {
82 this.goodsType = [];
83 ( I <response.data.length; VAR 난 0 = I ++) {
84 this.goodsType.push (response.data [I]);
85}
86}
87 (대응) => {
88 알림 (response.status);
89}
90)
91 .catch (함수 (대응) {
92 CONSOLE.LOG (대응)
(93)});
94}
95 GetAllGoods : 함수 () {
. 96 axios.get ( '../ 제품 / GetAllGoods')을 (
97 함수 (대응) {
98 vm.goodsList = [];
99 (VAR I = 0; I <response.data.length; I ++) {
100 vm.goodsList.push (response.data은 [I]);
101}
102 //vm.goodsList.splice(response.data.length);
} 103,
104 함수 (대응) {
105 경보 (response.status);
106}
107)
108 .catch (
109 함수 (에러) {
110 경보 (에러)
(111)}
112)
(113)},
114 GetGoods : 함수 (_id) {
115 경우 (_id.length> 0) {
127 (대응) => {
116 axios.post ( ". ./Goods/GetGoods "{ID : _id}.)를 (
117 (대응) => {
118 this.goodsList = [];
만약 119 (response.data.Code == 500) {
120 this.goodsList.push (response.data.Entity);
121}
122 {다른
123 경보 (response.data.Message);
} 124
125
126}
128 경보 (response.status);
129}
130)
131 .catch (함수 (대응) {
132 CONSOLE.LOG (대응);
133});
134}
135 {다른
136 this.GetAllGoods ();
137}
138},
139 UpdateGoods : 기능 (_id, _name, _type, _price) {
140 axios.post ( "../ 제품 / UpdateGoods", {엔티티 : {ID : _id, 이름 : _name, 유형 : _type, 가격 :. _price}})를 (
141 (대응) => {
142 this.goodsList = [];
만약 143 (response.data.Code == 500) {
157 CONSOLE.LOG (대응);
144 (VAR 난 = 0; I <response.data.Entity.length 단계; I ++) {
145 this.goodsList.push (response.data.Entity [I]);
146}
147}
148 {다른
149 경보 (response.data.Message);
150}
151},
152 (대응) => {
153 경보 (response.status);
154}
155)
156 .catch (함수 (대응) {
158});
} 159,
160 DelectGoods : 함수 (_id) {
. 161 axios.post ( "../ 제품 / DelectGoods"{ID : _id}) 후 (
162 (대응) => {
163 this.goodsList = []
(164)의 경우 (response.data.Code == 500) {
165 (VAR I = 0; I <response.data.Entity.length; 나는 ++) {
166 this.goodsList.push (response.data.Entity [I])
(167)}
(168)}
(169) 또 {
170 경보 (대응 .data.Message)
171}
172
(173)},
174 (대응) => {
175 경보 (response.status);
176}
177)
(178) .catch (함수 (대응) {
179 CONSOLE.LOG (대응),
180});
181}
182}
183
184});
185 </ script>
186 </ body>
187 </ HTML>
상기의 관점에서, 프론트 엔드가 배열로 채워집니다, 그것은 배열 VUE이 하나가 특히 친절하지 않았다 모니터링하는 것이 주목할 필요가있다. 그러나 또한 그것은 매우 쉬운 API를 제공합니다.
위의 업데이 트 뷰가있는 경우, 공식에 의해 제공되는 배열에 운영 VUE를 참조 방법
Perorations :
위의 데모에서의 ASP.NET MVC 템플릿을 사용. 정말 편리 느낌의보기 부분을 쓸 때, 당신은 단지에 관심 변수 데이터의 요소에 데이터 바인딩에 필요, 쓰기, 코드의 요소를 가져 갈 필요가 없습니다.
물론, 당신은 또한 면도기 구문을 선택할 수 있지만 매우 친절 보이지 않았다.
위의이 데모의를 작성 후 몇몇 개인을 요약 한 것입니다. 부적절한 설명을 수정 @author 주시기 바랍니다, 감사합니다!