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

Posted 2021-01-23 lhl66

不多说上代码：

<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;