Vue_Django 登录注册+图书管理系统

这篇具有很好参考价值的文章主要介绍了Vue_Django 登录注册+图书管理系统。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue前端

注册页面

点击查看代码
<template>
  <div class="register">
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple">
          <h1>注册页面</h1>
          <el-form  status-icon  ref="ruleForm" label-width="100px"
                   class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
              <el-input v-model.number="username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input type="password" v-model="pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input type="password" v-model="checkPass" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      username:'',
      pass:'',
      checkPass:'',
    };
  },
  methods: {
    submitForm() {
      axios.post('http://127.0.0.1:8000/register/', {
        username: this.username,
        pass:this.pass,
        checkPass:this.checkPass
      })
          .then(function (res) {
            if (res.data.code===100){
              location.href = 'http://localhost:8080/login'
            }else {
              alert(res.data.msg)
            }
          })
    },
  }
}
</script>

登录

点击查看代码
<template>
  <div class="login">
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple">
          <h1>登录页面</h1>
          <el-form status-icon ref="ruleForm" label-width="100px"
                   class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
              <el-input v-model.number="username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input type="password" v-model="pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      username:'',
      pass:'',
    };
  },
  methods: {
    submitForm() {
      axios.post('http://127.0.0.1:8000/login/', {
        username: this.username,
        pass:this.pass,
      })
          .then(function (res) {
            if (res.data.code===100){
              location.href = 'http://localhost:8080/'
            }else {
              alert(res.data.msg)
            }
          })
    },
  }
}
</script>

查看所有图书

点击查看代码
<template>
  <div class="name">
    <h1>图书管理</h1>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple">
          <el-button type="success" @click="handleCreate">增加图书</el-button>
          <el-table
              :data="tableData"
              style="width: 100%">
            <el-table-column
                prop="id"
                label="图书id"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="图书名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="price"
                label="价格">
            </el-table-column>
            <el-table-column
                prop="operate"
                label="操作">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row)">修改
                </el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'HomeView',
  data() {
    return {
      // tableData: [{
      //   id:'',
      //   name:'',
      //   price:''
      // }],
      tableData:[]
    }
  },
  created() {
    axios.get('http://127.0.0.1:8000/book').then(res => {
      this.tableData = res.data
      // console.log(res.data)
      // res.data.forEach((value, index) => {
      //   this.tableData.id = index
      //   this.tableData.name = value.name
      //   this.tableData.price = value.price
      //   console.log(this.tableData)
      // })
    })
  },
  methods: {
    handleCreate() {
      this.$router.push('/create')
    },
    handleEdit(index, row) {
      // console.log(index, row);
      // console.log(row.name)
      // console.log(row.price)
      this.$router.push({name: 'update', params: {id: row.id, bookName: row.name, bookPrice: row.price}})
    },
    handleDelete(index, row) {
      console.log(index, row);
      console.log(row.id)
      axios.delete('http://127.0.0.1:8000/book/' + row.id).then(res => {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 1000, // 设置为 1 秒钟
          onClose: () => {
            setTimeout(() => {
              location.reload()
            })
          }
        });
      })
    }
  }
}
</script>

新增图书

点击查看代码
<template>
  <div class="create">
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple" style="margin-top: 40px">
          <h1>添加图书</h1>
          <el-row :gutter="20">
            <el-col :span="14" :offset="5">
              <el-input v-model="name" placeholder="图书名字"></el-input>
              <el-input v-model="price" placeholder="图书价格" style="margin-top: 20px"></el-input>
              <el-button type="success" @click="handleSend" style="float: right;margin-top: 20px">确认添加</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "BookCreateView",
  data() {
    return {
      name: '',
      price: ''
    }
  },
  methods: {
    handleSend() {
      axios.post('http://127.0.0.1:8000/book/', {
        name: this.name,
        price: this.price,
      }).then(res => {
        this.$message({
          message: '添加成功',
          type: 'success',
          duration: 1000, // 设置为 1 秒钟
          onClose: () => {
            setTimeout(() => {
              this.$router.push('/')
            })
          }
        });
      }).catch(error => {
        console.log(error); // 输出错误信息
      });
    }
  }
}
</script>

修改图书

点击查看代码
<template>
  <div class="update">
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple" style="margin-top: 40px">
          <h1>修改图书</h1>
          <el-row :gutter="20">
            <el-col :span="14" :offset="5">
              <el-input v-model="name" :placeholder="bookName"></el-input>
              <el-input v-model="price" :placeholder="bookPrice" style="margin-top: 20px"></el-input>
              <el-button type="success" @click="handleSend(bookId)" style="float: right;margin-top: 20px">确认修改
              </el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "BookUpdateView",
  data() {
    return {
      name: '',
      price: '',
      bookId: '',
      bookName: '',
      bookPrice: ''
    }
  },
  created() {
    // console.log(this.$route.params.id)
    // console.log(this.$route.params.bookName)
    // console.log(this.$route.params.bookPrice)
    this.bookId = this.$route.params.id
    this.bookName = this.$route.params.bookName
    this.bookPrice = this.$route.params.bookPrice
  },
  methods: {
    handleSend(bookId) {
      axios.put('http://127.0.0.1:8000/book/' + bookId + '/', {
        name: this.name,
        price: this.price,
      }).then(response => {
        console.log(response.data); // 输出成功修改的图书信息
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 1000, // 设置为 1 秒钟
          onClose: () => {
            setTimeout(() => {
              this.$router.push('/')
            })
          }
        });
      }).catch(error => {
        console.log(error); // 输出错误信息
        alert('不能为空')
      });
    }
  }
}
</script>

Django后端

注册

from rest_framework.views import APIView
from django.contrib import auth
from django.contrib.auth.models import User

class RegisterView(APIView):
    def post(self, request):
        back_dic = {'code': 100, 'msg': '注册成功'}
        res = json.loads(request.body)
        username = res.get('username')
        password = res.get('pass')
        repassword = res.get('checkPass')
        user_obj = User.objects.filter(username=username)
        if user_obj:
            back_dic['code'] = 101
            back_dic['msg'] = '用户名已存在'
            return Response(back_dic)
        if password != repassword:
            back_dic['code'] = 101
            back_dic['msg'] = '两次密码不一致'
            return Response(back_dic)
        if not username:
            back_dic['code'] = 101
            back_dic['msg'] = '用户名不能为空'
            return Response(back_dic)

        User.objects.create_user(username=username, password=password)
        return Response(back_dic)

登录

from rest_framework.views import APIView
from django.contrib import auth
from django.contrib.auth.models import User

class LoginView(APIView):
    def post(self, request):
        back_dic = {'code': 100, 'msg': '注册成功'}
        res = json.loads(request.body)
        username = res.get('username')
        password = res.get('pass')
        user_obj = auth.authenticate(request, username=username, password=password)
        if user_obj:
            return Response(back_dic)
        else:
            back_dic['code'] = 101
            back_dic['msg'] = '用户名或密码错误'
            return Response(back_dic)

图书接口(增删改查)

from rest_framework.viewsets import ModelViewSet
from .models import Books
from .serializer import BookSerializer

class BookDetailView(ModelViewSet):
    queryset = Books.objects.all()
    serializer_class = BookSerializer

文章来源地址https://www.toymoban.com/news/detail-479007.html

到了这里,关于Vue_Django 登录注册+图书管理系统的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Django搭建图书管理系统01

    Django是一个使用Python编写的开源Web应用程序框架。它采用了MVC(Model-View-Controller)的软件设计模式,旨在简化开发复杂的Web应用程序。 以下是Django框架的一些主要 特点 : 强大的开发工具:Django提供了一套完整的工具集,包括ORM(对象关系映射)、表单处理、URL路由、模板引

    2024年02月12日
    浏览(36)
  • Django项目之图书管理系统

    1、创建好 Django 项目 2、准备好数据库 —— 创建数据库:book_system 3、配置项目中的数据库引擎 4、配置静态文件的搜索路径 , 以及在项目的根目录中创建一个 static 存放静态文件数据文件夹 5、导入 html 模板文件和静态文件数据。 1、响应用户注册页面的视图 2、定义用户数

    2024年04月29日
    浏览(45)
  • 图书管理系统(python、django)

    1. 系统简介 该实验设计开发一个简单的图书管理数据库系统,包括图书馆内书籍的信息、学校在校师生的信息以及师生的借阅信息。此系统用户面向图书管理员和借阅读者,图书馆管理员可以完成图书、读者等基本信息的增加、删除和修改、查看;读者可以进行图书的借阅、

    2024年02月05日
    浏览(59)
  • Django图书商城系统实战开发-实现商品管理

    在本教程中,我们将使用Django框架来实现一个简单的图书商城系统,并重点讨论如何实现商品管理功能。此外,我们还将介绍如何使用Markdown格式来写博客,并将其集成到我们的图书商城系统中。 Django是一个强大的Python Web框架,被广泛应用于开发各种类型的Web应用程序,包括

    2024年02月12日
    浏览(44)
  • Django图书商城系统实战开发-实现订单管理

    在本教程中,我们将继续基于Django框架开发图书商城系统,这次的重点是实现订单管理功能。订单管理是一个电子商务系统中非常重要的部分,它涉及到用户下单、支付、发货以及订单状态的管理等方面。通过学习本教程,您将了解如何使用Django框架来构建强大的订单管理系

    2024年02月12日
    浏览(50)
  • Django搭建图书管理系统04:View视图初探

    数据库虽然已经有了,但是用户通常只需要这个庞大数据库中的很小一部分进行查看、修改等操作。为此还需要代码来恰当的取出并展示数据,这一部分代码就被称为 视图 。 Django 中视图的概念是**「一类具有相同功能和模板的网页的集合」**。 首先写一个最简单的 视图函数

    2024年02月15日
    浏览(35)
  • 基于Django图书管理系统 毕业设计源码64946

    赠送源码-毕业设计:django图书管理系统 https://www.bilibili.com/video/BV1Dw411J7Uf/?vd_source=72970c26ba7734ebd1a34aa537ef5301 Django图书管理系统 摘  要 大数据时代下,数据呈爆炸式地增长。为了迎合信息化时代的潮流和信息化安全的要求,利用互联网服务于其他行业,促进生产,已经是成为

    2024年01月23日
    浏览(66)
  • 项目篇 | 图书管理系统 | 账号模块 | 登录

    该系统实现了管理员登录和用户登录,二者的实现和逻辑几乎完全一致,这里以用户登录为例进行讲解。 userLoginPage:功能页,用户登录页,实现用户登录页的界面 userLogin:功能,用户登录,实现用户登录逻辑

    2024年01月20日
    浏览(47)
  • Django搭建图书管理系统03:编写博客文章的Model模型

    Django 框架主要关注的是模型(Model)、模板(Template)和视图(Views),称为MTV模式。 它们各自的职责如下: 层次 职责 模型(Model),即数据存取层 处理与数据相关的所有事务: 如何存取、如何验证有效性、包含哪些行为以及数据之间的关系等。 模板(Template),即业务逻

    2024年02月12日
    浏览(42)
  • 图书推荐管理系统Python,基于Django和协同过滤算法等实现

    图书推荐系统 / 图书管理系统,以Python作为开发语言,基于Django实现,使用协同过滤算法实现对登录用户的图书推荐。 视频+代码:https://www.yuque.com/ziwu/yygu3z/gq555ph49m9fvrze Django是一个强大而灵活的Python Web框架,它为开发人员提供了一种高效构建Web应用程序的方式。Django的设计

    2024年02月12日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包