# python_django_vue_simpleSystem

**Repository Path**: xiyg_admin/python_django_vue_simple-system

## Basic Information

- **Project Name**: python_django_vue_simpleSystem
- **Description**: No description available
- **Primary Language**: Python
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-05
- **Last Updated**: 2024-12-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Python, Django, Vue, Vuex, Axios

## README

# python_django_vue_simpleSystem

要实现一个基于Python、Vue 3、MySQL、Django、Vue Router、Axios和Element UI的管理系统，包含登录、注册、学生增删改查、班级增删改查、学校增删改查、左边菜单栏和右边内容区域的功能，可以按照以下步骤进行开发。

### 1. 后端开发（Django + MySQL）
#### 1.1 安装依赖
`pip install django djangorestframework mysqlclient`

#### 1.2 创建Django项目
`django-admin startproject school_management`
`cd school_management`

#### 1.3 创建Django应用

```
python manage.py startapp users
python manage.py startapp students
python manage.py startapp classes
python manage.py startapp schools
```

#### 1.4 配置数据库
在school_management/settings.py中配置MySQL数据库：


```
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'school_management',
        'USER': 'your_username',
        'PASSWORD': 'your_password',
        'HOST': 'localhost',
        'PORT': '3306',
    }
}
```

#### 1.5 定义模型
在users/models.py中定义用户模型：

```
from django.db import models
from django.contrib.auth.models import AbstractUser

class User(AbstractUser):
    pass
```

在students/models.py中定义学生模型：


```
from django.db import models

class Student(models.Model):
    name = models.CharField(max_length=100)
    age = models.IntegerField()
    class_id = models.ForeignKey('classes.Class', on_delete=models.CASCADE)
```

在classes/models.py中定义班级模型：


```
from django.db import models

class Class(models.Model):
    name = models.CharField(max_length=100)
    school_id = models.ForeignKey('schools.School', on_delete=models.CASCADE)
```

在schools/models.py中定义学校模型：


```
from django.db import models

class School(models.Model):
    name = models.CharField(max_length=100)
```

#### 1.6 创建序列化器
在users/serializers.py中定义用户序列化器：


```
from rest_framework import serializers
from .models import User

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ['username', 'password']
```

在students/serializers.py中定义学生序列化器：

```
from rest_framework import serializers
from .models import Student

class StudentSerializer(serializers.ModelSerializer):
    class Meta:
        model = Student
        fields = '__all__'
```


在classes/serializers.py中定义班级序列化器：


```
from rest_framework import serializers
from .models import Class

class ClassSerializer(serializers.ModelSerializer):
    class Meta:
        model = Class
        fields = '__all__'
```


在schools/serializers.py中定义学校序列化器：


```
from rest_framework import serializers
from .models import School

class SchoolSerializer(serializers.ModelSerializer):
    class Meta:
        model = School
        fields = '__all__'
```


#### 1.7 创建视图
在users/views.py中定义用户视图：


```
from rest_framework import viewsets
from .models import User
from .serializers import UserSerializer

class UserViewSet(viewsets.ModelViewSet):
    queryset = User.objects.all()
    serializer_class = UserSerializer
```

在students/views.py中定义学生视图：


```
from rest_framework import viewsets
from .models import Student
from .serializers import StudentSerializer

class StudentViewSet(viewsets.ModelViewSet):
    queryset = Student.objects.all()
    serializer_class = StudentSerializer
```

在classes/views.py中定义班级视图：


```
from rest_framework import viewsets
from .models import Class
from .serializers import ClassSerializer

class ClassViewSet(viewsets.ModelViewSet):
    queryset = Class.objects.all()
    serializer_class = ClassSerializer
```

在schools/views.py中定义学校视图：


```
from rest_framework import viewsets
from .models import School
from .serializers import SchoolSerializer

class SchoolViewSet(viewsets.ModelViewSet):
    queryset = School.objects.all()
    serializer_class = SchoolSerializer
```


#### 1.8 配置URL
在school_management/urls.py中配置URL：


```
from django.contrib import admin
from django.urls import path, include
from rest_framework import routers
from users.views import UserViewSet
from students.views import StudentViewSet
from classes.views import ClassViewSet
from schools.views import SchoolViewSet

router = routers.DefaultRouter()
router.register(r'users', UserViewSet)
router.register(r'students', StudentViewSet)
router.register(r'classes', ClassViewSet)
router.register(r'schools', SchoolViewSet)

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

### 2. 前端开发（Vue 3 + Vue Router + Axios + Element UI）
#### 2.1 创建Vue项目

```
npm install -g @vue/cli
vue create school-management-frontend
cd school-management-frontend
```

#### 2.2 安装依赖
`npm install vue-router axios element-plus`

#### 2.3 配置Vue Router
在src/router/index.js中配置路由：


```
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Register from '../views/Register.vue'
import Dashboard from '../views/Dashboard.vue'
import Students from '../views/Students.vue'
import Classes from '../views/Classes.vue'
import Schools from '../views/Schools.vue'

const routes = [
  { path: '/login', component: Login },
  { path: '/register', component: Register },
  { path: '/dashboard', component: Dashboard, children: [
    { path: 'students', component: Students },
    { path: 'classes', component: Classes },
    { path: 'schools', component: Schools },
  ]},
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router
```

#### 2.4 创建组件
在src/views/Login.vue中创建登录组件：

```
<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="Username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="Password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="login">Login</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
    }
  },
  methods: {
    async login() {
      try {
        const response = await axios.post('/api/login/', this.form)
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        console.error(error)
      }
    },
  },
}
</script>
```

在src/views/Register.vue中创建注册组件：

```

<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="Username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="Password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="register">Register</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
    }
  },
  methods: {
    async register() {
      try {
        await axios.post('/api/register/', this.form)
        this.$router.push('/login')
      } catch (error) {
        console.error(error)
      }
    },
  },
}
</script>
```

在src/views/Dashboard.vue中创建仪表盘组件：


```
<template>
  <el-container>
    <el-aside width="200px">
      <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">
        <el-menu-item index="students">Students</el-menu-item>
        <el-menu-item index="classes">Classes</el-menu-item>
        <el-menu-item index="schools">Schools</el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 'students',
    }
  },
  methods: {
    handleSelect(index) {
      this.$router.push(`/dashboard/${index}`)
    },
  },
}
</script>
```

在src/views/Students.vue中创建学生管理组件：


```
<template>
  <el-table :data="students">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column label="Actions">
      <template #default="scope">
        <el-button @click="editStudent(scope.row)">Edit</el-button>
        <el-button type="danger" @click="deleteStudent(scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      students: [],
    }
  },
  async created() {
    const response = await axios.get('/api/students/')
    this.students = response.data
  },
  methods: {
    async editStudent(student) {
      // 编辑学生逻辑
    },
    async deleteStudent(student) {
      await axios.delete(`/api/students/${student.id}/`)
      this.students = this.students.filter(s => s.id !== student.id)
    },
  },
}
</script>
```

在src/views/Classes.vue中创建班级管理组件：

```

<template>
  <el-table :data="classes">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column label="Actions">
      <template #default="scope">
        <el-button @click="editClass(scope.row)">Edit</el-button>
        <el-button type="danger" @click="deleteClass(scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      classes: [],
    }
  },
  async created() {
    const response = await axios.get('/api/classes/')
    this.classes = response.data
  },
  methods: {
    async editClass(cls) {
      // 编辑班级逻辑
    },
    async deleteClass(cls) {
      await axios.delete(`/api/classes/${cls.id}/`)
      this.classes = this.classes.filter(c => c.id !== cls.id)
    },
  },
}
</script>
```

在src/views/Schools.vue中创建学校管理组件：

```

<template>
  <el-table :data="schools">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column label="Actions">
      <template #default="scope">
        <el-button @click="editSchool(scope.row)">Edit</el-button>
        <el-button type="danger" @click="deleteSchool(scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      schools: [],
    }
  },
  async created() {
    const response = await axios.get('/api/schools/')
    this.schools = response.data
  },
  methods: {
    async editSchool(school) {
      // 编辑学校逻辑
    },
    async deleteSchool(school) {
      await axios.delete(`/api/schools/${school.id}/`)
      this.schools = this.schools.filter(s => s.id !== school.id)
    },
  },
}
</script>
```

### 3. 运行项目
#### 3.1 同步数据库创建表结构

- `python manage.py makemigrations`
- `python manage.py migrate`


#### 3.2 启动Django后端
`python manage.py runserver`
#### 3.3 启动Vue前端
`npm run serve`

### 4. 总结
通过以上步骤，你可以实现一个基于Python、Vue 3、MySQL、Django、Vue Router、Axios和Element UI的管理系统，包含登录、注册、学生增删改查、班级增删改查、学校增删改查、左边菜单栏和右边内容区域的功能。你可以根据需求进一步扩展和优化系统。