springboot+vue+element不前後端分離引入資源
阿新 • • 發佈：2019-01-29
在前面基礎上增加vue與element資源。
在static資料夾下建立plugins資料夾將資源放入
在html頭引入資原始檔
進行測試即可<!-- 引入vue --> <script src="../../plugins/vue.min.js"></script> <!-- 引入jquery --> <script src="../../plugins/jquery.min.js"></script> <!-- 引入樣式 --> <link rel="stylesheet" href="../../plugins/element-ui/theme-default/index.css"> <!--引入元件庫--> <script src="../../plugins/element-ui/index.js"></script>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入vue --> <script src="../../plugins/vue.min.js"></script> <!-- 引入jquery --> <script src="../../plugins/jquery.min.js"></script> <!-- 引入樣式 --> <link rel="stylesheet" href="../../plugins/element-ui/theme-default/index.css"> <!--引入元件庫--> <script src="../../plugins/element-ui/index.js"></script> <title>Insert title here</title> </head> <body> <div id="rrapp"> <div v-show="showlist">aaaa<button @click="add">隱藏</button><el-row> <el-button>預設按鈕</el-button> <el-button type="primary">主要按鈕</el-button> <el-button type="success">成功按鈕</el-button> <el-button type="info">資訊按鈕</el-button> <el-button type="warning">警告按鈕</el-button> <el-button type="danger">危險按鈕</el-button> </el-row> <el-row> <el-button plain>樸素按鈕</el-button> <el-button type="primary" plain>主要按鈕</el-button> <el-button type="success" plain>成功按鈕</el-button> <el-button type="info" plain>資訊按鈕</el-button> <el-button type="warning" plain>警告按鈕</el-button> <el-button type="danger" plain>危險按鈕</el-button> </el-row> <el-row> <el-button round>圓角按鈕</el-button> <el-button type="primary" round>主要按鈕</el-button> <el-button type="success" round>成功按鈕</el-button> <el-button type="info" round>資訊按鈕</el-button> <el-button type="warning" round>警告按鈕</el-button> <el-button type="danger" round>危險按鈕</el-button> </el-row> <el-row> <el-button icon="el-icon-search" circle></el-button> <el-button type="primary" icon="el-icon-edit" circle></el-button> <el-button type="success" icon="el-icon-check" circle></el-button> <el-button type="info" icon="el-icon-message" circle></el-button> <el-button type="warning" icon="el-icon-star-off" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button> </el-row></div> </div> <button type="button"onclick="text()">查詢</button> <button type="button"onclick="update()"class="admin">修改</button> <button type="button"onclick="del()"class="admin">刪除</button> </body> <style> .admin{ display: none } </style> <script type="text/javascript"> //測試vue $(function(){ console.log("asd") $.ajax({ type: "POST", url: "/user/list", contentType: "application/json", success: function(r){ console.log(r) for(var i=0;i<r.length;i++){ console.log(r[i]) if(r[i]=="admin"){ console.log("admin使用者") $(".admin").css("display","block"); } } } }); }) var vm = new Vue({ el : '#rrapp', data : { showlist : true, }, methods : { add:function(){ alert("asd") vm.showlist = false; } } }); </script> </html>
隨便複製幾個按鈕測試樣式即可。