0918

front/src/components/Home.vue

@@ -2,13 +2,9 @@
 export default {
 
   data() {
-    return {
-
-    }
-  },
-  methods: {
-
+    return {}
   },
+  methods: {},
 
 
 }
@@ -25,7 +21,9 @@ export default {
       </div>
       <div class="image">
         <img class='left' src="../assets/images/banner-left.png" alt="">
-        <img class='middle' src="../assets/images/banner3.png" alt="">
+        <div class="middle">
+          <img src="../assets/images/banner3.png" alt="">
+        </div>
         <img class='right' src="../assets/images/banner-right.png" alt="">
       </div>
     </div>
@@ -43,9 +41,7 @@ $bgColor: #ECFBFB;
 
 .banner {
   width: 100%;
-  //height: calc(100vh - 80px * 2);
   overflow: hidden;
-  padding: 20px 0;
   border-radius: 20px;
   background: $bgColor;
   text-align: center;
@@ -60,7 +56,7 @@ $bgColor: #ECFBFB;
     }
   }
 
-  .des{
+  .des {
     opacity: 0;
     animation: downIn .5s ease-in forwards;
     animation-delay: .6s;
@@ -77,15 +73,19 @@ $bgColor: #ECFBFB;
     justify-content: space-between;
 
     .right,
-    .left{
+    .left {
       transition: all .4s ease;
       transform: scale(1);
     }
 
     .middle {
-      transition: all .4s ease;
       animation: upMove .5s linear forwards;
-      &:hover{
+
+      img {
+        transition: all .4s ease;
+      }
+
+      img:hover {
         transform: scale(1.1);
       }
     }

front/src/components/nav/nav.vue

 <script>
 import {mapState} from "vuex";
+import axios from "axios";
 
 export default {
   data() {
     return {
       // 判断是否登录，如果localStore中含有token和pic则认为是登录状态
       login: false,
+      out:false,
       link: [
         {
           id: 1,
@@ -32,7 +34,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['name', 'picUrl'])
+    ...mapState(['name', 'picUrl','baseUrl'])
   },
   methods: {
     getPic() {
@@ -41,6 +43,34 @@ export default {
         this.$store.commit('setPicUrl', pic)
         this.login = true
       }
+    },
+    logout(){
+        let ele = this.$refs.logout;
+        if(this.out){
+          ele.classList.remove('enter')
+          this.out = false
+        }else{
+          ele.classList.add('enter')
+          this.out = true
+        }
+    },
+    exit(){
+      if(confirm("是否确定退出？")){
+        let url = this.baseUrl + '/user/logout/'
+        axios.get(url)
+            .then((res)=>{
+              localStorage.removeItem('pic');
+              localStorage.removeItem('token');
+              // alert(res.data.msg)
+              location.reload()
+            })
+            .catch((err)=>{
+              console.log(err)
+            })
+      }
+    },
+    fix(){
+
     }
   },
   watch:{
@@ -65,8 +95,6 @@ export default {
 <template>
 
   <div class="container">
-
-
     <div class="top">
       <div class="logo">
         <!--        曦林图书-->
@@ -81,8 +109,16 @@ export default {
           <router-link to="/login">Sign in</router-link>
           <div></div>
         </div>
-        <div class="person" v-else>
+        <div class="person" v-else @click="logout()">
           <img :src="picUrl" alt="">
+          <div class="logout" ref="logout">
+            <div class="out" @click.stop="exit()">
+              退出登录
+            </div>
+            <div class="fix" @click.stop="fix()">
+              账户修改
+            </div>
+          </div>
         </div>
 
       </div>
@@ -96,8 +132,6 @@ $btnColor: #38B081;
 $bgColor: #ECFBFB;
 
 .container{
-  //box-shadow: 1px 0 5px #38b0815c;
-  //margin: 0;
 }
 .top {
   height: 80px;
@@ -120,12 +154,39 @@ $bgColor: #ECFBFB;
   }
 
   .person {
+    position: relative;
+    top: 0;
+    left: 0;
     img {
       width: 40px;
       height: 40px;
       border-radius: 20px;
       vertical-align: middle;
     }
+    .logout{
+      position: absolute;
+      top: 54px;
+      right: -60px;
+      z-index: 9;
+      opacity: 0;
+      width: 100px;
+      height: 80px;
+      transition: all .5s ease;
+      div{
+        cursor: pointer;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        margin-top: 5px;
+        color: white;
+        border-radius: 10px;
+        background: $btnColor;
+      }
+    }
+    .enter{
+      right: -10px;
+      opacity: 1;
+    }
   }
 
   .link {
@@ -133,7 +194,6 @@ $bgColor: #ECFBFB;
 
     div {
       line-height: 50px;
-      overflow: hidden;
       transition: all .3s linear;
 
       span {

front/src/components/secondary/bookList.vue

@@ -56,9 +56,9 @@ export default {
         }
       } else if (type === 'down') {
 
-        if (this.page === this.pagination_info.total_pages) {
+        if (this.page <= this.pagination_info.total_pages) {
 
-          if (this.page === 3) {
+          if (this.page === this.pagination_info.total_pages) {
             return false
           } else {
             this.page = this.page + 1
@@ -69,7 +69,7 @@ export default {
       }
 
     },
-    open(item){
+    open(item) {
       // console.log(item)
       let isbn = item.fields.isbn
       this.$router.push(`/details/?isbn=${isbn}`)
@@ -138,8 +138,6 @@ $bgColor: #ECFBFB;
     display: flex;
     margin-bottom: 40px;
     animation: leftIn .5s linear forwards;
-    //overflow: hidden;
-    //box-sizing: border-box;
     box-shadow: 1px 1px 12px transparent;
 
     overflow: hidden;
@@ -176,17 +174,17 @@ $bgColor: #ECFBFB;
 
   .line:hover {
     box-shadow: 1px 1px 12px $aColor;
-
     transform: scale(1.1);
-
-
     border-radius: 10px;
     padding: 5px;
+    img{
+      border-radius: 8px;
+    }
   }
 }
 
 .paging {
-  width: 400px;
+  width: 600px;
   margin: auto;
 
   button {

front/src/components/secondary/details.vue

@@ -26,7 +26,10 @@ export default {
     }
   },
   computed: {
-    ...mapState(['baseUrl'])
+    ...mapState(['baseUrl']),
+    shouldShowIntro() {
+      return this.book.intro !== '';
+    }
   },
   methods: {
     getData() {
@@ -113,10 +116,10 @@ export default {
             <p>类型：<span>{{ book.type }}</span></p>
             <p>出版社：<span>{{ book.publisher }}</span></p>
             <p>ISBN：<span>{{ book.isbn }}</span></p>
-            <p>出版日期：<span>{{ book.Listing_time }}</span></p>
+            <p>出版日期：<span>{{ book.Listing_time.split('T')[0] }}</span></p>
           </div>
         </div>
-        <p class="intro">介绍：<span>{{ book.intro }}</span></p>
+        <p class="intro" v-if="shouldShowIntro">介绍：<span>{{ book.intro }}</span></p>
       </div>
     </div>
   </div>
@@ -171,8 +174,8 @@ $bgColor: #ECFBFB;
     }
   }
   .op{
-    width: 200px;
-    height: 200px;
+    width: 180px;
+    height: 160px;
     border-radius: 10px;
     display:flex;
     flex-direction: column;
@@ -181,14 +184,15 @@ $bgColor: #ECFBFB;
     right: 80px;
     .bor{
       text-align: center;
-      line-height: 100px;
+      line-height: 80px;
       flex: 1;
       background: #9bdec9;
       border-radius: 8px;
+      margin-bottom: 10px;
     }
     .buy{
       text-align: center;
-      line-height: 100px;
+      line-height: 80px;
       flex: 1;
       background: #79dbea;
       border-radius: 8px;

front/src/components/secondary/fixBook.vue

+<script>
+import {mapState} from "vuex";
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      msg: ''
+    }
+  },
+  methods: {
+    getAuthority() {
+      axios.post(this.baseUrl + '/user/manage/')
+          .then((res) => {
+            console.log(res.data)
+            this.msg = res.data.msg
+          })
+          .catch((err) => {
+            console.log(err)
+          })
+
+    }
+  },
+  computed: {
+    ...mapState(['baseUrl'])
+  },
+  mounted() {
+    this.getAuthority()
+  }
+}
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file

front/src/components/secondary/table.vue

@@ -39,6 +39,7 @@ export default {
         this.borrow = false;
         this.buy = false
         this.fix = true
+        this.$router.push('/table/fixBook')
       }
     },
     getRecord(type) {
@@ -48,8 +49,6 @@ export default {
       axios
           .post(url, formData)
           .then((res) => {
-            // console.log(res.data)
-            // console.log(res.data.records)
             this.borrowData = res.data.records
           })
           .catch((err) => {
@@ -74,7 +73,7 @@ export default {
 
     </div>
     <div class="content">
-      <div class="borrow_view" v-if="borrow">
+      <div class="view" v-if="borrow">
         <table>
           <thead>
           <tr>
@@ -99,7 +98,7 @@ export default {
         </table>
       </div>
 
-      <div class="buy_view" v-if="buy">
+      <div class="view" v-if="buy">
         <table>
           <thead>
           <tr>
@@ -124,8 +123,8 @@ export default {
         </table>
       </div>
 
-      <div class="fix_view" v-if="fix">
-        <h2>暂未开启</h2>
+      <div class="view" v-if="fix">
+        <router-view></router-view>
       </div>
     </div>
   </div>
@@ -171,8 +170,11 @@ $bgColor: #ECFBFB;
   margin-left: 30px;
   width: calc(100% - 80px * 2 - 30px);
   height: 500px;
-  .borrow_view{
-    //padding: 30px 0;
+  .view{
+    opacity: 0;
+    transition: all .5s linear;
+    animation: downIn .3s ease-in forwards;
+    //animation: upMove .3s ease-in forwards;
   }
   table{
     border-spacing: 3px;

front/src/main.js

@@ -30,6 +30,7 @@ import axios from "axios";
 axios.interceptors.request.use(
     (config) => {
         const token = localStorage.getItem('token');
+        console.log(token)
         if (token) {
             config.headers.Authorization = `Token ${token}`;
         }

front/src/router/router.js

@@ -5,6 +5,7 @@ import BookList from "../components/secondary/bookList.vue";
 import Borrowing from "../components/secondary/borrowing.vue";
 import Table from "../components/secondary/table.vue"
 import Details from "../components/secondary/details.vue";
+import FixBook from "../components/secondary/fixBook.vue";
 
 
 const router = createRouter({
@@ -14,7 +15,12 @@ const router = createRouter({
         {path: '/login', component: Login},
         {path: '/bookList', component: BookList},
         {path: '/borrowing', component: Borrowing,meta: {requiresAuth: true}},
-        {path: '/table', component: Table, meta: {requiresAuth: true}},
+        {path: '/table', component: Table,
+            meta: {requiresAuth: true},
+            children:[
+                {path:'fixBook',component:FixBook}
+            ]
+        },
         // meta: {requiresAuth: true} 需要身份认证的路由
         {path:'/details',component:Details,meta:{requiresAuth: true}}
     ],

last/end/books/views.py

@@ -8,7 +8,7 @@ import json
 
 
 def all_view(request):
-    books = Book.objects.all()
+    books = Book.objects.all().order_by('id')
     paginator = Paginator(books, 4)
 
     page_number = request.GET.get('page', 1)

last/end/record/views.py

@@ -9,7 +9,6 @@ import json
 
 from books.models import Book
 from user.models import UserInfo
-
 from record.models import Record
 
 
@@ -30,8 +29,14 @@ def borrow_view(request):
         isbn = request.data.get('isbn')
         type = request.data.get('type')
         user_id = request.user.id  # 从令牌中解析出user_id
-        print(isbn,type,user_id)
+        # print(isbn,type,user_id)
+
+        # 在数据库中查找是否已存在匹配的记录
+        existing_record = Record.objects.filter(user_id=user_id, book__isbn=isbn, type=type).first()
 
+        if existing_record:
+            # 如果已存在匹配记录，则返回相应的错误消息
+            return Response({'error': 'Record already exists'}, status=status.HTTP_400_BAD_REQUEST)
         # 在Book模型中查找具有匹配ISBN的书籍记录
         try:
             book = Book.objects.get(isbn=isbn)

last/end/user/migrations/0002_rename_pichead_userinfo_pic.py

+# Generated by Django 4.2.5 on 2023-09-17 14:50
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('user', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='userinfo',
+            old_name='picHead',
+            new_name='pic',
+        ),
+    ]

last/end/user/models.py

@@ -4,4 +4,4 @@ from django.contrib.auth.models import AbstractUser
 
 class UserInfo(AbstractUser):
     career = models.CharField("职业", max_length=24, default="")
-    picHead = models.CharField("头像", max_length=64, default="")
+    pic = models.CharField("头像", max_length=64, default="")

last/end/user/urls.py

@@ -4,4 +4,6 @@ from . import views
 urlpatterns = [
     path('login/', views.login_view),
     path('register/', views.register_view),
+    path('logout/', views.logout_view),
+    path('manage/', views.manage_view),
 ]

last/end/user/views.py

-from django.contrib.auth.models import User
-from user.models import UserInfo
-from django.contrib.auth import authenticate, login
 from django.http import JsonResponse
+from rest_framework.decorators import api_view, authentication_classes, permission_classes
+from rest_framework.authentication import TokenAuthentication
+from rest_framework.permissions import IsAuthenticated
+from rest_framework.response import Response
+from rest_framework import status
 
-from rest_framework.authtoken.models import Token
+from user.models import UserInfo
+from django.contrib.auth import authenticate, login, logout
+from django.http import JsonResponse, HttpResponse
 
-from rest_framework.decorators import api_view
+from rest_framework.authtoken.models import Token
 
 
 @api_view(['POST'])
@@ -65,3 +69,32 @@ def register_view(request):
             # 创建用户
             UserInfo.objects.create_user(username=username, password=password)
             return JsonResponse({'code': 201, 'msg': '用户创建成功'})
+
+
+def logout_view(request):
+    logout(request)
+    return JsonResponse({'code': 200, 'msg': '退出登录'})
+
+
+@api_view(['POST'])
+@authentication_classes([TokenAuthentication])
+@permission_classes([IsAuthenticated])
+def manage_view(request):
+    if request.method == 'POST':
+        user_id = request.user.id  # 从令牌中解析出user_id
+        # 获取用户对象，如果不存在则返回404错误页面
+        print(user_id)
+        try:
+            user = UserInfo.objects.get(id=user_id)
+        except UserInfo.DoesNotExist:
+            return JsonResponse({'code': 404, "msg": "当前用户不存在"})
+
+        # 检查用户是否具有管理权限
+        if user.is_staff:
+            # 如果用户具有管理权限，执行相应的操作
+            # 例如，返回一个成功的响应或执行其他逻辑
+            return JsonResponse({'code': 200, "msg": "用户具有管理权限"})
+        else:
+            # 如果用户没有管理权限，执行相应的操作
+            # 例如，返回一个错误的响应或执行其他逻辑
+            return JsonResponse({'code': 401, "msg": "用户权限不足"})