MVC+VUE.JS+MUSEUI
唐兴思
前端代码：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MuseUI</title>
<script src="~/Content/vue.js"></script>
<script src="~/js/vue-resource.js"></script>
<link href="~/Content/MuseUI/muse-ui.css" rel="stylesheet" />
<script src="~/Content/MuseUI/muse-ui.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview@2.1.0/dist/styles/iview.css">
<style>
.demo-refresh-container {
/*width: 256px;
height: 300px;*/
overflow: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid #d9d9d9;
position: relative;
user-select: none;
}
.demo-raised-button {
margin: 12px;
}
.demo-raised-button-container {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.demo-menu-divider {
display: inline-block;
}
.file-button {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
}
.demo-flat-button-container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.demo-flat-button {
margin: 12px;
}
</style>
</head>
<body>
<div id="app">
@*<img src="https://png.icons8.com/folder/androidL/24" title="Folder" width="24" height="24">*@
<template>
<mu-appbar :title="appbarTitle">
<mu-icon-button icon="menu" slot="left" v-on:click="toggle(true)"></mu-icon-button>
@*<mu-text-field icon="search" class="appbar-search-field" slot="right" hint-text="请输入搜索内容" v-model="searchKEY" v-on:input="HandleSearch()"></mu-text-field>*@
@*<mu-flat-button label="搜索" slot="right" class="demo-flat-button" primary v-on:click="HandleSearch()" />*@
<mu-auto-complete hint-text="输入姓名||学号 搜索" v-on:input="HandleSearch()" :data-source="list" v-on:change="HandleSearch(val)" v-model="searchKEY" slot="right"/>
<mu-flat-button class="demo-flat-button" label="新增" icon="person_add" primary v-on:click="add()" slot="ringht"></mu-flat-button>
</mu-appbar>
<mu-drawer :open="open" :docked="docked" right v-on:close="toggle()">
<mu-list @*v-on:item-click="docked ? '' : toggle()"*@>
<mu-list-item title="">
<mu-flat-button class="demo-flat-button" label="新增" icon="person_add" primary v-on:click="add()" />
</mu-list-item>
<mu-list-item title="">
<mu-flat-button label="设置" class="demo-flat-button" icon="settings" primary></mu-flat-button>
</mu-list-item>
<mu-list-item title="">
<mu-flat-button label="帮助" class="demo-flat-button" icon="help_outline" primary />
</mu-list-item>
<mu-list-item v-on:click="searchEvent()">
@*<mu-icon slot="left" value="search" />*@
<mu-flat-button label="搜索" class="demo-flat-button" icon="search" primary />
<mu-text-field id="searchBar" style="width:50%;" @*hint-text="姓名||学号"*@ v-if="ifShow" v-on:blur="ifShow=false" />
</mu-list-item>
<mu-list-item>
@*<mu-icon slot="left" value="power_settings_new" />*@
<mu-flat-button label="退出" class="demo-flat-button" icon="power_settings_new" secondary />
</mu-list-item>
</mu-list>
</mu-drawer>
</template>
<div class="demo-refresh-container">
<mu-refresh-control :refreshing="refreshing" :trigger="trigger" v-on:refresh="refresh"></mu-refresh-control>
<mu-list>
<template v-for="item in list">
<mu-list-item>
<mu-flexbox class="content">
{{item.SNO}}
<mu-flexbox-item grow="1" class="flex-demo">
<mu-avatar :src="item.ImageUrl" />
</mu-flexbox-item>
<mu-flexbox-item grow="2" class="flex-demo">
<mu-flexbox>
<mu-flexbox-item grow="2" class="flex-demo">
@*{{item.SNAME }}*@<span class="blue">{{item.SNAME}}</span>
@*<mu-flat-button :label="item.SNAME " class="demo-flat-button" icon="person" primary></mu-flat-button>*@
</mu-flexbox-item>
<mu-flexbox-item grow="2" class="flex-demo">
<span class="blue">{{item.SSEX}}</span>
</mu-flexbox-item>
</mu-flexbox>
<mu-flexbox>
<mu-flexbox-item grow="1" class="flex-demo">
<span class="grey">{{item.NID}}年级</span>
</mu-flexbox-item>
<mu-flexbox-item grow="1" class="flex-demo">
<span class="grey">{{item.BID}}班</span>
</mu-flexbox-item>
</mu-flexbox>
</mu-flexbox-item>
<mu-flexbox-item>
<mu-flexbox>
<mu-flexbox-item grow="1" class="flex-demo">
<mu-flat-button label="编辑" v-on:click="edit(item)" class="demo-flat-button" icon="edit" primary />
</mu-flexbox-item>
</mu-flexbox>
<mu-flexbox>
<mu-flexbox-item grow="1" class="flex-demo">
<mu-flat-button label="删除" v-on:click="del(item)" class="demo-flat-button" icon="delete" secondary />
</mu-flexbox-item>
</mu-flexbox>
</mu-flexbox-item>
</mu-flexbox>
</mu-list-item>
<mu-divider />
</template>
</mu-list>
</div>
<mu-dialog :open="dialog" v-on:close="close" :title="title" scrollable>
<mu-list>
<mu-list-item>
<mu-text-field hint-text="姓名" icon="person" v-model="editData.SNAME" />
</mu-list-item>
<mu-list-item>
<mu-text-field hint-text="性别" label="性别" v-model="editData.SSEX" />
</mu-list-item>
<mu-list-item>
<mu-text-field hint-text="NID" label="年级" v-model="editData.NID" />
</mu-list-item>
<mu-list-item>
<mu-text-field hint-text="BID" label="班级" v-model="editData.BID" />
</mu-list-item>
<mu-list-item>
<mu-text-field hint-text="SNO" label="学号" v-model="editData.SNO" />
</mu-list-item>
<mu-list-item>
<mu-text-field hint-text="头像" label="头像" v-model="editData.ImageUrl" />
</mu-list-item>
</mu-list>
<mu-flat-button primary :label="editlabel" v-on:click="ConfirmEdit" slot="actions" />
@*<mu-flat-button primary label="取消" v-on:click="close" slot="actions" />*@
</mu-dialog>
@*<template>
<mu-paper>
<mu-bottom-nav :value="bottomNav" v-on:change="handleChange">
<mu-bottom-nav-item value="recents" title="Recents" icon="restore" />
<mu-bottom-nav-item value="favorites" title="Favorites" icon="favorite" />
<mu-bottom-nav-item value="nearby" title="Nearby" icon="location_on" />
</mu-bottom-nav>
</mu-paper>
</template>*@
@*<mu-popup position="top" :overlay="false" popup-class="demo-popup-top" :open="topPopup" v-text="message">
</mu-popup>*@
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data () {
return {
list: [],
trigger: null,
refreshing: false,
bottomNav: 'movies',
bottomNavColor: 'movies',
bottomNav: 'recents',
dialog: false,
editData: { SNAME: '', NID: '', BID: '', SSEX: '', SNO: '', SID: '', BeginTime: '', EndTime: '',ImageUrl:'' },
topPopup: false,
message: '',
toast: false,
baseUrl: "/ShopCart/",
title: '',
open: false,
docked: true,
appbarTitle: '个人信息',
editlabel: '确认修改',
flag: false,
ifShow: false,
label: '',
searchKEY: '',//搜索关键词
}
},
methods: {
handleInput:function () {
},
HandleSearch () {
var that = this;
that.list = [];
that.$http.get(that.baseUrl + "AutoComplete", { SearchData: vm.searchKEY }).then(function (res) {
res.data.forEach(function (val, index, arr) {
that.list.push(val);
})
}, function (res) {
alert(res.data);
that.GetAllData();
});
},
refresh () {
this.refreshing = true
setTimeout(() => {
//const list = []
//for (let i = this.num; i < this.num + 10; i++) {
// list.push('item' + (i + 1))
//}
//this.list = list
//this.num += 10
alert(1)
this.refreshing = false
}, 2000)
},
searchEvent: function () {
vm.ifShow = true;
var searchBar = document.getElementById("searchBar");
//searchBar.style.display = "block";
//searchBar.setAttribute("class", "mu-text-field focus-state");
},
toggle: function (flag) {
this.open = !this.open
this.docked = !flag
},
add: function () {
var that = this;
vm.editlabel = '确认添加';
vm.dialog = true;
vm.title = '添加';
vm.editData.ImageUrl = '/Images/.png';
this.$http.get(that.baseUrl + "GetSNO").then(function (res) {
vm.editData.SNO = res.data
},
function (res) {
that.$Message.error(res.data);
});
},
hideToast () {
this.toast = false
if (this.toastTimer) clearTimeout(this.toastTimer)
},
showToast () {
this.toast = true
if (this.toastTimer) clearTimeout(this.toastTimer)
this.toastTimer = setTimeout(() => { this.toast = false }, 2000)
},
GetAllData: function () {
var that = this;
this.$http.post("/ShopCart/GetData").then(function (res) {
//that.list=res.data;
res.data.forEach(function (val, index, arr) {
that.list.push(val);
});
}, function (res) {
alert(1);
});
},
handleChange: function (val) {
this.bottomNav = val
},
edit: function (item) {
vm.editlabel = '确认修改';
var that = this;
vm.title = '编辑';
that.dialog = true;
that.editData = item;
},
del: function (item) {
var that = this;
if (confirm("确定要删除数据吗？")) {
that.$http.get(that.baseUrl + "Delete", item).then(function (res) {
alert("删除成功啦");
that.GetAllData();
}, function (res) {
alert(res.data.Message);
that.GetAllData();
});
}
},
close () {
this.dialog = false
},
ConfirmEdit: function (editData) {
var that = this;
vm.open = false;
that.$http.post("/ShopCart/Edit", that.editData).then(function (res) {
that.editData = [];
that.dialog = false;
that.GetAllData();
vm.$Message.success(res.data);
}, function (res) {
alert(res.data);
});
},
},
mounted: function () {
this.$nextTick(() => {
//var searchBar = document.getElementById("searchBar");
//document.getElementById("searchBar").style.display = "none";
this.GetAllData();
})
},
fillter: {
},
watch: {
topPopup: function (val) {
if (val) {
setTimeout(() => {
vm.topPopup = false
}, 2000)
}
}
}
});
</script>
需要注意的坑：
例如下面代码段是一个appbar，里面的button写成这样才不会报错
<mu-appbar :title="appbarTitle">
<mu-icon-button icon="menu" slot="left" v-on:click="toggle(true)"></mu-icon-button>
@*<mu-text-field icon="search" class="appbar-search-field" slot="right" hint-text="请输入搜索内容" v-model="searchKEY" v-on:input="HandleSearch()"></mu-text-field>*@
@*<mu-flat-button label="搜索" slot="right" class="demo-flat-button" primary v-on:click="HandleSearch()" />*@
<mu-auto-complete hint-text="输入姓名||学号 搜索" v-on:input="HandleSearch()" :data-source="list" v-on:change="HandleSearch(val)" v-model="searchKEY" slot="right"/>
<mu-flat-button class="demo-flat-button" label="新增" icon="person_add" primary v-on:click="add()" slot="ringht"></mu-flat-button>
</mu-appbar>如果写成如下形式则报错：
<mu-appbar :title="appbarTitle">
<mu-icon-button icon="menu" slot="left" v-on:click="toggle(true)"/>
@*<mu-text-field icon="search" class="appbar-search-field" slot="right" hint-text="请输入搜索内容" v-model="searchKEY" v-on:input="HandleSearch()"></mu-text-field>*@
@*<mu-flat-button label="搜索" slot="right" class="demo-flat-button" primary v-on:click="HandleSearch()" />*@
<mu-auto-complete hint-text="输入姓名||学号 搜索" v-on:input="HandleSearch()" :data-source="list" v-on:change="HandleSearch(val)" v-model="searchKEY" slot="right"/>
<mu-flat-button class="demo-flat-button" label="新增" icon="person_add" primary v-on:click="add()" slot="ringht"></mu-flat-button>
</mu-appbar>
类似资料：