【Vue】Element-UI、axios、mock

最新推荐文章于 2023-04-21 09:57:17 发布

繁星伴晚安

最新推荐文章于 2023-04-21 09:57:17 发布

阅读量190

点赞数

分类专栏： # Java实训文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_48180029/article/details/118519670

版权

Java实训专栏收录该内容

16 篇文章 0 订阅

订阅专栏

v-model绑定变量时，对应的数据类型为字符串。
千万要注意：遇到数字类型，需要类型转换
在这里插入图片描述

Element-UI详解

以下都是每创建一个项目，需要就要下载。路由也是。
在这里插入图片描述

npm i element-ui -S
-S 是--save-dev的简写

在这里插入图片描述

cnpm install sass-loader node-sass --save-dev

element-ui官网

在这里插入图片描述

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

在这里插入图片描述

axios

Vue中axios使用详解

1、安装axios：

npm install axios

在这里插入图片描述

import axios from 'axios'
// 全局挂载axios
Vue.prototype.$axios = axios

new Vue({
  el: '#app',
  axios,
  router,
  components: { App },
  template: '<App/>'
})

在这里插入图片描述

  methods: {
    // 获取所有书的数据
    findAll () {
      var that = this
      this.$axios.get('http://localhost:8888/book/findAll')
        .then(res => {
          console.log(res)
          that.tableData = res.data.data
        }).catch(err => {
          console.log(err)
        })
    }
  }

在main.js文件中做测试

axios(config)请求方式

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import axios from "axios";
Vue.config.productionTip = false


Vue.use(ElementUI);

new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

/*axios({
  url:'http://123.207.32.32:8000/home/multidata'//传进url,默认是get请求

}).then(res =>{
  console.log(res);//控制台打印返回的数据
})

//获取数据后，执行then方法

axios({
  url:'http://123.207.32.32:8000/home/data?type=sell&page=1'//传进url,默认是get请求

}).then(res =>{
  console.log(res);//控制台打印返回的数据
})*/


//axios发送并发请求
axios.all([axios({
  url:'http://123.207.32.32:8000/home/data?type=sell&page=1'

}),axios({
  url:'http://123.207.32.32:8000/home/multidata',

})])
    .then(axios.spread((result1,result2) =>{
  console.log(result1);//控制台打印返回的数据
  console.log(result2);
}))

mock

vue关于mock的简单使用

在这里插入图片描述

const Mock = require('mockjs')
let  id = Mock.mock('@id')
console.log(id)//返回一个简单的字符串


let obj = Mock.mock({
    id:'@id',
    username:'@cname()',
    date:'@date()',
    avatar:"image('200*200','red','#fff',''avatar)",
    description:'@paragraph()',
    ip:"@ip()",
    email:"@email()"
})
console.log(obj)//返回一个对象

test.app

<template>
    <div>
        <button @click="login">login</button>
        <button @click="list">list</button>
    </div>
</template>

<script>
    // import mock from '../mock/mock'
    require('../mock/mock')
    import axios from 'axios'
    export default {
        name: "test",
        methods:{
            login() {
                axios.get("/login").then(result => {
                    if (result.data) {
                        console.log(result.data)
                        alert(result.data.name)
                    }
                })
            },
            list(){
                axios.get('/list').then(result =>{
                    if(result.data){
                        console.log(result.data)
                        alert(result.data.name + ' '+result.data.age)
                    }

                })
            }
        }
    }
</script>

<style scoped>

</style>