前台与后端交互及其他配置

08. 前台与后端交互及其他配置

文章目录

  • 08. 前台与后端交互及其他配置
    • 一、axios前后端交互
      • 1.安装 axios 模块
      • 2.为项目配置全局 axios
      • 3.局部配置使用
    • 二、cookies操作
      • 1.安装Vue-cookies
      • 2.配置:main.js
    • 三、使用element-ui页面组件框架
      • 1.安装element-ui
      • 2.配置:main.js
      • 3.使用
    • 四. 拓展:vue中使用jquery、bootstrap页面组件框架 (一般不用)
      • 1.安装jquery、bootstrap
      • 2.配置jquery:vue.config.js
      • 3. 配置bootstrap:main.js

一、axios前后端交互

1.安装 axios 模块

cnpm install -S axios  # -S 选项会将该模块加到package.json中去
cnpm install --save axios

2.为项目配置全局 axios

  • 配置:main.js
import axios from 'axios'  
// 导入安装的模块不用加相对路径

Vue.prototype.$axios = axios
// 向Vue的原型中放一个属性(key)为$axios,值为:axios
// 注意 $axios 是你自己取的名字还可以叫xxxx,尽量不要重复
  • 使用
// 加入到Vue原型中以后之需要通过 this 就可以拿到axios发送请求了
methods:{
     
    handle(){
     
      // 发送请求获取数据
      this.$axios.get('/ajax/moreClassicList?').then(res =>{
     
        console.log(res.data) 
      })
    }
  }

3.局部配置使用

  • 在某个组件中直接导入 axios
// 名字自己取$axios或者xxxx,不要重名
import $axios from 'axios'
  • 然后直接使用你定义的名字来发送请求
methods:{
     
    handle(){
     
      // 发送请求获取数据
      $axios.get('/ajax/moreClassicList?',{
     }).then(res =>{
     
        console.log(res.data) 
      })
    }
  }

二、cookies操作

1.安装Vue-cookies

cnpm install vue-cookies

2.配置:main.js

import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;

三、使用element-ui页面组件框架

1.安装element-ui

cnpm install element-ui

2.配置:main.js

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

3.使用

  • 在官方文档找到好看的组件,直接把html,css,js拷入自己项目即可
  • 官网地址:Element - 网站快速成型工具

四. 拓展:vue中使用jquery、bootstrap页面组件框架 (一般不用)

1.安装jquery、bootstrap

cnpm install jquery
cnpm install bootstrap@3

2.配置jquery:vue.config.js

const webpack = require("webpack");

module.exports = {
     
    configureWebpack: {
     
        plugins: [
            new webpack.ProvidePlugin({
     
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                "window.$": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};

3. 配置bootstrap:main.js

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

你可能感兴趣的:(路飞项目)