第四次作业提交

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>
 
@@ -348,3 +349,17 @@ function login(){
 		margin: 0px;
 	}
 </style>
+-->
+<script setup>
+import login from './components/login.vue'
+
+</script>
+
+<template>
+
+	<router-view class="login"/>
+
+</template>
+
+<style>
+</style>

Vue/Vue001/src/components/book.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

Vue/Vue001/src/components/login.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

Vue/Vue001/src/components/record.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

Vue/Vue001/src/components/register.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

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>