Project process summary

Project process summary

1. Create projects and subapplications

Create project command ： django-admin startprojiect Project name

Create subapplication ：python manage.py startapp Application name

2. Configuration items

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'employee',
    'rest_framework',
    'corsheaders',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    
    'corsheaders.middleware.CorsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True

DATABASES = {
    
    'default': {
    
        'ENGINE': 'django.db.backends.mysql',
        'HOST': 'localhost',
        'PORT': 3306,
        'USER': 'root',
        'PASSWORD': 'root',
        'NAME': 'employee',
    }
}

LANGUAGE_CODE = 'zh-Hans'

TIME_ZONE = 'Asia/Shanghai'

3. mount this database

import pymysql
pymysql.install_as_MySQLdb()

4. Write model classes

from django.db import models

# Create your models here.
#  Department name dep_name、 Department description desc、 Number of departments num form 
class Department(models.Model):
    dep_name = models.CharField(max_length=20, verbose_name=' Department name ')
    desc = models.CharField(max_length=20, verbose_name=' Department description ')
    num = models.IntegerField(default=1, verbose_name=' Number of departments ')

    class Meta:
        verbose_name = ' Departmental table '
        verbose_name_plural = verbose_name
        db_table = 'department'

    def __str__(self):
        return self.dep_name

#  full name emp_name、 Position job、 Wages salary、 department department,
class Employee(models.Model):
    emp_name = models.CharField(max_length=20, verbose_name=' Employee name ')
    job = models.CharField(max_length=20, verbose_name=' Position ')
    salary = models.IntegerField(default=1, verbose_name=' Wages ')
    department = models.ForeignKey(to=Department, on_delete=models.CASCADE, verbose_name=' department ')

    class Meta:
        verbose_name = ' The employee table '
        verbose_name_plural = verbose_name
        db_table = 'employee'

    def __str__(self):
        return self.emp_name

5. transfer 、 Create a superuser 、 The registry 、 Add test data

transfer ：python manage.py makemigrations

Perform the migration ：python manage.py migrate

Create a superuser ：python manage.py createsuperuser

The registry ：

from django.contrib import admin
from employee.models import Department, Employee

# Register your models here.
admin.site.register(Department)
admin.site.register(Employee)

6. Routing distribution ：

Create sub routes under sub applications

 Main route ：
from django.contrib import admin
from django.urls import path,include
from employee import urls

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include(urls)),
]

 Sub route ：
from django.urls import path
from employee import views
from rest_framework import routers
urlpatterns = [
    path('emp2/<int:id>/', views.EmployeeView3.as_view()),
]

router = routers.SimpleRouter()
router.register('dep', views.DepartmentViewSet, 'dep')
router.register('emp', views.EmployeeViewSet, 'emp')
urlpatterns += router.urls

7. Create a serializer

from rest_framework import serializers
from employee.models import Department, Employee

class DepartmentSerializer(serializers.ModelSerializer):
    class Meta:
        model = Department
        fields = '__all__'

class EmployeeSerializer(serializers.ModelSerializer):
    #  Foreign key handling 
    dep_name = serializers.SerializerMethodField(read_only=True)
    def get_dep_name(self, obj):
        return obj.department.dep_name
    class Meta:
        model = Employee
        fields = '__all__'

8. Authoring views ：

from employee.models import Department, Employee
from employee.serializers import EmployeeSerializer, DepartmentSerializer
from rest_framework.viewsets import ModelViewSet

class DepartmentViewSet(ModelViewSet):
    queryset = Department.objects.all()
    serializer_class = DepartmentSerializer

class EmployeeViewSet(ModelViewSet):
    queryset = Employee.objects.all()
    serializer_class = EmployeeSerializer

from rest_framework.views import APIView
from rest_framework.response import Response
#  According to the Department id  Inquire about   Employee information of the Department 
class EmployeeView3(APIView):
    def get(self, request, id):
        emp_data = Employee.objects.filter(department_id=id)
        ser = EmployeeSerializer(emp_data, many=True)
        return Response(ser.data, status=200)

9. Configure the routing

Front end code summary

1.vue Project creation

command ：vue create Project name

2. Cross domain

Created in the root directory vue.config.js file

//  Create a new file in the root directory  vue.config.js  The file name cannot be written wrong ！！！
// !!! Configure the cross domain , It takes effect after restarting the terminal 
module.exports = {
    
    devServer:{
    
        proxy:'http://127.0.0.1:8000/',   // !!!proxy p A lowercase letter 
    }
}

3. encapsulation

stay src I'm gonna go ahead and create a new folder utils, Then go to create a new file request.js

//  install axios The order of  npm install --save axios

import Axios from 'axios'

export function get(url, params){
    
    return Axios.get(url, params)
}

export function post(url, params){
    
    return Axios.post(url, params)
}

export function put(url, params){
    
    return Axios.put(url, params)
}

export function del(url, params){
    
    return Axios.delete(url, params)
}

4. New page , Configure the routing , Configure the navigation bar App.vue

5. Function realization ：

1. Show all department information 、 Display employee information according to the Department (1. Button 2. Turn jump )

Department page ：

<template>
    <div>
        <h3> Department page </h3>
        <table border="1" width=800 style="margin:0 auto;">
            <tr>
                <th> Number </th>
                <th> Department name </th>
                <th> Department description </th>
                <th> Number of departments </th>
                <th> operation </th>
            </tr>
            <tr v-for="(item, i) in depList" :key="i">
                <td>{
   {item.id}}</td>
                <td>
                    <router-link :to="{name:'Employee', params:{id:item.id}}">
                        {
   {item.dep_name}}
                    </router-link>
                </td>
                <td>{
   {item.desc}}</td>
                <td>{
   {item.num}}</td>
                <td><button @click="getEmpData(item.id)"> details </button></td>
            </tr>
        </table>
        <h3> Members of the Department </h3>
        <table border="1" width=800 style="margin:0 auto;">
            <tr>
                <th> Number </th>
                <th> full name </th>
                <th> Position </th>
                <th> Wages </th>
                <th> Department name </th>
                <th> Department number </th>
            </tr>
            <tr v-for="(item, i) in empList" :key="i">
                <td>{
   {item.id}}</td>
                <td>{
   {item.emp_name}}</td>
                <td>{
   {item.job}}</td>
                <td>{
   {item.salary}}</td>
                <td>{
   {item.dep_name}}</td>
                <td>{
   {item.department}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
import { get } from '../../utils/request';
export default {
    name:'Department',
    data(){
        return{
            depList:[],
            empList:[],
        }
    },
    mounted(){
        this.getDepData();
    },
    methods:{
        //  Get all department information 
        getDepData(){
            get('dep/').then((resp) => {
                console.log(resp);
                this.depList = resp.data // Save department information 
            }).catch((err) => {
                console.log(err);
            });
        },
        //  According to the Department id obtain   Employee information of the Department 
        getEmpData(id){
            // url : 'emp2/'+ department id+'/';
            let url = 'emp2/'+id+'/';
            get(url).then((resp) => {
                console.log(resp);
                this.empList = resp.data // Keep employee information 
            }).catch((err) => {
                console.log(err);
            });
        },
    }
}
</script>

<style>
</style>

Employee page ： Delete 、 modify 、 add to

<template>
    <div>
        <h3> Employee page </h3>
        <table border="1" width=800 style="margin:0 auto;">
            <tr>
                <th> Number </th>
                <th> full name </th>
                <th> Position </th>
                <th> Wages </th>
                <th> Department name </th>
                <th> Department number </th>
                <th> operation </th>
            </tr>
            <tr v-for="(item, i) in empList" :key="i">
                <td>{
   {item.id}}</td>
                <td>{
   {item.emp_name}}</td>
                <td>{
   {item.job}}</td>
                <td>{
   {item.salary}}</td>
                <td>{
   {item.dep_name}}</td>
                <td>{
   {item.department}}</td>
                <td>
                    <button @click="remove(item.id)"> Delete </button>
                    <button @click="getData(i)"> modify </button>
                </td>
                <!-- i  Is the subscript of the data to be updated  -->
            </tr>
        </table>
        <p> Update features </p>
        <p> full name : <input type="text" v-model="updateObj.emp_name"></p>
        <p> Position : <input type="text" v-model="updateObj.job"></p>
        <p> Wages : <input type="text" v-model="updateObj.salary"></p>
        <p> department : 
            <select v-model="updateObj.department">
                <option v-for="(item, i) in depList" :key="i" :value="item.id">{
   {item.dep_name}}</option>
            </select>
        </p>
        {
   {updateObj.department}}
        <p><button @click="update"> modify </button></p>

        <p> Add functionality </p>
        <p> full name : <input type="text" v-model="addObj.emp_name"></p>
        <p> Position : <input type="text" v-model="addObj.job"></p>
        <p> Wages : <input type="text" v-model="addObj.salary"></p>
        <p> department : 
            <select v-model="addObj.department">
                <option v-for="(item, i) in depList" :key="i" :value="item.id">{
   {item.dep_name}}</option>
            </select>
        </p>
        {
   {addObj.department}}
        <p><button @click="add"> add to </button></p>
    </div>
</template>

<script>
import {get, del, put, post} from '../../utils/request'
export default {
    name:'Employee',
    data(){
        return{
            dep_id:this.$route.params.id,  //  Department receiving the delivery of the previous page id
            empList:[],
            depList:[],// Get department information 
            updateObj:{ // Updated data 
                id:0,
                emp_name:'',
                job:'',
                salary:'',
                department:1,
            },
            addObj:{ // Added data 
                emp_name:'',
                job:'',
                salary:'',
                department:1,
            }
        }
    },
    mounted(){
        this.getEmpData();// Get employee information 
        this.getDepData();// Get department information 
    },
    methods:{
        //  According to the Department id obtain   Employee information of the Department 
        getEmpData(){
            // url : 'emp2/'+ department id+'/';
            let url = 'emp2/'+this.dep_id+'/';
            get(url).then((resp) => {
                console.log(resp);
                this.empList = resp.data // Keep employee information 
            }).catch((err) => {
                console.log(err);
            });
        },
        //  Get all department information 
        getDepData(){
            get('dep/').then((resp) => {
                console.log(resp);
                this.depList = resp.data // Save department information 
            }).catch((err) => {
                console.log(err);
            });
        },
        //  According to the staff id Delete employee information 
        remove(id){
            // url: 'emp/' +  staff id + '/' 
            let url = 'emp/' + id + '/' ;
            del(url).then((resp) => {
                console.log(resp);
                this.getEmpData();// Get the latest data 
            }).catch((err) => {
                console.log(err);
            });
        },
        // Synchronize the data to be updated in the form 
        getData(i){
            this.updateObj = this.empList[i];
        },
        //  Update employee information 
        update(){
            // url : 'emp/' +  staff id + '/' 
            //  Need to submit updated employee information 
            let url = 'emp/' + this.updateObj.id + '/';
            put(url, this.updateObj).then((resp) => {
                console.log(resp);
                this.getEmpData();// Get the latest data 
            }).catch((err) => {
                console.log(err);
            });
        },
        //  Add employee information 
        add(){
            // url: 'emp/'
            //  You need to submit the data to be added 
            post('emp/', this.addObj).then((resp) => {
                console.log(resp);
                this.getEmpData();// Get the latest data 
            }).catch((err) => {
                console.log(err);
            });
        }
    }  
}
</script>

<style>
</style>