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