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
