From 9aa500b42345a236ea67892e088ba00d0b3fe22a Mon Sep 17 00:00:00 2001
From: zz <193970753@qq.com>
Date: Wed, 25 Sep 2024 00:08:26 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E5=9B=9B=E6=AC=A1=E4=BD=9C=E4=B8=9A?=
 =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Vue/Vue001/src/App.vue                 | 21 ++++++-
 Vue/Vue001/src/components/book.vue     |  8 +++
 Vue/Vue001/src/components/login.vue    |  8 +++
 Vue/Vue001/src/components/record.vue   |  8 +++
 Vue/Vue001/src/components/register.vue |  8 +++
 Vue/Vue001/src/components/review.vue   | 83 ++++++++++++++++++++++++++
 6 files changed, 133 insertions(+), 3 deletions(-)
 create mode 100644 Vue/Vue001/src/components/book.vue
 create mode 100644 Vue/Vue001/src/components/login.vue
 create mode 100644 Vue/Vue001/src/components/record.vue
 create mode 100644 Vue/Vue001/src/components/register.vue
 create mode 100644 Vue/Vue001/src/components/review.vue

diff --git a/Vue/Vue001/src/App.vue b/Vue/Vue001/src/App.vue
index ce7acca..26e333b 100644
--- a/Vue/Vue001/src/App.vue
+++ b/Vue/Vue001/src/App.vue
@@ -302,6 +302,7 @@ function login(){
 
 </style>
 -->
+<!--
 <script setup>
 	import Left from './components/Left.vue'
 	import Right from './components/Right.vue'
@@ -317,12 +318,12 @@ function login(){
 			<Left class="left"></Left>
 		</el-col>
 	    <el-col :span="20">
-			<!-- <Right class="right"></Right> -->
+			<!-- <Right class="right"></Right> 
 			<router-view class="right"></router-view>
 			
 		</el-col>
 	</el-row>
-
+<!--
 	<Bottom class="bottom"></Bottom>
 </template>
 
@@ -347,4 +348,18 @@ function login(){
 		background-color: aqua;
 		margin: 0px;
 	}
-</style>
\ No newline at end of file
+</style>
+-->
+<script setup>
+import login from './components/login.vue'
+
+</script>
+
+<template>
+
+	<router-view class="login"/>
+
+</template>
+
+<style>
+</style>
diff --git a/Vue/Vue001/src/components/book.vue b/Vue/Vue001/src/components/book.vue
new file mode 100644
index 0000000..02409e3
--- /dev/null
+++ b/Vue/Vue001/src/components/book.vue
@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/Vue/Vue001/src/components/login.vue b/Vue/Vue001/src/components/login.vue
new file mode 100644
index 0000000..02409e3
--- /dev/null
+++ b/Vue/Vue001/src/components/login.vue
@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/Vue/Vue001/src/components/record.vue b/Vue/Vue001/src/components/record.vue
new file mode 100644
index 0000000..02409e3
--- /dev/null
+++ b/Vue/Vue001/src/components/record.vue
@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/Vue/Vue001/src/components/register.vue b/Vue/Vue001/src/components/register.vue
new file mode 100644
index 0000000..02409e3
--- /dev/null
+++ b/Vue/Vue001/src/components/register.vue
@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/Vue/Vue001/src/components/review.vue b/Vue/Vue001/src/components/review.vue
new file mode 100644
index 0000000..4112d10
--- /dev/null
+++ b/Vue/Vue001/src/components/review.vue
@@ -0,0 +1,83 @@
+<template>
+  <h1 style="text-align: center; color: white;font-size: 50px;">书籍评价查询新界面</h1>
+  <div class="centered-area">
+    <el-input v-model="searchInput" style="width: 400px;margin-right: 10px;" placeholder="只支持查询单本书籍的评价!"/>
+    <el-button type="primary" @click="performSearchBook">查询</el-button>
+    <el-button type="danger" @click="goBack">返回</el-button>
+  </div>
+  <br>
+  <el-card style="opacity: 0.92;width: 90%; margin-left: 5%;">
+    <el-table :data="reviewDataList" stripe style="width: 100%; margin-left: 2%;">
+      <el-table-column prop="title" label="书名" />
+      <el-table-column prop="username" label="评论者" />
+      <el-table-column prop="review" label="具体评价" min-width="180px"/>
+    </el-table>
+  </el-card>
+
+  <div id="messageContainer"/>
+</template>
+
+<script setup>
+import { ref, onMounted, reactive } from 'vue';
+import axios from 'axios';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+const searchInput = ref('');
+const message = ref('');
+const reviewDataList = ref(null);
+function showMessage() {
+  const notification = document.createElement('div');
+  notification.textContent = message.value;
+  notification.classList.add('notification-review');
+  document.body.appendChild(notification);
+  setTimeout(() => {
+    document.body.removeChild(notification);
+  }, 2000);
+}
+function goBack() {
+  router.replace('/book');
+}
+function performSearchBook() {
+  axios({
+    method:'get',
+    url:'http://127.0.0.1:8080/SearchReview',
+    params:{
+      search:searchInput.value
+    }
+  }).then( res=>{
+    console.log(res.data);
+    reviewDataList.value = res.data.data;
+    reviewDataList.value.forEach(item => {
+      item.title = searchInput.value;
+    });
+    searchInput.value = null;
+  }).catch( err=>{
+    console.log(err);
+    message.value = "查询失败";
+    showMessage();
+  });
+}
+</script>
+
+<style>
+.centered-area {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.notification-review {
+  font-size: 25px;
+  color: black;
+  padding: 10px;
+  border-radius: 5px;
+  text-align: center;
+  margin-top: 20%;
+  width: 120px;
+  background-color: white;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 20px;
+}
+</style>
\ No newline at end of file