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="確認(rèn)密碼" 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, // 設(shè)置為 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">確認(rèn)添加</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, // 設(shè)置為 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">確認(rèn)修改
</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, // 設(shè)置為 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
文章來源地址http://www.zghlxwxcb.cn/news/detail-479007.html
文章來源：http://www.zghlxwxcb.cn/news/detail-479007.html
到了這里，關(guān)于Vue_Django 登錄注冊+圖書管理系統(tǒng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
