Vue 必备小知识-- axios请求数据实现增删改查

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

今天来学习 Vue 项目小实战之前后端交互, 请求数据实现增删改查, 是实际工作中开发项目的最基本的功能, 这里实现简单的交互效果, 学习其中的逻辑, 更复杂的交互可在后续中逐渐学习.

增删改查 效果展示:

这里实现最基础的功能逻辑

效果实现 代码:

跨域代理配置 vue.config.js

// vue.config.js
const path = require('path');
const CDN = {
  CDN_PATH_1: 'https://s3.abcd.com/user/static/',
  CDN_PATH_2: 'https://s3a.abcd.com/user/static/',
  CDN_PATH_3: 'https://s3b.abcd.com/user/static/',
};
// 开发环境代理配置
const proxyConfig = {
  // target: 'http://10.13.213.103:2113', // 张三
  // target: "http://10.11.13.213:2113", // 李四
  // target: 'http://10.213.5.95:2113', // 王五
  // target: "http://10.9.213.195:9113", // 赵四
  target: "http://10.13.21.13:9093", // 某某某
  // target: 'https://test-abab.abcd.net', //新系统test测试环境
  // target: 'https://boe-abab.abcd.net', //新系统boe测试环境
  // target: 'https://abab.abcd.net', //新系统生产环境
};
const basePath = '/ab/',
  systemName = 'ab_cd';
process.env.VUE_APP_BASEPATH = basePath;
process.env.VUE_APP_SYSTEM = systemName;

function resolve(dir) {
  return path.join(__dirname, '.', dir);
}

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production' ? CDN.CDN_PATH_1 : basePath,
  configureWebpack: {
    resolve: {
      extensions: ['.js', '.vue', '.json'], // 识别文件类型 优先级别
      alias: { // 文件夹别名 方便
        vue$: 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        service: resolve('src/service'),
        config: resolve('src/config'),
        const: resolve('src/const'),
        utils: resolve('src/utils'),
        api: resolve('src/api'),
        mixins: resolve('src/mixins'),
        plugins: resolve('src/plugins'),
        ROUTER: resolve('src/ROUTER'),
        store: resolve('src/store'),
        components: resolve('src/components'),
        pages: resolve('src/pages'),
      },
    },
    externals: {
      slardar: 'Slardar',
    },
    devServer: {
      proxy: {
        // proxy api request to dev box
        '/api': {
          changeOrigin: true,
          ...proxyConfig,
          pathRewrite: {
            '^/api': '/'
          }
        },
        '/usercenter/api': {
          target: '目标网址,如: https://www.baidu.com',
          changeOrigin: true,
          headers: {
            origin: 'www.baidu.com',
          },
        },
      },
    },
  },

页面结构 请求数据

<template>
  <div class="hello">
    <input type="text" v-model="dogname" @keyup.enter="add" />
    <button @click="find">查找</button>
    <ul>
      <li v-for="dog in dogs" :key="dog.id">
        {{ dog.name }} {{ dog.age }}
        <button @click="del(dog.id)">删除</button>
        <button @click="modify(dog.id)">修改</button>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'testApiWithCores',
  data() {
    return {
      dogs: [],
      dogname: '',
      dogNameEdit: '',
      dogAgeEdit: '',
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      axios.get('http://localhost:3000/dogs').then((res) => {
        this.dogs = res.data
      })
    },
    find() {
      axios
        .get('http://localhost:3000/dogs', {
          params: {
            name_like: this.dogname,
          },
        })
        .then((res) => {
          this.dogs = res.data
        })
    },
    del(id) {
      axios.delete('/api/dogs/' + id).then(() => {
        this.getData()
      })
    },
    modify(id) {
      this.dogNameEdit = item.name
      this.dogAgeEdit = item.age
      this.curId = id
    },
    add() {
      axios
        .post(
          'http://localhost:3000/dogs',
          {
            name: this.dogname,
            age: 1,
          },
          {
            headers: {
              'Content-Type': 'application/json',
            },
          }
        )
        .then(() => {
          this.getData()
        })
      this.dogname = ''
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>