张坤的个人博客

  • 首页
  • 分类
  • 标签
  • 日志

  • 搜索
Jenkins RabbitMQ Zookeeper IDEA Logstash Kibana ELK NIO Netty Spring Cloud Golang DataX Elasticsearch React Native Mysql H2 Socket Spring Boot Kafka Mybatis Sqlmap Vue Postgresql Docker Vert.x Flutter Flink Redis

非node环境vue全家桶实战

发表于 2020-05-29 | 分类于 Vue | 0 | 阅读次数 38

项目使用了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/

# Jenkins # RabbitMQ # Zookeeper # IDEA # Logstash # Kibana # ELK # NIO # Netty # Spring Cloud # Golang # DataX # Elasticsearch # React Native # Mysql # H2 # Socket # Spring Boot # Kafka # Mybatis # Sqlmap # Vue # Postgresql # Docker # Vert.x # Flutter # Flink # Redis
Postgresql命令行工具
Sqlmap学习笔记(四)
  • 文章目录
  • 站点概览
会Coding的猴子

会Coding的猴子

57 日志
19 分类
28 标签
RSS
Github
Creative Commons
© 2021 会Coding的猴子
由 Halo 强力驱动
|
主题 - NexT.Gemini v5.1.4

湘ICP备18011740号