第五篇-後端人員學習vue(實際專案中)
阿新 • • 發佈：2018-12-22
一直在搜一個vue整合到我們後臺相關資料，都不全。經過自己多天的研究，終於弄出了一點樣子來。所以想分享給有需要的夥伴們。
1.前言
前面把vue大部分重要的內容學完了，其實vue還是非常容易上手的。我學習vue的目的就是它挺好用的，所以我一直在想怎麼把vue整合到後臺中，寫出好看的頁面。本篇部落格會講到：
1.我們後臺怎麼改成vue的
2.vue能給我們帶來什麼便捷
3.增刪改查-vue.js 模板
2.效果展示
反正我覺得用了vue之後，我們對資料的展示方便了許多，個人認為是我目前最喜歡的一款框架。
3.vue-頁面框架搭建
<!DOCTYPE html> index.js怎麼寫呢：
var vm = new Vue({
el:'#rrapp',
data:{
user:{},
menuList:{},
main:"main.html",
password:'',
newPassword:'',
navTitle:"控制檯"
},
methods: {
getMenuList: function (event) {
$.getJSON("sys/menu/nav?_"+$.now(), function(r){
vm.menuList = r.menuList;
});
},
getUser: function(){
$.getJSON("sys/user/info?_"+$.now(), function(r){
vm.user = r.user;
});
},
},
created: function(){
this.getMenuList();
this.getUser();
},
updated: function(){
//路由
var router = new Router();
routerList(router, vm.menuList);
router.start();
}
});
function routerList(router, menuList){
for(var key in menuList){
var menu = menuList[key];
if(menu.type == 0){
routerList(router, menu.list);
}else if(menu.type == 1){
router.add('#'+menu.url, function() {
var url = window.location.hash;
//替換iframe的url
vm.main = url.replace('#', '');
//導航選單展開
$(".treeview-menu li").removeClass("active");
$("a[href='"+url+"']").parents("li").addClass("active");
vm.navTitle = $("a[href='"+url+"']").text();
});
}
}
}
//iframe自適應
$(window).on('resize', function() {
var $content = $('.content');
$content.height($(this).height() - 120);
$content.find('iframe').each(function() {
$(this).height($content.height());
});
}).resize();左側選單從資料庫查出來，然後用了vue自定義的元件menu-item：
<!-- 左側選單 -->
<aside class="main-sidebar">
<section class="sidebar">
<ul class="sidebar-menu">
<li class="header">導航選單</li>
<!-- 自定義vue元件生成的選單 -->
<menu-item :item="item" v-for="item in menuList"></menu-item>
</ul>
</section>
</aside>//註冊選單元件
Vue.component('menuItem',menuItem);
//生成選單
var menuItem = Vue.extend({
name: 'menu-item',
props:{item:{}},
template:[
'<li>',
' <a v-if="item.type === 0" href="javascript:;">',
' <i v-if="item.icon != null" :class="item.icon"></i>',
' <span>{{item.name}}</span>',
' <i class="fa fa-angle-left pull-right"></i>',
' </a>',
' <ul v-if="item.type === 0" class="treeview-menu">',
' <menu-item :item="item" v-for="item in item.list"></menu-item>',
' </ul>',
' <a v-if="item.type === 1 && item.parentId === 0" :href="\'#\'+item.url">',
' <i v-if="item.icon != null" :class="item.icon"></i>',
' <span>{{item.name}}</span>',
' </a>',
' <a v-if="item.type === 1 && item.parentId != 0" :href="\'#\'+item.url"><i v-if="item.icon != null" :class="item.icon"></i><i v-else class="fa fa-circle-o"></i> {{item.name}}</a>',
'</li>'
].join('')
});4.vue-增刪改查-js怎麼寫
1) 查
2) 刪
3) 增
4) 改
<!DOCTYPE html>
<html>
<head>
<title>部門管理</title>
<#include "/header.html"> //公用的js,css
<link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap-table.min.css">
<link rel="stylesheet" href="${request.contextPath}/statics/plugins/treegrid/jquery.treegrid.css">
<script src="${request.contextPath}/statics/libs/bootstrap-table.min.js"></script>
<script src="${request.contextPath}/statics/plugins/treegrid/jquery.treegrid.min.js"></script>
<script src="${request.contextPath}/statics/plugins/treegrid/jquery.treegrid.extension.js"></script>
<script src="${request.contextPath}/statics/plugins/treegrid/tree.table.js"></script>
</head>
<body>
<div id="rrapp" v-cloak>
<div v-show="showList">
<div class="grid-btn">
<a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>新增</a>
<a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>修改</a>
<a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>刪除</a>
</div>
<table id="deptTable" data-mobile-responsive="true" data-click-to-select="true">
<thead>
<tr>
<th data-field="selectItem" data-checkbox="true"></th>
</tr>
</thead>
</table>
</div>
<!--新增,修改頁面-->
<div v-show="!showList" class="panel panel-default">
<div class="panel-heading">{{title}}</div>
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-2 control-label">部門名稱</div>
<div class="col-sm-10">
<input type="text" class="form-control" v-model="dept.name" placeholder="部門名稱"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label">上級部門</div>
<div class="col-sm-10">
<input type="text" class="form-control" style="cursor:pointer;" v-model="dept.parentName" @click="deptTree" readonly="readonly" placeholder="一級部門"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label">排序號</div>
<div class="col-sm-10">
<input type="number" class="form-control" v-model="dept.orderNum" placeholder="排序號"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label"></div>
<input type="button" class="btn btn-primary" @click="saveOrUpdate" value="確定"/>
<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
</div>
</form>
</div>
</div>
<!-- 選擇部門 -->
<div id="deptLayer" style="display: none;padding:10px;">
<ul id="deptTree" class="ztree"></ul>
</div>
<script src="${request.contextPath}/statics/js/modules/sys/dept.js?_${.now?long}"></script>
</body>
</html>1) 查
<table id="deptTable" data-mobile-responsive="true" data-click-to-select="true">
<thead>
<tr>
<th data-field="selectItem" data-checkbox="true"></th>
</tr>
</thead>
</table>var Dept = {
id: "deptTable",
table: null,
layerIndex: -1
};
/**
* 初始化表格的列
*/
Dept.initColumn = function () {
var columns = [
{field: 'selectItem', radio: true},
{title: '部門ID', field: 'deptId', visible: false, align: 'center', valign: 'middle', width: '80px'},
{title: '部門名稱', field: 'name', align: 'center', valign: 'middle', sortable: true, width: '180px'},
{title: '上級部門', field: 'parentName', align: 'center', valign: 'middle', sortable: true, width: '100px'},
{title: '排序號', field: 'orderNum', align: 'center', valign: 'middle', sortable: true, width: '100px'}]
return columns;
};
$(function () {
var colunms = Dept.initColumn();
});2) 刪
var vm = new Vue({
el:'#rrapp',
data:{
showList: true,
title: null,
dept:{
parentName:null,
parentId:0,
orderNum:0
}
},
methods: {
del: function () {
var deptId = getDeptId();
if(deptId == null){
return ;
}
confirm('確定要刪除選中的記錄？', function(){
$.ajax({
type: "POST",
url: baseURL + "sys/dept/delete",
data: "deptId=" + deptId,
success: function(r){
if(r.code === 0){
alert('操作成功', function(){
vm.reload();
});
}else{
alert(r.msg);
}
}
});
});
},
reload: function () {
vm.showList = true;
Dept.table.refresh();
}
}
});增加和修改用到了同個介面，並且更加v-show，將增加，刪除，修改按鈕隱藏掉，然後顯示增加/修改操作介面，僅僅換一下標題就可以。
<!--新增,修改頁面-->
<div v-show="!showList" class="panel panel-default">
<div class="panel-heading">{{title}}</div>
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-2 control-label">部門名稱</div>
<div class="col-sm-10">
<input type="text" class="form-control" v-model="dept.name" placeholder="部門名稱"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label">上級部門</div>
<div class="col-sm-10">
<input type="text" class="form-control" style="cursor:pointer;" v-model="dept.parentName" @click="deptTree" readonly="readonly" placeholder="一級部門"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label">排序號</div>
<div class="col-sm-10">
<input type="number" class="form-control" v-model="dept.orderNum" placeholder="排序號"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label"></div>
<input type="button" class="btn btn-primary" @click="saveOrUpdate" value="確定"/>
<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
</div>
</form>
</div>
</div>3) 增/改
var vm = new Vue({
el:'#rrapp',
data:{
showList: true,
title: null,
dept:{
parentName:null,
parentId:0,
orderNum:0
}
},
methods: {
add: function(){
vm.showList = false;
vm.title = "新增";
vm.dept = {parentName:null,parentId:0,orderNum:0};
vm.getDept();
},
update: function () {
var deptId = getDeptId();
if(deptId == null){
return ;
}
$.get(baseURL + "sys/dept/info/"+deptId, function(r){
vm.showList = false;
vm.title = "修改";
vm.dept = r.dept;
vm.getDept();
});
},
saveOrUpdate: function (event) {
var url = vm.dept.deptId == null ? "sys/dept/save" : "sys/dept/update";
console.log(JSON.stringify(vm.dept));
$.ajax({
type: "POST",
url: baseURL + url,
contentType: "application/json",
data: JSON.stringify(vm.dept),
success: function(r){
if(r.code === 0){
alert('操作成功', function(){
vm.reload();
});
}else{
alert(r.msg);
}
}
});
},
reload: function () {
vm.showList = true;
Dept.table.refresh();
}
}
});