我们首先采用Vue.js 和Element UI的Table组件，创建一个网格原型界面，这个界面显示唐诗和诗人。然后在此基础上，我们创建界面显示模型，把网格界面改为模板生成的动态界面。我们创建一个.Net Framework的MVC项目，然后引入vue.js和Element UI，创建一个简单的网格页面如下：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<!-- 引入样式 -->
<link rel="stylesheet" href="~Lib/element-ui/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="~/Lib/vue/vue.min.js"></script>
<script src="~/Lib/element-ui/index.js"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
</head>
<body>
<div>
<div id="app">
<template>
<el-table :data="tableData"
stripe
style="width: 100%">
<el-table-column prop="title"
label="标题"
width="180">
</el-table-column>
<el-table-column prop="authorName"
label="作者"
width="180">
</el-table-column>
</el-table>
</template>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
tableData: []
}
},
mounted: function () {
var mydata = {};
mydata.SkipCount = 0;
mydata.MaxResultCount = 10;
var me = this;
$.ajax(
{
url: "http://localhost:6749/api/services/app/Poem/GetPagedPoems",
data: JSON.stringify(mydata),
type: "post",
dataType: "json",
contentType: "application/json",
success: function (res) {
me.tableData = res.result.items;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(textStatus);
console.log(XMLHttpRequest);
alert(errorThrown);
}
});
}
});
</script>
</body>
</html>
这里使用了在《从零开始进行ABP项目开发》系列中的Web Api来获取数据。
控制器的代码很简单，只是返回视图，如下：
public ActionResult Grid(string id)
{
return View();
}
这个页面显示了唐诗列表的前10行，如果我们要显示诗人的前10行，会发现代码大部分是相同的，所不同的是没列的标题、绑定的字段名称以及数据源api的url等，如果把这些封装到可变化的模型中，那么就产生了可复用的界面。下一步，我们来抽象页面的显示模型。
