美文网首页
关于数据使用后台模板方式 和 vuex state统一管理方式的

关于数据使用后台模板方式 和 vuex state统一管理方式的

作者: 宋乐怡 | 来源:发表于2017-11-18 18:39 被阅读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扔给后台,不需要前端的数据了,这样做是为了目前我自己开发的效果。

    相关文章

      网友评论

          本文标题:关于数据使用后台模板方式 和 vuex state统一管理方式的

          本文链接:https://www.haomeiwen.com/subject/glptpxtx.html