非node环境vue全家桶实战

项目使用了vue+vue-router+vuex以及vant开发移动端页面,ajax请求使用的axios。

引入基本依赖

<link href="lib/vant.css" rel="stylesheet" charset="UTF-8">
<script src="lib/vant.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="lib/axios.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="lib/vue.js" type="text/javascript" charset="UTF-8"></script>
<script src="lib/vue-router.js" type="text/javascript" charset="UTF-8"></script>
<script src="lib/vuex.js" type="text/javascript" charset="UTF-8"></script>

页面是单页面多组件的方式,多个主键通过vue-router来hash路由

searchComponent:查询组件,路径:/

listComponent:列表组件,路径:/list

detailComponent:详细信息组件,路径:/detail

可以先在html上把布局和样式画好,然后复制成字符串模板,需要注意的是,模板最外层只能有一个div,也就是组件的根节点,不能有多个div并行。

const searchComponent = `<div>
    ...
</div>`
const listComponent = `<div>
    ...
</div>`
const detailComponent = `<div>
    ...
</div>`

Vue-Router 路由设置

path来指定组件的路径,component指定组件。需要注意的有3点。

  1. 之前是用el来指定div的id,现在是用template来指定html模板字符串
  2. data属性要通过return {}的方式来返回组件的属性
  3. 创建vue-router对象时,指定它的属性名是routes,经常有人写错成routers或者router。
const routers = [
    {
        path: "/",
        component: {
            template: searchComponent,
            data() {
                return {
                    
                }
            },
            methods: {},
        }
    },
    {
        path: "/list",
        component: {
            template: listComponent,
            data() {
                return {
                    
                }
            },
            methods: {},
        }
    },
    {
        path: "/detail",
        component: {
            template: detailComponent,
            data() {
                return {
                    
                }
            },
            methods: {},
        }
    },
]

// 创建vue-router对象
const router = new VueRouter({
    routes: routers,
})

在这个例子中,路由跳转我是通过js完成的,比如this.$router.push({path: '/list'})

公共数据存储 -> Vuex

  • state:相当于vue的data属性,存放着数据对象
  • mutations:用来修改state中的数据,将vuex挂载到vue中时,可通过this.$store.commit('saveLaws', [])来修改数据
  • getters相当于vue中的计算属性
var store = new Vuex.Store({
    state:{
        total: 0,
        laws: [],
        lawsType: [],
        punishType: [],
    },
    mutations:{
        saveLaws(state, laws){
            state.laws = laws
        },
        saveTotal(state, total){
            state.total = total
        },
    },
    getters: {
        getLaws: state => {
        	return state.laws.filter(item => item.flag)
        }
  	},
})

在组件中想要获取vuex中的state,需要用到vue的计算属性

当然,...是es6的语法糖,可以自动拆解多个对象或者属性和方法

computed: {
    selfComputed() {
      	// 自己的计算属性  
    },
    ...Vuex.mapState({
        laws: state => state.laws,
        total: state => state.total,
	}),
}

创建vue实例

将vue-router和vuex注册到vue中,因为vue中的对应的属性是router和store,而变量名也是这个,所以可以通过es6语法来直接赋值。

<div id="app" v-cloak>
    <router-view></router-view>
</div>
vm = new Vue({
    el: '#app',
    router,
    store,
})

关于axios请求,后台获取不到的问题

因为axios默认的请求格式是application/json,所以后台如果是java环境的话,最好通过@RequestBody来接收参数,或者在前端重新设置请求格式。

window.onload = function(){
    axios({
        url:'api/json.php',
        method: 'post',
        data: {n:1},
        headers:{
            'Content-Type':'application/x-www-form-urlencoded'
        }		
    })
}

这样还是不行的话,需要用qs插件转下参数。

具体坑太多了,建议还是用application/json格式吧。

而且application/json格式传参的功能比application/x-www-form-urlencoded强大,可以穿数组或者嵌套对象。而放在application/x-www-form-urlencoded中后台可能就获取不到参数了。

参考

https://cn.vuejs.org/v2/api/

https://router.vuejs.org/zh/

https://vuex.vuejs.org/zh/

# Vue 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×