前端获取后端数据(单表)

首先要在根目录下创建vue.config.js文件来进行链接后端

编写完需要重启终端

module.exports={
    devServer:{
        proxy:'http://127.0.0.1:8081/',
        
        #'http://127.0.0.1:8081/'根据自己的后端浏览器来编辑的
    }
}

1.App里面编写标题

    <router-link to="/">国家页面</router-link>|
    <router-link to="/Areas">地区页面</router-link>

在ser文件夹下的router文件夹里的index.js里面配置

import Country from '../views/country/Country.vue'
import Areas from '../views/country/Areas.vue'
import Indexx from '../views/country/Indexx.vue'

const routes = [
  {
    path: '/',
    name: 'Country',
    component: Country
  },
  {
    path: '/areas',
    name: 'Areas',
    component:Areas
  },
  {
    path: '/indexx',
    name: 'Indexx',
    component:Indexx
  },

在src文件夹内创建utils文件夹在utils问价夹内创建request来进行封装(文件夹名字可以随便起，这是这样更严谨些)

import Axios from 'axios'
export function get(url,params){
    return Axios.get(url,params);
}

export function post(url,params){
    return Axios.post(url,params);
}

export function put(url,params){
    return Axios.put(url,params);
}

export function del(url,params){
    return Axios.delete(url,params);
}

views里面创建vue文件来编写代码进行操作

(获取数据和删除数据)

<template>
  <div>
      <table<