当前位置:   article > 正文

Python笔记_67_axios_路由系统router_ElementUI框架_python中axios_register

python中axios_register


老师博客地址

组件使用axios发送ajax请求

安装和配置axios

默认情况下,我们的项目中并没有对axios包的支持,所以我们需要下载安装。

在项目根目录中使用 npm安装包
npm install axios

接着在main.js文件中,导入axios并把axios对象 挂载到vue属性中作为一个子对象,这样我们才能在组件中使用。

// 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 axios from 'axios'  // 从node_modules目录中导包

Vue.config.productionTip = false;

Vue.prototype.$axios = axios;  // 把对象挂载到Vue中

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

vue3.x新版语法:

import Vue from 'vue'
import App from './App'
import router from './router/index'

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router,
}).$mount('#app');
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
在组件中使用axios获取数据

新建子组件GetWeather.vue文件

<template>
    <div>
      <input type="text" v-model="city" placeholder="请输入要查询的城市">
      <button @click="get_weather">获取天气</button>
<!--      <p>{{weather_info}}</p>-->
      <p v-if="weather_info.status!=1000">请输入正确的城市</p>
      <table v-if="weather_info.status==1000">
        <tr><td colspan="6">{{weather_info.data.city}} 温度:{{weather_info.data.wendu}}</td></tr>
        <tr>
          <th>日期</th>
          <th>最高温</th>
          <th>最低温</th>
          <th>风向</th>
          <th>风级</th>
          <th>天气类型</th>
        </tr>
        <tr>
          <td>{{weather_info.data.yesterday.date}}</td>
          <td>{{weather_info.data.yesterday.high}}</td>
          <td>{{weather_info.data.yesterday.low}}</td>
          <td>{{weather_info.data.yesterday.fx}}</td>
          <td>{{weather_info.data.yesterday.fl}}</td>
          <td>{{weather_info.data.yesterday.type}}</td>
        </tr>
        <tr v-for="info in weather_info.data.forecast">
          <td>{{info.date}}</td>
          <td>{{info.high}}</td>
          <td>{{info.low}}</td>
          <td>{{info.fengxiang}}</td>
          <td>{{info.fengli}}</td>
          <td>{{info.type}}</td>
        </tr>
        <tr><td colspan="6">{{weather_info.data.ganmao}}</td></tr>

      </table>
    </div>
</template>

<script>
    export default {
        name: "GetWeather",
      data(){
          return {
            city: "",
            weather_info: []
          }
      },
      methods: {
          get_weather(){
            this.$axios.get('http://wthrcdn.etouch.cn/weather_mini',{
              params:{
                'city': this.city
              }
            }).then(response=>{
              this.weather_info = response.data;
              // console.log(typeof(response.data));
            }).catch(error=>{
              console.log(error.response);
            })
          }
      }
    }
</script>

<style scoped>

</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68

效果:
在这里插入图片描述

使用路由系统

下载路由组件

npm i vue-router -S
在这里插入图片描述

配置路由

在src目录下创建router路由目录,在router目录下创建index.js路由文件
在这里插入图片描述router/index.js路由文件中,编写初始化路由对象的代码

// 引入路由类和Vue类
import Vue from 'vue'
import Router from 'vue-router'

// 注册路由类
Vue.use(Router);

// 初始化路由对象
export default new Router({
  // 设置路由模式为‘history’,去掉默认的#
  model: "history",
  routes: [
    // 路由列表
    { // 一个字典,代表一条url
      // name: "路由别名",
      // path: "路由地址",
      // component: 组件类名,
    }

  ]
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

打开main.js文件,把router路由规则对象注册到vue中。
在这里插入图片描述代码:

// 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/index'

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,  // 注册路由规则对象
  components: { App },
  template: '<App/>'
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
在视图中显示路由对应的内容

App.vue组件中,添加显示路由对应的内容。
  在这里插入图片描述代码:

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>

</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

注意:如果在vue创建项目的时候,设置安装vue-router,则项目会自动帮我们生成上面的router目录和index.js里面的代码,以及自动到main.js里面注册路由对象。

使用ElementUI

对于前端页面布局,我们可以使用一些开源的UI框架来配合开发,Vue开发前端项目中,比较常用的就是ElementUI了。
我们可以在Vue项目中引入来使用,这个框架的使用类似于我们前面学习的bootstrap框架。

中文官网:http://element-cn.eleme.io/#/zh-CN
文档快速入门:http://element-cn.eleme.io/#/zh-CN/component/quickstart

快速安装ElementUI

在项目的根目录下执行下面的命令。

npm i element-ui -S

上面的代码等同于:npm install element-ui --save
  
执行效果: 在这里插入图片描述

配置ElementUI到项目中

main.js中导入ElementUI,并调用。代码:

// elementUI 导入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 调用插件
Vue.use(ElementUI);
  • 1
  • 2
  • 3
  • 4
  • 5

效果:
在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/66564
推荐阅读
相关标签
  

闽ICP备14008679号