[{"data":1,"prerenderedAt":6700},["ShallowReactive",2],{"series-concrete5vue-2":3},{"doc":4,"prev":2679,"next":3355},{"id":5,"title":6,"body":7,"category":2663,"createdAt":2665,"description":2666,"extension":2667,"index":90,"meta":2668,"navigation":117,"path":17,"publish":117,"seo":2669,"series":2670,"seriesTitle":2671,"stem":2672,"tag":2673,"thumbnail":2676,"updatedAt":2677,"__hash__":2678},"series\u002Fseries\u002Fconcrete5vue-2.md","Concrete5にVueCLIを使ってUIを構築する。2【コンポーネント作成・データ登録編】",{"type":8,"value":9,"toc":2642},"minimark",[10,20,23,26,30,33,49,54,59,62,66,69,332,335,339,343,346,354,361,448,451,477,485,488,510,517,520,523,529,532,535,837,840,965,975,1104,1111,1114,1126,1129,1132,1135,1139,1153,1577,1580,1583,2223,2238,2259,2262,2265,2270,2275,2281,2287,2297,2303,2309,2312,2315,2522,2535,2553,2557,2560,2579,2589,2592,2595,2598,2604,2607,2610,2614,2617,2621,2624,2635,2638],[11,12,13,14,19],"p",{},"こんにちはjunです。",[15,16,18],"a",{"href":17},"\u002Fseries\u002Fconcrete5vue-2","Concrete5にVueCLIを使ってUIを構築する。1【環境構築編】","の記事の続きを書いていきます。",[11,21,22],{},"今回の記事では",[11,24,25],{},"どんなフォームを作成するのか。\nテキストインプットを用いたフォームの簡易実装\nデータの保存のバックエンド実装\nを行いたいと思います。ファイルマネージャー、リッチテキストエディタをvueでレンダリングする方法は追加・編集・一覧化が終わった後に書きたいと思います。まずは簡単なフォーム（テキスト）とデータの保存をvueとともに実装していきましょう。",[27,28,29],"h2",{"id":29},"最終的に作成するフォーム",[11,31,32],{},"「アルバム管理」たるものを作成しようと思います。インスタグラム的な物で、機能は以下の通りです。",[34,35,36,40,43,46],"ul",{},[37,38,39],"li",{},"1つのアルバムに複数枚の画像を自由に登録できる。数は基本的に無制限、最低１枚",[37,41,42],{},"画像と一緒にその画像に関する情報をリッチテキストエディタで編集できる。",[37,44,45],{},"画像は順番の並び替え、追加、削除が可能。",[37,47,48],{},"ページ内ではブロックを通じてアルバムの写真を出力できる。",[50,51,53],"h3",{"id":52},"ワイヤーフレーム超簡素","ワイヤーフレーム（超簡素）",[55,56],"image-render",{":src":57,":width":58},"'_mix\u002Fvueconcrete2-1.jpeg'","'100%'",[55,60],{":src":61,":width":58},"'_mix\u002Fslide-2.jpeg'",[27,63,65],{"id":64},"db構造","DB構造",[11,67,68],{},"db.xmlを用いて以下のようなテーブルを作成しておきます。",[70,71,77],"pre",{"className":72,"code":73,"filename":74,"language":75,"meta":76,"style":76},"language-xml shiki shiki-themes material-theme-ocean","\u003C?xml version=\"1.0\" encoding=\"UTF-8\"?>\n\u003Cschema\n xmlns=\"http:\u002F\u002Fwww.concrete5.org\u002Fdoctrine-xml\u002F0.5\"\n xmlns:xsi=\"http:\u002F\u002Fwww.w3.org\u002F2001\u002FXMLSchema-instance\"\n xsi:schemaLocation=\"http:\u002F\u002Fwww.concrete5.org\u002Fdoctrine-xml\u002F0.5 http:\u002F\u002Fconcrete5.github.io\u002Fdoctrine-xml\u002Fdoctrine-xml-0.5.xsd\">\n\n\u003Ctable name=\"album\">\n \u003Cfield name=\"id\" type=\"integer\">\n \u003Cautoincrement\u002F>\n \u003Ckey\u002F>\n \u003C\u002Ffield>\n \u003Cfield name=\"title\" type=\"string\" size=\"255\"\u002F>\n \u003Cfield name=\"created\" type=\"datetime\">\n \u003Cdefault value=\"1000-01-01 00:00:00\"\u002F>\n \u003Cnotnull\u002F>\n \u003C\u002Ffield>\n \u003Cfield name=\"modified\" type=\"timestamp\">\n \u003Cdeftimestamp\u002F>\n \u003Cnotnull\u002F>\n \u003C\u002Ffield>\n\u003C\u002Ftable>\n\n\u003Ctable name=\"albumPics\">\n \u003Cfield name=\"id\" type=\"integer\">\n \u003Cautoincrement\u002F>\n \u003Ckey\u002F>\n \u003C\u002Ffield>\n \u003Cfield name=\"albumID\" type=\"integer\">\n \u003Cunsigned\u002F>\n \u003C\u002Ffield>\n \u003Cfield name=\"fID\" type=\"integer\">\n \u003Cunsigned\u002F>\n \u003C\u002Ffield>\n \u003Cfield name=\"html\" type=\"text\" size=\"65535\"\u002F>\n \u003Cfield name=\"created\" type=\"datetime\">\n \u003Cdefault value=\"1000-01-01 00:00:00\"\u002F>\n \u003Cnotnull\u002F>\n \u003C\u002Ffield>\n \u003Cfield name=\"modified\" type=\"timestamp\">\n \u003Cdeftimestamp\u002F>\n \u003Cnotnull\u002F>\n \u003C\u002Ffield>\n\u003C\u002Ftable>\n\n\u003C\u002Fschema>\n","db.xml","xml","",[78,79,80,88,94,100,106,112,119,125,131,137,143,149,155,161,167,173,178,184,190,195,200,206,211,217,222,227,232,237,243,249,254,260,265,270,276,281,286,291,296,301,306,311,316,321,326],"code",{"__ignoreMap":76},[81,82,85],"span",{"class":83,"line":84},"line",1,[81,86,87],{},"\u003C?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",[81,89,91],{"class":83,"line":90},2,[81,92,93],{},"\u003Cschema\n",[81,95,97],{"class":83,"line":96},3,[81,98,99],{}," xmlns=\"http:\u002F\u002Fwww.concrete5.org\u002Fdoctrine-xml\u002F0.5\"\n",[81,101,103],{"class":83,"line":102},4,[81,104,105],{}," xmlns:xsi=\"http:\u002F\u002Fwww.w3.org\u002F2001\u002FXMLSchema-instance\"\n",[81,107,109],{"class":83,"line":108},5,[81,110,111],{}," xsi:schemaLocation=\"http:\u002F\u002Fwww.concrete5.org\u002Fdoctrine-xml\u002F0.5 http:\u002F\u002Fconcrete5.github.io\u002Fdoctrine-xml\u002Fdoctrine-xml-0.5.xsd\">\n",[81,113,115],{"class":83,"line":114},6,[81,116,118],{"emptyLinePlaceholder":117},true,"\n",[81,120,122],{"class":83,"line":121},7,[81,123,124],{},"\u003Ctable name=\"album\">\n",[81,126,128],{"class":83,"line":127},8,[81,129,130],{}," \u003Cfield name=\"id\" type=\"integer\">\n",[81,132,134],{"class":83,"line":133},9,[81,135,136],{}," \u003Cautoincrement\u002F>\n",[81,138,140],{"class":83,"line":139},10,[81,141,142],{}," \u003Ckey\u002F>\n",[81,144,146],{"class":83,"line":145},11,[81,147,148],{}," \u003C\u002Ffield>\n",[81,150,152],{"class":83,"line":151},12,[81,153,154],{}," \u003Cfield name=\"title\" type=\"string\" size=\"255\"\u002F>\n",[81,156,158],{"class":83,"line":157},13,[81,159,160],{}," \u003Cfield name=\"created\" type=\"datetime\">\n",[81,162,164],{"class":83,"line":163},14,[81,165,166],{}," \u003Cdefault value=\"1000-01-01 00:00:00\"\u002F>\n",[81,168,170],{"class":83,"line":169},15,[81,171,172],{}," \u003Cnotnull\u002F>\n",[81,174,176],{"class":83,"line":175},16,[81,177,148],{},[81,179,181],{"class":83,"line":180},17,[81,182,183],{}," \u003Cfield name=\"modified\" type=\"timestamp\">\n",[81,185,187],{"class":83,"line":186},18,[81,188,189],{}," \u003Cdeftimestamp\u002F>\n",[81,191,193],{"class":83,"line":192},19,[81,194,172],{},[81,196,198],{"class":83,"line":197},20,[81,199,148],{},[81,201,203],{"class":83,"line":202},21,[81,204,205],{},"\u003C\u002Ftable>\n",[81,207,209],{"class":83,"line":208},22,[81,210,118],{"emptyLinePlaceholder":117},[81,212,214],{"class":83,"line":213},23,[81,215,216],{},"\u003Ctable name=\"albumPics\">\n",[81,218,220],{"class":83,"line":219},24,[81,221,130],{},[81,223,225],{"class":83,"line":224},25,[81,226,136],{},[81,228,230],{"class":83,"line":229},26,[81,231,142],{},[81,233,235],{"class":83,"line":234},27,[81,236,148],{},[81,238,240],{"class":83,"line":239},28,[81,241,242],{}," \u003Cfield name=\"albumID\" type=\"integer\">\n",[81,244,246],{"class":83,"line":245},29,[81,247,248],{}," \u003Cunsigned\u002F>\n",[81,250,252],{"class":83,"line":251},30,[81,253,148],{},[81,255,257],{"class":83,"line":256},31,[81,258,259],{}," \u003Cfield name=\"fID\" type=\"integer\">\n",[81,261,263],{"class":83,"line":262},32,[81,264,248],{},[81,266,268],{"class":83,"line":267},33,[81,269,148],{},[81,271,273],{"class":83,"line":272},34,[81,274,275],{}," \u003Cfield name=\"html\" type=\"text\" size=\"65535\"\u002F>\n",[81,277,279],{"class":83,"line":278},35,[81,280,160],{},[81,282,284],{"class":83,"line":283},36,[81,285,166],{},[81,287,289],{"class":83,"line":288},37,[81,290,172],{},[81,292,294],{"class":83,"line":293},38,[81,295,148],{},[81,297,299],{"class":83,"line":298},39,[81,300,183],{},[81,302,304],{"class":83,"line":303},40,[81,305,189],{},[81,307,309],{"class":83,"line":308},41,[81,310,172],{},[81,312,314],{"class":83,"line":313},42,[81,315,148],{},[81,317,319],{"class":83,"line":318},43,[81,320,205],{},[81,322,324],{"class":83,"line":323},44,[81,325,118],{"emptyLinePlaceholder":117},[81,327,329],{"class":83,"line":328},45,[81,330,331],{},"\u003C\u002Fschema>\n",[11,333,334],{},"1アルバムに対して不定数の画像が登録されるので上記の様なDBになっています。",[27,336,338],{"id":337},"パッケージのビューphpとvueのsrc構成","パッケージのビューPHPとvueのSrc構成",[50,340,342],{"id":341},"パッケージ側phpの下準備","パッケージ側（PHP）の下準備",[11,344,345],{},"それではアルバムののフォームを作っていきましょう。前回インストールした「vuetest」にてフォーム用のシングルページを作成します。",[70,347,352],{"className":348,"code":350,"language":351},[349],"language-text","vuetest\n├── controller.php \u002F\u002Fこれはパッケージのcontroller\n├── controllers\n│ └── single_page\n│ └── dashboard\n│ └── vuetest.php\n└── single_pages\n └── dashboard\n └── vuetest\n ├── add.php \u002F\u002F追加画面シングルページ\n ├── edit.php \u002F\u002F編集画面シングルページ\n └── view.php\n","text",[78,353,350],{"__ignoreMap":76},[11,355,356,357,360],{},"そしてシングルページのコントローラーである",[78,358,359],{},"vuetest.php","で以下の様に入力",[70,362,366],{"className":363,"code":364,"filename":359,"language":365,"meta":76,"style":76},"language-php shiki shiki-themes material-theme-ocean","class Vuetest extends DashboardPageController\n{\n public $packageHandle = 'vuetest';\n\n \u002F\u002Fvuetest のシングルページでvueのjsファイルを読み込む様にする。\n　　public function on_start() {\n $this->requireAsset('package-vue-production');\n }\n\n public function view() {\n }\n\n \u002F\u002F \u002Fdashboard\u002Fvuetest\u002F に \u002Fadd というURLを追加できる\n public function add(){\n $this->render('\u002Fdashboard\u002Fvuetest\u002Fadd');\n }\n}\n","php",[78,367,368,373,378,383,387,392,397,402,407,411,416,420,424,429,434,439,443],{"__ignoreMap":76},[81,369,370],{"class":83,"line":84},[81,371,372],{},"class Vuetest extends DashboardPageController\n",[81,374,375],{"class":83,"line":90},[81,376,377],{},"{\n",[81,379,380],{"class":83,"line":96},[81,381,382],{}," public $packageHandle = 'vuetest';\n",[81,384,385],{"class":83,"line":102},[81,386,118],{"emptyLinePlaceholder":117},[81,388,389],{"class":83,"line":108},[81,390,391],{}," \u002F\u002Fvuetest のシングルページでvueのjsファイルを読み込む様にする。\n",[81,393,394],{"class":83,"line":114},[81,395,396],{},"　　public function on_start() {\n",[81,398,399],{"class":83,"line":121},[81,400,401],{}," $this->requireAsset('package-vue-production');\n",[81,403,404],{"class":83,"line":127},[81,405,406],{}," }\n",[81,408,409],{"class":83,"line":133},[81,410,118],{"emptyLinePlaceholder":117},[81,412,413],{"class":83,"line":139},[81,414,415],{}," public function view() {\n",[81,417,418],{"class":83,"line":145},[81,419,406],{},[81,421,422],{"class":83,"line":151},[81,423,118],{"emptyLinePlaceholder":117},[81,425,426],{"class":83,"line":157},[81,427,428],{}," \u002F\u002F \u002Fdashboard\u002Fvuetest\u002F に \u002Fadd というURLを追加できる\n",[81,430,431],{"class":83,"line":163},[81,432,433],{}," public function add(){\n",[81,435,436],{"class":83,"line":169},[81,437,438],{}," $this->render('\u002Fdashboard\u002Fvuetest\u002Fadd');\n",[81,440,441],{"class":83,"line":175},[81,442,406],{},[81,444,445],{"class":83,"line":180},[81,446,447],{},"}\n",[11,449,450],{},"すると\u002Fdashboard\u002Fvuetest\u002Fadd というURLを叩くとadd.phpが表示されます。",[70,452,455],{"className":363,"code":453,"filename":454,"language":365,"meta":76,"style":76},"\u003C?php\ndefined('C5_EXECUTE') or die('Access Denied.');\n?>\n\u003Cp>add用のページだよ\u003C\u002Fp>\n","add.php",[78,456,457,462,467,472],{"__ignoreMap":76},[81,458,459],{"class":83,"line":84},[81,460,461],{},"\u003C?php\n",[81,463,464],{"class":83,"line":90},[81,465,466],{},"defined('C5_EXECUTE') or die('Access Denied.');\n",[81,468,469],{"class":83,"line":96},[81,470,471],{},"?>\n",[81,473,474],{"class":83,"line":102},[81,475,476],{},"\u003Cp>add用のページだよ\u003C\u002Fp>\n",[11,478,479,480],{},"↓\n",[55,481],{":src":482,":width":483,":center":484},"'_mix\u002Fscsh-2020-08-26-21.34.56-768x436.png'","'600px'","true",[11,486,487],{},"ページの表示が確認できたら、add.phpに以下の様に変更しておきます。",[70,489,491],{"className":363,"code":490,"filename":454,"language":365,"meta":76,"style":76},"\u003C?php\ndefined('C5_EXECUTE') or die('Access Denied.');\n?>\n\u003Cdiv id=\"add\">\u003C\u002Fdiv>\n",[78,492,493,497,501,505],{"__ignoreMap":76},[81,494,495],{"class":83,"line":84},[81,496,461],{},[81,498,499],{"class":83,"line":90},[81,500,466],{},[81,502,503],{"class":83,"line":96},[81,504,471],{},[81,506,507],{"class":83,"line":102},[81,508,509],{},"\u003Cdiv id=\"add\">\u003C\u002Fdiv>\n",[11,511,512,513,516],{},"この",[78,514,515],{},"\u003Cdiv id=”app>\u003C\u002Fdiv>","としたところがvueコンポーネントを流し込むエントリーになります。フォームのビューファイルであるadd.phpはこれだけでおしまいです。",[27,518,519],{"id":519},"vue側の準備",[11,521,522],{},"ではvue側も作っていきましょう。src配下は以下の様に構成します。",[70,524,527],{"className":525,"code":526,"language":351},[349],"├── src\n ├── add.vue\n ├── components\n │ └── form.vue\n ├── edit.vue\n ├── index.vue\n └── main.js\n",[78,528,526],{"__ignoreMap":76},[11,530,531],{},"index.vue、add.vue、edit.vueそれぞれが一覧・追加・編集ページのUIを構築します。しかしedit.vueとadd.vueは入力項目が同じで、初期値があるかないかの違いだけです。そのため共通のコンポーネントform.vueを作成します。",[11,533,534],{},"form.vueはひとまず以下の様に設定しておきます。",[70,536,541],{"className":537,"code":538,"filename":539,"language":540,"meta":76,"style":76},"language-vue shiki shiki-themes material-theme-ocean","\u003Ctemplate>\n \u003Cdiv class=\"ccm-dashboard-content-inner\">\n \u003Cp>vueレンダリングテスト\u003C\u002Fp>\n \n \u003Cdiv class=\"ccm-dashboard-form-actions-wrapper\">\n \u003Cdiv class=\"ccm-dashboard-form-actions\">\n \u003Cbutton class=\"pull-left btn btn-primary\">\n 一覧へ戻る\n \u003C\u002Fbutton>\n \u003Ca href=\"#\" class=\"pull-right btn btn-primary\">\n 登録\n \u003C\u002Fa>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n name:'albumForm',\n props:['isEdit']\n}\n\u003C\u002Fscript>\n","form.vue","vue",[78,542,543,556,582,603,608,627,647,668,673,682,713,718,726,735,744,753,761,765,774,786,805,825,829],{"__ignoreMap":76},[81,544,545,549,553],{"class":83,"line":84},[81,546,548],{"class":547},"sAklC","\u003C",[81,550,552],{"class":551},"s-wAU","template",[81,554,555],{"class":547},">\n",[81,557,558,561,564,568,571,574,578,580],{"class":83,"line":90},[81,559,560],{"class":547}," \u003C",[81,562,563],{"class":551},"div",[81,565,567],{"class":566},"sJ14y"," class",[81,569,570],{"class":547},"=",[81,572,573],{"class":547},"\"",[81,575,577],{"class":576},"sfyAc","ccm-dashboard-content-inner",[81,579,573],{"class":547},[81,581,555],{"class":547},[81,583,584,587,589,592,596,599,601],{"class":83,"line":96},[81,585,586],{"class":547}," \u003C",[81,588,11],{"class":551},[81,590,591],{"class":547},">",[81,593,595],{"class":594},"s0W1g","vueレンダリングテスト",[81,597,598],{"class":547},"\u003C\u002F",[81,600,11],{"class":551},[81,602,555],{"class":547},[81,604,605],{"class":83,"line":102},[81,606,607],{"class":594}," \n",[81,609,610,612,614,616,618,620,623,625],{"class":83,"line":108},[81,611,586],{"class":547},[81,613,563],{"class":551},[81,615,567],{"class":566},[81,617,570],{"class":547},[81,619,573],{"class":547},[81,621,622],{"class":576},"ccm-dashboard-form-actions-wrapper",[81,624,573],{"class":547},[81,626,555],{"class":547},[81,628,629,632,634,636,638,640,643,645],{"class":83,"line":114},[81,630,631],{"class":547}," \u003C",[81,633,563],{"class":551},[81,635,567],{"class":566},[81,637,570],{"class":547},[81,639,573],{"class":547},[81,641,642],{"class":576},"ccm-dashboard-form-actions",[81,644,573],{"class":547},[81,646,555],{"class":547},[81,648,649,652,655,657,659,661,664,666],{"class":83,"line":121},[81,650,651],{"class":547}," \u003C",[81,653,654],{"class":551},"button",[81,656,567],{"class":566},[81,658,570],{"class":547},[81,660,573],{"class":547},[81,662,663],{"class":576},"pull-left btn btn-primary",[81,665,573],{"class":547},[81,667,555],{"class":547},[81,669,670],{"class":83,"line":127},[81,671,672],{"class":594}," 一覧へ戻る\n",[81,674,675,678,680],{"class":83,"line":133},[81,676,677],{"class":547}," \u003C\u002F",[81,679,654],{"class":551},[81,681,555],{"class":547},[81,683,684,686,688,691,693,695,698,700,702,704,706,709,711],{"class":83,"line":139},[81,685,651],{"class":547},[81,687,15],{"class":551},[81,689,690],{"class":566}," href",[81,692,570],{"class":547},[81,694,573],{"class":547},[81,696,697],{"class":576},"#",[81,699,573],{"class":547},[81,701,567],{"class":566},[81,703,570],{"class":547},[81,705,573],{"class":547},[81,707,708],{"class":576},"pull-right btn btn-primary",[81,710,573],{"class":547},[81,712,555],{"class":547},[81,714,715],{"class":83,"line":145},[81,716,717],{"class":594}," 登録\n",[81,719,720,722,724],{"class":83,"line":151},[81,721,677],{"class":547},[81,723,15],{"class":551},[81,725,555],{"class":547},[81,727,728,731,733],{"class":83,"line":157},[81,729,730],{"class":547}," \u003C\u002F",[81,732,563],{"class":551},[81,734,555],{"class":547},[81,736,737,740,742],{"class":83,"line":163},[81,738,739],{"class":547}," \u003C\u002F",[81,741,563],{"class":551},[81,743,555],{"class":547},[81,745,746,749,751],{"class":83,"line":169},[81,747,748],{"class":547}," \u003C\u002F",[81,750,563],{"class":551},[81,752,555],{"class":547},[81,754,755,757,759],{"class":83,"line":175},[81,756,598],{"class":547},[81,758,552],{"class":551},[81,760,555],{"class":547},[81,762,763],{"class":83,"line":180},[81,764,118],{"emptyLinePlaceholder":117},[81,766,767,769,772],{"class":83,"line":186},[81,768,548],{"class":547},[81,770,771],{"class":551},"script",[81,773,555],{"class":547},[81,775,776,780,783],{"class":83,"line":192},[81,777,779],{"class":778},"s6cf3","export",[81,781,782],{"class":778}," default",[81,784,785],{"class":547}," {\n",[81,787,788,791,794,797,800,802],{"class":83,"line":197},[81,789,790],{"class":551}," name",[81,792,793],{"class":547},":",[81,795,796],{"class":547},"'",[81,798,799],{"class":576},"albumForm",[81,801,796],{"class":547},[81,803,804],{"class":547},",\n",[81,806,807,810,812,815,817,820,822],{"class":83,"line":202},[81,808,809],{"class":551}," props",[81,811,793],{"class":547},[81,813,814],{"class":594},"[",[81,816,796],{"class":547},[81,818,819],{"class":576},"isEdit",[81,821,796],{"class":547},[81,823,824],{"class":594},"]\n",[81,826,827],{"class":83,"line":208},[81,828,447],{"class":547},[81,830,831,833,835],{"class":83,"line":213},[81,832,598],{"class":547},[81,834,771],{"class":551},[81,836,555],{"class":547},[11,838,839],{},"そしてadd.vueでこのform.vueを読み込んで",[70,841,844],{"className":537,"code":842,"filename":843,"language":540,"meta":76,"style":76},"\u003Ctemplate>\n \u003CAlbumForm :isEdit=\"false\"\u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport AlbumForm from '.\u002Fcomponents\u002Fform';\nexport default {\n name:'add',\n components:{AlbumForm}\n}\n\u003C\u002Fscript>\n","app.vue",[78,845,846,854,876,884,888,896,918,926,941,953,957],{"__ignoreMap":76},[81,847,848,850,852],{"class":83,"line":84},[81,849,548],{"class":547},[81,851,552],{"class":551},[81,853,555],{"class":547},[81,855,856,858,861,864,866,868,871,873],{"class":83,"line":90},[81,857,560],{"class":547},[81,859,860],{"class":551},"AlbumForm",[81,862,863],{"class":566}," :isEdit",[81,865,570],{"class":547},[81,867,573],{"class":547},[81,869,870],{"class":576},"false",[81,872,573],{"class":547},[81,874,875],{"class":547},"\u002F>\n",[81,877,878,880,882],{"class":83,"line":96},[81,879,598],{"class":547},[81,881,552],{"class":551},[81,883,555],{"class":547},[81,885,886],{"class":83,"line":102},[81,887,118],{"emptyLinePlaceholder":117},[81,889,890,892,894],{"class":83,"line":108},[81,891,548],{"class":547},[81,893,771],{"class":551},[81,895,555],{"class":547},[81,897,898,901,904,907,910,913,915],{"class":83,"line":114},[81,899,900],{"class":778},"import",[81,902,903],{"class":594}," AlbumForm ",[81,905,906],{"class":778},"from",[81,908,909],{"class":547}," '",[81,911,912],{"class":576},".\u002Fcomponents\u002Fform",[81,914,796],{"class":547},[81,916,917],{"class":547},";\n",[81,919,920,922,924],{"class":83,"line":121},[81,921,779],{"class":778},[81,923,782],{"class":778},[81,925,785],{"class":547},[81,927,928,930,932,934,937,939],{"class":83,"line":127},[81,929,790],{"class":551},[81,931,793],{"class":547},[81,933,796],{"class":547},[81,935,936],{"class":576},"add",[81,938,796],{"class":547},[81,940,804],{"class":547},[81,942,943,946,949,951],{"class":83,"line":133},[81,944,945],{"class":551}," components",[81,947,948],{"class":547},":{",[81,950,860],{"class":594},[81,952,447],{"class":547},[81,954,955],{"class":83,"line":139},[81,956,447],{"class":547},[81,958,959,961,963],{"class":83,"line":145},[81,960,598],{"class":547},[81,962,771],{"class":551},[81,964,555],{"class":547},[11,966,967,970,971,974],{},[78,968,969],{},"main.js","にて",[78,972,973],{},"id=\"app\"","の要素にマウントする様にします。",[70,976,980],{"className":977,"code":978,"filename":969,"language":979,"meta":76,"style":76},"language-javascript shiki shiki-themes material-theme-ocean","import Vue from 'vue'\nimport Add from '.\u002Fadd.vue'\n\nVue.config.productionTip = false\n\nnew Vue({\n render: h => h(Add),\n}).$mount('#add')\n","javascript",[78,981,982,998,1014,1018,1040,1044,1058,1079],{"__ignoreMap":76},[81,983,984,986,989,991,993,995],{"class":83,"line":84},[81,985,900],{"class":778},[81,987,988],{"class":594}," Vue ",[81,990,906],{"class":778},[81,992,909],{"class":547},[81,994,540],{"class":576},[81,996,997],{"class":547},"'\n",[81,999,1000,1002,1005,1007,1009,1012],{"class":83,"line":90},[81,1001,900],{"class":778},[81,1003,1004],{"class":594}," Add ",[81,1006,906],{"class":778},[81,1008,909],{"class":547},[81,1010,1011],{"class":576},".\u002Fadd.vue",[81,1013,997],{"class":547},[81,1015,1016],{"class":83,"line":96},[81,1017,118],{"emptyLinePlaceholder":117},[81,1019,1020,1023,1026,1029,1031,1034,1036],{"class":83,"line":102},[81,1021,1022],{"class":594},"Vue",[81,1024,1025],{"class":547},".",[81,1027,1028],{"class":594},"config",[81,1030,1025],{"class":547},[81,1032,1033],{"class":594},"productionTip ",[81,1035,570],{"class":547},[81,1037,1039],{"class":1038},"sbqyR"," false\n",[81,1041,1042],{"class":83,"line":108},[81,1043,118],{"emptyLinePlaceholder":117},[81,1045,1046,1049,1053,1056],{"class":83,"line":114},[81,1047,1048],{"class":547},"new",[81,1050,1052],{"class":1051},"sdLwU"," Vue",[81,1054,1055],{"class":594},"(",[81,1057,377],{"class":547},[81,1059,1060,1063,1065,1069,1072,1074,1077],{"class":83,"line":121},[81,1061,1062],{"class":1051}," render",[81,1064,793],{"class":547},[81,1066,1068],{"class":1067},"s7ZW3"," h",[81,1070,1071],{"class":566}," =>",[81,1073,1068],{"class":1051},[81,1075,1076],{"class":594},"(Add)",[81,1078,804],{"class":547},[81,1080,1081,1084,1087,1089,1092,1094,1096,1099,1101],{"class":83,"line":127},[81,1082,1083],{"class":547},"}",[81,1085,1086],{"class":594},")",[81,1088,1025],{"class":547},[81,1090,1091],{"class":1051},"$mount",[81,1093,1055],{"class":594},[81,1095,796],{"class":547},[81,1097,1098],{"class":576},"#add",[81,1100,796],{"class":547},[81,1102,1103],{"class":594},")\n",[11,1105,1106,1107,1110],{},"こうしてビルドをしてみましょう。そして",[78,1108,1109],{},"\u002Fdashboard\u002Fvuetest\u002Fadd","へ移動してみると",[55,1112],{":src":1113,":width":58},"'_mix\u002Fsch-2020-08-26-22.48.54-768x529.png'",[11,1115,1116,1117,1119,1120,1122,1123,1125],{},"しっかりと",[78,1118,973],{},"に",[78,1121,539],{},"がレンダリングされました。ではこの",[78,1124,539],{},"にガシガシとフォームUIを作っていきましょう！",[27,1127,1128],{"id":1128},"まずはタイトルを入力するだけのものを作成",[11,1130,1131],{},"最終的なフォームにはリッチテキストエディタとファイルセレクターなど、concrete5で用いられているフォームをvueで実装したいと思います。しかし、その２つはなかなか曲者で今回の記事で説明すると長くなるので次回に話します。",[11,1133,1134],{},"まずはvueとPHP(concrete5)でどう連携させてDBにデータを挿入するかの全体的な流れについて説明するとともに、タイトル部分（プレーンテキスト）を追加できる様にしていきましょう。",[50,1136,1138],{"id":1137},"postでバックに値を送る","POSTでバックに値を送る",[11,1140,1141,1142,1145,1146,1149,1150,1152],{},"vueで構築したUIで入力された値はどうやってバックに渡すか？簡単です。フォームを作る時の様に",[78,1143,1144],{},"input","を",[78,1147,1148],{},"\u003Cform method=\"post\">\u003C\u002Fform>","で囲んであげて、送信用のsubmitボタンを作るだけです。今回のパッケージではPOSTの値をAjaxとかで送るのでなく、普通にsubmitでサーバーに送信する様にしました。以下の様に",[78,1151,539],{},"を変えます。",[70,1154,1156],{"className":537,"code":1155,"filename":539,"language":540,"meta":76,"style":76},"\u003Ctemplate>\n \u003Cdiv class=\"ccm-dashboard-content-inner\">\n \u003Ch3>アルバム新規追加\u003C\u002Fh3>\n \u003Chr>\n \u003Cform method=\"post\">\n \u003Clabel for=\"title\" class=\"control-label\">アルバムタイトル\u003C\u002Flabel>\n \u003Cinput type=\"text\" name=\"title\" class=\"form-control ccm-input-text\" v-model=\"title\">\n\n \u003Cdiv class=\"ccm-dashboard-form-actions-wrapper\">\n \u003Cdiv class=\"ccm-dashboard-form-actions\">\n \u003Cbutton class=\"pull-left btn btn-primary\">\n 一覧へ戻る\n \u003C\u002Fbutton>\n \u003Cinput value=\"登録\" type=\"submit\" class=\"pull-right btn btn-primary\">\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fform>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n name:'albumForm',\n props:['isEdit'],\n data(){\n return{\n title:''\n }\n }\n}\n\u003C\u002Fscript>\n",[78,1157,1158,1166,1184,1201,1210,1231,1272,1324,1328,1346,1364,1383,1388,1397,1438,1446,1454,1462,1470,1478,1482,1490,1498,1512,1531,1539,1546,1556,1561,1565,1569],{"__ignoreMap":76},[81,1159,1160,1162,1164],{"class":83,"line":84},[81,1161,548],{"class":547},[81,1163,552],{"class":551},[81,1165,555],{"class":547},[81,1167,1168,1170,1172,1174,1176,1178,1180,1182],{"class":83,"line":90},[81,1169,560],{"class":547},[81,1171,563],{"class":551},[81,1173,567],{"class":566},[81,1175,570],{"class":547},[81,1177,573],{"class":547},[81,1179,577],{"class":576},[81,1181,573],{"class":547},[81,1183,555],{"class":547},[81,1185,1186,1188,1190,1192,1195,1197,1199],{"class":83,"line":96},[81,1187,586],{"class":547},[81,1189,50],{"class":551},[81,1191,591],{"class":547},[81,1193,1194],{"class":594},"アルバム新規追加",[81,1196,598],{"class":547},[81,1198,50],{"class":551},[81,1200,555],{"class":547},[81,1202,1203,1205,1208],{"class":83,"line":102},[81,1204,586],{"class":547},[81,1206,1207],{"class":551},"hr",[81,1209,555],{"class":547},[81,1211,1212,1214,1217,1220,1222,1224,1227,1229],{"class":83,"line":108},[81,1213,586],{"class":547},[81,1215,1216],{"class":551},"form",[81,1218,1219],{"class":566}," method",[81,1221,570],{"class":547},[81,1223,573],{"class":547},[81,1225,1226],{"class":576},"post",[81,1228,573],{"class":547},[81,1230,555],{"class":547},[81,1232,1233,1235,1238,1241,1243,1245,1248,1250,1252,1254,1256,1259,1261,1263,1266,1268,1270],{"class":83,"line":114},[81,1234,631],{"class":547},[81,1236,1237],{"class":551},"label",[81,1239,1240],{"class":566}," for",[81,1242,570],{"class":547},[81,1244,573],{"class":547},[81,1246,1247],{"class":576},"title",[81,1249,573],{"class":547},[81,1251,567],{"class":566},[81,1253,570],{"class":547},[81,1255,573],{"class":547},[81,1257,1258],{"class":576},"control-label",[81,1260,573],{"class":547},[81,1262,591],{"class":547},[81,1264,1265],{"class":594},"アルバムタイトル",[81,1267,598],{"class":547},[81,1269,1237],{"class":551},[81,1271,555],{"class":547},[81,1273,1274,1276,1278,1281,1283,1285,1287,1289,1292,1294,1296,1298,1300,1302,1304,1306,1309,1311,1314,1316,1318,1320,1322],{"class":83,"line":121},[81,1275,631],{"class":547},[81,1277,1144],{"class":551},[81,1279,1280],{"class":566}," type",[81,1282,570],{"class":547},[81,1284,573],{"class":547},[81,1286,351],{"class":576},[81,1288,573],{"class":547},[81,1290,1291],{"class":566}," name",[81,1293,570],{"class":547},[81,1295,573],{"class":547},[81,1297,1247],{"class":576},[81,1299,573],{"class":547},[81,1301,567],{"class":566},[81,1303,570],{"class":547},[81,1305,573],{"class":547},[81,1307,1308],{"class":576},"form-control ccm-input-text",[81,1310,573],{"class":547},[81,1312,1313],{"class":566}," v-model",[81,1315,570],{"class":547},[81,1317,573],{"class":547},[81,1319,1247],{"class":576},[81,1321,573],{"class":547},[81,1323,555],{"class":547},[81,1325,1326],{"class":83,"line":127},[81,1327,118],{"emptyLinePlaceholder":117},[81,1329,1330,1332,1334,1336,1338,1340,1342,1344],{"class":83,"line":133},[81,1331,631],{"class":547},[81,1333,563],{"class":551},[81,1335,567],{"class":566},[81,1337,570],{"class":547},[81,1339,573],{"class":547},[81,1341,622],{"class":576},[81,1343,573],{"class":547},[81,1345,555],{"class":547},[81,1347,1348,1350,1352,1354,1356,1358,1360,1362],{"class":83,"line":139},[81,1349,651],{"class":547},[81,1351,563],{"class":551},[81,1353,567],{"class":566},[81,1355,570],{"class":547},[81,1357,573],{"class":547},[81,1359,642],{"class":576},[81,1361,573],{"class":547},[81,1363,555],{"class":547},[81,1365,1366,1369,1371,1373,1375,1377,1379,1381],{"class":83,"line":145},[81,1367,1368],{"class":547}," \u003C",[81,1370,654],{"class":551},[81,1372,567],{"class":566},[81,1374,570],{"class":547},[81,1376,573],{"class":547},[81,1378,663],{"class":576},[81,1380,573],{"class":547},[81,1382,555],{"class":547},[81,1384,1385],{"class":83,"line":151},[81,1386,1387],{"class":594}," 一覧へ戻る\n",[81,1389,1390,1393,1395],{"class":83,"line":157},[81,1391,1392],{"class":547}," \u003C\u002F",[81,1394,654],{"class":551},[81,1396,555],{"class":547},[81,1398,1399,1401,1403,1406,1408,1410,1413,1415,1417,1419,1421,1424,1426,1428,1430,1432,1434,1436],{"class":83,"line":163},[81,1400,1368],{"class":547},[81,1402,1144],{"class":551},[81,1404,1405],{"class":566}," value",[81,1407,570],{"class":547},[81,1409,573],{"class":547},[81,1411,1412],{"class":576},"登録",[81,1414,573],{"class":547},[81,1416,1280],{"class":566},[81,1418,570],{"class":547},[81,1420,573],{"class":547},[81,1422,1423],{"class":576},"submit",[81,1425,573],{"class":547},[81,1427,567],{"class":566},[81,1429,570],{"class":547},[81,1431,573],{"class":547},[81,1433,708],{"class":576},[81,1435,573],{"class":547},[81,1437,555],{"class":547},[81,1439,1440,1442,1444],{"class":83,"line":169},[81,1441,677],{"class":547},[81,1443,563],{"class":551},[81,1445,555],{"class":547},[81,1447,1448,1450,1452],{"class":83,"line":175},[81,1449,730],{"class":547},[81,1451,563],{"class":551},[81,1453,555],{"class":547},[81,1455,1456,1458,1460],{"class":83,"line":180},[81,1457,739],{"class":547},[81,1459,1216],{"class":551},[81,1461,555],{"class":547},[81,1463,1464,1466,1468],{"class":83,"line":186},[81,1465,748],{"class":547},[81,1467,563],{"class":551},[81,1469,555],{"class":547},[81,1471,1472,1474,1476],{"class":83,"line":192},[81,1473,598],{"class":547},[81,1475,552],{"class":551},[81,1477,555],{"class":547},[81,1479,1480],{"class":83,"line":197},[81,1481,118],{"emptyLinePlaceholder":117},[81,1483,1484,1486,1488],{"class":83,"line":202},[81,1485,548],{"class":547},[81,1487,771],{"class":551},[81,1489,555],{"class":547},[81,1491,1492,1494,1496],{"class":83,"line":208},[81,1493,779],{"class":778},[81,1495,782],{"class":778},[81,1497,785],{"class":547},[81,1499,1500,1502,1504,1506,1508,1510],{"class":83,"line":213},[81,1501,790],{"class":551},[81,1503,793],{"class":547},[81,1505,796],{"class":547},[81,1507,799],{"class":576},[81,1509,796],{"class":547},[81,1511,804],{"class":547},[81,1513,1514,1516,1518,1520,1522,1524,1526,1529],{"class":83,"line":219},[81,1515,809],{"class":551},[81,1517,793],{"class":547},[81,1519,814],{"class":594},[81,1521,796],{"class":547},[81,1523,819],{"class":576},[81,1525,796],{"class":547},[81,1527,1528],{"class":594},"]",[81,1530,804],{"class":547},[81,1532,1533,1536],{"class":83,"line":224},[81,1534,1535],{"class":551}," data",[81,1537,1538],{"class":547},"(){\n",[81,1540,1541,1544],{"class":83,"line":229},[81,1542,1543],{"class":778}," return",[81,1545,377],{"class":547},[81,1547,1548,1551,1553],{"class":83,"line":234},[81,1549,1550],{"class":551}," title",[81,1552,793],{"class":547},[81,1554,1555],{"class":547},"''\n",[81,1557,1558],{"class":83,"line":239},[81,1559,1560],{"class":547}," }\n",[81,1562,1563],{"class":83,"line":245},[81,1564,406],{"class":547},[81,1566,1567],{"class":83,"line":251},[81,1568,447],{"class":547},[81,1570,1571,1573,1575],{"class":83,"line":256},[81,1572,598],{"class":547},[81,1574,771],{"class":551},[81,1576,555],{"class":547},[50,1578,1579],{"id":1579},"フロントバリデーションを実装",[11,1581,1582],{},"フォームから入力された値をバリデーションチェックします。しかし今回はせっかくvueを使っているのでフロントでバリデーションをしてあげましょう。例えばtitleが空でないかをチェックする場合以下の様にします。",[70,1584,1586],{"className":537,"code":1585,"filename":539,"language":540,"meta":76,"style":76},"\u003Ctemplate>\n \u003Cdiv class=\"ccm-dashboard-content-inner\">\n \u003Ch3>アルバム新規追加\u003C\u002Fh3>\n \u003Chr>\n \u003Cform method=\"post\" @submit=\"checkForm\">\n \u003Clabel for=\"title\" class=\"control-label\">アルバムタイトル\u003C\u002Flabel>\n \u003Cinput type=\"text\" name=\"title\" class=\"form-control ccm-input-text\" v-model=\"title\">\n \u003Cp class=\"text-danger\" v-if=\"errTitle.length>0\">{{errTitle}}\u003C\u002Fp>\n\n \u003Cdiv class=\"ccm-dashboard-form-actions-wrapper\">\n \u003Cdiv class=\"ccm-dashboard-form-actions\">\n \u003Cbutton class=\"pull-left btn btn-primary\">\n 一覧へ戻る\n \u003C\u002Fbutton>\n \u003Cinput value=\"登録\" type=\"submit\" class=\"pull-right btn btn-primary\">\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fform>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\u003Cscript>\nexport default {\n name:'albumForm',\n props:['isEdit'],\n data(){\n return{\n title:'',\n errTitle:''\n }\n },\n methods:{\n checkForm($event){\n if(this.title.length >0){\n return true;\n }else{\n $event.preventDefault();\n ConcreteAlert.error({\n title:'入力項目に誤りがあります。',\n message:'アルバムタイトルが入力されていません。',\n delay:5000\n })\n this.errTitle = \"タイトルを入力してください。\"\n }\n }\n }\n}\n\u003C\u002Fscript>\n",[78,1587,1588,1596,1614,1630,1638,1668,1704,1752,1792,1796,1814,1832,1850,1854,1862,1900,1908,1916,1924,1932,1940,1948,1956,1970,1988,1994,2000,2011,2020,2024,2029,2037,2050,2078,2088,2098,2113,2127,2143,2159,2169,2176,2196,2201,2205,2209,2214],{"__ignoreMap":76},[81,1589,1590,1592,1594],{"class":83,"line":84},[81,1591,548],{"class":547},[81,1593,552],{"class":551},[81,1595,555],{"class":547},[81,1597,1598,1600,1602,1604,1606,1608,1610,1612],{"class":83,"line":90},[81,1599,560],{"class":547},[81,1601,563],{"class":551},[81,1603,567],{"class":566},[81,1605,570],{"class":547},[81,1607,573],{"class":547},[81,1609,577],{"class":576},[81,1611,573],{"class":547},[81,1613,555],{"class":547},[81,1615,1616,1618,1620,1622,1624,1626,1628],{"class":83,"line":96},[81,1617,586],{"class":547},[81,1619,50],{"class":551},[81,1621,591],{"class":547},[81,1623,1194],{"class":594},[81,1625,598],{"class":547},[81,1627,50],{"class":551},[81,1629,555],{"class":547},[81,1631,1632,1634,1636],{"class":83,"line":102},[81,1633,586],{"class":547},[81,1635,1207],{"class":551},[81,1637,555],{"class":547},[81,1639,1640,1642,1644,1646,1648,1650,1652,1654,1657,1659,1661,1664,1666],{"class":83,"line":108},[81,1641,586],{"class":547},[81,1643,1216],{"class":551},[81,1645,1219],{"class":566},[81,1647,570],{"class":547},[81,1649,573],{"class":547},[81,1651,1226],{"class":576},[81,1653,573],{"class":547},[81,1655,1656],{"class":566}," @submit",[81,1658,570],{"class":547},[81,1660,573],{"class":547},[81,1662,1663],{"class":576},"checkForm",[81,1665,573],{"class":547},[81,1667,555],{"class":547},[81,1669,1670,1672,1674,1676,1678,1680,1682,1684,1686,1688,1690,1692,1694,1696,1698,1700,1702],{"class":83,"line":114},[81,1671,631],{"class":547},[81,1673,1237],{"class":551},[81,1675,1240],{"class":566},[81,1677,570],{"class":547},[81,1679,573],{"class":547},[81,1681,1247],{"class":576},[81,1683,573],{"class":547},[81,1685,567],{"class":566},[81,1687,570],{"class":547},[81,1689,573],{"class":547},[81,1691,1258],{"class":576},[81,1693,573],{"class":547},[81,1695,591],{"class":547},[81,1697,1265],{"class":594},[81,1699,598],{"class":547},[81,1701,1237],{"class":551},[81,1703,555],{"class":547},[81,1705,1706,1708,1710,1712,1714,1716,1718,1720,1722,1724,1726,1728,1730,1732,1734,1736,1738,1740,1742,1744,1746,1748,1750],{"class":83,"line":121},[81,1707,631],{"class":547},[81,1709,1144],{"class":551},[81,1711,1280],{"class":566},[81,1713,570],{"class":547},[81,1715,573],{"class":547},[81,1717,351],{"class":576},[81,1719,573],{"class":547},[81,1721,1291],{"class":566},[81,1723,570],{"class":547},[81,1725,573],{"class":547},[81,1727,1247],{"class":576},[81,1729,573],{"class":547},[81,1731,567],{"class":566},[81,1733,570],{"class":547},[81,1735,573],{"class":547},[81,1737,1308],{"class":576},[81,1739,573],{"class":547},[81,1741,1313],{"class":566},[81,1743,570],{"class":547},[81,1745,573],{"class":547},[81,1747,1247],{"class":576},[81,1749,573],{"class":547},[81,1751,555],{"class":547},[81,1753,1754,1756,1758,1760,1762,1764,1767,1769,1772,1774,1776,1779,1781,1783,1786,1788,1790],{"class":83,"line":127},[81,1755,631],{"class":547},[81,1757,11],{"class":551},[81,1759,567],{"class":566},[81,1761,570],{"class":547},[81,1763,573],{"class":547},[81,1765,1766],{"class":576},"text-danger",[81,1768,573],{"class":547},[81,1770,1771],{"class":566}," v-if",[81,1773,570],{"class":547},[81,1775,573],{"class":547},[81,1777,1778],{"class":576},"errTitle.length>0",[81,1780,573],{"class":547},[81,1782,591],{"class":547},[81,1784,1785],{"class":594},"{{errTitle}}",[81,1787,598],{"class":547},[81,1789,11],{"class":551},[81,1791,555],{"class":547},[81,1793,1794],{"class":83,"line":133},[81,1795,118],{"emptyLinePlaceholder":117},[81,1797,1798,1800,1802,1804,1806,1808,1810,1812],{"class":83,"line":139},[81,1799,631],{"class":547},[81,1801,563],{"class":551},[81,1803,567],{"class":566},[81,1805,570],{"class":547},[81,1807,573],{"class":547},[81,1809,622],{"class":576},[81,1811,573],{"class":547},[81,1813,555],{"class":547},[81,1815,1816,1818,1820,1822,1824,1826,1828,1830],{"class":83,"line":145},[81,1817,651],{"class":547},[81,1819,563],{"class":551},[81,1821,567],{"class":566},[81,1823,570],{"class":547},[81,1825,573],{"class":547},[81,1827,642],{"class":576},[81,1829,573],{"class":547},[81,1831,555],{"class":547},[81,1833,1834,1836,1838,1840,1842,1844,1846,1848],{"class":83,"line":151},[81,1835,1368],{"class":547},[81,1837,654],{"class":551},[81,1839,567],{"class":566},[81,1841,570],{"class":547},[81,1843,573],{"class":547},[81,1845,663],{"class":576},[81,1847,573],{"class":547},[81,1849,555],{"class":547},[81,1851,1852],{"class":83,"line":157},[81,1853,1387],{"class":594},[81,1855,1856,1858,1860],{"class":83,"line":163},[81,1857,1392],{"class":547},[81,1859,654],{"class":551},[81,1861,555],{"class":547},[81,1863,1864,1866,1868,1870,1872,1874,1876,1878,1880,1882,1884,1886,1888,1890,1892,1894,1896,1898],{"class":83,"line":169},[81,1865,1368],{"class":547},[81,1867,1144],{"class":551},[81,1869,1405],{"class":566},[81,1871,570],{"class":547},[81,1873,573],{"class":547},[81,1875,1412],{"class":576},[81,1877,573],{"class":547},[81,1879,1280],{"class":566},[81,1881,570],{"class":547},[81,1883,573],{"class":547},[81,1885,1423],{"class":576},[81,1887,573],{"class":547},[81,1889,567],{"class":566},[81,1891,570],{"class":547},[81,1893,573],{"class":547},[81,1895,708],{"class":576},[81,1897,573],{"class":547},[81,1899,555],{"class":547},[81,1901,1902,1904,1906],{"class":83,"line":175},[81,1903,677],{"class":547},[81,1905,563],{"class":551},[81,1907,555],{"class":547},[81,1909,1910,1912,1914],{"class":83,"line":180},[81,1911,730],{"class":547},[81,1913,563],{"class":551},[81,1915,555],{"class":547},[81,1917,1918,1920,1922],{"class":83,"line":186},[81,1919,739],{"class":547},[81,1921,1216],{"class":551},[81,1923,555],{"class":547},[81,1925,1926,1928,1930],{"class":83,"line":192},[81,1927,748],{"class":547},[81,1929,563],{"class":551},[81,1931,555],{"class":547},[81,1933,1934,1936,1938],{"class":83,"line":197},[81,1935,598],{"class":547},[81,1937,552],{"class":551},[81,1939,555],{"class":547},[81,1941,1942,1944,1946],{"class":83,"line":202},[81,1943,548],{"class":547},[81,1945,771],{"class":551},[81,1947,555],{"class":547},[81,1949,1950,1952,1954],{"class":83,"line":208},[81,1951,779],{"class":778},[81,1953,782],{"class":778},[81,1955,785],{"class":547},[81,1957,1958,1960,1962,1964,1966,1968],{"class":83,"line":213},[81,1959,790],{"class":551},[81,1961,793],{"class":547},[81,1963,796],{"class":547},[81,1965,799],{"class":576},[81,1967,796],{"class":547},[81,1969,804],{"class":547},[81,1971,1972,1974,1976,1978,1980,1982,1984,1986],{"class":83,"line":219},[81,1973,809],{"class":551},[81,1975,793],{"class":547},[81,1977,814],{"class":594},[81,1979,796],{"class":547},[81,1981,819],{"class":576},[81,1983,796],{"class":547},[81,1985,1528],{"class":594},[81,1987,804],{"class":547},[81,1989,1990,1992],{"class":83,"line":224},[81,1991,1535],{"class":551},[81,1993,1538],{"class":547},[81,1995,1996,1998],{"class":83,"line":229},[81,1997,1543],{"class":778},[81,1999,377],{"class":547},[81,2001,2002,2004,2006,2009],{"class":83,"line":234},[81,2003,1550],{"class":551},[81,2005,793],{"class":547},[81,2007,2008],{"class":547},"''",[81,2010,804],{"class":547},[81,2012,2013,2016,2018],{"class":83,"line":239},[81,2014,2015],{"class":551}," errTitle",[81,2017,793],{"class":547},[81,2019,1555],{"class":547},[81,2021,2022],{"class":83,"line":245},[81,2023,1560],{"class":547},[81,2025,2026],{"class":83,"line":251},[81,2027,2028],{"class":547}," },\n",[81,2030,2031,2034],{"class":83,"line":256},[81,2032,2033],{"class":551}," methods",[81,2035,2036],{"class":547},":{\n",[81,2038,2039,2042,2044,2047],{"class":83,"line":262},[81,2040,2041],{"class":551}," checkForm",[81,2043,1055],{"class":547},[81,2045,2046],{"class":1067},"$event",[81,2048,2049],{"class":547},"){\n",[81,2051,2052,2055,2057,2060,2062,2064,2067,2070,2074,2076],{"class":83,"line":267},[81,2053,2054],{"class":778}," if",[81,2056,1055],{"class":551},[81,2058,2059],{"class":547},"this.",[81,2061,1247],{"class":594},[81,2063,1025],{"class":547},[81,2065,2066],{"class":594},"length",[81,2068,2069],{"class":547}," >",[81,2071,2073],{"class":2072},"sx098","0",[81,2075,1086],{"class":551},[81,2077,377],{"class":547},[81,2079,2080,2083,2086],{"class":83,"line":272},[81,2081,2082],{"class":778}," return",[81,2084,2085],{"class":1038}," true",[81,2087,917],{"class":547},[81,2089,2090,2093,2096],{"class":83,"line":278},[81,2091,2092],{"class":547}," }",[81,2094,2095],{"class":778},"else",[81,2097,377],{"class":547},[81,2099,2100,2103,2105,2108,2111],{"class":83,"line":283},[81,2101,2102],{"class":594}," $event",[81,2104,1025],{"class":547},[81,2106,2107],{"class":1051},"preventDefault",[81,2109,2110],{"class":551},"()",[81,2112,917],{"class":547},[81,2114,2115,2118,2120,2123,2125],{"class":83,"line":288},[81,2116,2117],{"class":594}," ConcreteAlert",[81,2119,1025],{"class":547},[81,2121,2122],{"class":1051},"error",[81,2124,1055],{"class":551},[81,2126,377],{"class":547},[81,2128,2129,2132,2134,2136,2139,2141],{"class":83,"line":293},[81,2130,2131],{"class":551}," title",[81,2133,793],{"class":547},[81,2135,796],{"class":547},[81,2137,2138],{"class":576},"入力項目に誤りがあります。",[81,2140,796],{"class":547},[81,2142,804],{"class":547},[81,2144,2145,2148,2150,2152,2155,2157],{"class":83,"line":298},[81,2146,2147],{"class":551}," message",[81,2149,793],{"class":547},[81,2151,796],{"class":547},[81,2153,2154],{"class":576},"アルバムタイトルが入力されていません。",[81,2156,796],{"class":547},[81,2158,804],{"class":547},[81,2160,2161,2164,2166],{"class":83,"line":303},[81,2162,2163],{"class":551}," delay",[81,2165,793],{"class":547},[81,2167,2168],{"class":2072},"5000\n",[81,2170,2171,2174],{"class":83,"line":308},[81,2172,2173],{"class":547}," }",[81,2175,1103],{"class":551},[81,2177,2178,2181,2184,2187,2190,2193],{"class":83,"line":313},[81,2179,2180],{"class":547}," this.",[81,2182,2183],{"class":594},"errTitle",[81,2185,2186],{"class":547}," =",[81,2188,2189],{"class":547}," \"",[81,2191,2192],{"class":576},"タイトルを入力してください。",[81,2194,2195],{"class":547},"\"\n",[81,2197,2198],{"class":83,"line":318},[81,2199,2200],{"class":547}," }\n",[81,2202,2203],{"class":83,"line":323},[81,2204,1560],{"class":547},[81,2206,2207],{"class":83,"line":328},[81,2208,406],{"class":547},[81,2210,2212],{"class":83,"line":2211},46,[81,2213,447],{"class":547},[81,2215,2217,2219,2221],{"class":83,"line":2216},47,[81,2218,598],{"class":547},[81,2220,771],{"class":551},[81,2222,555],{"class":547},[11,2224,2225,2227,2228,2231,2232,2234,2235,2237],{},[78,2226,1216],{},"の箇所に",[78,2229,2230],{},"@submit=\"checkForm\"","というイベントを作成。これはこのformがsubmitされた際に",[78,2233,1663],{},"というメソッドを発火させるという意味です。そして",[78,2236,1663],{},"ではtitleの値が空かどうかを判断しています。",[11,2239,2240,2241,2244,2245,2247,2248,2251,2252,2255,2256,2258],{},"もし空でない場合は",[78,2242,2243],{},"return true","となって",[78,2246,1423],{},"が通って、サーバーへ値が送信されます。からの場合は",[78,2249,2250],{},"$event.preventDefault();","が実行されてsubmitされません。そして",[78,2253,2254],{},"ConcreteAlert.error","という8.4系から使用できるconcrete5のフラッシュメッセージのjsを出しています。（",[78,2257,2254],{},"は特に何も読み込まないでも使える）",[11,2260,2261],{},"空で「登録」を押すと以下の様になります。",[55,2263],{":src":2264,":width":58},"'_mix\u002Fsch-2020-08-27-0.07.18-768x531.png'",[11,2266,2267,2269],{},[78,2268,2250],{},"によってサーバーにデータは送信されず、ユーザーに対してエラーを表示できました。",[2271,2272,2274],"h4",{"id":2273},"eslintがある時のchips","ESLintがある時のchips",[11,2276,2277,2280],{},[78,2278,2279],{},"ConcreteAlert"," はconcrete5が用意してくれた便利なフラッシュメッセージです。しかし、ESLint付きのvueCLI内で使用ようとすると、ビルド時にこの様に怒られます。",[70,2282,2285],{"className":2283,"code":2284,"language":351},[349],"ERROR Failed to compile with 1 errors 23:50:16\n\n error in .\u002Fsrc\u002Fcomponents\u002Fform.vue\n\nModule Error (from .\u002Fnode_modules\u002Feslint-loader\u002Findex.js):\n\n\u002FApplications\u002FMAMP\u002Fhtdocs\u002Fc5test\u002Fpackages\u002Fvuetest\u002Fjs\u002Fpackageui\u002Fsrc\u002Fcomponents\u002Fform.vue\n 40:17 error 'ConcreteAlert' is not defined no-undef\n\n✖ 1 problem (1 error, 0 warnings)\n",[78,2286,2284],{"__ignoreMap":76},[11,2288,2289,2290,2292,2293,2296],{},"そうです。vueプロジェクト内には",[78,2291,2279],{}," を定義したjsファイルがない、というかconcreteが用意したjsを読み込めないのでこの様に怒られます。これだとビルドできないので",[78,2294,2295],{},"package.json","のeslintの設定に以下の記述をします。",[70,2298,2301],{"className":2299,"code":2300,"language":351},[349]," \"eslintConfig\": {\n　　\"globals\":{\n \"ConcreteAlert\": true,\n }\n },\n",[78,2302,2300],{"__ignoreMap":76},[11,2304,2305,2306,2308],{},"こうするとESLintは「ConcreteAlertってのはグローバルな奴なんだな〜。」と認識してくれて、実際にvueプロジェクト外にある",[78,2307,2279],{},"に対して怒らなくなります。",[27,2310,2311],{"id":2311},"バックエンド実装",[11,2313,2314],{},"vueを用いてまずはアルバムのタイトルだけを入力できるフォームを作りました。そしてこのタイトルをDBに挿入するまで行います。と言ってもシングルページコントローラーを以下の様に記述します。",[70,2316,2318],{"className":363,"code":2317,"filename":359,"language":365,"meta":76,"style":76},"\u003C?php\nnamespace Concrete\\Package\\Vuetest\\Controller\\SinglePage\\Dashboard;\ndefined('C5_EXECUTE') or die('Access Denied.');\nuse \\Concrete\\Core\\Page\\Controller\\DashboardPageController;\nuse Concrete\\Core\\Routing\\Redirect;\nuse Concrete\\Core\\Http\\Request;\n\n\nuse Core;\nuse Database;\n\nclass Vuetest extends DashboardPageController\n{\n public $packageHandle = 'vuetest';\n\n public function on_start()\n {\n $this->requireAsset('package-vue-production');\n }\n\n public function view() {\n }\n\n public function add(){\n if(Request::isPost() == true){\n $title = $this->post('title');\n\n if(empty($title)==false){\n $db = Database::connection();\n $db->executeQuery(\"START TRANSACTION\");\n $db->executeQuery(\n 'INSERT album SET `title`=?, `created`=now(), `modified`=now()',\n array($title)\n );\n $db->executeQuery(\"COMMIT\");\n Redirect::to('\u002Fdashboard\u002Fvuetest')->send();\n }else{\n Redirect::to('\u002Fdashboard\u002Fvuetest')->send();\n }\n\n }else{\n $this->render('\u002Fdashboard\u002Fvuetest\u002Fadd');\n }\n }\n}\n",[78,2319,2320,2324,2329,2333,2338,2343,2348,2352,2356,2361,2366,2370,2374,2378,2382,2386,2391,2396,2400,2404,2408,2412,2416,2420,2424,2429,2434,2438,2443,2448,2453,2458,2463,2468,2473,2478,2483,2488,2492,2496,2500,2505,2510,2514,2518],{"__ignoreMap":76},[81,2321,2322],{"class":83,"line":84},[81,2323,461],{},[81,2325,2326],{"class":83,"line":90},[81,2327,2328],{},"namespace Concrete\\Package\\Vuetest\\Controller\\SinglePage\\Dashboard;\n",[81,2330,2331],{"class":83,"line":96},[81,2332,466],{},[81,2334,2335],{"class":83,"line":102},[81,2336,2337],{},"use \\Concrete\\Core\\Page\\Controller\\DashboardPageController;\n",[81,2339,2340],{"class":83,"line":108},[81,2341,2342],{},"use Concrete\\Core\\Routing\\Redirect;\n",[81,2344,2345],{"class":83,"line":114},[81,2346,2347],{},"use Concrete\\Core\\Http\\Request;\n",[81,2349,2350],{"class":83,"line":121},[81,2351,118],{"emptyLinePlaceholder":117},[81,2353,2354],{"class":83,"line":127},[81,2355,118],{"emptyLinePlaceholder":117},[81,2357,2358],{"class":83,"line":133},[81,2359,2360],{},"use Core;\n",[81,2362,2363],{"class":83,"line":139},[81,2364,2365],{},"use Database;\n",[81,2367,2368],{"class":83,"line":145},[81,2369,118],{"emptyLinePlaceholder":117},[81,2371,2372],{"class":83,"line":151},[81,2373,372],{},[81,2375,2376],{"class":83,"line":157},[81,2377,377],{},[81,2379,2380],{"class":83,"line":163},[81,2381,382],{},[81,2383,2384],{"class":83,"line":169},[81,2385,118],{"emptyLinePlaceholder":117},[81,2387,2388],{"class":83,"line":175},[81,2389,2390],{}," public function on_start()\n",[81,2392,2393],{"class":83,"line":180},[81,2394,2395],{}," {\n",[81,2397,2398],{"class":83,"line":186},[81,2399,401],{},[81,2401,2402],{"class":83,"line":192},[81,2403,406],{},[81,2405,2406],{"class":83,"line":197},[81,2407,118],{"emptyLinePlaceholder":117},[81,2409,2410],{"class":83,"line":202},[81,2411,415],{},[81,2413,2414],{"class":83,"line":208},[81,2415,406],{},[81,2417,2418],{"class":83,"line":213},[81,2419,118],{"emptyLinePlaceholder":117},[81,2421,2422],{"class":83,"line":219},[81,2423,433],{},[81,2425,2426],{"class":83,"line":224},[81,2427,2428],{}," if(Request::isPost() == true){\n",[81,2430,2431],{"class":83,"line":229},[81,2432,2433],{}," $title = $this->post('title');\n",[81,2435,2436],{"class":83,"line":234},[81,2437,118],{"emptyLinePlaceholder":117},[81,2439,2440],{"class":83,"line":239},[81,2441,2442],{}," if(empty($title)==false){\n",[81,2444,2445],{"class":83,"line":245},[81,2446,2447],{}," $db = Database::connection();\n",[81,2449,2450],{"class":83,"line":251},[81,2451,2452],{}," $db->executeQuery(\"START TRANSACTION\");\n",[81,2454,2455],{"class":83,"line":256},[81,2456,2457],{}," $db->executeQuery(\n",[81,2459,2460],{"class":83,"line":262},[81,2461,2462],{}," 'INSERT album SET `title`=?, `created`=now(), `modified`=now()',\n",[81,2464,2465],{"class":83,"line":267},[81,2466,2467],{}," array($title)\n",[81,2469,2470],{"class":83,"line":272},[81,2471,2472],{}," );\n",[81,2474,2475],{"class":83,"line":278},[81,2476,2477],{}," $db->executeQuery(\"COMMIT\");\n",[81,2479,2480],{"class":83,"line":283},[81,2481,2482],{}," Redirect::to('\u002Fdashboard\u002Fvuetest')->send();\n",[81,2484,2485],{"class":83,"line":288},[81,2486,2487],{}," }else{\n",[81,2489,2490],{"class":83,"line":293},[81,2491,2482],{},[81,2493,2494],{"class":83,"line":298},[81,2495,2200],{},[81,2497,2498],{"class":83,"line":303},[81,2499,118],{"emptyLinePlaceholder":117},[81,2501,2502],{"class":83,"line":308},[81,2503,2504],{}," }else{\n",[81,2506,2507],{"class":83,"line":313},[81,2508,2509],{}," $this->render('\u002Fdashboard\u002Fvuetest\u002Fadd');\n",[81,2511,2512],{"class":83,"line":318},[81,2513,1560],{},[81,2515,2516],{"class":83,"line":323},[81,2517,406],{},[81,2519,2520],{"class":83,"line":328},[81,2521,447],{},[11,2523,2524,2526,2527,2530,2531,2534],{},[78,2525,1109],{}," でpostを送ると",[78,2528,2529],{},"add()","にて処理が行われます。",[78,2532,2533],{},"Request::isPost()","というメソッドを用いてリクエストがpostかどうかをチェックします。postであれば値をDBへ挿入するスクリプトを実行し、そうでなければ新規追加の画面を表示します。",[11,2536,2537,2540,2541,2544,2545,2548,2549,2552],{},[78,2538,2539],{},"DashboardPageController","配下では",[78,2542,2543],{},"$this->post('name')"," というメソッドで対応するname属性のinputの値を取得することができます！先ほどのフォームではタイトルの値を",[78,2546,2547],{},"name=\"title\"","としていたので",[78,2550,2551],{},"$title = $this->post('title');","で取得します",[50,2554,2556],{"id":2555},"chips-必ずバックエンドでもバリデーションを実装する","chips 必ずバックエンドでもバリデーションを実装する",[11,2558,2559],{},"よくみると下記の様にタイトルの値を検査しています。",[70,2561,2563],{"className":363,"code":2562,"filename":359,"language":365,"meta":76,"style":76},"if(empty($title)==false){\n ...\n}\n",[78,2564,2565,2570,2575],{"__ignoreMap":76},[81,2566,2567],{"class":83,"line":84},[81,2568,2569],{},"if(empty($title)==false){\n",[81,2571,2572],{"class":83,"line":90},[81,2573,2574],{}," ...\n",[81,2576,2577],{"class":83,"line":96},[81,2578,447],{},[563,2580,2584,2585],{"className":2581},[2582,2583],"alert","alert-danger","\n「フロントエンド でタイトルの値をバリデーションしたから別にやらなくても良くない？」というのは厳禁です。postで来た値は必ずバックエンドで同様にバリデーションをかけます。",[2586,2587,2588],"b",{},"なぜならブラウザのconsoleでフロントでの値は偽造することもでき、フロントエンドのバリデーションを不正にスルーできるからです。",[11,2590,2591],{},"vueで行っているバリデーションはあくまでユーザー補助、UX的な物でありセキュリティの観点からは言えばガバガバです。エンドユーザーが偽造ができないバックエンドであれば確実にバリデーションをすることができます。",[11,2593,2594],{},"dashbord配下は基本的にサイト管理者が触る物なので、不正な値を入れようとする人はいないと思いますが、フロントからpostされた値は基本的に信用しないスタイルを貫いた方が無難です。",[27,2596,2597],{"id":2597},"データを入れてみる",[11,2599,2600,2601,2603],{},"では早速使ってみましょう。",[78,2602,1109],{}," にアクセスするとタイトル入力フォームが出てきました。仮に「テスト」と入力。そして「登録」を押します。",[55,2605],{":src":2606,":width":58},"'_mix\u002Fsch-2020-08-27-0.48.59-768x203.png'",[11,2608,2609],{},"一覧のページにリダイレクトされました。ちゃんと挿入されたか、phpmyadminでみてみましょう。",[55,2611],{":src":2612,":width":2613,":center":484},"'_mix\u002Fsch-2020-08-27-0.51.36-768x340.png'","'500px'",[11,2615,2616],{},"いましたね。titleが「テスト」となっているので、正しくデータが入力されました。",[27,2618,2620],{"id":2619},"次回は","次回は…",[11,2622,2623],{},"以上がvueとバックエンド部分の一通りの実装でした。",[34,2625,2626,2629,2632],{},[37,2627,2628],{},"シングルページにvueのエントリーポイントを作る",[37,2630,2631],{},"エントリポイントにレンダリングされる様にコンポーネントを設定",[37,2633,2634],{},"jsをシングルページに読み込む",[11,2636,2637],{},"¥以上を意識すればconcrete5のシングルページに自由にvueを用いてUIを構築できます。あとはvueの使い方とバックエンドの設計を頑張るだけです。そして次回は編集画面と一覧画面の作成をしていきます。",[2639,2640,2641],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}",{"title":76,"searchDepth":96,"depth":96,"links":2643},[2644,2647,2648,2651,2652,2658,2661,2662],{"id":29,"depth":90,"text":29,"children":2645},[2646],{"id":52,"depth":96,"text":53},{"id":64,"depth":90,"text":65},{"id":337,"depth":90,"text":338,"children":2649},[2650],{"id":341,"depth":96,"text":342},{"id":519,"depth":90,"text":519},{"id":1128,"depth":90,"text":1128,"children":2653},[2654,2655],{"id":1137,"depth":96,"text":1138},{"id":1579,"depth":96,"text":1579,"children":2656},[2657],{"id":2273,"depth":102,"text":2274},{"id":2311,"depth":90,"text":2311,"children":2659},[2660],{"id":2555,"depth":96,"text":2556},{"id":2597,"depth":90,"text":2597},{"id":2619,"depth":90,"text":2620},[2664],"devstack","2020-08-27","oncrete5にVueCLIを使ってUIを構築する。データの登録。","md",{},{"title":6,"description":2666},"concrete5vue","Concrete5にVueCLIを使ってUIを構築する。","series\u002Fconcrete5vue-2",[2674,2675,540],"concrete5","js","_mix\u002Fvuewithconcrete.png",null,"s28kXBmZtYl1vPtmgjcP0QiTjdZEL9Zwpvzi-377-0o",{"id":2680,"title":18,"body":2681,"category":3347,"createdAt":3348,"description":2671,"extension":2667,"index":84,"meta":3349,"navigation":117,"path":3350,"publish":117,"seo":3351,"series":2670,"seriesTitle":2671,"stem":3352,"tag":3353,"thumbnail":2676,"updatedAt":2677,"__hash__":3354},"series\u002Fseries\u002Fconcrete5vue-1.md",{"type":8,"value":2682,"toc":3334},[2683,2686,2689,2693,2696,2758,2761,2764,2767,2770,2781,2784,2788,2791,2794,2797,2800,2803,2809,2812,2815,2821,2824,2830,2836,2859,2862,2865,2868,2871,2874,2887,2995,3001,3012,3019,3176,3191,3203,3209,3271,3277,3280,3283,3288,3315,3318,3325,3328,3331],[11,2684,2685],{},"こんにちはjunです。今回はconcrete5というCMSでVueを使ったパッケージのUIを作成していこうと思います。今回の記事ではコンポーネントを作成する前の、concrete5にvueプロジェクトを作成してCMSに結びつける環境構築まで行います。",[11,2687,2688],{},"またConcrete5とそのカスタマイズ方法についてある程度熟知している人向け、基準としてはカスタムパッケージを作成したことがある人向けの記事となります。対象とするConcrete5のバージョンは8.4以降となります。",[27,2690,2692],{"id":2691},"なぜvue","なぜVue？",[11,2694,2695],{},"なぜVueを使うのか。それはPHPとjqueryによるUI構築が非常に面倒になったからです。Concrete5にはフォーム（テキストエリアとかCMSからのファイル選択フォーム）をPHPで出力してくれる以下の様なヘルパーが存在します。",[70,2697,2699],{"className":363,"code":2698,"language":365,"meta":76,"style":76},"\u002F\u002F ヘルパーを読み込む\n$form = Core::make('helper\u002Fform');\n\n\u002F\u002Fテキストinput\necho $form->text($name, $default_value);\n\n\u002F\u002Fテキストエリア\necho $form-> textarea($name, $default_value);\n\n\u002F\u002F ファイルマネージャーヘルパー\n$file_selector = Core::make('helper\u002Fconcrete\u002Ffile_manager');\necho $file_selector->file('label', 'name_attr', 'Select Photo', $default_fileObj);\n",[78,2700,2701,2706,2711,2715,2720,2725,2729,2734,2739,2743,2748,2753],{"__ignoreMap":76},[81,2702,2703],{"class":83,"line":84},[81,2704,2705],{},"\u002F\u002F ヘルパーを読み込む\n",[81,2707,2708],{"class":83,"line":90},[81,2709,2710],{},"$form = Core::make('helper\u002Fform');\n",[81,2712,2713],{"class":83,"line":96},[81,2714,118],{"emptyLinePlaceholder":117},[81,2716,2717],{"class":83,"line":102},[81,2718,2719],{},"\u002F\u002Fテキストinput\n",[81,2721,2722],{"class":83,"line":108},[81,2723,2724],{},"echo $form->text($name, $default_value);\n",[81,2726,2727],{"class":83,"line":114},[81,2728,118],{"emptyLinePlaceholder":117},[81,2730,2731],{"class":83,"line":121},[81,2732,2733],{},"\u002F\u002Fテキストエリア\n",[81,2735,2736],{"class":83,"line":127},[81,2737,2738],{},"echo $form-> textarea($name, $default_value);\n",[81,2740,2741],{"class":83,"line":133},[81,2742,118],{"emptyLinePlaceholder":117},[81,2744,2745],{"class":83,"line":139},[81,2746,2747],{},"\u002F\u002F ファイルマネージャーヘルパー\n",[81,2749,2750],{"class":83,"line":145},[81,2751,2752],{},"$file_selector = Core::make('helper\u002Fconcrete\u002Ffile_manager');\n",[81,2754,2755],{"class":83,"line":151},[81,2756,2757],{},"echo $file_selector->file('label', 'name_attr', 'Select Photo', $default_fileObj);\n",[11,2759,2760],{},"上記のコードをページ上で実行すれば以下の様にフォームが現れます。",[55,2762],{":src":2763,":width":58},"'_mix\u002Fformhelpertest-768x272.png'",[11,2765,2766],{},"上から順番にテキストインプット、テキストエリア、そしてconcrete５純正のファイルマネージャーが出現します。name属性が与えられ、postを通じてデータを送ることができます。",[11,2768,2769],{},"簡単なブロックやパッケージUIであれば問題ないのですが、",[34,2771,2772,2775,2778],{},[37,2773,2774],{},"フロント側のバリデーションを実装する",[37,2776,2777],{},"決まったフォームを複数生成する",[37,2779,2780],{},"フォーム同士が入力値で依存させる場合（入力値でフォームのパターンが変わる）",[11,2782,2783],{},"上記の際にPHPとjqueryだけでは非常に苦労して工数もかかります。",[50,2785,2787],{"id":2786},"vueを使えばリッチなuiが作成可能","Vueを使えばリッチなUIが作成可能",[11,2789,2790],{},"今流行りのリッチなUI、フォームはほとんどがVue、React、Backbone,jsなどHTMLテンプレート、jsによる状態管理を行うことで簡単に実装できます。工数を抑えつつも、これらのライブラリを用いることでリッチなUIを作成することもできます。",[11,2792,2793],{},"今回の記事ではVue CLIを用いて作成したUIをconcrete5のパッケージ上で表示させ、入力内容の追加・更新・削除まで行える様に実装していきます。原理がわかれば意外と簡単です。",[27,2795,2796],{"id":2796},"パッケージの制作準備",[50,2798,2799],{"id":2799},"パッケージの専用のディレクトリを作成",[11,2801,2802],{},"それではVueで構築したUIを持つパッケージを作成していきましょう。pckageディレクトリ配下にvuetestというカスタムパッケージディレクトリを作ります。またディレクトリ構成は以下の通りにします。",[70,2804,2807],{"className":2805,"code":2806,"language":351},[349],"documentroot $ cd .\u002Fpackage\npackage $ mkdir vuetest && touch ...\npackage $ tree vuetest\n.\u002F\n└── vuetest\n ├── controller.php\n ├── controllers\n │ └── single_page\n │ └── dashboard\n │ └── vuetest.php\n ├── db.xml\n ├── icon.png\n ├── js\n │\n └── single_pages\n └── dashboard\n └── vuetest\n └── view.php\n",[78,2808,2806],{"__ignoreMap":76},[50,2810,2811],{"id":2811},"vueプロジェクトを作成",[11,2813,2814],{},"パッケージに必要なコントローラーやUIを表示するダッシュボード上のシングルページとそのコントローラーも用意します。そしてjsディレクトリを作成してその中にvue cliを用いてプロジェクトを作成します。",[70,2816,2819],{"className":2817,"code":2818,"language":351},[349],"package $ cd vuetest\u002Fjs\njs $ vue create packageui\n\nVue CLI v4.4.6\n? Please pick a preset: default (babel, eslint) #default\n\nVue CLI v4.4.6\n✨ Creating project in documentroot\u002Fvuetest\u002Fjs\u002Fpackageui.\n🗃 Initializing git repository...\n⚙️ Installing CLI plugins. This might take a while... \n\n🎉 Successfully created project packageui.\n\njs $ cd packageui && tree -L 1\n.\n├── README.md\n├── babel.config.js\n├── node_modules\n├── package-lock.json\n├── package.json\n├── public\n",[78,2820,2818],{"__ignoreMap":76},[11,2822,2823],{},"無事にvueのプロジェクトが作成されました。concrete5との都合によりvue.config.jsファイルを作成してwebpackの設定をいじります。",[70,2825,2828],{"className":2826,"code":2827,"language":351},[349],"packageui $ touch vue.config.js\n",[78,2829,2827],{"__ignoreMap":76},[70,2831,2834],{"className":2832,"code":2833,"language":351},[349],"module.exports = {\n configureWebpack: {\n output: {\n filename: '[name].js',\n chunkFilename: '[name].js'\n }\n },\n }\n",[78,2835,2833],{"__ignoreMap":76},[11,2837,2838,2839,2842,2843,2846,2847,2850,2851,2854,2855,2858],{},"これは ",[78,2840,2841],{},"npm run build",",",[78,2844,2845],{},"npm run build --mode development","で",[78,2848,2849],{},".vue","ファイルを",[78,2852,2853],{},".js","ファイルにコンパイルして",[78,2856,2857],{},"\u002Fdist","配下に配置される時に名前がいつも同じになる様に設定します。",[11,2860,2861],{},"buildをするとビルドされたファイルの名前にはハッシュされた英数字がつくのですが、これがビルドの度にころころ変わります。Concrete5でjsファイルをロードする場合は設定した名前が一致しないと読み込めませんので、ビルドの際に設定を変えなくて済む様に上記の設定をします。",[2271,2863,2864],{"id":2864},"もし複数のパッケージで共通のvueファイルを用いる場合",[11,2866,2867],{},"今回は vuetestというパッケージとそのディレクトリ配下に専用のvueプロジェクトを作成しますす。しかし複数のパッケージでvueファイルを使用したい場合、applicationディレクトリにjsディレクトリを作成し、vueプロジェクトを作成してください。",[50,2869,2870],{"id":2870},"コンパイルしたjsファイルをconcrete5と結びつける",[11,2872,2873],{},"vue cliでビルドするとdist配下にコンパイルされたjsファイルが生成されます。そのファイルとレンダー先のconcrete5上のページ（シングルページ）で読み込める様に、このjsファイルをCMSが読み込める様に設定します。",[11,2875,2876,2877,2879,2880,2882,2883,2886],{},"まずとりあえず以下の",[78,2878,969],{},"をビルドしてみます。レンダリング先に ",[78,2881,973],{}," という要素があれば",[78,2884,2885],{},"Appコンポーネント","がレンダーされます。",[70,2888,2891],{"className":977,"code":2889,"filename":2890,"language":979,"meta":76,"style":76},"import Vue from 'vue'\nimport App from '.\u002FApp.vue'\n\nVue.config.productionTip = false\n\nnew Vue({\n render: h => h(App),\n}).$mount('#app')\n","src\u002Fmain.js",[78,2892,2893,2907,2923,2927,2943,2947,2957,2974],{"__ignoreMap":76},[81,2894,2895,2897,2899,2901,2903,2905],{"class":83,"line":84},[81,2896,900],{"class":778},[81,2898,988],{"class":594},[81,2900,906],{"class":778},[81,2902,909],{"class":547},[81,2904,540],{"class":576},[81,2906,997],{"class":547},[81,2908,2909,2911,2914,2916,2918,2921],{"class":83,"line":90},[81,2910,900],{"class":778},[81,2912,2913],{"class":594}," App ",[81,2915,906],{"class":778},[81,2917,909],{"class":547},[81,2919,2920],{"class":576},".\u002FApp.vue",[81,2922,997],{"class":547},[81,2924,2925],{"class":83,"line":96},[81,2926,118],{"emptyLinePlaceholder":117},[81,2928,2929,2931,2933,2935,2937,2939,2941],{"class":83,"line":102},[81,2930,1022],{"class":594},[81,2932,1025],{"class":547},[81,2934,1028],{"class":594},[81,2936,1025],{"class":547},[81,2938,1033],{"class":594},[81,2940,570],{"class":547},[81,2942,1039],{"class":1038},[81,2944,2945],{"class":83,"line":108},[81,2946,118],{"emptyLinePlaceholder":117},[81,2948,2949,2951,2953,2955],{"class":83,"line":114},[81,2950,1048],{"class":547},[81,2952,1052],{"class":1051},[81,2954,1055],{"class":594},[81,2956,377],{"class":547},[81,2958,2959,2961,2963,2965,2967,2969,2972],{"class":83,"line":121},[81,2960,1062],{"class":1051},[81,2962,793],{"class":547},[81,2964,1068],{"class":1067},[81,2966,1071],{"class":566},[81,2968,1068],{"class":1051},[81,2970,2971],{"class":594},"(App)",[81,2973,804],{"class":547},[81,2975,2976,2978,2980,2982,2984,2986,2988,2991,2993],{"class":83,"line":127},[81,2977,1083],{"class":547},[81,2979,1086],{"class":594},[81,2981,1025],{"class":547},[81,2983,1091],{"class":1051},[81,2985,1055],{"class":594},[81,2987,796],{"class":547},[81,2989,2990],{"class":576},"#app",[81,2992,796],{"class":547},[81,2994,1103],{"class":594},[70,2996,2999],{"className":2997,"code":2998,"language":351},[349],"packageui ＄ npm run build\n.\n├── README.md\n├── babel.config.js\n├── dist\n│ ├── app.js\n│ ├── app.js.map\n│ ├── chunk-vendors.js\n│ ├── chunk-vendors.js.map\n│ ├── css\n│ ├── favicon.ico\n│ ├── img\n│ └── index.html\n├\n",[78,3000,2998],{"__ignoreMap":76},[11,3002,3003,3004,3007,3008,3011],{},"ビルド成功。いらないものもありますが、",[78,3005,3006],{},"app.js","と",[78,3009,3010],{},"chunk-vendors.js","が読み込まれる様にすればOKです。",[11,3013,3014,3015,3018],{},"パッケージ専用のjsファイルで作成する場合はパッケージのインストールコントローラ（",[78,3016,3017],{},"package\u002Fvuetest\u002Fcontroller.php","）に以下の様な記述をします。",[70,3020,3023],{"className":363,"code":3021,"filename":3022,"language":365,"meta":76,"style":76},"\u003C?php\nnamespace Concrete\\Package\\Vuetest;\ndefined('C5_EXECUTE') or die('Access Denied.');\nuse \\Concrete\\Core\\Asset\\AssetList;\nuse \\Concrete\\Core\\Asset\\Asset;\n\nclass Controller extends \\Concrete\\Core\\Package\\Package {\n protected $pkgHandle = 'vuetest';\n protected $appVersionRequired = '5.7.4';\n protected $pkgVersion = '1.0.0';\n\n public function on_start()\n {\n $al = AssetList::getInstance();\n $al->register(\n 'javascript', 'package-vue-build', 'js\u002Fpackageui\u002Fdist\u002Fapp.js',\n array('version' => '1.0.0', 'position' => Asset::ASSET_POSITION_FOOTER, 'combine' => true),\n $this->pkgHandle\n );\n \n $al->register(\n 'javascript', 'package-vue-chunk', 'js\u002Fpackageui\u002Fdist\u002Fchunk-vendors.js',\n array('version' => '1.0.0', 'position' => Asset::ASSET_POSITION_FOOTER, 'combine' => true),\n $this->pkgHandle\n );\n \n $al->registerGroup('package-vue-production', array(\n array('javascript', 'package-vue-build'),\n array('javascript', 'package-vue-chunk'),\n )); \n }\n...\n}\n","controller.php",[78,3024,3025,3029,3034,3038,3043,3048,3052,3057,3062,3067,3072,3076,3080,3084,3089,3094,3099,3104,3109,3114,3118,3122,3127,3131,3135,3139,3143,3148,3153,3158,3163,3167,3172],{"__ignoreMap":76},[81,3026,3027],{"class":83,"line":84},[81,3028,461],{},[81,3030,3031],{"class":83,"line":90},[81,3032,3033],{},"namespace Concrete\\Package\\Vuetest;\n",[81,3035,3036],{"class":83,"line":96},[81,3037,466],{},[81,3039,3040],{"class":83,"line":102},[81,3041,3042],{},"use \\Concrete\\Core\\Asset\\AssetList;\n",[81,3044,3045],{"class":83,"line":108},[81,3046,3047],{},"use \\Concrete\\Core\\Asset\\Asset;\n",[81,3049,3050],{"class":83,"line":114},[81,3051,118],{"emptyLinePlaceholder":117},[81,3053,3054],{"class":83,"line":121},[81,3055,3056],{},"class Controller extends \\Concrete\\Core\\Package\\Package {\n",[81,3058,3059],{"class":83,"line":127},[81,3060,3061],{}," protected $pkgHandle = 'vuetest';\n",[81,3063,3064],{"class":83,"line":133},[81,3065,3066],{}," protected $appVersionRequired = '5.7.4';\n",[81,3068,3069],{"class":83,"line":139},[81,3070,3071],{}," protected $pkgVersion = '1.0.0';\n",[81,3073,3074],{"class":83,"line":145},[81,3075,118],{"emptyLinePlaceholder":117},[81,3077,3078],{"class":83,"line":151},[81,3079,2390],{},[81,3081,3082],{"class":83,"line":157},[81,3083,2395],{},[81,3085,3086],{"class":83,"line":163},[81,3087,3088],{}," $al = AssetList::getInstance();\n",[81,3090,3091],{"class":83,"line":169},[81,3092,3093],{}," $al->register(\n",[81,3095,3096],{"class":83,"line":175},[81,3097,3098],{}," 'javascript', 'package-vue-build', 'js\u002Fpackageui\u002Fdist\u002Fapp.js',\n",[81,3100,3101],{"class":83,"line":180},[81,3102,3103],{}," array('version' => '1.0.0', 'position' => Asset::ASSET_POSITION_FOOTER, 'combine' => true),\n",[81,3105,3106],{"class":83,"line":186},[81,3107,3108],{}," $this->pkgHandle\n",[81,3110,3111],{"class":83,"line":192},[81,3112,3113],{}," );\n",[81,3115,3116],{"class":83,"line":197},[81,3117,607],{},[81,3119,3120],{"class":83,"line":202},[81,3121,3093],{},[81,3123,3124],{"class":83,"line":208},[81,3125,3126],{}," 'javascript', 'package-vue-chunk', 'js\u002Fpackageui\u002Fdist\u002Fchunk-vendors.js',\n",[81,3128,3129],{"class":83,"line":213},[81,3130,3103],{},[81,3132,3133],{"class":83,"line":219},[81,3134,3108],{},[81,3136,3137],{"class":83,"line":224},[81,3138,3113],{},[81,3140,3141],{"class":83,"line":229},[81,3142,607],{},[81,3144,3145],{"class":83,"line":234},[81,3146,3147],{}," $al->registerGroup('package-vue-production', array(\n",[81,3149,3150],{"class":83,"line":239},[81,3151,3152],{}," array('javascript', 'package-vue-build'),\n",[81,3154,3155],{"class":83,"line":245},[81,3156,3157],{}," array('javascript', 'package-vue-chunk'),\n",[81,3159,3160],{"class":83,"line":251},[81,3161,3162],{}," )); \n",[81,3164,3165],{"class":83,"line":256},[81,3166,406],{},[81,3168,3169],{"class":83,"line":262},[81,3170,3171],{},"...\n",[81,3173,3174],{"class":83,"line":267},[81,3175,447],{},[11,3177,3178,3179,3182,3183,3186,3187,3190],{},"vuetestパッケージのコントローラーで",[78,3180,3181],{},"$al->register","を用いて、パスで指定したjsファイルを登録します。２つあるのでを",[78,3184,3185],{},"$al->registerGroup","用いてのp",[78,3188,3189],{},"ackage-vue-production","名前で２つのjsファイルを読み込む様にグルーピングします。",[11,3192,3193,3194,3198,3199,3202],{},"concrete5ではこの様なjs\u002Fcssのアセット登録システムがあり、登録をすれば適当にアセットが読み込むことができる様になります。",[3195,3196,3197],"strong",{},"パッケージのコントローラーでは登録をした"," ので、次はjsファイルが必要な",[3195,3200,3201],{},"ページのコントローラーで呼び出し"," を行います。",[11,3204,3205,3208],{},[78,3206,3207],{},"vuetest\u002Fsingle_pages\u002Fdashboard\u002Fvuetest\u002Fview.php"," に以下の様に記述します。",[70,3210,3212],{"className":363,"code":3211,"language":365,"meta":76,"style":76},"\u003C?php\nnamespace Concrete\\Package\\Vuetest\\Controller\\SinglePage\\Dashboard;\ndefined('C5_EXECUTE') or die('Access Denied.');\nuse \\Concrete\\Core\\Page\\Controller\\DashboardPageController;\n\nclass Vuetest extends DashboardPageController\n{\n public $packageHandle = 'vuetest';\n\n public function view() {\n $this->requireAsset('package-vue-production');\n $this->set('success', 'My success message');\n }\n}\n",[78,3213,3214,3218,3222,3226,3230,3234,3238,3242,3246,3250,3254,3258,3263,3267],{"__ignoreMap":76},[81,3215,3216],{"class":83,"line":84},[81,3217,461],{},[81,3219,3220],{"class":83,"line":90},[81,3221,2328],{},[81,3223,3224],{"class":83,"line":96},[81,3225,466],{},[81,3227,3228],{"class":83,"line":102},[81,3229,2337],{},[81,3231,3232],{"class":83,"line":108},[81,3233,118],{"emptyLinePlaceholder":117},[81,3235,3236],{"class":83,"line":114},[81,3237,372],{},[81,3239,3240],{"class":83,"line":121},[81,3241,377],{},[81,3243,3244],{"class":83,"line":127},[81,3245,382],{},[81,3247,3248],{"class":83,"line":133},[81,3249,118],{"emptyLinePlaceholder":117},[81,3251,3252],{"class":83,"line":139},[81,3253,415],{},[81,3255,3256],{"class":83,"line":145},[81,3257,401],{},[81,3259,3260],{"class":83,"line":151},[81,3261,3262],{}," $this->set('success', 'My success message');\n",[81,3264,3265],{"class":83,"line":157},[81,3266,406],{},[81,3268,3269],{"class":83,"line":163},[81,3270,447],{},[11,3272,512,3273,3276],{},[78,3274,3275],{},"$this->requireAsset('package-vue-production');","で「先ほど登録したjsアセットをこのページで読み込め！」と命令しています。設定した後、実際に該当ページで探してみましょう。",[55,3278],{":src":3279,":width":58},"'_mix\u002Fsc-2020-08-01-19.52.09-768x133.png'",[11,3281,3282],{},"いました。\u002Fpackages\u002Fvuetest\u002Fjs\u002Fdist\u002F** と指定したパスにて読み込まれています。それではid=\"app\"を持つ適当なdivを作成して再度みてみましょう。",[11,3284,3285,3287],{},[78,3286,3207],{}," にて",[70,3289,3292],{"className":363,"code":3290,"filename":3291,"language":365,"meta":76,"style":76},"\u003C?php\ndefined('C5_EXECUTE') or die('Access Denied.');\n?>\n\n\u003Cdiv id=\"app\">\u003C\u002Fdiv>\n","view.php",[78,3293,3294,3298,3302,3306,3310],{"__ignoreMap":76},[81,3295,3296],{"class":83,"line":84},[81,3297,461],{},[81,3299,3300],{"class":83,"line":90},[81,3301,466],{},[81,3303,3304],{"class":83,"line":96},[81,3305,471],{},[81,3307,3308],{"class":83,"line":102},[81,3309,118],{"emptyLinePlaceholder":117},[81,3311,3312],{"class":83,"line":108},[81,3313,3314],{},"\u003Cdiv id=\"app\">\u003C\u002Fdiv>\n",[55,3316],{":src":3317,":width":2613,":center":484},"'_mix\u002Fsh-2020-08-01-19.56.01-768x812.png'",[11,3319,3320,3321,3324],{},"パスの関係上レイアウトが崩れ、画像が読み込めていませんがvue側で記述した内容が無事にレンダリングされています。これでvueとconcrete5のセッティングは完了です。vueプロジェクトでコンポーネントを作成しながら、適切な",[78,3322,3323],{},"id","を用いてページ上にレンダーします。",[27,3326,3327],{"id":3327},"次はフォームコンポーネントの作成",[11,3329,3330],{},"以上がconcrete5のパッケージ上にvueプロジェクトを作成して、concrete5に結びつける方法でした。これでvueを使え、レンダーされる環境は整ったので次は情報を登録するための登録フォームと編集画面の作成を行っていきます。",[2639,3332,3333],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}",{"title":76,"searchDepth":96,"depth":96,"links":3335},[3336,3339,3346],{"id":2691,"depth":90,"text":2692,"children":3337},[3338],{"id":2786,"depth":96,"text":2787},{"id":2796,"depth":90,"text":2796,"children":3340},[3341,3342,3345],{"id":2799,"depth":96,"text":2799},{"id":2811,"depth":96,"text":2811,"children":3343},[3344],{"id":2864,"depth":102,"text":2864},{"id":2870,"depth":96,"text":2870},{"id":3327,"depth":90,"text":3327},[2664],"2020-08-25",{},"\u002Fseries\u002Fconcrete5vue-1",{"title":18,"description":2671},"series\u002Fconcrete5vue-1",[2674,2675,540],"SFdt3_VrU2GVgYjfNjC32zyOKCtr79IKO3992JqFQJo",{"id":3356,"title":3357,"body":3358,"category":6691,"createdAt":6692,"description":6693,"extension":2667,"index":96,"meta":6694,"navigation":117,"path":6695,"publish":117,"seo":6696,"series":2670,"seriesTitle":2671,"stem":6697,"tag":6698,"thumbnail":2676,"updatedAt":2677,"__hash__":6699},"series\u002Fseries\u002Fconcrete5vue-3.md","Concrete5にVueCLIを使ってUIを構築する。3【編集画面と一覧画面】",{"type":8,"value":3359,"toc":6668},[3360,3366,3369,3373,3380,3383,3387,3390,3395,3402,3468,3479,3486,3493,3498,3501,3874,3878,3882,3888,3965,3973,3980,3983,3986,4013,4020,4132,4138,4380,4383,4390,4405,4408,4415,4418,4421,4424,4524,4527,4530,4536,4698,4705,4708,4711,4714,4717,4720,4723,4726,4729,6040,6043,6055,6058,6061,6064,6068,6073,6205,6209,6212,6218,6244,6247,6503,6509,6512,6515,6518,6521,6524,6527,6530,6533,6536,6539,6542,6545,6548,6551,6554,6653,6656,6659,6662,6665],[11,3361,13,3362,3365],{},[15,3363,3364],{"href":17},"Concrete5にVueCLIを使ってUIを構築する 2","の記事の続きを書いていきます。前回の記事ではフォームの作成・登録まで行いました。この記事では登録したデータの編集とファイルマネージャーのvueコンポーネント化を行っていきます。",[11,3367,3368],{},"編集画面は追加画面とコンポーネントを共有し、データベースからAjaxでデータを取得してコンポーネントに代入をします。そして登録したデータの操作が行える一覧画面を作成します。",[27,3370,3372],{"id":3371},"編集画面のレンダーとajax設定","編集画面のレンダーとAjax設定",[11,3374,3375,3376,3379],{},"まずは編集画面から作成していきます。編集は追加と違ってデータベースからデータを取得して、初期値として当てはめる必要があります。PHPであれば",[78,3377,3378],{},"value=\"\u003C?php echo $data?>\"","みたいに挿入することで簡単に実現できますが、vueを使うとなれば一捻り必要です。",[11,3381,3382],{},"jsでフロントを構築する場合、基本的にDBのデータはAjaxを用いて再度サーバーにデータを要求します。concrete5でもAjaxとそのエントリーを実装することができます。まずエントリーの設定からやってみましょう。",[50,3384,3386],{"id":3385},"ajaxエントリーrest-apiの作成","Ajaxエントリー(REST API)の作成",[11,3388,3389],{},"今回はシングルページのコントローラーを用いてAjax用のエントリーを実装します。Ajaxでデータを取得する際は基本的に取得用のURLを作成して、そのURLに対してAjaxを飛ばしてJSONデータをレスポンスとして受け取るのが定石です。",[70,3391,3393],{"className":3392,"code":350,"language":351},[349],[78,3394,350],{"__ignoreMap":76},[11,3396,3397,3398,3401],{},"では ",[78,3399,3400],{},"vuetest\u002Fcontrollers\u002Fsingle_page\u002Fdashboard\u002Fvuetest.php"," に以下のように記述します。",[70,3403,3405],{"className":363,"code":3404,"filename":359,"language":365,"meta":76,"style":76},"public function edit($id=null){\n if($id==null) return Redirect::to('\u002Fdashboard\u002Fvuetest\u002F')->send();\n\n if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){\n $db = Database::connection();\n $db->Execute(\"START TRANSACTION\");\n $result = $db->fetchAll('SELECT * FROM album WHERE ID = ?',array($id));\n $db->Execute(\"COMMIT\");\n return Core::make('helper\u002Fajax')->sendResult($result);\n }\n\n $this->render('\u002Fdashboard\u002Fvuetest\u002Fedit');\n}\n",[78,3406,3407,3412,3417,3421,3426,3431,3436,3441,3446,3451,3455,3459,3464],{"__ignoreMap":76},[81,3408,3409],{"class":83,"line":84},[81,3410,3411],{},"public function edit($id=null){\n",[81,3413,3414],{"class":83,"line":90},[81,3415,3416],{}," if($id==null) return Redirect::to('\u002Fdashboard\u002Fvuetest\u002F')->send();\n",[81,3418,3419],{"class":83,"line":96},[81,3420,118],{"emptyLinePlaceholder":117},[81,3422,3423],{"class":83,"line":102},[81,3424,3425],{}," if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){\n",[81,3427,3428],{"class":83,"line":108},[81,3429,3430],{}," $db = Database::connection();\n",[81,3432,3433],{"class":83,"line":114},[81,3434,3435],{}," $db->Execute(\"START TRANSACTION\");\n",[81,3437,3438],{"class":83,"line":121},[81,3439,3440],{}," $result = $db->fetchAll('SELECT * FROM album WHERE ID = ?',array($id));\n",[81,3442,3443],{"class":83,"line":127},[81,3444,3445],{}," $db->Execute(\"COMMIT\");\n",[81,3447,3448],{"class":83,"line":133},[81,3449,3450],{}," return Core::make('helper\u002Fajax')->sendResult($result);\n",[81,3452,3453],{"class":83,"line":139},[81,3454,406],{},[81,3456,3457],{"class":83,"line":145},[81,3458,118],{"emptyLinePlaceholder":117},[81,3460,3461],{"class":83,"line":151},[81,3462,3463],{}," $this->render('\u002Fdashboard\u002Fvuetest\u002Fedit');\n",[81,3465,3466],{"class":83,"line":157},[81,3467,447],{},[11,3469,3470,3471,3474,3475,3478],{},"まずは編集画面を ",[78,3472,3473],{},"\u002Fdashboard\u002Fvuetest\u002Fedit"," というURLで表示できるようにします。このメソッドではパラメータがあるので ",[78,3476,3477],{},"\u002Fdashboard\u002Fvuetest\u002Fedit\u002F2"," のようなURLを送信できます。数字の部分はアルバムのDBでのIDとします。（アルバムID）",[11,3480,3481,3482,3485],{},"つまり",[78,3483,3484],{},"\u002Fdashboard\u002Fvuetest\u002Fedit\u002F"," にアルバムIDを加えて送信することで、指定したIDのデータを表示できるようにします。そしてリクエストがXMLHttpRequestつまり、AjaxであればデータJSONで返し、そうでなければ404を返すようにします。",[11,3487,3488,3489,3492],{},"リクエストの種別を限定することで、ブラウザなどでAjax専用の ",[78,3490,3491],{},"\u002Fdashboard\u002Fvuetest\u002FloadData"," というURLを叩いても404しか表示されません。",[563,3494,3497],{"className":3495},[2582,3496],"alert-info","\nこのようなAPIを作成するときは、データを差し出してもいいユーザーなのかをチェックする必要があります。しかし今回のような管理画面配下のページ（dashboard）でルーティングする場合は特に気にする必要はありません。\n",[11,3499,3500],{},"\u002Fdashboard\u002F* 配下はリクエストからログインユーザーであるかをチェックしており、ログインユーザーでないリクエストの場合、ログインページのHTMLが返されます。実際にcurlで上記のURLを打ってみると",[70,3502,3506],{"className":3503,"code":3504,"language":3505,"meta":76,"style":76},"language-html shiki shiki-themes material-theme-ocean","\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n \u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"\u002Fconcrete\u002Fthemes\u002Fconcrete\u002Fmain.css\" \u002F>\n \n\u003Ctitle>ログイン :: c5test\u003C\u002Ftitle>\n\n\u003Cmeta http-equiv=\"content-type\" content=\"text\u002Fhtml; charset=UTF-8\"\u002F>\n\u003Cmeta name=\"generator\" content=\"concrete5 - 8.5.4\"\u002F>\n\u003Clink rel=\"canonical\" href=\"http:\u002F\u002Flocalhost:8888\u002Flogin\">\n\u003Cscript type=\"text\u002Fjavascript\">\n var CCM_DISPATCHER_FILENAME = \"\u002Findex.php\";\n var CCM_CID = 174;\n var CCM_EDIT_MODE = false;\n var CCM_ARRANGE_MODE = false;\n var CCM_IMAGE_PATH = \"\u002Fconcrete\u002Fimages\";\n var CCM_TOOLS_PATH = \"\u002Findex.php\u002Ftools\u002Frequired\";\n var CCM_APPLICATION_URL = \"http:\u002F\u002Flocalhost:8888\";\n var CCM_REL = \"\";\n var CCM_ACTIVE_LOCALE = \"ja_JP\";\n\u003C\u002Fscript>\n","html",[78,3507,3508,3521,3529,3538,3582,3587,3604,3608,3641,3671,3701,3720,3739,3753,3767,3780,3798,3816,3834,3848,3866],{"__ignoreMap":76},[81,3509,3510,3513,3516,3519],{"class":83,"line":84},[81,3511,3512],{"class":547},"\u003C!",[81,3514,3515],{"class":551},"DOCTYPE",[81,3517,3518],{"class":566}," html",[81,3520,555],{"class":547},[81,3522,3523,3525,3527],{"class":83,"line":90},[81,3524,548],{"class":547},[81,3526,3505],{"class":551},[81,3528,555],{"class":547},[81,3530,3531,3533,3536],{"class":83,"line":96},[81,3532,548],{"class":547},[81,3534,3535],{"class":551},"head",[81,3537,555],{"class":547},[81,3539,3540,3542,3545,3548,3550,3552,3555,3557,3559,3561,3563,3566,3568,3570,3572,3574,3577,3579],{"class":83,"line":102},[81,3541,560],{"class":547},[81,3543,3544],{"class":551},"link",[81,3546,3547],{"class":566}," rel",[81,3549,570],{"class":547},[81,3551,573],{"class":547},[81,3553,3554],{"class":576},"stylesheet",[81,3556,573],{"class":547},[81,3558,1280],{"class":566},[81,3560,570],{"class":547},[81,3562,573],{"class":547},[81,3564,3565],{"class":576},"text\u002Fcss",[81,3567,573],{"class":547},[81,3569,690],{"class":566},[81,3571,570],{"class":547},[81,3573,573],{"class":547},[81,3575,3576],{"class":576},"\u002Fconcrete\u002Fthemes\u002Fconcrete\u002Fmain.css",[81,3578,573],{"class":547},[81,3580,3581],{"class":547}," \u002F>\n",[81,3583,3584],{"class":83,"line":108},[81,3585,3586],{"class":594}," \n",[81,3588,3589,3591,3593,3595,3598,3600,3602],{"class":83,"line":114},[81,3590,548],{"class":547},[81,3592,1247],{"class":551},[81,3594,591],{"class":547},[81,3596,3597],{"class":594},"ログイン :: c5test",[81,3599,598],{"class":547},[81,3601,1247],{"class":551},[81,3603,555],{"class":547},[81,3605,3606],{"class":83,"line":121},[81,3607,118],{"emptyLinePlaceholder":117},[81,3609,3610,3612,3615,3618,3620,3622,3625,3627,3630,3632,3634,3637,3639],{"class":83,"line":127},[81,3611,548],{"class":547},[81,3613,3614],{"class":551},"meta",[81,3616,3617],{"class":566}," http-equiv",[81,3619,570],{"class":547},[81,3621,573],{"class":547},[81,3623,3624],{"class":576},"content-type",[81,3626,573],{"class":547},[81,3628,3629],{"class":566}," content",[81,3631,570],{"class":547},[81,3633,573],{"class":547},[81,3635,3636],{"class":576},"text\u002Fhtml; charset=UTF-8",[81,3638,573],{"class":547},[81,3640,875],{"class":547},[81,3642,3643,3645,3647,3649,3651,3653,3656,3658,3660,3662,3664,3667,3669],{"class":83,"line":133},[81,3644,548],{"class":547},[81,3646,3614],{"class":551},[81,3648,1291],{"class":566},[81,3650,570],{"class":547},[81,3652,573],{"class":547},[81,3654,3655],{"class":576},"generator",[81,3657,573],{"class":547},[81,3659,3629],{"class":566},[81,3661,570],{"class":547},[81,3663,573],{"class":547},[81,3665,3666],{"class":576},"concrete5 - 8.5.4",[81,3668,573],{"class":547},[81,3670,875],{"class":547},[81,3672,3673,3675,3677,3679,3681,3683,3686,3688,3690,3692,3694,3697,3699],{"class":83,"line":139},[81,3674,548],{"class":547},[81,3676,3544],{"class":551},[81,3678,3547],{"class":566},[81,3680,570],{"class":547},[81,3682,573],{"class":547},[81,3684,3685],{"class":576},"canonical",[81,3687,573],{"class":547},[81,3689,690],{"class":566},[81,3691,570],{"class":547},[81,3693,573],{"class":547},[81,3695,3696],{"class":576},"http:\u002F\u002Flocalhost:8888\u002Flogin",[81,3698,573],{"class":547},[81,3700,555],{"class":547},[81,3702,3703,3705,3707,3709,3711,3713,3716,3718],{"class":83,"line":145},[81,3704,548],{"class":547},[81,3706,771],{"class":551},[81,3708,1280],{"class":566},[81,3710,570],{"class":547},[81,3712,573],{"class":547},[81,3714,3715],{"class":576},"text\u002Fjavascript",[81,3717,573],{"class":547},[81,3719,555],{"class":547},[81,3721,3722,3725,3728,3730,3732,3735,3737],{"class":83,"line":151},[81,3723,3724],{"class":566}," var",[81,3726,3727],{"class":594}," CCM_DISPATCHER_FILENAME ",[81,3729,570],{"class":547},[81,3731,2189],{"class":547},[81,3733,3734],{"class":576},"\u002Findex.php",[81,3736,573],{"class":547},[81,3738,917],{"class":547},[81,3740,3741,3743,3746,3748,3751],{"class":83,"line":157},[81,3742,3724],{"class":566},[81,3744,3745],{"class":594}," CCM_CID ",[81,3747,570],{"class":547},[81,3749,3750],{"class":2072}," 174",[81,3752,917],{"class":547},[81,3754,3755,3757,3760,3762,3765],{"class":83,"line":163},[81,3756,3724],{"class":566},[81,3758,3759],{"class":594}," CCM_EDIT_MODE ",[81,3761,570],{"class":547},[81,3763,3764],{"class":1038}," false",[81,3766,917],{"class":547},[81,3768,3769,3771,3774,3776,3778],{"class":83,"line":169},[81,3770,3724],{"class":566},[81,3772,3773],{"class":594}," CCM_ARRANGE_MODE ",[81,3775,570],{"class":547},[81,3777,3764],{"class":1038},[81,3779,917],{"class":547},[81,3781,3782,3784,3787,3789,3791,3794,3796],{"class":83,"line":175},[81,3783,3724],{"class":566},[81,3785,3786],{"class":594}," CCM_IMAGE_PATH ",[81,3788,570],{"class":547},[81,3790,2189],{"class":547},[81,3792,3793],{"class":576},"\u002Fconcrete\u002Fimages",[81,3795,573],{"class":547},[81,3797,917],{"class":547},[81,3799,3800,3802,3805,3807,3809,3812,3814],{"class":83,"line":180},[81,3801,3724],{"class":566},[81,3803,3804],{"class":594}," CCM_TOOLS_PATH ",[81,3806,570],{"class":547},[81,3808,2189],{"class":547},[81,3810,3811],{"class":576},"\u002Findex.php\u002Ftools\u002Frequired",[81,3813,573],{"class":547},[81,3815,917],{"class":547},[81,3817,3818,3820,3823,3825,3827,3830,3832],{"class":83,"line":186},[81,3819,3724],{"class":566},[81,3821,3822],{"class":594}," CCM_APPLICATION_URL ",[81,3824,570],{"class":547},[81,3826,2189],{"class":547},[81,3828,3829],{"class":576},"http:\u002F\u002Flocalhost:8888",[81,3831,573],{"class":547},[81,3833,917],{"class":547},[81,3835,3836,3838,3841,3843,3846],{"class":83,"line":192},[81,3837,3724],{"class":566},[81,3839,3840],{"class":594}," CCM_REL ",[81,3842,570],{"class":547},[81,3844,3845],{"class":547}," \"\"",[81,3847,917],{"class":547},[81,3849,3850,3852,3855,3857,3859,3862,3864],{"class":83,"line":197},[81,3851,3724],{"class":566},[81,3853,3854],{"class":594}," CCM_ACTIVE_LOCALE ",[81,3856,570],{"class":547},[81,3858,2189],{"class":547},[81,3860,3861],{"class":576},"ja_JP",[81,3863,573],{"class":547},[81,3865,917],{"class":547},[81,3867,3868,3870,3872],{"class":83,"line":202},[81,3869,598],{"class":547},[81,3871,771],{"class":551},[81,3873,555],{"class":547},[563,3875,3877],{"className":3876},[2582,2583],"\n内部の生データが外部からアクセスされるのは非常にまずいのでdashbord配下にルーティングを置き、さらにリクエストの種類をXHRだけにしましょう。\n",[50,3879,3881],{"id":3880},"コンポーネントにajaxアクセスを実装","コンポーネントにAjaxアクセスを実装",[11,3883,3884,3885,3887],{},"URLとデータの取得処理は書いたので、vue側でそこにAjaxを飛ばすようにします。前回作成した",[78,3886,539],{}," にAjaxの処理を書きます。",[70,3889,3891],{"className":537,"code":3890,"filename":539,"language":540,"meta":76,"style":76},"created(){\n if(this.isEdit){\n $.ajax({\n url:location.href,\n type:'GET',\n success: (data)=> {\n let result = JSON.parse(data)[0]; \u002F\u002F returns array\n this.title = result.title;\n },\n error: (xhr, textStatus, errorThrown)=>{\n console.error('Error! ' + textStatus + ' ' + errorThrown);\n }\n })\n }\n}\n",[78,3892,3893,3898,3903,3908,3913,3918,3923,3928,3933,3938,3943,3948,3952,3957,3961],{"__ignoreMap":76},[81,3894,3895],{"class":83,"line":84},[81,3896,3897],{"class":594},"created(){\n",[81,3899,3900],{"class":83,"line":90},[81,3901,3902],{"class":594}," if(this.isEdit){\n",[81,3904,3905],{"class":83,"line":96},[81,3906,3907],{"class":594}," $.ajax({\n",[81,3909,3910],{"class":83,"line":102},[81,3911,3912],{"class":594}," url:location.href,\n",[81,3914,3915],{"class":83,"line":108},[81,3916,3917],{"class":594}," type:'GET',\n",[81,3919,3920],{"class":83,"line":114},[81,3921,3922],{"class":594}," success: (data)=> {\n",[81,3924,3925],{"class":83,"line":121},[81,3926,3927],{"class":594}," let result = JSON.parse(data)[0]; \u002F\u002F returns array\n",[81,3929,3930],{"class":83,"line":127},[81,3931,3932],{"class":594}," this.title = result.title;\n",[81,3934,3935],{"class":83,"line":133},[81,3936,3937],{"class":594}," },\n",[81,3939,3940],{"class":83,"line":139},[81,3941,3942],{"class":594}," error: (xhr, textStatus, errorThrown)=>{\n",[81,3944,3945],{"class":83,"line":145},[81,3946,3947],{"class":594}," console.error('Error! ' + textStatus + ' ' + errorThrown);\n",[81,3949,3950],{"class":83,"line":151},[81,3951,2200],{"class":594},[81,3953,3954],{"class":83,"line":157},[81,3955,3956],{"class":594}," })\n",[81,3958,3959],{"class":83,"line":163},[81,3960,406],{"class":594},[81,3962,3963],{"class":83,"line":169},[81,3964,447],{"class":594},[11,3966,3967,3969,3970,3972],{},[78,3968,539],{},"は編集と新規追加を併用しているので、",[78,3971,819],{},"というプロパティでAjaxを飛ばすかを制御しています。現在のURLに対してAjaxを飛ばすと、先ほどのコードで書かれているようにIDに紐づいたアルバム情報をDBから取ってきてくれます。",[11,3974,3975,3976,3979],{},"データはJSONで戻ってくるので　",[78,3977,3978],{},"JSON.prase","を用いてJSで用いられるようにします。もし仮にAjaxが失敗した場合\b（400、500系のエラー）、コンソールでエラーが吐かれるようになっています。",[50,3981,3982],{"id":3982},"編集用コンポーネントのレンダリング設定",[11,3984,3985],{},"シングルページそのものはエントリーポイントだけ。",[70,3987,3990],{"className":363,"code":3988,"filename":3989,"language":365,"meta":76,"style":76},"\u003C?php\ndefined('C5_EXECUTE') or die('Access Denied.');\n?>\n\n\u003Cdiv id=\"edit\">\u003C\u002Fdiv>\n","edit.php",[78,3991,3992,3996,4000,4004,4008],{"__ignoreMap":76},[81,3993,3994],{"class":83,"line":84},[81,3995,461],{},[81,3997,3998],{"class":83,"line":90},[81,3999,466],{},[81,4001,4002],{"class":83,"line":96},[81,4003,471],{},[81,4005,4006],{"class":83,"line":102},[81,4007,118],{"emptyLinePlaceholder":117},[81,4009,4010],{"class":83,"line":108},[81,4011,4012],{},"\u003Cdiv id=\"edit\">\u003C\u002Fdiv>\n",[11,4014,4015,4016,4019],{},"そしてvue側のeditコンポーネントはpropsを変えるだけで",[78,4017,4018],{},"add.vue","とほぼ同じ",[70,4021,4024],{"className":537,"code":4022,"filename":4023,"language":540,"meta":76,"style":76},"\u003Ctemplate>\n \u003CAlbumForm :isEdit=\"true\"\u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport AlbumForm from '.\u002Fcomponents\u002Fform';\nexport default {\n name:'add',\n components:{AlbumForm}\n}\n\u003C\u002Fscript>\n","edit.vue",[78,4025,4026,4034,4052,4060,4064,4072,4088,4096,4110,4120,4124],{"__ignoreMap":76},[81,4027,4028,4030,4032],{"class":83,"line":84},[81,4029,548],{"class":547},[81,4031,552],{"class":551},[81,4033,555],{"class":547},[81,4035,4036,4038,4040,4042,4044,4046,4048,4050],{"class":83,"line":90},[81,4037,560],{"class":547},[81,4039,860],{"class":551},[81,4041,863],{"class":566},[81,4043,570],{"class":547},[81,4045,573],{"class":547},[81,4047,484],{"class":576},[81,4049,573],{"class":547},[81,4051,875],{"class":547},[81,4053,4054,4056,4058],{"class":83,"line":96},[81,4055,598],{"class":547},[81,4057,552],{"class":551},[81,4059,555],{"class":547},[81,4061,4062],{"class":83,"line":102},[81,4063,118],{"emptyLinePlaceholder":117},[81,4065,4066,4068,4070],{"class":83,"line":108},[81,4067,548],{"class":547},[81,4069,771],{"class":551},[81,4071,555],{"class":547},[81,4073,4074,4076,4078,4080,4082,4084,4086],{"class":83,"line":114},[81,4075,900],{"class":778},[81,4077,903],{"class":594},[81,4079,906],{"class":778},[81,4081,909],{"class":547},[81,4083,912],{"class":576},[81,4085,796],{"class":547},[81,4087,917],{"class":547},[81,4089,4090,4092,4094],{"class":83,"line":121},[81,4091,779],{"class":778},[81,4093,782],{"class":778},[81,4095,785],{"class":547},[81,4097,4098,4100,4102,4104,4106,4108],{"class":83,"line":127},[81,4099,790],{"class":551},[81,4101,793],{"class":547},[81,4103,796],{"class":547},[81,4105,936],{"class":576},[81,4107,796],{"class":547},[81,4109,804],{"class":547},[81,4111,4112,4114,4116,4118],{"class":83,"line":133},[81,4113,945],{"class":551},[81,4115,948],{"class":547},[81,4117,860],{"class":594},[81,4119,447],{"class":547},[81,4121,4122],{"class":83,"line":139},[81,4123,447],{"class":547},[81,4125,4126,4128,4130],{"class":83,"line":145},[81,4127,598],{"class":547},[81,4129,771],{"class":551},[81,4131,555],{"class":547},[11,4133,4134,4135,4137],{},"最後にレンダー用の",[78,4136,969],{},"を以下のようにしておきます。",[70,4139,4141],{"className":977,"code":4140,"filename":969,"language":979,"meta":76,"style":76},"import Vue from 'vue'\nimport Add from '.\u002Fadd.vue'\nimport Edit from '.\u002Fedit.vue'\n\n\nVue.config.productionTip = false\n\nfunction renderIfidExits(id,vueRoot){\n if(document.getElementById(id) !== null){\n return new Vue({\n render: h => h(vueRoot),\n }).$mount('#'+id)\n }\n}\n\nrenderIfidExits('add',Add);\nrenderIfidExits('edit',Edit);\n",[78,4142,4143,4157,4171,4187,4191,4195,4211,4215,4234,4266,4280,4301,4327,4332,4336,4340,4360],{"__ignoreMap":76},[81,4144,4145,4147,4149,4151,4153,4155],{"class":83,"line":84},[81,4146,900],{"class":778},[81,4148,988],{"class":594},[81,4150,906],{"class":778},[81,4152,909],{"class":547},[81,4154,540],{"class":576},[81,4156,997],{"class":547},[81,4158,4159,4161,4163,4165,4167,4169],{"class":83,"line":90},[81,4160,900],{"class":778},[81,4162,1004],{"class":594},[81,4164,906],{"class":778},[81,4166,909],{"class":547},[81,4168,1011],{"class":576},[81,4170,997],{"class":547},[81,4172,4173,4175,4178,4180,4182,4185],{"class":83,"line":96},[81,4174,900],{"class":778},[81,4176,4177],{"class":594}," Edit ",[81,4179,906],{"class":778},[81,4181,909],{"class":547},[81,4183,4184],{"class":576},".\u002Fedit.vue",[81,4186,997],{"class":547},[81,4188,4189],{"class":83,"line":102},[81,4190,118],{"emptyLinePlaceholder":117},[81,4192,4193],{"class":83,"line":108},[81,4194,118],{"emptyLinePlaceholder":117},[81,4196,4197,4199,4201,4203,4205,4207,4209],{"class":83,"line":114},[81,4198,1022],{"class":594},[81,4200,1025],{"class":547},[81,4202,1028],{"class":594},[81,4204,1025],{"class":547},[81,4206,1033],{"class":594},[81,4208,570],{"class":547},[81,4210,1039],{"class":1038},[81,4212,4213],{"class":83,"line":121},[81,4214,118],{"emptyLinePlaceholder":117},[81,4216,4217,4220,4223,4225,4227,4229,4232],{"class":83,"line":127},[81,4218,4219],{"class":566},"function",[81,4221,4222],{"class":1051}," renderIfidExits",[81,4224,1055],{"class":547},[81,4226,3323],{"class":1067},[81,4228,2842],{"class":547},[81,4230,4231],{"class":1067},"vueRoot",[81,4233,2049],{"class":547},[81,4235,4236,4239,4241,4244,4246,4249,4251,4253,4256,4259,4262,4264],{"class":83,"line":133},[81,4237,4238],{"class":778}," if",[81,4240,1055],{"class":551},[81,4242,4243],{"class":594},"document",[81,4245,1025],{"class":547},[81,4247,4248],{"class":1051},"getElementById",[81,4250,1055],{"class":551},[81,4252,3323],{"class":594},[81,4254,4255],{"class":551},") ",[81,4257,4258],{"class":547},"!==",[81,4260,4261],{"class":547}," null",[81,4263,1086],{"class":551},[81,4265,377],{"class":547},[81,4267,4268,4271,4274,4276,4278],{"class":83,"line":139},[81,4269,4270],{"class":778}," return",[81,4272,4273],{"class":547}," new",[81,4275,1052],{"class":1051},[81,4277,1055],{"class":551},[81,4279,377],{"class":547},[81,4281,4282,4285,4287,4289,4291,4293,4295,4297,4299],{"class":83,"line":145},[81,4283,4284],{"class":1051}," render",[81,4286,793],{"class":547},[81,4288,1068],{"class":1067},[81,4290,1071],{"class":566},[81,4292,1068],{"class":1051},[81,4294,1055],{"class":551},[81,4296,4231],{"class":594},[81,4298,1086],{"class":551},[81,4300,804],{"class":547},[81,4302,4303,4306,4308,4310,4312,4314,4316,4318,4320,4323,4325],{"class":83,"line":151},[81,4304,4305],{"class":547}," }",[81,4307,1086],{"class":551},[81,4309,1025],{"class":547},[81,4311,1091],{"class":1051},[81,4313,1055],{"class":551},[81,4315,796],{"class":547},[81,4317,697],{"class":576},[81,4319,796],{"class":547},[81,4321,4322],{"class":547},"+",[81,4324,3323],{"class":594},[81,4326,1103],{"class":551},[81,4328,4329],{"class":83,"line":157},[81,4330,4331],{"class":547}," }\n",[81,4333,4334],{"class":83,"line":163},[81,4335,447],{"class":547},[81,4337,4338],{"class":83,"line":169},[81,4339,118],{"emptyLinePlaceholder":117},[81,4341,4342,4345,4347,4349,4351,4353,4355,4358],{"class":83,"line":175},[81,4343,4344],{"class":1051},"renderIfidExits",[81,4346,1055],{"class":594},[81,4348,796],{"class":547},[81,4350,936],{"class":576},[81,4352,796],{"class":547},[81,4354,2842],{"class":547},[81,4356,4357],{"class":594},"Add)",[81,4359,917],{"class":547},[81,4361,4362,4364,4366,4368,4371,4373,4375,4378],{"class":83,"line":180},[81,4363,4344],{"class":1051},[81,4365,1055],{"class":594},[81,4367,796],{"class":547},[81,4369,4370],{"class":576},"edit",[81,4372,796],{"class":547},[81,4374,2842],{"class":547},[81,4376,4377],{"class":594},"Edit)",[81,4379,917],{"class":547},[11,4381,4382],{},"前回はAddコンポーネントだけでしたが、今回はEditもあります。さらにこのmain.jsで全てのコンポーネントのレンダーを制御しているので、エントリーポイント のIDが存在すればそこにコンポーネントをレンダリングする。という方法を取っています。",[11,4384,4385,4386,4389],{},"本当はコンポーネントごとにレンダー用のjs（",[78,4387,4388],{},"add.js,edit.js","みたいな）を作成するのですが、面倒だったのでこうしました。",[11,4391,4392,4393,4396,4397,4400,4401,4404],{},"そしてform.vueで編集の場合（",[78,4394,4395],{},"isEdit = true","）に",[78,4398,4399],{},"created()","でAjaxを飛ばしてデータを取得し、",[78,4402,4403],{},"data()","に代入するようします。",[27,4406,4407],{"id":4407},"実際にレンダーしてみる",[11,4409,4410,4411,4414],{},"ビルドをして ",[78,4412,4413],{},"\u002Fdashboard\u002Fvuetest\u002Fedit\u002F{id}"," へアクセスします。IDがあっていればそのデータを取ってきてくれます。",[55,4416],{":src":4417,":width":58},"'_mix\u002Fsch-2020-10-04-1.14.27-768x527.png'",[55,4419],{":src":4420,":width":58},"'_mix\u002Fajax-768x764.png'",[11,4422,4423],{},"きちんと画面には前回入力した追加内容が表示されています。開発者ツールでNetworkでAjaxを確認してみましょう。Request Header を確認すると確かに、現在のURLにアクセスしておりさらにXMLHttpRequestで送信されています。Resonseをみてみると",[70,4425,4429],{"className":4426,"code":4427,"language":4428,"meta":76,"style":76},"language-json shiki shiki-themes material-theme-ocean","[\n {\n \"id\":\"1\",\n \"title\":\"\\u30c6\\u30b9\\u30c8\",\n \"created\":\"2020-08-27 00:28:38\",\n \"modified\":\"2020-08-27 00:28:38\"\n }\n]\n","json",[78,4430,4431,4436,4440,4460,4479,4499,4516,4520],{"__ignoreMap":76},[81,4432,4433],{"class":83,"line":84},[81,4434,4435],{"class":547},"[\n",[81,4437,4438],{"class":83,"line":90},[81,4439,2395],{"class":547},[81,4441,4442,4445,4447,4449,4451,4453,4456,4458],{"class":83,"line":96},[81,4443,4444],{"class":547}," \"",[81,4446,3323],{"class":566},[81,4448,573],{"class":547},[81,4450,793],{"class":547},[81,4452,573],{"class":547},[81,4454,4455],{"class":576},"1",[81,4457,573],{"class":547},[81,4459,804],{"class":547},[81,4461,4462,4464,4466,4468,4470,4472,4475,4477],{"class":83,"line":102},[81,4463,4444],{"class":547},[81,4465,1247],{"class":566},[81,4467,573],{"class":547},[81,4469,793],{"class":547},[81,4471,573],{"class":547},[81,4473,4474],{"class":594},"\\u30c6\\u30b9\\u30c8",[81,4476,573],{"class":547},[81,4478,804],{"class":547},[81,4480,4481,4483,4486,4488,4490,4492,4495,4497],{"class":83,"line":108},[81,4482,4444],{"class":547},[81,4484,4485],{"class":566},"created",[81,4487,573],{"class":547},[81,4489,793],{"class":547},[81,4491,573],{"class":547},[81,4493,4494],{"class":576},"2020-08-27 00:28:38",[81,4496,573],{"class":547},[81,4498,804],{"class":547},[81,4500,4501,4503,4506,4508,4510,4512,4514],{"class":83,"line":114},[81,4502,4444],{"class":547},[81,4504,4505],{"class":566},"modified",[81,4507,573],{"class":547},[81,4509,793],{"class":547},[81,4511,573],{"class":547},[81,4513,4494],{"class":576},[81,4515,2195],{"class":547},[81,4517,4518],{"class":83,"line":121},[81,4519,406],{"class":547},[81,4521,4522],{"class":83,"line":127},[81,4523,824],{"class":547},[11,4525,4526],{},"このようにデータベースから取ってきた内容がJSONとして渡されているのが確認できます。ちなみに日本語はエンコードされているので、js側でJSON praseを使うことで元の文章に戻すことができます。",[27,4528,4529],{"id":4529},"内容を更新する",[11,4531,4532,4533,4535],{},"編集画面を表示した際の初期表示はできるようになったので、次は内容が書き換えてDBの内容を変更できるようにしましょう。しかし触るのはバックエンドの部分だけです。",[78,4534,3400],{},"を以下のように変更します。",[70,4537,4539],{"className":363,"code":4538,"filename":359,"language":365,"meta":76,"style":76},"pupublic function edit($id=null){\n\n \u002F\u002F パラメータがない場合は一覧画面へリダイレクト\n if($id==null) return Redirect::to('\u002Fdashboard\u002Fvuetest\u002F')->send();\n\n \u002F\u002F Ajax エンドポイント\n if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){\n $db = Database::connection();\n $db->Execute(\"START TRANSACTION\");\n $result = $db->fetchAll('SELECT * FROM album ORDER BY ID DESC');\n $db->Execute(\"COMMIT\");\n return Core::make('helper\u002Fajax')->sendResult($result);\n }\n\n \u002F\u002Fpost処理(ここを追記)\n if(Request::isPost() == true){\n $title = $this->post('title');\n\n if(empty($title)==false){\n $db = Database::connection();\n $db->executeQuery(\"START TRANSACTION\");\n $db->executeQuery(\n 'UPDATE album SET `title`=?, `modified`=now() WHERE `ID`=?',\n array($title,$id)\n );\n $db->executeQuery(\"COMMIT\");\n Redirect::to('\u002Fdashboard\u002Fvuetest')->send();\n }else{\n Redirect::to('\u002Fdashboard\u002Fvuetest')->send();\n }\n\n }else{\n $this->render('\u002Fdashboard\u002Fvuetest\u002Fadd');\n }\n}\n",[78,4540,4541,4546,4550,4555,4559,4563,4568,4572,4576,4580,4585,4589,4593,4597,4601,4606,4611,4616,4620,4625,4630,4635,4640,4645,4650,4655,4660,4665,4669,4673,4677,4681,4686,4690,4694],{"__ignoreMap":76},[81,4542,4543],{"class":83,"line":84},[81,4544,4545],{},"pupublic function edit($id=null){\n",[81,4547,4548],{"class":83,"line":90},[81,4549,118],{"emptyLinePlaceholder":117},[81,4551,4552],{"class":83,"line":96},[81,4553,4554],{}," \u002F\u002F パラメータがない場合は一覧画面へリダイレクト\n",[81,4556,4557],{"class":83,"line":102},[81,4558,3416],{},[81,4560,4561],{"class":83,"line":108},[81,4562,118],{"emptyLinePlaceholder":117},[81,4564,4565],{"class":83,"line":114},[81,4566,4567],{}," \u002F\u002F Ajax エンドポイント\n",[81,4569,4570],{"class":83,"line":121},[81,4571,3425],{},[81,4573,4574],{"class":83,"line":127},[81,4575,3430],{},[81,4577,4578],{"class":83,"line":133},[81,4579,3435],{},[81,4581,4582],{"class":83,"line":139},[81,4583,4584],{}," $result = $db->fetchAll('SELECT * FROM album ORDER BY ID DESC');\n",[81,4586,4587],{"class":83,"line":145},[81,4588,3445],{},[81,4590,4591],{"class":83,"line":151},[81,4592,3450],{},[81,4594,4595],{"class":83,"line":157},[81,4596,406],{},[81,4598,4599],{"class":83,"line":163},[81,4600,118],{"emptyLinePlaceholder":117},[81,4602,4603],{"class":83,"line":169},[81,4604,4605],{}," \u002F\u002Fpost処理(ここを追記)\n",[81,4607,4608],{"class":83,"line":175},[81,4609,4610],{}," if(Request::isPost() == true){\n",[81,4612,4613],{"class":83,"line":180},[81,4614,4615],{}," $title = $this->post('title');\n",[81,4617,4618],{"class":83,"line":186},[81,4619,118],{"emptyLinePlaceholder":117},[81,4621,4622],{"class":83,"line":192},[81,4623,4624],{}," if(empty($title)==false){\n",[81,4626,4627],{"class":83,"line":197},[81,4628,4629],{}," $db = Database::connection();\n",[81,4631,4632],{"class":83,"line":202},[81,4633,4634],{}," $db->executeQuery(\"START TRANSACTION\");\n",[81,4636,4637],{"class":83,"line":208},[81,4638,4639],{}," $db->executeQuery(\n",[81,4641,4642],{"class":83,"line":213},[81,4643,4644],{}," 'UPDATE album SET `title`=?, `modified`=now() WHERE `ID`=?',\n",[81,4646,4647],{"class":83,"line":219},[81,4648,4649],{}," array($title,$id)\n",[81,4651,4652],{"class":83,"line":224},[81,4653,4654],{}," );\n",[81,4656,4657],{"class":83,"line":229},[81,4658,4659],{}," $db->executeQuery(\"COMMIT\");\n",[81,4661,4662],{"class":83,"line":234},[81,4663,4664],{}," Redirect::to('\u002Fdashboard\u002Fvuetest')->send();\n",[81,4666,4667],{"class":83,"line":239},[81,4668,2504],{},[81,4670,4671],{"class":83,"line":245},[81,4672,4664],{},[81,4674,4675],{"class":83,"line":251},[81,4676,1560],{},[81,4678,4679],{"class":83,"line":256},[81,4680,118],{"emptyLinePlaceholder":117},[81,4682,4683],{"class":83,"line":262},[81,4684,4685],{}," }else{\n",[81,4687,4688],{"class":83,"line":267},[81,4689,438],{},[81,4691,4692],{"class":83,"line":272},[81,4693,406],{},[81,4695,4696],{"class":83,"line":278},[81,4697,447],{},[11,4699,4700,4701,4704],{},"新規作成の際に使用される",[78,4702,4703],{},"pupublic function edit"," を一部変更したぐらいです。postがある場合、その値のバリデーションをして変更するIDを元に更新用のSQLを走らせるだけです。",[50,4706,4707],{"id":4707},"実際に変更してみる",[55,4709],{":src":4710,":width":58},"'_mix\u002Fsch-2020-10-04-13.37.28-768x396.png'",[55,4712],{":src":4713,":width":58},"'_mix\u002Fsch-2020-10-04-13.38.13.png'",[11,4715,4716],{},"無事、タイトルと編集時間が更新されました。これでCRUDの「Update」が完成しました。",[27,4718,4719],{"id":4719},"一覧画面を作成する",[11,4721,4722],{},"追加・編集の画面は完成しました。次は全ての登録データを一覧で見れる画面を作成していきます。\u002Fdashboard\u002Fvuetest\u002F にアクセスした際に一覧が表示されるようにします。",[50,4724,4725],{"id":4725},"一覧用コンポーネントの作成",[11,4727,4728],{},"一覧コンポーネントをindex.vueとしておきます。一覧画面では以下のような構成にしています。",[70,4730,4733],{"className":537,"code":4731,"filename":4732,"language":540,"meta":76,"style":76},"\u003Ctemplate>\n \u003Cdiv class=\"ccm-dashboard-content-inner\">\n \u003Ch3>アルバム一覧\u003C\u002Fh3>\n \u003Chr>\n\n \u003Ctable class=\"p-package-index table table-hover\">\n \u003Cthead>\n \u003Ctr>\n \u003Cth class=\"c-dol-title\">タイトル\u003C\u002Fth>\n \u003Cth class=\"c-dol-publish-date\">作成日\u003C\u002Fth>\n \u003Cth class=\"c-dol-operation\">操作\u003C\u002Fth>\n \u003C\u002Ftr>\n \u003C\u002Fthead>\n \u003Ctbody>\n \u003Ctr v-for=\"val in list\" :key=\"val.id\" tabindex=\"0\">\n \u003Ctd style=\"vertical-align:middle;\">{{val.title}}\u003C\u002Ftd>\n \u003Ctd style=\"vertical-align:middle;\">{{val.created}}\u003C\u002Ftd>\n \u003Ctd style=\"vertical-align:middle;\">\n \u003Ca :href=\"'\u002Fdashboard\u002Fvuetest\u002Fedit\u002F'+val.id\" type=\"button\" class=\"btn btn-success btn-sm\" style=\"margin-right:10px;\">編集\u003C\u002Fa>\n \u003Cbutton type=\"button\" class=\"btn btn-danger btn-sm\" v-on:click=\"cofirmDelete(val)\">削除\u003C\u002Fbutton>\n \u003C\u002Ftd>\n \u003C\u002Ftr>\n \u003C\u002Ftbody>\n \u003C\u002Ftable>\n\n \u003Cdiv class=\"ccm-dashboard-form-actions-wrapper\">\n \u003Cdiv class=\"ccm-dashboard-form-actions\">\n \u003Ca href=\"\u002Fdashboard\u002Fvuetest\u002Fadd\" class=\"pull-right btn btn-primary\">\n 新規追加\n \u003C\u002Fa>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n name:'index',\n data(){\n return {\n list:[],\n isProcessing:false\n }\n },\n methods:{\n cofirmDelete(obj){\n let result = window.confirm('アルバム：「'+obj.title+'」を本当に削除しますか？この操作は取り消せません。');\n if(result) return this.deleteAlubm(obj.id);\n },\n deleteAlubm(id){\n if(this.isProcessing==false){\n this.isProcessing = true;\n\n $.ajax({\n url:'\u002Fdashboard\u002Fvuetest\u002FdeleteData\u002F',\n type:'POST',\n data:{target:id},\n success: ()=> {\n let targetIndex = this.list.findIndex((ele)=>{\n return ele.ID == id;\n });\n this.list.splice(targetIndex,1);\n this.isProcessing = false;\n },\n error: (xhr, textStatus, errorThrown)=>{\n console.log('Error! ' + textStatus + ' ' + errorThrown);\n }\n })\n }\n },\n },\n created(){\n $.ajax({\n url:'\u002Fdashboard\u002Fvuetest\u002FloadData',\n type:'GET',\n success: (data)=> {\n this.list = JSON.parse(data); \u002F\u002F returns array\n },\n error: (xhr, textStatus, errorThrown)=>{\n console.error('Error! ' + textStatus + ' ' + errorThrown);\n }\n })\n }\n}\n\u003C\u002Fscript>\n","index.vue",[78,4734,4735,4743,4761,4778,4786,4790,4810,4819,4828,4857,4885,4913,4921,4929,4938,4981,5011,5038,5056,5118,5168,5176,5184,5192,5200,5204,5222,5240,5268,5273,5281,5289,5297,5305,5313,5317,5325,5333,5348,5354,5360,5372,5382,5386,5390,5396,5408,5456,5489,5495,5507,5528,5541,5546,5561,5578,5595,5613,5629,5663,5685,5695,5721,5734,5740,5770,5809,5815,5822,5827,5832,5837,5845,5859,5875,5892,5911,5941,5946,5972,6008,6013,6021,6026,6031],{"__ignoreMap":76},[81,4736,4737,4739,4741],{"class":83,"line":84},[81,4738,548],{"class":547},[81,4740,552],{"class":551},[81,4742,555],{"class":547},[81,4744,4745,4747,4749,4751,4753,4755,4757,4759],{"class":83,"line":90},[81,4746,560],{"class":547},[81,4748,563],{"class":551},[81,4750,567],{"class":566},[81,4752,570],{"class":547},[81,4754,573],{"class":547},[81,4756,577],{"class":576},[81,4758,573],{"class":547},[81,4760,555],{"class":547},[81,4762,4763,4765,4767,4769,4772,4774,4776],{"class":83,"line":96},[81,4764,586],{"class":547},[81,4766,50],{"class":551},[81,4768,591],{"class":547},[81,4770,4771],{"class":594},"アルバム一覧",[81,4773,598],{"class":547},[81,4775,50],{"class":551},[81,4777,555],{"class":547},[81,4779,4780,4782,4784],{"class":83,"line":102},[81,4781,586],{"class":547},[81,4783,1207],{"class":551},[81,4785,555],{"class":547},[81,4787,4788],{"class":83,"line":108},[81,4789,118],{"emptyLinePlaceholder":117},[81,4791,4792,4794,4797,4799,4801,4803,4806,4808],{"class":83,"line":114},[81,4793,586],{"class":547},[81,4795,4796],{"class":551},"table",[81,4798,567],{"class":566},[81,4800,570],{"class":547},[81,4802,573],{"class":547},[81,4804,4805],{"class":576},"p-package-index table table-hover",[81,4807,573],{"class":547},[81,4809,555],{"class":547},[81,4811,4812,4814,4817],{"class":83,"line":121},[81,4813,631],{"class":547},[81,4815,4816],{"class":551},"thead",[81,4818,555],{"class":547},[81,4820,4821,4823,4826],{"class":83,"line":127},[81,4822,651],{"class":547},[81,4824,4825],{"class":551},"tr",[81,4827,555],{"class":547},[81,4829,4830,4832,4835,4837,4839,4841,4844,4846,4848,4851,4853,4855],{"class":83,"line":133},[81,4831,1368],{"class":547},[81,4833,4834],{"class":551},"th",[81,4836,567],{"class":566},[81,4838,570],{"class":547},[81,4840,573],{"class":547},[81,4842,4843],{"class":576},"c-dol-title",[81,4845,573],{"class":547},[81,4847,591],{"class":547},[81,4849,4850],{"class":594},"タイトル",[81,4852,598],{"class":547},[81,4854,4834],{"class":551},[81,4856,555],{"class":547},[81,4858,4859,4861,4863,4865,4867,4869,4872,4874,4876,4879,4881,4883],{"class":83,"line":139},[81,4860,1368],{"class":547},[81,4862,4834],{"class":551},[81,4864,567],{"class":566},[81,4866,570],{"class":547},[81,4868,573],{"class":547},[81,4870,4871],{"class":576},"c-dol-publish-date",[81,4873,573],{"class":547},[81,4875,591],{"class":547},[81,4877,4878],{"class":594},"作成日",[81,4880,598],{"class":547},[81,4882,4834],{"class":551},[81,4884,555],{"class":547},[81,4886,4887,4889,4891,4893,4895,4897,4900,4902,4904,4907,4909,4911],{"class":83,"line":145},[81,4888,1368],{"class":547},[81,4890,4834],{"class":551},[81,4892,567],{"class":566},[81,4894,570],{"class":547},[81,4896,573],{"class":547},[81,4898,4899],{"class":576},"c-dol-operation",[81,4901,573],{"class":547},[81,4903,591],{"class":547},[81,4905,4906],{"class":594},"操作",[81,4908,598],{"class":547},[81,4910,4834],{"class":551},[81,4912,555],{"class":547},[81,4914,4915,4917,4919],{"class":83,"line":151},[81,4916,677],{"class":547},[81,4918,4825],{"class":551},[81,4920,555],{"class":547},[81,4922,4923,4925,4927],{"class":83,"line":157},[81,4924,730],{"class":547},[81,4926,4816],{"class":551},[81,4928,555],{"class":547},[81,4930,4931,4933,4936],{"class":83,"line":163},[81,4932,631],{"class":547},[81,4934,4935],{"class":551},"tbody",[81,4937,555],{"class":547},[81,4939,4940,4942,4944,4947,4949,4951,4954,4956,4959,4961,4963,4966,4968,4971,4973,4975,4977,4979],{"class":83,"line":169},[81,4941,651],{"class":547},[81,4943,4825],{"class":551},[81,4945,4946],{"class":566}," v-for",[81,4948,570],{"class":547},[81,4950,573],{"class":547},[81,4952,4953],{"class":576},"val in list",[81,4955,573],{"class":547},[81,4957,4958],{"class":566}," :key",[81,4960,570],{"class":547},[81,4962,573],{"class":547},[81,4964,4965],{"class":576},"val.id",[81,4967,573],{"class":547},[81,4969,4970],{"class":566}," tabindex",[81,4972,570],{"class":547},[81,4974,573],{"class":547},[81,4976,2073],{"class":576},[81,4978,573],{"class":547},[81,4980,555],{"class":547},[81,4982,4983,4985,4988,4991,4993,4995,4998,5000,5002,5005,5007,5009],{"class":83,"line":175},[81,4984,1368],{"class":547},[81,4986,4987],{"class":551},"td",[81,4989,4990],{"class":566}," style",[81,4992,570],{"class":547},[81,4994,573],{"class":547},[81,4996,4997],{"class":576},"vertical-align:middle;",[81,4999,573],{"class":547},[81,5001,591],{"class":547},[81,5003,5004],{"class":594},"{{val.title}}",[81,5006,598],{"class":547},[81,5008,4987],{"class":551},[81,5010,555],{"class":547},[81,5012,5013,5015,5017,5019,5021,5023,5025,5027,5029,5032,5034,5036],{"class":83,"line":180},[81,5014,1368],{"class":547},[81,5016,4987],{"class":551},[81,5018,4990],{"class":566},[81,5020,570],{"class":547},[81,5022,573],{"class":547},[81,5024,4997],{"class":576},[81,5026,573],{"class":547},[81,5028,591],{"class":547},[81,5030,5031],{"class":594},"{{val.created}}",[81,5033,598],{"class":547},[81,5035,4987],{"class":551},[81,5037,555],{"class":547},[81,5039,5040,5042,5044,5046,5048,5050,5052,5054],{"class":83,"line":186},[81,5041,1368],{"class":547},[81,5043,4987],{"class":551},[81,5045,4990],{"class":566},[81,5047,570],{"class":547},[81,5049,573],{"class":547},[81,5051,4997],{"class":576},[81,5053,573],{"class":547},[81,5055,555],{"class":547},[81,5057,5058,5061,5063,5066,5068,5070,5073,5075,5077,5079,5081,5083,5085,5087,5089,5091,5094,5096,5098,5100,5102,5105,5107,5109,5112,5114,5116],{"class":83,"line":192},[81,5059,5060],{"class":547}," \u003C",[81,5062,15],{"class":551},[81,5064,5065],{"class":566}," :href",[81,5067,570],{"class":547},[81,5069,573],{"class":547},[81,5071,5072],{"class":576},"'\u002Fdashboard\u002Fvuetest\u002Fedit\u002F'+val.id",[81,5074,573],{"class":547},[81,5076,1280],{"class":566},[81,5078,570],{"class":547},[81,5080,573],{"class":547},[81,5082,654],{"class":576},[81,5084,573],{"class":547},[81,5086,567],{"class":566},[81,5088,570],{"class":547},[81,5090,573],{"class":547},[81,5092,5093],{"class":576},"btn btn-success btn-sm",[81,5095,573],{"class":547},[81,5097,4990],{"class":566},[81,5099,570],{"class":547},[81,5101,573],{"class":547},[81,5103,5104],{"class":576},"margin-right:10px;",[81,5106,573],{"class":547},[81,5108,591],{"class":547},[81,5110,5111],{"class":594},"編集",[81,5113,598],{"class":547},[81,5115,15],{"class":551},[81,5117,555],{"class":547},[81,5119,5120,5122,5124,5126,5128,5130,5132,5134,5136,5138,5140,5143,5145,5148,5150,5152,5155,5157,5159,5162,5164,5166],{"class":83,"line":197},[81,5121,5060],{"class":547},[81,5123,654],{"class":551},[81,5125,1280],{"class":566},[81,5127,570],{"class":547},[81,5129,573],{"class":547},[81,5131,654],{"class":576},[81,5133,573],{"class":547},[81,5135,567],{"class":566},[81,5137,570],{"class":547},[81,5139,573],{"class":547},[81,5141,5142],{"class":576},"btn btn-danger btn-sm",[81,5144,573],{"class":547},[81,5146,5147],{"class":566}," v-on:click",[81,5149,570],{"class":547},[81,5151,573],{"class":547},[81,5153,5154],{"class":576},"cofirmDelete(val)",[81,5156,573],{"class":547},[81,5158,591],{"class":547},[81,5160,5161],{"class":594},"削除",[81,5163,598],{"class":547},[81,5165,654],{"class":551},[81,5167,555],{"class":547},[81,5169,5170,5172,5174],{"class":83,"line":202},[81,5171,1392],{"class":547},[81,5173,4987],{"class":551},[81,5175,555],{"class":547},[81,5177,5178,5180,5182],{"class":83,"line":208},[81,5179,677],{"class":547},[81,5181,4825],{"class":551},[81,5183,555],{"class":547},[81,5185,5186,5188,5190],{"class":83,"line":213},[81,5187,730],{"class":547},[81,5189,4935],{"class":551},[81,5191,555],{"class":547},[81,5193,5194,5196,5198],{"class":83,"line":219},[81,5195,739],{"class":547},[81,5197,4796],{"class":551},[81,5199,555],{"class":547},[81,5201,5202],{"class":83,"line":224},[81,5203,118],{"emptyLinePlaceholder":117},[81,5205,5206,5208,5210,5212,5214,5216,5218,5220],{"class":83,"line":229},[81,5207,586],{"class":547},[81,5209,563],{"class":551},[81,5211,567],{"class":566},[81,5213,570],{"class":547},[81,5215,573],{"class":547},[81,5217,622],{"class":576},[81,5219,573],{"class":547},[81,5221,555],{"class":547},[81,5223,5224,5226,5228,5230,5232,5234,5236,5238],{"class":83,"line":234},[81,5225,631],{"class":547},[81,5227,563],{"class":551},[81,5229,567],{"class":566},[81,5231,570],{"class":547},[81,5233,573],{"class":547},[81,5235,642],{"class":576},[81,5237,573],{"class":547},[81,5239,555],{"class":547},[81,5241,5242,5244,5246,5248,5250,5252,5254,5256,5258,5260,5262,5264,5266],{"class":83,"line":239},[81,5243,651],{"class":547},[81,5245,15],{"class":551},[81,5247,690],{"class":566},[81,5249,570],{"class":547},[81,5251,573],{"class":547},[81,5253,1109],{"class":576},[81,5255,573],{"class":547},[81,5257,567],{"class":566},[81,5259,570],{"class":547},[81,5261,573],{"class":547},[81,5263,708],{"class":576},[81,5265,573],{"class":547},[81,5267,555],{"class":547},[81,5269,5270],{"class":83,"line":245},[81,5271,5272],{"class":594}," 新規追加\n",[81,5274,5275,5277,5279],{"class":83,"line":251},[81,5276,677],{"class":547},[81,5278,15],{"class":551},[81,5280,555],{"class":547},[81,5282,5283,5285,5287],{"class":83,"line":256},[81,5284,730],{"class":547},[81,5286,563],{"class":551},[81,5288,555],{"class":547},[81,5290,5291,5293,5295],{"class":83,"line":262},[81,5292,739],{"class":547},[81,5294,563],{"class":551},[81,5296,555],{"class":547},[81,5298,5299,5301,5303],{"class":83,"line":267},[81,5300,748],{"class":547},[81,5302,563],{"class":551},[81,5304,555],{"class":547},[81,5306,5307,5309,5311],{"class":83,"line":272},[81,5308,598],{"class":547},[81,5310,552],{"class":551},[81,5312,555],{"class":547},[81,5314,5315],{"class":83,"line":278},[81,5316,118],{"emptyLinePlaceholder":117},[81,5318,5319,5321,5323],{"class":83,"line":283},[81,5320,548],{"class":547},[81,5322,771],{"class":551},[81,5324,555],{"class":547},[81,5326,5327,5329,5331],{"class":83,"line":288},[81,5328,779],{"class":778},[81,5330,782],{"class":778},[81,5332,785],{"class":547},[81,5334,5335,5337,5339,5341,5344,5346],{"class":83,"line":293},[81,5336,790],{"class":551},[81,5338,793],{"class":547},[81,5340,796],{"class":547},[81,5342,5343],{"class":576},"index",[81,5345,796],{"class":547},[81,5347,804],{"class":547},[81,5349,5350,5352],{"class":83,"line":298},[81,5351,1535],{"class":551},[81,5353,1538],{"class":547},[81,5355,5356,5358],{"class":83,"line":303},[81,5357,1543],{"class":778},[81,5359,785],{"class":547},[81,5361,5362,5365,5367,5370],{"class":83,"line":308},[81,5363,5364],{"class":551}," list",[81,5366,793],{"class":547},[81,5368,5369],{"class":551},"[]",[81,5371,804],{"class":547},[81,5373,5374,5377,5379],{"class":83,"line":313},[81,5375,5376],{"class":551}," isProcessing",[81,5378,793],{"class":547},[81,5380,5381],{"class":1038},"false\n",[81,5383,5384],{"class":83,"line":318},[81,5385,1560],{"class":547},[81,5387,5388],{"class":83,"line":323},[81,5389,2028],{"class":547},[81,5391,5392,5394],{"class":83,"line":328},[81,5393,2033],{"class":551},[81,5395,2036],{"class":547},[81,5397,5398,5401,5403,5406],{"class":83,"line":2211},[81,5399,5400],{"class":551}," cofirmDelete",[81,5402,1055],{"class":547},[81,5404,5405],{"class":1067},"obj",[81,5407,2049],{"class":547},[81,5409,5410,5413,5416,5418,5421,5423,5426,5428,5430,5433,5435,5437,5439,5441,5443,5445,5447,5450,5452,5454],{"class":83,"line":2216},[81,5411,5412],{"class":566}," let",[81,5414,5415],{"class":594}," result",[81,5417,2186],{"class":547},[81,5419,5420],{"class":594}," window",[81,5422,1025],{"class":547},[81,5424,5425],{"class":1051},"confirm",[81,5427,1055],{"class":551},[81,5429,796],{"class":547},[81,5431,5432],{"class":576},"アルバム：「",[81,5434,796],{"class":547},[81,5436,4322],{"class":547},[81,5438,5405],{"class":594},[81,5440,1025],{"class":547},[81,5442,1247],{"class":594},[81,5444,4322],{"class":547},[81,5446,796],{"class":547},[81,5448,5449],{"class":576},"」を本当に削除しますか？この操作は取り消せません。",[81,5451,796],{"class":547},[81,5453,1086],{"class":551},[81,5455,917],{"class":547},[81,5457,5459,5461,5463,5466,5468,5471,5474,5477,5479,5481,5483,5485,5487],{"class":83,"line":5458},48,[81,5460,2054],{"class":778},[81,5462,1055],{"class":551},[81,5464,5465],{"class":594},"result",[81,5467,4255],{"class":551},[81,5469,5470],{"class":778},"return",[81,5472,5473],{"class":547}," this.",[81,5475,5476],{"class":1051},"deleteAlubm",[81,5478,1055],{"class":551},[81,5480,5405],{"class":594},[81,5482,1025],{"class":547},[81,5484,3323],{"class":594},[81,5486,1086],{"class":551},[81,5488,917],{"class":547},[81,5490,5492],{"class":83,"line":5491},49,[81,5493,5494],{"class":547}," },\n",[81,5496,5498,5501,5503,5505],{"class":83,"line":5497},50,[81,5499,5500],{"class":551}," deleteAlubm",[81,5502,1055],{"class":547},[81,5504,3323],{"class":1067},[81,5506,2049],{"class":547},[81,5508,5510,5512,5514,5516,5519,5522,5524,5526],{"class":83,"line":5509},51,[81,5511,2054],{"class":778},[81,5513,1055],{"class":551},[81,5515,2059],{"class":547},[81,5517,5518],{"class":594},"isProcessing",[81,5520,5521],{"class":547},"==",[81,5523,870],{"class":1038},[81,5525,1086],{"class":551},[81,5527,377],{"class":547},[81,5529,5531,5533,5535,5537,5539],{"class":83,"line":5530},52,[81,5532,2180],{"class":547},[81,5534,5518],{"class":594},[81,5536,2186],{"class":547},[81,5538,2085],{"class":1038},[81,5540,917],{"class":547},[81,5542,5544],{"class":83,"line":5543},53,[81,5545,118],{"emptyLinePlaceholder":117},[81,5547,5549,5552,5554,5557,5559],{"class":83,"line":5548},54,[81,5550,5551],{"class":594}," $",[81,5553,1025],{"class":547},[81,5555,5556],{"class":1051},"ajax",[81,5558,1055],{"class":551},[81,5560,377],{"class":547},[81,5562,5564,5567,5569,5571,5574,5576],{"class":83,"line":5563},55,[81,5565,5566],{"class":551}," url",[81,5568,793],{"class":547},[81,5570,796],{"class":547},[81,5572,5573],{"class":576},"\u002Fdashboard\u002Fvuetest\u002FdeleteData\u002F",[81,5575,796],{"class":547},[81,5577,804],{"class":547},[81,5579,5581,5584,5586,5588,5591,5593],{"class":83,"line":5580},56,[81,5582,5583],{"class":551}," type",[81,5585,793],{"class":547},[81,5587,796],{"class":547},[81,5589,5590],{"class":576},"POST",[81,5592,796],{"class":547},[81,5594,804],{"class":547},[81,5596,5598,5601,5603,5606,5608,5610],{"class":83,"line":5597},57,[81,5599,5600],{"class":551}," data",[81,5602,948],{"class":547},[81,5604,5605],{"class":551},"target",[81,5607,793],{"class":547},[81,5609,3323],{"class":594},[81,5611,5612],{"class":547},"},\n",[81,5614,5616,5619,5621,5624,5627],{"class":83,"line":5615},58,[81,5617,5618],{"class":1051}," success",[81,5620,793],{"class":547},[81,5622,5623],{"class":547}," ()",[81,5625,5626],{"class":566},"=>",[81,5628,785],{"class":547},[81,5630,5632,5635,5638,5640,5642,5645,5647,5650,5652,5654,5657,5659,5661],{"class":83,"line":5631},59,[81,5633,5634],{"class":566}," let",[81,5636,5637],{"class":594}," targetIndex",[81,5639,2186],{"class":547},[81,5641,5473],{"class":547},[81,5643,5644],{"class":594},"list",[81,5646,1025],{"class":547},[81,5648,5649],{"class":1051},"findIndex",[81,5651,1055],{"class":551},[81,5653,1055],{"class":547},[81,5655,5656],{"class":1067},"ele",[81,5658,1086],{"class":547},[81,5660,5626],{"class":566},[81,5662,377],{"class":547},[81,5664,5666,5669,5672,5674,5677,5680,5683],{"class":83,"line":5665},60,[81,5667,5668],{"class":778}," return",[81,5670,5671],{"class":594}," ele",[81,5673,1025],{"class":547},[81,5675,5676],{"class":594},"ID",[81,5678,5679],{"class":547}," ==",[81,5681,5682],{"class":594}," id",[81,5684,917],{"class":547},[81,5686,5688,5691,5693],{"class":83,"line":5687},61,[81,5689,5690],{"class":547}," }",[81,5692,1086],{"class":551},[81,5694,917],{"class":547},[81,5696,5698,5701,5703,5705,5708,5710,5713,5715,5717,5719],{"class":83,"line":5697},62,[81,5699,5700],{"class":547}," this.",[81,5702,5644],{"class":594},[81,5704,1025],{"class":547},[81,5706,5707],{"class":1051},"splice",[81,5709,1055],{"class":551},[81,5711,5712],{"class":594},"targetIndex",[81,5714,2842],{"class":547},[81,5716,4455],{"class":2072},[81,5718,1086],{"class":551},[81,5720,917],{"class":547},[81,5722,5724,5726,5728,5730,5732],{"class":83,"line":5723},63,[81,5725,5700],{"class":547},[81,5727,5518],{"class":594},[81,5729,2186],{"class":547},[81,5731,3764],{"class":1038},[81,5733,917],{"class":547},[81,5735,5737],{"class":83,"line":5736},64,[81,5738,5739],{"class":547}," },\n",[81,5741,5743,5746,5748,5751,5754,5756,5759,5761,5764,5766,5768],{"class":83,"line":5742},65,[81,5744,5745],{"class":1051}," error",[81,5747,793],{"class":547},[81,5749,5750],{"class":547}," (",[81,5752,5753],{"class":1067},"xhr",[81,5755,2842],{"class":547},[81,5757,5758],{"class":1067}," textStatus",[81,5760,2842],{"class":547},[81,5762,5763],{"class":1067}," errorThrown",[81,5765,1086],{"class":547},[81,5767,5626],{"class":566},[81,5769,377],{"class":547},[81,5771,5773,5776,5778,5781,5783,5785,5788,5790,5793,5795,5797,5799,5801,5803,5805,5807],{"class":83,"line":5772},66,[81,5774,5775],{"class":594}," console",[81,5777,1025],{"class":547},[81,5779,5780],{"class":1051},"log",[81,5782,1055],{"class":551},[81,5784,796],{"class":547},[81,5786,5787],{"class":576},"Error! ",[81,5789,796],{"class":547},[81,5791,5792],{"class":547}," +",[81,5794,5758],{"class":594},[81,5796,5792],{"class":547},[81,5798,909],{"class":547},[81,5800,909],{"class":547},[81,5802,5792],{"class":547},[81,5804,5763],{"class":594},[81,5806,1086],{"class":551},[81,5808,917],{"class":547},[81,5810,5812],{"class":83,"line":5811},67,[81,5813,5814],{"class":547}," }\n",[81,5816,5818,5820],{"class":83,"line":5817},68,[81,5819,2173],{"class":547},[81,5821,1103],{"class":551},[81,5823,5825],{"class":83,"line":5824},69,[81,5826,2200],{"class":547},[81,5828,5830],{"class":83,"line":5829},70,[81,5831,5494],{"class":547},[81,5833,5835],{"class":83,"line":5834},71,[81,5836,2028],{"class":547},[81,5838,5840,5843],{"class":83,"line":5839},72,[81,5841,5842],{"class":551}," created",[81,5844,1538],{"class":547},[81,5846,5848,5851,5853,5855,5857],{"class":83,"line":5847},73,[81,5849,5850],{"class":594}," $",[81,5852,1025],{"class":547},[81,5854,5556],{"class":1051},[81,5856,1055],{"class":551},[81,5858,377],{"class":547},[81,5860,5862,5865,5867,5869,5871,5873],{"class":83,"line":5861},74,[81,5863,5864],{"class":551}," url",[81,5866,793],{"class":547},[81,5868,796],{"class":547},[81,5870,3491],{"class":576},[81,5872,796],{"class":547},[81,5874,804],{"class":547},[81,5876,5878,5881,5883,5885,5888,5890],{"class":83,"line":5877},75,[81,5879,5880],{"class":551}," type",[81,5882,793],{"class":547},[81,5884,796],{"class":547},[81,5886,5887],{"class":576},"GET",[81,5889,796],{"class":547},[81,5891,804],{"class":547},[81,5893,5895,5898,5900,5902,5905,5907,5909],{"class":83,"line":5894},76,[81,5896,5897],{"class":1051}," success",[81,5899,793],{"class":547},[81,5901,5750],{"class":547},[81,5903,5904],{"class":1067},"data",[81,5906,1086],{"class":547},[81,5908,5626],{"class":566},[81,5910,785],{"class":547},[81,5912,5914,5916,5918,5920,5923,5925,5928,5930,5932,5934,5937],{"class":83,"line":5913},77,[81,5915,2180],{"class":547},[81,5917,5644],{"class":594},[81,5919,2186],{"class":547},[81,5921,5922],{"class":594}," JSON",[81,5924,1025],{"class":547},[81,5926,5927],{"class":1051},"parse",[81,5929,1055],{"class":551},[81,5931,5904],{"class":594},[81,5933,1086],{"class":551},[81,5935,5936],{"class":547},";",[81,5938,5940],{"class":5939},"sC9rS"," \u002F\u002F returns array\n",[81,5942,5944],{"class":83,"line":5943},78,[81,5945,3937],{"class":547},[81,5947,5949,5952,5954,5956,5958,5960,5962,5964,5966,5968,5970],{"class":83,"line":5948},79,[81,5950,5951],{"class":1051}," error",[81,5953,793],{"class":547},[81,5955,5750],{"class":547},[81,5957,5753],{"class":1067},[81,5959,2842],{"class":547},[81,5961,5758],{"class":1067},[81,5963,2842],{"class":547},[81,5965,5763],{"class":1067},[81,5967,1086],{"class":547},[81,5969,5626],{"class":566},[81,5971,377],{"class":547},[81,5973,5975,5978,5980,5982,5984,5986,5988,5990,5992,5994,5996,5998,6000,6002,6004,6006],{"class":83,"line":5974},80,[81,5976,5977],{"class":594}," console",[81,5979,1025],{"class":547},[81,5981,2122],{"class":1051},[81,5983,1055],{"class":551},[81,5985,796],{"class":547},[81,5987,5787],{"class":576},[81,5989,796],{"class":547},[81,5991,5792],{"class":547},[81,5993,5758],{"class":594},[81,5995,5792],{"class":547},[81,5997,909],{"class":547},[81,5999,909],{"class":547},[81,6001,5792],{"class":547},[81,6003,5763],{"class":594},[81,6005,1086],{"class":551},[81,6007,917],{"class":547},[81,6009,6011],{"class":83,"line":6010},81,[81,6012,2200],{"class":547},[81,6014,6016,6019],{"class":83,"line":6015},82,[81,6017,6018],{"class":547}," }",[81,6020,1103],{"class":551},[81,6022,6024],{"class":83,"line":6023},83,[81,6025,406],{"class":547},[81,6027,6029],{"class":83,"line":6028},84,[81,6030,447],{"class":547},[81,6032,6034,6036,6038],{"class":83,"line":6033},85,[81,6035,598],{"class":547},[81,6037,771],{"class":551},[81,6039,555],{"class":547},[11,6041,6042],{},"レンダリングされる際は以下のような処理で一覧画面が表示されます。",[6044,6045,6046,6049,6052],"ol",{},[37,6047,6048],{},"createdでDB上の情報を取ってくるAjaxをエンドポイントに飛ばす。",[37,6050,6051],{},"取得したデータをdata()のlistに挿入。",[37,6053,6054],{},"v-forでlist分 の行を表示する。",[11,6056,6057],{},"これをレンダーすると以下のようになります。",[55,6059],{":src":6060,":width":58},"'_mix\u002Fsch-2020-10-04-14.40.28-768x285.png'",[11,6062,6063],{},"右側の「操作」で、「編集」でそのアルバムデータの編集画面へ移動、「削除」ではそのデータを削除するAjaxを飛ばします。また、「新規追加」では新規追加画面へ移動します。この画面があれば一通りのデータ操作がブラウザ画面からできるようになります。",[50,6065,6067],{"id":6066},"ロード用削除用エンドポイントを作成","ロード用・削除用エンドポイントを作成",[11,6069,6070,6072],{},[78,6071,3400],{}," コントローラーでは一覧データ・対象のIDを削除するAjaxエンドポイントを作成します。",[70,6074,6076],{"className":363,"code":6075,"filename":359,"language":365,"meta":76,"style":76},"public function view() {\n $this->render('\u002Fdashboard\u002Fvuetest\u002Fview');\n}\n\n\u002F\u002F ロード用のエンドポイント\npublic function loadData() {\n if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){\n $db = Database::connection();\n $db->Execute(\"START TRANSACTION\");\n $result = $db->fetchAll('SELECT * FROM album ORDER BY ID DESC');\n $db->Execute(\"COMMIT\");\n return Core::make('helper\u002Fajax')->sendResult($result);\n }else{\n $this->replace('\u002Fpage_not_found');\n }\n}\n\n\u002F\u002F 削除エンドポイント\npublic function deleteData(){\n $targetID=$this->post('target');\n if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' && !is_null($targetID)){\n $db = Database::connection();\n $db->Execute(\"START TRANSACTION\");\n $db->executeQuery('DELETE FROM album WHERE `ID`=?',array($targetID));\n $db->Execute(\"COMMIT\");\n }else{\n $this->replace('\u002Fpage_not_found');\n }\n}\n",[78,6077,6078,6083,6088,6092,6096,6101,6106,6111,6115,6119,6123,6127,6131,6135,6140,6144,6148,6152,6157,6162,6167,6172,6176,6180,6185,6189,6193,6197,6201],{"__ignoreMap":76},[81,6079,6080],{"class":83,"line":84},[81,6081,6082],{},"public function view() {\n",[81,6084,6085],{"class":83,"line":90},[81,6086,6087],{}," $this->render('\u002Fdashboard\u002Fvuetest\u002Fview');\n",[81,6089,6090],{"class":83,"line":96},[81,6091,447],{},[81,6093,6094],{"class":83,"line":102},[81,6095,118],{"emptyLinePlaceholder":117},[81,6097,6098],{"class":83,"line":108},[81,6099,6100],{},"\u002F\u002F ロード用のエンドポイント\n",[81,6102,6103],{"class":83,"line":114},[81,6104,6105],{},"public function loadData() {\n",[81,6107,6108],{"class":83,"line":121},[81,6109,6110],{}," if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){\n",[81,6112,6113],{"class":83,"line":127},[81,6114,3430],{},[81,6116,6117],{"class":83,"line":133},[81,6118,3435],{},[81,6120,6121],{"class":83,"line":139},[81,6122,4584],{},[81,6124,6125],{"class":83,"line":145},[81,6126,3445],{},[81,6128,6129],{"class":83,"line":151},[81,6130,3450],{},[81,6132,6133],{"class":83,"line":157},[81,6134,4685],{},[81,6136,6137],{"class":83,"line":163},[81,6138,6139],{}," $this->replace('\u002Fpage_not_found');\n",[81,6141,6142],{"class":83,"line":169},[81,6143,406],{},[81,6145,6146],{"class":83,"line":175},[81,6147,447],{},[81,6149,6150],{"class":83,"line":180},[81,6151,118],{"emptyLinePlaceholder":117},[81,6153,6154],{"class":83,"line":186},[81,6155,6156],{},"\u002F\u002F 削除エンドポイント\n",[81,6158,6159],{"class":83,"line":192},[81,6160,6161],{},"public function deleteData(){\n",[81,6163,6164],{"class":83,"line":197},[81,6165,6166],{}," $targetID=$this->post('target');\n",[81,6168,6169],{"class":83,"line":202},[81,6170,6171],{}," if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' && !is_null($targetID)){\n",[81,6173,6174],{"class":83,"line":208},[81,6175,3430],{},[81,6177,6178],{"class":83,"line":213},[81,6179,3435],{},[81,6181,6182],{"class":83,"line":219},[81,6183,6184],{}," $db->executeQuery('DELETE FROM album WHERE `ID`=?',array($targetID));\n",[81,6186,6187],{"class":83,"line":224},[81,6188,3445],{},[81,6190,6191],{"class":83,"line":229},[81,6192,4685],{},[81,6194,6195],{"class":83,"line":234},[81,6196,6139],{},[81,6198,6199],{"class":83,"line":239},[81,6200,406],{},[81,6202,6203],{"class":83,"line":245},[81,6204,447],{},[50,6206,6208],{"id":6207},"エントリーポイント-を作成","エントリーポイント を作成",[11,6210,6211],{},"上記のコンポーネントをレンダリングするために編集・追加の時のように、一覧用ページにレンダーできるように設定をします。",[11,6213,6214,6217],{},[78,6215,6216],{},"packages\u002Fvuetest\u002Fsingle_pages\u002Fdashboard\u002Fvuetest\u002Fview.php"," に以下のようにエントリーポイントを記述します。",[70,6219,6221],{"className":363,"code":6220,"filename":3291,"language":365,"meta":76,"style":76},"\u003C?php\ndefined('C5_EXECUTE') or die('Access Denied.');\n?>\n\n\u003Cdiv id=\"index\">\u003C\u002Fdiv>\n",[78,6222,6223,6227,6231,6235,6239],{"__ignoreMap":76},[81,6224,6225],{"class":83,"line":84},[81,6226,461],{},[81,6228,6229],{"class":83,"line":90},[81,6230,466],{},[81,6232,6233],{"class":83,"line":96},[81,6234,471],{},[81,6236,6237],{"class":83,"line":102},[81,6238,118],{"emptyLinePlaceholder":117},[81,6240,6241],{"class":83,"line":108},[81,6242,6243],{},"\u003Cdiv id=\"index\">\u003C\u002Fdiv>\n",[11,6245,6246],{},"そしてmain.jsでは",[70,6248,6250],{"className":977,"code":6249,"filename":969,"language":979,"meta":76,"style":76},"import Vue from 'vue'\nimport Index from '.\u002Findex.vue'\nimport Add from '.\u002Fadd.vue'\nimport Edit from '.\u002Fedit.vue'\n\n\nVue.config.productionTip = false\n\nfunction renderIfidExits(id,vueRoot){\n if(document.getElementById(id) !== null){\n return new Vue({\n render: h => h(vueRoot),\n }).$mount('#'+id)\n }\n}\n\nrenderIfidExits('index',Index);\nrenderIfidExits('add',Add);\nrenderIfidExits('edit',Edit);\n",[78,6251,6252,6266,6282,6296,6310,6314,6318,6334,6338,6354,6380,6392,6412,6436,6440,6444,6448,6467,6485],{"__ignoreMap":76},[81,6253,6254,6256,6258,6260,6262,6264],{"class":83,"line":84},[81,6255,900],{"class":778},[81,6257,988],{"class":594},[81,6259,906],{"class":778},[81,6261,909],{"class":547},[81,6263,540],{"class":576},[81,6265,997],{"class":547},[81,6267,6268,6270,6273,6275,6277,6280],{"class":83,"line":90},[81,6269,900],{"class":778},[81,6271,6272],{"class":594}," Index ",[81,6274,906],{"class":778},[81,6276,909],{"class":547},[81,6278,6279],{"class":576},".\u002Findex.vue",[81,6281,997],{"class":547},[81,6283,6284,6286,6288,6290,6292,6294],{"class":83,"line":96},[81,6285,900],{"class":778},[81,6287,1004],{"class":594},[81,6289,906],{"class":778},[81,6291,909],{"class":547},[81,6293,1011],{"class":576},[81,6295,997],{"class":547},[81,6297,6298,6300,6302,6304,6306,6308],{"class":83,"line":102},[81,6299,900],{"class":778},[81,6301,4177],{"class":594},[81,6303,906],{"class":778},[81,6305,909],{"class":547},[81,6307,4184],{"class":576},[81,6309,997],{"class":547},[81,6311,6312],{"class":83,"line":108},[81,6313,118],{"emptyLinePlaceholder":117},[81,6315,6316],{"class":83,"line":114},[81,6317,118],{"emptyLinePlaceholder":117},[81,6319,6320,6322,6324,6326,6328,6330,6332],{"class":83,"line":121},[81,6321,1022],{"class":594},[81,6323,1025],{"class":547},[81,6325,1028],{"class":594},[81,6327,1025],{"class":547},[81,6329,1033],{"class":594},[81,6331,570],{"class":547},[81,6333,1039],{"class":1038},[81,6335,6336],{"class":83,"line":127},[81,6337,118],{"emptyLinePlaceholder":117},[81,6339,6340,6342,6344,6346,6348,6350,6352],{"class":83,"line":133},[81,6341,4219],{"class":566},[81,6343,4222],{"class":1051},[81,6345,1055],{"class":547},[81,6347,3323],{"class":1067},[81,6349,2842],{"class":547},[81,6351,4231],{"class":1067},[81,6353,2049],{"class":547},[81,6355,6356,6358,6360,6362,6364,6366,6368,6370,6372,6374,6376,6378],{"class":83,"line":139},[81,6357,4238],{"class":778},[81,6359,1055],{"class":551},[81,6361,4243],{"class":594},[81,6363,1025],{"class":547},[81,6365,4248],{"class":1051},[81,6367,1055],{"class":551},[81,6369,3323],{"class":594},[81,6371,4255],{"class":551},[81,6373,4258],{"class":547},[81,6375,4261],{"class":547},[81,6377,1086],{"class":551},[81,6379,377],{"class":547},[81,6381,6382,6384,6386,6388,6390],{"class":83,"line":145},[81,6383,4270],{"class":778},[81,6385,4273],{"class":547},[81,6387,1052],{"class":1051},[81,6389,1055],{"class":551},[81,6391,377],{"class":547},[81,6393,6394,6396,6398,6400,6402,6404,6406,6408,6410],{"class":83,"line":151},[81,6395,4284],{"class":1051},[81,6397,793],{"class":547},[81,6399,1068],{"class":1067},[81,6401,1071],{"class":566},[81,6403,1068],{"class":1051},[81,6405,1055],{"class":551},[81,6407,4231],{"class":594},[81,6409,1086],{"class":551},[81,6411,804],{"class":547},[81,6413,6414,6416,6418,6420,6422,6424,6426,6428,6430,6432,6434],{"class":83,"line":157},[81,6415,4305],{"class":547},[81,6417,1086],{"class":551},[81,6419,1025],{"class":547},[81,6421,1091],{"class":1051},[81,6423,1055],{"class":551},[81,6425,796],{"class":547},[81,6427,697],{"class":576},[81,6429,796],{"class":547},[81,6431,4322],{"class":547},[81,6433,3323],{"class":594},[81,6435,1103],{"class":551},[81,6437,6438],{"class":83,"line":163},[81,6439,4331],{"class":547},[81,6441,6442],{"class":83,"line":169},[81,6443,447],{"class":547},[81,6445,6446],{"class":83,"line":175},[81,6447,118],{"emptyLinePlaceholder":117},[81,6449,6450,6452,6454,6456,6458,6460,6462,6465],{"class":83,"line":180},[81,6451,4344],{"class":1051},[81,6453,1055],{"class":594},[81,6455,796],{"class":547},[81,6457,5343],{"class":576},[81,6459,796],{"class":547},[81,6461,2842],{"class":547},[81,6463,6464],{"class":594},"Index)",[81,6466,917],{"class":547},[81,6468,6469,6471,6473,6475,6477,6479,6481,6483],{"class":83,"line":186},[81,6470,4344],{"class":1051},[81,6472,1055],{"class":594},[81,6474,796],{"class":547},[81,6476,936],{"class":576},[81,6478,796],{"class":547},[81,6480,2842],{"class":547},[81,6482,4357],{"class":594},[81,6484,917],{"class":547},[81,6486,6487,6489,6491,6493,6495,6497,6499,6501],{"class":83,"line":192},[81,6488,4344],{"class":1051},[81,6490,1055],{"class":594},[81,6492,796],{"class":547},[81,6494,4370],{"class":576},[81,6496,796],{"class":547},[81,6498,2842],{"class":547},[81,6500,4377],{"class":594},[81,6502,917],{"class":547},[11,6504,6505,6508],{},[78,6506,6507],{},"id='index'","があれば一覧のコンポーネントが出力されるようにしました。",[27,6510,6511],{"id":6511},"実際に操作してみる",[50,6513,6514],{"id":6514},"新しくデータを入れてみる",[55,6516],{":src":6517,":width":58},"'_mix\u002Fsch-2020-10-04-14.40.28-768x285-2.png'",[11,6519,6520],{},"右下の「新規追加」は \u002Fdashboard\u002Fvuetest\u002Fadd へリンクしています。そのためクリックすると追加画面が現れて、追加ができます。新規に「テスト２」としておきましょう。",[55,6522],{":src":6523,":width":58},"'_mix\u002Fsch-2020-10-04-15.11.23-768x216.png'",[11,6525,6526],{},"それで「登録」を押すとデータ挿入処理と共に一覧へリダイレクトされます。すると、",[55,6528],{":src":6529,":width":58},"'_mix\u002Fsch-2020-10-04-15.12.17-768x313.png'",[11,6531,6532],{},"きちんと一覧に反映されました。",[27,6534,6535],{"id":6535},"削除してみる",[11,6537,6538],{},"では削除を押すと、確認ダイアログがでてOKであれば削除APIが走って実行されます。",[55,6540],{":src":6541,":width":2613,":center":484},"'_mix\u002Fsch-2020-10-04-15.13.59-768x251.png'",[55,6543],{":src":6544,":width":58},"'_mix\u002Fsch-2020-10-04-15.22.02.png'",[11,6546,6547],{},"「変更テスト（id 1）」がDB上から削除されまた、一覧からも消えました。",[50,6549,6550],{"id":6550},"編集してみる",[11,6552,6553],{},"緑色の「編集」は編集画面のURLへリンクしています。vueでは以下のようにv-for内で動的に作成できるようにしています。",[70,6555,6557],{"className":537,"code":6556,"language":540,"meta":4732,"style":76},"\u003Ctr v-for=\"val in list\" :key=\"val.id\" tabindex=\"0\">\n...\n \u003Ctd style=\"vertical-align:middle;\">\n ...\n \u003Ca target=\"_blank\" :href=\"'\u002Fdashboard\u002Fvuetest\u002Fedit\u002F'+val.id\">編集\u003C\u002Fa>\n ...\n \u003C\u002Ftd>\n...\n\u003C\u002Ftr>\n",[78,6558,6559,6613,6617,6622,6627,6632,6636,6641,6645],{"__ignoreMap":76},[81,6560,6561,6563,6565,6567,6569,6571,6574,6577,6580,6582,6585,6588,6590,6592,6595,6597,6599,6601,6603,6605,6607,6609,6611],{"class":83,"line":84},[81,6562,548],{"class":547},[81,6564,4825],{"class":551},[81,6566,4946],{"class":778},[81,6568,570],{"class":547},[81,6570,573],{"class":547},[81,6572,6573],{"class":594},"val ",[81,6575,6576],{"class":547},"in",[81,6578,6579],{"class":594}," list",[81,6581,573],{"class":547},[81,6583,6584],{"class":547}," :",[81,6586,6587],{"class":566},"key",[81,6589,570],{"class":547},[81,6591,573],{"class":547},[81,6593,6594],{"class":594},"val",[81,6596,1025],{"class":547},[81,6598,3323],{"class":594},[81,6600,573],{"class":547},[81,6602,4970],{"class":566},[81,6604,570],{"class":547},[81,6606,573],{"class":547},[81,6608,2073],{"class":576},[81,6610,573],{"class":547},[81,6612,555],{"class":547},[81,6614,6615],{"class":83,"line":90},[81,6616,3171],{"class":594},[81,6618,6619],{"class":83,"line":96},[81,6620,6621],{"class":594}," \u003Ctd style=\"vertical-align:middle;\">\n",[81,6623,6624],{"class":83,"line":102},[81,6625,6626],{"class":594}," ...\n",[81,6628,6629],{"class":83,"line":108},[81,6630,6631],{"class":594}," \u003Ca target=\"_blank\" :href=\"'\u002Fdashboard\u002Fvuetest\u002Fedit\u002F'+val.id\">編集\u003C\u002Fa>\n",[81,6633,6634],{"class":83,"line":114},[81,6635,6626],{"class":594},[81,6637,6638],{"class":83,"line":121},[81,6639,6640],{"class":594}," \u003C\u002Ftd>\n",[81,6642,6643],{"class":83,"line":127},[81,6644,3171],{"class":594},[81,6646,6647,6649,6651],{"class":83,"line":133},[81,6648,598],{"class":547},[81,6650,4825],{"class":551},[81,6652,555],{"class":547},[11,6654,6655],{},"実際にリンクしてみると、選択したデータの編集画面が表示されました。",[55,6657],{":src":6658,":width":2613,":center":484},"'_mix\u002Fsch-2020-10-04-15.29.21-768x342.png'",[27,6660,6661],{"id":2619},"次回は..",[11,6663,6664],{},"今回の記事では編集画面と一覧画面が完成しました。これで「作成」「読み取り」「更新」「削除」の実装ができました。次の記事では「タイトル」だけでなく「画像データ」「リッチテキスト」といったデータを使えるようにします。",[2639,6666,6667],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}",{"title":76,"searchDepth":96,"depth":96,"links":6669},[6670,6675,6676,6679,6684,6687,6690],{"id":3371,"depth":90,"text":3372,"children":6671},[6672,6673,6674],{"id":3385,"depth":96,"text":3386},{"id":3880,"depth":96,"text":3881},{"id":3982,"depth":96,"text":3982},{"id":4407,"depth":90,"text":4407},{"id":4529,"depth":90,"text":4529,"children":6677},[6678],{"id":4707,"depth":96,"text":4707},{"id":4719,"depth":90,"text":4719,"children":6680},[6681,6682,6683],{"id":4725,"depth":96,"text":4725},{"id":6066,"depth":96,"text":6067},{"id":6207,"depth":96,"text":6208},{"id":6511,"depth":90,"text":6511,"children":6685},[6686],{"id":6514,"depth":96,"text":6514},{"id":6535,"depth":90,"text":6535,"children":6688},[6689],{"id":6550,"depth":96,"text":6550},{"id":2619,"depth":90,"text":6661},[2664],"2020-10-04","oncrete5にVueCLIを使ってUIを構築する。編集画面と一覧画面。",{},"\u002Fseries\u002Fconcrete5vue-3",{"title":3357,"description":6693},"series\u002Fconcrete5vue-3",[2674,2675,540],"b60sq7M9Lg8p5F-WfOF_VM7wNdrKWtYXHxXbLU-P1O4",1780987153008]