1.三大内容存放的内容：

api：与后端接口对接
router：路由，点击导航栏，进行内容跳转
views：显示的内容

2.api文件夹

书写增删改查：

import request from '@/utils/request'
// @ 符号在vue.config.js中配置，表示src 路径的别名

export default {

  list() {  //查找所有数据
    return request({
      url: '/admin/core/integralGrade/list',
      method: 'get',
    })
  },

  removeById(id) {  //根据id删除数据
    return request({
      url: `/admin/core/integralGrade/delete/${id}`,
      method: 'delete',
    })
  },
  save(integralGrade) {   //保存数据
    return request({
      url: '/admin/core/integralGrade/save',
      method: 'post',
      data: integralGrade,
    })
  },

  getById(id) {   //根据id得到对象
    return request({
      url: `/admin/core/integralGrade/get/${id}`,
      method: 'get',
    })
  },
  update(integralGrade) {  //更新数据
    return request({
      url: '/admin/core/integralGrade/updateById',
      method: 'post',
      data: integralGrade,
    })
  },
}

3.router 路由

在含有首页标题的路由下，添加下述兄弟路由：

 {
    path: '/core/integral-grade',
    // 父路由，左导航和上导航不变，只有内容栏发生改变
    component: Layout,
    redirect: '/core/integral-grade/list',
    // 路由的名字
    name: 'coreIntegralGrade',
    meta: { title: '积分等级管理', icon: 'el-icon-s-help' },
    // alwaysShow默认为false，当前仅当子节点只有一个的时候，不显示父节点。
    // 为true时：任何时候都显示父节点和子节点
    alwaysShow: true,
    children: [
      {
        //路由
        path: 'list',
        //路由的节点的名字，每个路由节点的名字不能一样
        name: 'coreIntegralGradeList',
        //组件节点
        component: () => import('@/views/core/integral-grade/list'),
        meta: { title: '积分等级列表' },
      },
      {
        path: 'create',
        name: ' coreIntegralGradeCreate',
        component: () => import('@/views/core/integral-grade/form'),
        meta: { title: '新增积分等级' },
      },
      {
        // :id占位符，表示这部分url会是任何一个id
        path: 'edit/:id',
        name: 'coreIntegralGradeEdit',
        component: () => import('@/views/core/integral-grade/form'),
        hidden: true,
        meta: { title: '编辑积分等级' },
      },
    ],
  },

4.views 视图

vue中分为三部分：template、script、style

<template>
  <div class="app-container">
    <!-- 输入表单 -->
    <el-form label-width="120px">
      <el-form-item label="借款额度">
        <el-input-number v-model="integralGrade.borrowAmount" :min="0" />
      </el-form-item>
      <el-form-item label="积分区间开始">
        <el-input-number v-model="integralGrade.integralStart" :min="0" />
      </el-form-item>
      <el-form-item label="积分区间结束">
        <el-input-number v-model="integralGrade.integralEnd" :min="0" />
      </el-form-item>
      <el-form-item>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="saveOrUpdate()"
        >
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import integralGradeApi from '@/api/core/integral-grade'
export default {
  data() {
    return {
      integralGrade: {}, //保存数据
      saveBtnDisabled: false, //false :按钮可用，true：按钮不可用
    }
  },
  created() {
    if (this.$route.params.id) {
      this.fetchDataById(this.$route.params.id)
    }
  },
  methods: {
    fetchDataById(id) {
      integralGradeApi.getById(id).then((response) => {
        this.integralGrade = response.data.integralGrade
      })
    },
    saveOrUpdate() {
      this.saveBtnDisabled = true

      if (this.$route.params.id) {
        this.updateData()
      } else {
        this.saveData()
      }

      this.$router.push('/core/integral-grade/list')
    },
    saveData() {
      integralGradeApi.save(this.integralGrade).then((response) => {
        this.$message.success(response.message)
      })
      // .catch((error) => {
      //   this.$message.info(error.message)
      // })
    },
    updateData() {
      integralGradeApi.update(this.integralGrade).then((response) => {
        this.$message({
          type: 'success',
          message: response.message,
        })
      })
    },
  },
}
</script>

<style scope></style>