关于数据使用后台模板方式 和 vuex state统一管理方式的
2017-11-18 本文已影响0人
宋乐怡
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扔给后台，不需要前端的数据了，这样做是为了目前我自己开发的效果。
