velocity后台模板
这是一种格式,官网项目m端用过的。
比如一个下拉列表红的数据,就只有一个页面用到,没必要调接口,徒增请求次数,那就写个HTML,里面用到扁郎数据的地方用velocity格式写上,把这个HTML丢给后台就好了。当然两方要说好变量的名字。
#foreach($secondCate in $secondCateList)
<a href="/$!secondCate.listName"><i><img src=$!secondCate.picUrlMNavi></i>$secondCate.name</a>
#end
这就是最基础的velocity语法格式了,还可以自己定义变量什么的,等等更复杂的方式。
说srm的事情
纵观项目中,dev-server这个文件夹稍显神奇,同屋小哥哥封装的什么东西等我参透再来说一说。项目里的vue文件是我自己跑的,并不要给后台,因为整个项目里只有一个完整的HTML,即dev-server下的index.html,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SRM</title>
#foreach($asset in $!state.main)
#if($!asset.toString().endsWith("css"))
<link rel="stylesheet" href="/$!asset"/>
#end
#end
</head>
<body>
<div id="app"></div>
<!--<script src="/scripts/runtime.js"></script>-->
</body>
<script>
var cities = $cities;
var cates = $cates;
</script>
<script src="/scripts/index.js"></script>
</html>
<div id="app"></div>
这句话把vue部分拽进来了。
script标签里定义了两个全局变量,vue文件要用到的数据变量就是拿的这个,登号后面的$cities这样的东西是怎么回事呢?dev-server下有个routers里面的index.js是最初加载页面的路由文件,renderWIthink就是加载一个页面时去找的页面 资源,和为这个页面初始化的数据,那我们就把数据写在这里,所以HTML拿到的其实就是这个js文件里定义的。vue文件是怎么拿到的呢?得把全局的变量接回来,变成自己局部范围内的变量:
<script>
import {srmServices} from '../service';
export default {
name: 'addSupplier',
data() {
return {
cities:window.cities,
cates:window.cates,
}
},
methods: {
}
}
</script>
全局是window,所以是window.cities,这个时候,把这个变量接回来了,在当前的vue组件里就可以用了。
<el-option v-for="city in cities" :key="city.id" value="city.id">{{city.name}}</el-option>
实际上,router里的index.js我们不用写数据的,因为index.html扔给后台,不需要前端的数据了,这样做是为了目前我自己开发的效果。
网友评论