vue+element ui项目总结点selectCascader级联选择器encodeURIdecodeURI转码解码一级mockjs用法路由懒加载三种方式

Posted lhl66

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+element ui项目总结点selectCascader级联选择器encodeURIdecodeURI转码解码一级mockjs用法路由懒加载三种方式相关的知识,希望对你有一定的参考价值。

不多说上代码:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>Element UI简单Cascader级联选择器使用</p>
    <el-cascader :options=‘options‘ v-model="selectedOptions" @change="handleChange">
    </el-cascader>
    <div class="select_box">
      <p>mockjs的数据Element UI的select组件做的二级联动效果</p>
      <el-select v-model="shopRegoin" placeholder="请选择" @change="selectShopRegoin">
        <el-option v-for="item in shopList" :key="item.type" :label="item.shop" :value="item.type">
        </el-option>
      </el-select>
      <el-select v-model="shopName" placeholder="请选择">
        <el-option v-for="item in shopNameList" :key="item.type" :label="item.shop" :value="item.type">
        </el-option>
      </el-select>
    </div>
    <!-- 去下一个页面 -->
    <div class="btn_box select_box">
      <el-button type="primary" @click="goNextPage">去下一个页面看看</el-button>
    </div>
  </div>
</template>
<script>
import { cityList } from ../netconnet/api
export default {
  name: HelloWorld,
  data() {
    return {
      msg: hello,vuejs,
      selectedOptions: [],
      options: [], //级联数据
      shopRegoin: ‘‘,
      shopName: ‘‘,
      shopList: [], //门店区域
      shopNameList: [], //门店名字
    }
  },
  created() {
    this.getList()
    this.getMockData()
    this.postMockData()
  },
  methods: {
    //es6写法
    async getList() {
      try {
        let res = await cityList(null)
        console.log(res)
        this.$eleMessage(数据成功返回, success, 500)
      } catch (e) {
        console.log(e)
      }
      //原始写法
      // cityList(null).then(res=>{  
      //   console.log(res,‘res‘)
      // }).catch(err=>{
      //   console.log(err,‘err‘)
      // })
    },
    //change事件
    selectShopRegoin(val) {
      console.log(val, val)
      let vIndex = this.shopList.findIndex(e => {
        return e.type == val
      })
      this.shopNameList = this.shopList[vIndex].shopNameList; //二级联动的数组;
      this.shopName = this.shopNameList[0].type;
      console.log(this.shopNameList, this.shopNameList)
    },
    //模拟mock get请求
    getMockData() {
      this.$http.get(/getshop/list).then(res => {
        this.shopList = res.data.data.shopList;
        console.log(res, getMock数据)
        this.$eleMessage(get的mock数据成功返回, success, 1500)
      })
    },
    //模拟mock post请求
    postMockData() {
      let data = {
        type: see,
        key: 123456789
      }
      this.$http.post(/postshop/list, data).then(res => {
        // 级联选择
        this.options = res.data.data.shopList.map(e => {
          return {
            value: e.type,
            label: e.shop,
            children: e.shopNameList.map(i => {
              return {
                value: i.type,
                label: i.shop
              }
            })
          }
        })
        console.log(res.data, postMock数据)
        this.$eleMessage(post的mock数据成功返回, success, 3000)
      })
    },
    handleChange(val) {
      console.log(val, );
    },
    //vue 跳转
    goNextPage() {
      //1.push方式可以产生历史记录
      this.$router.push({
        name: test,
        query: {
          age: 20,
          sex: ,
          goodName: encodeURI(encodeURI(中文参数转码套两层encodeURI,同理解码decodeURI也套两层))
        }
      })
      //2.用replace的方式不会产生历史记录
      // this.$router.replace({
      //     name:‘test‘,
      //     query:{
      //         age:20,
      //         sex:‘男‘,
      //         goodName:encodeURI(encodeURI(‘中文参数转码套两层encodeURI‘))
      //     }
      // })
    }
  }
}

</script>
<style scoped>
.select_box {
  margin-top: 30px;
}

</style>

2.mockjs使用方法 npm/cnpm  install mockjs -S 具体参照官网(我这里给出的是快捷使用快捷配置方法)新建一个文件夹mock新建一个mockjs文件如下:

// 使用 Mock
import Mock from ‘mockjs‘;

// 配置 Mock 路径
require.config({
    paths: {
        mock: ‘http://mockjs.com/dist/mock‘
    }
})
// mock一组数据
const shopData = {
    "code": 0,
    "data": {
        "mockObj":{
            "tip":‘hello,我教你手把手玩mockjs‘,
            "date":‘2018-11-30‘
        },
        "shopList": [{
                "type": 1,
                "shopNameList": [{
                        "type": 1,
                        "shopNameList": [],
                        "shop": "母婴店1"
                    },
                    {
                        "type": 2,
                        "shopNameList": [],
                        "shop": "母婴店2"
                    },
                    {
                        "type": 3,
                        "shopNameList": [],
                        "shop": "母婴店3"
                    },
                    {
                        "type": 4,
                        "shopNameList": [],
                        "shop": "母婴店4"
                    },
                    {
                        "type": 5,
                        "shopNameList": [],
                        "shop": "母婴店5"
                    },
                    {
                        "type": 6,
                        "shopNameList": [],
                        "shop": "母婴店6"
                    },
                    {
                        "type": 7,
                        "shopNameList": [],
                        "shop": "母婴店7"
                    },
                    {
                        "type": 8,
                        "shopNameList": [],
                        "shop": "母婴店8"
                    },
                    {
                        "type": 9,
                        "shopNameList": [],
                        "shop": "母婴店9"
                    },
                ],
                "shop": "南山分店"
            },
            {
                "type": 2,
                "shopNameList": [{
                        "type": 10,
                        "shopNameList": [],
                        "shop": "烧烤店1"
                    },
                    {
                        "type": 11,
                        "shopNameList": [],
                        "shop": "烧烤店2"
                    },
                    {
                        "type": 12,
                        "shopNameList": [],
                        "shop": "烧烤店3"
                    },
                    {
                        "type": 13,
                        "shopNameList": [],
                        "shop": "烧烤店4"
                    }
                ],
                "shop": "宝安分店"
            },
            {
                "type": 3,
                "shopNameList": [{
                        "type": 14,
                        "shopNameList": [],
                        "shop": "酒店1"
                    },
                    {
                        "type": 15,
                        "shopNameList": [],
                        "shop": "酒店2"
                    }
                ],
                "shop": "罗湖分店"
            },
            {
                "type": 4,
                "shopNameList": [{
                    "type": 16,
                    "shopNameList": [],
                    "shop": "按摩店1"
                },{
                    "type": 17,
                    "shopNameList": [],
                    "shop": "按摩店2"
                }],
                "shop": "福田分店"
            }
        ]
    },
    "msg": "请求成功"
}

// Mock.mock( url, post/get , 返回的数据);此处可以模拟post和get 请求
Mock.mock(‘/postshop/list‘, ‘post‘, shopData);

Mock.mock(‘/getshop/list‘, ‘get‘, shopData);

3.mainjs如下:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import ElementUI from ‘element-ui‘
import ‘element-ui/lib/theme-chalk/index.css‘
import axios from ‘axios‘
Vue.prototype.$http = axios;
require(‘./mock/mock.js‘)
Vue.use(ElementUI);

//element Message全局配置组件调用 this.$eleMessage(‘内容‘,‘消息类型‘,‘持续时间‘)
Vue.prototype.$eleMessage = function (msg,tip,time) {
  this.$message({
    message: msg,
    type: tip,
    duration:time
  })
}

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  //store,
  render: h => h(App)
})

4.接受路由编码后的参数并解码:

<template>
  <div class="test_box">
      <p>hell,你好</p>
      <p>encodeURI编码后转码的路由参数内容----<span style="color: red">({{routerParmas}})</span></p>
  </div>
</template>
<script>
export default {
  data() {
    return {
        routerParmas:decodeURI(decodeURI(this.$route.query.goodName)),
    }
  },
  created(){

  },
  methods:{
      
  }
}

</script>

5.路由懒加载三种方式:

import Vue from ‘vue‘
import Router from ‘vue-router‘
//方式一:最简单直接的使用组件
//import HelloWorld from ‘@/components/HelloWorld‘
//import Test from ‘@/components/test‘

//方式二:webpack自带的模块按需加载 r就是resolve
//const HelloWorld = r => require.ensure([], () => r(require(‘@/components/HelloWorld‘)), ‘HelloWorld‘);

Vue.use(Router)

const router =  new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘HelloWorld‘,
      component:  resolve => require([‘@/components/HelloWorld‘], resolve)//方式三:懒加载方式
    },{
      path: ‘/test‘,
      name: ‘test‘,
      component:  resolve => require([‘@/components/test‘], resolve)
    }
  ]
})

export default router;

 

以上是关于vue+element ui项目总结点selectCascader级联选择器encodeURIdecodeURI转码解码一级mockjs用法路由懒加载三种方式的主要内容,如果未能解决你的问题,请参考以下文章

前端Vue+Element UI案例:通用后台管理系统-项目总结

vue2 + element-ui + axios 开源项目推荐

webpack+vue+ element ui +vueX+axios 开发项目注意点及知识点

Vue + Element-ui实现后台管理系统---封装一个ECharts组件的一点思路

Vue + Element-ui实现后台管理系统---封装一个ECharts组件的一点思路

vue element-ui select框选中回显