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
Vue_Django 登录注册+图书管理系统的更多相关文章
- struts2+hibernate 项目实战：图书管理系统
经典项目,练手必备. 图书管理系统 需求分析(大致,并不专业):1.需要有用户管理: 1.1 用户注册: 1.2 用户登录: 1.3 用户信息修改: 1.4 用户修改密码: 2.需要有书本管理: 2. ...
- Java图书管理系统（用Java常用集合实现）
图书管理系统 一.需求说明 1.功能:登录,注册,忘记密码,管理员管理,图书管理. 2.管理员管理:管理员的增删改查. 3.图书管理:图书的增删改查. 4.管理员属性包括:id,姓名,性别,年龄,家庭 ...
- 图书管理系统（无中间件，用装饰器的）-----未基于FORM组件
目的:实现图书的增删改查 models.py from django.db import models # Create your models here. class Book(models.Mod ...
- python 全栈开发，Day77(图书管理系统)
一.图书管理系统 完整代码链接: https://github.com/py3study/bms_multi 本项目使用session来实现一个简单的图书管理系统 未登录不允许访问后台: 直接访问后台 ...
- 基于Java SE集合的图书管理系统
图书管理系统一.需求说明1.功能:登录,注册,忘记密码,管理员管理,图书管理.2.管理员管理:管理员的增删改查.3.图书管理:图书的增删改查.4.管理员属性包括:id,姓名,性别,年龄,家庭住址,手机 ...
- 11 基于django的图书管理系统 多表
1.需求 作业需求:1.列出图书列表.出版社列表.作者列表2.点击作者,会列出其出版的图书列表3.点击出版社,会列出旗下图书列表4.可以创建.修改.删除 图书.作者.出版社 踩分点:1.满足需求1,2 ...
- python大作业-图书管理系统
#缺少循环执行和错误处理 #add()函数 添加了循环执行 #错误处理:regist()函数 登录和退出选择的时候添加了错误处理 import sys import importlib importl ...
- 基于servlet的图书管理系统
该项目是Java语言开发的图书管理系统,IDE采用eclipse,技术采用servlet,数据库使用mysql,前端页面采用bootstrap框架,简介美观. 系统具备基础的功能,读者可以注册登录,登 ...
- Django实现简单的图书管理系统
目录 Django写图书管理系统 功能截图 创建Django项目 开始项目 配置文件 建立路由关系 开始写Django项目 编写核心逻辑函数 写前端页面 add_author.html add_boo ...
- python实现图书管理系统
# 用户注册 def logon(): print("欢迎来到图书管理系统注册页面~") username = input("请输入用户名:") if len( ...
随机推荐
- C++ （伪）随机数生成
#include <iostream> #include <random> namespace random { // 从系统获取随机数作为种子 std::random_dev ...
- 有一个公网IP地址
这几天在家里拉了一条300M+的宽带,但是遇到了一些坑,本文就简单说明一下如下: 突发此次需求是这样的:阿里云有台服务器公网带宽是1M的,虽说带宽小,但是数据中心的服务器显然是稳定的,只是带宽太小,有 ...
- python入门教程之九日期时间常用操作
Python 提供了一个 time 和 calendar 模块可以用于格式化日期和时间. 时间间隔是以秒为单位的浮点小数. 每个时间戳都以自从1970年1月1日午夜(历元)经过了多长时间来表示. Py ...
- 多进程和多线程，Thread模块 GIL全局解释锁， 进程池与线程池，协程
1.多进程实现TCP服务端并发: import socket from multiprocessing import Process def get_server(): server = socket ...
- C++ 测试框架 GoogleTest 初学者入门篇 丙
theme: channing-cyan *以下内容为本人的学习笔记,如需要转载,请声明原文链接微信公众号「ENG八戒」https://mp.weixin.qq.com/s/RIztusI3uKRno ...
- 28-PWA
const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin') ...
- 详解Redis三大集群模式，轻松实现高可用！
1. Redis集群简介 1.1 什么是Redis集群 Redis集群是一种通过将多个Redis节点连接在一起以实现高可用性.数据分片和负载均衡的技术.它允许Redis在不同节点上同时提供服务,提高整 ...
- 深度学习--LSTM网络、使用方法、实战情感分类问题
深度学习--LSTM网络.使用方法.实战情感分类问题 1.LSTM基础 长短期记忆网络(Long Short-Term Memory,简称LSTM),是RNN的一种,为了解决RNN存在长期依赖问题而设 ...
- 音视频八股文（11）-- ffmpeg avio 内存输入和内存输出。内存输出有完整代码，网上很少有的。
1.avio介绍 avio是FFmpeg中的一个模块,用于实现多种输入输出方式的封装. avio提供了一系列API,可以将数据从内存读取到缓冲区中,也可以将缓冲区中的数据写入到内存中.其实现依赖于IO ...
- 揭秘Karmada百倍集群规模多云基础设施体系
摘要:本文结合Karmada社区对大规模场景的思考,揭示Karmada稳定支持100个大规模集群.管理超过50万个节点和200万个Pod背后的原理 本文分享自华为云社区<Karmada百倍集群规 ...