美文网首页
关于数据使用后台模板方式 和 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统一管理方式的

    velocity后台模板 这是一种格式,官网项目m端用过的。比如一个下拉列表红的数据,就只有一个页面用到,没必要调...

  • vuex

    核心概念 state 作用:存储数据 state定义:var state = {} 不使用vuex:存储需要使用的...

  • Vuex的核心概念

    Vuex的核心概念 State state提供唯一的公共数据源,所有共享的数据都要统一放到Store的State中...

  • 如何使用vuex(使用模板)

    1 怎么使用vuex 安装等等 然后下载vuex模板 store文件 里面包含 state.js acti...

  • 如何使用VUEX

    1 怎么使用vuex 安装等等 然后下载vuex模板 store文件 里面包含 state.js acti...

  • vuex Demo 理解其用法

    1.安装 vuex vuex的使用 state 用来数据共享数据存储 mutation 用来注册改变数据状态 g...

  • Vuex数据持久化

    使用Vuex时发现页面刷新以后Vuex里面存储的state数据会丢失,因为我们的state都是存储在内存中的。解决...

  • Vuex的学习

    Vuex使用单一状态树。state存储数据。getter对state中的数据进行过滤。 mutation更改sto...

  • 浅谈vue项目进阶开发-vuex篇

    1.vuex的优缺点 2..vuex的使用 先上目录结构: ​ state.js 项目中想要管理的数据和状态都在这...

  • Vuex-State、Getter、Mutation、Actio

    一、state(状态) #使用state在 Vue 组件中获取Vuex 状态 (不常用 & 不能改变数据),想要获...

网友评论

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

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