vue3相关基础功能操作----增删改查（xsh）

最新推荐文章于 2024-07-25 13:46:42 发布

柴硝行

最新推荐文章于 2024-07-25 13:46:42 发布

阅读量390

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_76359448/article/details/139843246

版权

src\App.vue

<template>
  <!-- router-view组件是Vue Router的一个核心组件。它的作用是根据当前的路由渲染对应的组件 -->
  <router-view></router-view>
</template>
<script>
// 导出一个空的Vue组件选项对象。因为这个文件只包含一个router-view组件，所以没有需要定义的数据、方法或生命周期钩子
export default {
}
</script>

src\components\BookLogin.vue

<template>
    <div>
        <div style="display: flex; justify-content: center;">
            <h1>登录页面</h1>
        </div>
        <!-- 表单容器 -->
        <div class="form-container">
            <!-- 使用Element UI的表单组件 -->
            <el-form class="mt-4" style="width:30%;">
                <!-- 表单项，包含一个标签和一个输入框，输入框的值绑定到username -->
                <el-form-item label="用户名:">
                    <el-input v-model="username"></el-input>
                </el-form-item>
                <!-- 表单项，包含一个标签和一个密码输入框，输入框的值绑定到password -->
                <el-form-item label="密 码：">
                    <el-input type="password" v-model="password"></el-input>
                </el-form-item>
                <!-- 表单项，包含一个登录按钮 -->
                <el-form-item>
                    <el-button type="primary" @click.prevent="login" style="width:100%">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 存储用户名的变量
            username: '',
            // 存储密码的变量
            password: '',
        }
    },
    methods: {
        login() {
            // 如果用户名和密码都正确
            if (this.username === 'admin' && this.password === '123456') {
                // 弹出登录成功的提示
                alert('登录成功')
                // 跳转到学生列表页面
                this.$router.push("/list")
            } else {
                // 如果用户名或密码错误，弹出提示
                alert('用户名或密码错误')
                // 并清空输入框
                this.username = '';
                this.password = '';
            }
        }
    }
}
</script>

<style scoped>
.form-container {
    display: flex;
    justify-content: center;
}
</style>

src\components\BookList.vue

<template>
  <div>
    <div style="display: flex; justify-content: center">
      <h1>图书列表</h1>
    </div>

    <el-button style="background-color: #e8cff2; width: 100%">
      <router-link to="add">添加图书</router-link>
    </el-button>

    <el-table
      :data="list"
      :default-sort="{ porp: 'id', orde: 'descending' }"
      stripe
      border
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" sortable></el-table-column>

      <el-table-column prop="bookAuth" label="图书作者"></el-table-column>
      <el-table-column prop="bookType" label="图书类型"></el-table-column>
      <el-table-column prop="bookPrice" label="图书价格"></el-table-column>

      <el-table-column prop="bookIntro" label="图书简介"></el-table-column>
      <el-table-column prop="bookName" label="图书名称"></el-table-column>
      <el-table-column prop="bookYear" label="出版年份"></el-table-column>

      <el-table-column label="操作">
        <template v-slot="scope">
          <!-- 修改按钮，点击后会跳转到修改图书信息的页面 -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="edit(scope.row.id)"
          >修改</el-button>

          <!-- 删除按钮，点击后会删除该图书的信息 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="del(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      // 数组，用于存储从服务器获取的图书信息
      list: [],
    };
  },
  created() {
    // 调用 getList 方法获取图书信息
    this.getList();
  },
  methods: {
    // getList 方法，用于从服务器获取图书信息
    getList() {
      // 使用 axios 发送 GET 请求到服务器
      this.axios.get("http://10.223.21.248:8085/book/getlist").then((resp) => {
        // 请求成功后，将服务器返回的数据赋值给 list
        this.list = resp.data.data;
      });
    },

    // edit 方法，用于跳转到修改图书信息的页面
    edit(id) {
      // 使用路由跳转到修改图书信息的页面，同时将图书的 id 作为查询参数传递过去
      this.$router.push("edit?id=" + id);
    },

    // del 方法，用于删除图书信息
    del(id) {
      // 确认是否要删除该条数据
      if (confirm("确定要删除该条数据吗？")) {
        // 如果用户点击了确定，那么发送 DELETE 请求到服务器，删除该图书的信息
        this.axios
          .delete("http://10.223.21.248:8085/book/delbook/", {
            params: { id: id },
          })
          .then((resp) => {
            // 如果服务器返回的数据 code 为 1，那么说明删除成功
            if (resp.data.code === 1) {
              alert("删除成功");
              // 重新从服务器获取图书信息，更新列表
              this.getList();
            } else {
              // 如果服务器返回的数据 code 不为 1，那么说明删除失败
              alert("删除失败");
            }
          });
      }
    },
  },
};
</script>

src\components\BookEdit.vue

   <template>
  <div class="container">
    <h1>修改页面</h1>

    <el-form :model="book" class="form">
      <el-form-item label="图书ID">
        <el-input v-model="book.id" readonly></el-input>
      </el-form-item>

      <el-form-item label="图书作者">
        <el-input v-model="book.bookAuth"></el-input>
      </el-form-item>

      <el-form-item label="图书类型">
        <el-input v-model="book.bookType"></el-input>
      </el-form-item>

      <el-form-item label="图书价格">
        <el-input v-model="book.bookPrice"></el-input>
      </el-form-item>

      <el-form-item label="图书简介">
        <el-input v-model="book.bookIntro"></el-input>
      </el-form-item>

      <el-form-item label="图书名称">
        <el-input v-model="book.bookName"></el-input>
      </el-form-item>

      <el-form-item label="出版年份">
        <el-date-picker v-model="book.bookYear"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fanhui()">返回</el-button>
        <el-button type="success" @click="editSave()">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      // id，用于存储图书的 ID
      id: 0,

      // book 对象，用于存储图书的信息
      book: {},
    };
  },

  created() {
    // 组件创建后，会自动调用 load 方法加载图书的信息
    this.load();
  },

  methods: {
    // load 方法，用于加载图书的信息
    load() {
      // 从路由的查询参数中获取图书的 ID，并保存到 id 中
      this.id = this.$route.query.id;

      // 发送 GET 请求到服务器，请求的 URL 是 "http://10.223.21.248:8085/book/querybook"，请求的参数是 id
      this.axios
        .get("http://10.223.21.248:8085/book/querybook", {
          params: { id:this.id },
        })
        .then((resp) => {
          // 请求成功后，如果服务器返回的数据的 code 是 1，那么将服务器返回的数据赋值给 book
          // 否则，显示一个提示，并显示服务器返回的错误信息
          if (resp.data.code === 1) {
            this.book = resp.data.data;
          } else {
            alert(resp.data.msg);
          }
        })
        .catch((error) => {
          // 请求失败后，显示一个提示，并显示错误信息
          console.error(error);
          alert("请求失败");
        });
    },

    // fanhui 方法，用于返回图书列表页面
    fanhui() {
      this.$router.push("/list");
    },

    // editSave 方法，用于保存修改的图书信息
    editSave() {
      // 发送 PUT 请求到服务器，请求的 URL 是 "http://10.223.21.248:8085/book/updbook"，请求的数据是 book 对象
      this.axios
        .put("http://10.223.21.248:8085/book/updbook", this.book)
        .then((resp) => {
          // 请求成功后，如果服务器返回的数据的 code 是 1，那么显示一个 "修改成功" 的提示，并跳转到图书列表页面
          // 否则，显示一个 "修改失败" 的提示，并显示服务器返回的错误信息
          if (resp.data.code === 1) {
            alert("修改成功");
            this.$router.push("/list");
          } else {
            alert("修改失败：" + resp.data.msg);
          }
        })
        .catch((error) => {
          // 请求失败后，显示一个 "修改失败" 的提示，并显示错误信息
          console.error(error);
          alert("修改失败");
        });
    },
  },
};
</script>
  
<style scoped>
/* CSS 样式 */
/* .container 类的样式，用于设置容器的最大宽度、外边距、内边距和背景颜色 */
/* .form 类的样式，用于设置表单的上边距 */
/* .el-button 类的样式，用于设置按钮的右边距 */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f4f4f4;
}
.form {
  margin-top: 20px;
}
.el-button {
  margin-right: 10px;
}
</style>

src\components\BookAdd.vue

<template>
  <div class="container">
    <!-- 页面标题 -->
    <h1>图书添加页面</h1>

    <!-- 表单，用于输入图书的信息 -->
    <!-- 表单的数据绑定到 book 对象 -->
    <el-form :model="book" class="form">
      <!-- 表单项，包含一个标签和一个输入框 -->
      <!-- 输入框的数据绑定到 book.bookName -->
      <el-form-item label="图书作者">
        <el-input v-model="book.bookAuth"></el-input>
      </el-form-item>

      <el-form-item label="图书类型">
        <el-input v-model="book.bookType"></el-input>
      </el-form-item>

      <el-form-item label="图书价格">
        <el-input v-model="book.bookPrice"></el-input>
      </el-form-item>

      <el-form-item label="图书简介">
        <el-input v-model="book.bookIntro"></el-input>
      </el-form-item>

      <el-form-item label="图书名称">
        <el-input v-model="book.bookName"></el-input>
      </el-form-item>

      <el-form-item label="出版年份">
        <el-date-picker v-model="book.bookYear"></el-date-picker>
      </el-form-item>
      <!-- 表单项，包含两个按钮 -->
      <!-- 第一个按钮，点击后会调用 fanhui 方法返回图书列表页面 -->
      <!-- 第二个按钮，点击后会调用 addBook 方法添加图书 -->
      <el-form-item>
        <el-button type="primary" @click="fanhui()">返回</el-button>
        <el-button type="success" @click="addBook()">添加</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      // book 对象，用于存储图书的信息
      book: {
        bookName: "",
        bookAuth: "",
        bookType: "",
        bookYear: "",
        bookIntro: "",
        bookPrice: "",
      },
    };
  },

  methods: {
    // addBook 方法，用于添加图书
    addBook() {
      // 发送 POST 请求到服务器，请求的 URL 是 "http://10.223.21.248:8085/book/addbook"，请求的数据是 book 对象
      this.axios
        .post("http://10.223.21.248:8085/book/addbook", this.book)
        .then((resp) => {
          // 请求成功后，如果服务器返回的数据的 code 是 1，那么显示一个 "添加成功" 的提示，并跳转到图书列表页面
          // 否则，显示一个 "添加失败" 的提示，并显示服务器返回的错误信息
          if (resp.data.code === 1) {
            alert("添加成功");
            this.$router.push("/list");
          } else {
            alert("添加失败: " + resp.data.msg);
          }
        })
        .catch((error) => {
          // 请求失败后，显示一个 "添加失败" 的提示，并显示错误信息
          console.error(error);
          alert("添加失败");
        });
    },

    // fanhui 方法，用于返回图书列表页面
    fanhui() {
      this.$router.push("/list");
    },
  },
};
</script>
  
<style scoped>
/* CSS 样式 */
/* .container 类的样式，用于设置容器的最大宽度、外边距、内边距和背景颜色 */
/* .form 类的样式，用于设置表单的上边距 */
/* .el-button 类的样式，用于设置按钮的右边距 */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f4f4f4;
}
.form {
  margin-top: 20px;
}
.el-button {
  margin-right: 10px;
}
</style>

src\router.js

// 导入组件
import BookList from "./components/BookList.vue";
import BookAdd from "./components/BookAdd.vue";
import BookEdit from "./components/BookEdit.vue";
import BookLogin from "./components/BookLogin.vue";

// 定义路由对象
const routObj = [
    {
        // 当URL的路径部分为'/'时，渲染BookLogin组件
        path:'/',
        component:BookLogin
    },
    {
        // 当URL的路径部分为'/list'时，渲染BookList组件
        path:'/list',
        component: BookList
    },{
        // 当URL的路径部分为'/add'时，渲染BookAdd组件
        path:'/add',
        component:BookAdd
    },{
        // 当URL的路径部分为'/edit'时，渲染BookEdit组件
        path:'/edit',
        component:BookEdit
    }
]

// 导出路由对象，这样其他模块可以导入并使用它
export default routObj

src\main.js

import { createApp } from 'vue'
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.min.css"
import { createWebHistory,createRouter} from 'vue-router'
import VueAxios from 'vue-axios'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from 'axios'
import routObj from './router'

const router = createRouter({
    // 使用HTML5的History API
    history:createWebHistory(),
    // 使用预先定义的路由对象
    routes:routObj
})


createApp(App).use(ElementPlus).use(VueAxios,axios).use(router).mount('#app')