vue学习-增删改查

cd /projectFloder
yarn serve

---

​​​​​

文章目录

前言

一、axios自定义

二、vue使用element-ui

1.引入库

2.main.js配置

三、增删改查

总结

---

---

前言

1、axios配置、封装。

2、加载使用element-ui

3、增删改查示例

一、axios自定义

代码如下（vue.config.js）： 

const proxyObj = {}
proxyObj['/'] = {
  target: 'http://localhost:1011',
  changeOrigin: true,
  pathRewrite: {
    '^/': ''
  }
}
//解决AMap报错：AMap undefined报错
module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080,
    proxy: proxyObj
  },
}

代码如下（main.js）： 

import VueAxios from 'vue-axios'
import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/device'
Vue.use(VueAxios, axios);

 封装方法：新建 utils文件夹，里面新建 api.js和http.js文件

代码如下（api.js）： 

---

//引用上面的http.js文件
import { get, post } from "@/utils/http.js";

// Api for deveList
export const getdeviceListTable = formData => get("/list", formData);
export const selectDeviceLikeId = ids => post(`/selectDeviceLikeId/${ids}`);
export const seleDeviceById = ids => post(`/selectDeviceById/${ids}`);
export const deleDeviceById = formData => get(`/deleById/${formData}`);
export const submitDevice = formData => post("/subDevice", formData);


//Api for taskList

代码如下（http.js）： 

---

//http.js文件
import axios from "axios";
axios.defaults.timeout = 5000; //超时时间设置
axios.defaults.withCredentials = true; //true允许跨域
//Content-Type 响应头
axios.defaults.headers.post["Content-Type"] =
    "application/x-www-form-urlencoded;charset=UTF-8";
let token = localStorage.getItem('authorization');
axios.defaults.headers.post["authorization"] = token;
// if (process.env.NODE_ENV === "production") {
//     /*第二层if，根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/
//     if (process.env.VUE_APP_FLAG === "pro") {
//         //production 生产环境
//         axios.defaults.baseURL = "http://localhost:1011";
//     } else {
//         //test 测试环境
//         axios.defaults.baseURL = "";
//     }
// } else {
//     //dev 开发环境
//     axios.defaults.baseURL = "http://localhost:1011";
// }
//axios.defaults.baseURL = "http://localhost:1011";


/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        axios
            .get(url, {
                params: params
            })
            .then(response => {
                resolve(response.data);
            })
            .catch(err => {
                reject(err);
            });
    });
}

/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.post(url, data).then(
            response => {
                resolve(response.data);
            },
            err => {
                reject(err);
            }
        );
    });
}

/**
 * 封装delete请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function deletes(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.delete(url, data).then(
            response => {
                resolve(response.data);
            },
            err => {
                reject(err);
            }
        );
    });
}

/**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.put(url, data).then(
            response => {
                resolve(response.data);
            },
            err => {
                reject(err);
            }
        );
    });
}

二、vue使用element-ui

1.引入库

代码如下（示例）：

yarn add element-ui

2.main.js配置

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

---

三、增删改查

代码如下（示例）：

---

总结

vue页面有三部分，数据、展示、交互，我们可以用UI来做展示，数据在开始的时候进行个定义，定义之后交互得到数据进行赋值，vue特性可以随数据的改变改变模型。