Django Vue3.2 Online Exam

https://github.com/xingxingzaixian/django-vue3.2-online-exam
Admin
An online examination system built with Django and Vue3.2, featuring support for various question...
Tokens:8,964
Snippets:30
Trust Score:8.7
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Frontend Setup and Start

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/README.md

These commands are used to set up the Node.js environment for the frontend, install dependencies using Yarn, and start the Vue.js development server.

```javascript
cd frontend

yarn install

yarn run dev
```

--------------------------------

### Vue 3 Script Setup Example

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/frontend/README.md

Demonstrates the usage of Vue 3's <script setup> syntax within Single File Components (SFCs). This feature simplifies component logic and improves performance. Refer to the official Vue 3 documentation for more details.

```vue
<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">
    Count is: {{ count }}
  </button>
</template>
```

--------------------------------

### Backend Environment Setup and Database Migration

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/README.md

These commands are used to set up the Python environment for the backend, install dependencies, generate database migration files, and apply them to the database. It requires a MySQL database named 'exam' to be configured in Django's settings.

```python
cd backend

pipenv install

pipenv run makemigrations

pipenv run migrate
```

--------------------------------

### Start Backend Server

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/README.md

This command starts the Django backend development server. After execution, the API documentation can be accessed at http://localhost:9527/docs.

```python
pipenv run dev
```

--------------------------------

### VSCode IDE Setup for Vue 3

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/frontend/README.md

Recommended IDE setup for developing Vue 3 projects with Typescript. This involves using VSCode with the Volar extension, which provides enhanced features like improved type checking and IntelliSense for Vue SFCs.

```markdown
- VSCode
- Volar extension
```

--------------------------------

### TypeScript Type Support for .vue Imports

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/frontend/README.md

Explains how to enable TypeScript type support for `.vue` imports in VSCode using the Volar plugin. This allows for better type checking of component props when using manual `h(...)` calls, improving development experience and reducing errors.

```markdown
To enable Volar's `.vue` type support plugin:
1. Open VSCode Command Palette.
2. Run `Volar: Switch TS Plugin on/off`.
```

--------------------------------

### Initialize Django Project

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/backend/README.md

Command to create a new Django project.

```shell
django-admin startproject backend
```

--------------------------------

### GitPage Frontend Deployment

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/UPDATE.md

This entry describes the process of deploying the frontend application using GitHub Pages. This typically involves configuring the build process to output static files and setting up the repository for hosting.

```Bash
# Example commands for building and deploying to GitHub Pages

# 1. Build the Vue.js application for production
npm run build
# or
yarn build

# 2. Configure GitHub Pages (usually via repository settings on GitHub.com)
#    - Go to your repository settings.
#    - Navigate to the "Pages" section.
#    - Choose the branch to deploy from (e.g., 'main' or 'gh-pages').
#    - Specify the folder (usually '/ (root)' or '/docs').

# 3. If deploying from a different branch (e.g., gh-pages):
#    - Create a new branch for deployment:
#      git checkout -b gh-pages
#    - Copy the build output to the root of this branch (or a docs folder):
#      cp -r dist/* . 
#      # If deploying to a subfolder, adjust accordingly.
#    - Commit and push the new branch:
#      git add .
#      git commit -m "Deploy frontend to GitHub Pages"
#      git push origin gh-pages

# Alternatively, using a tool like 'gh-pages' npm package:
# npm install gh-pages --save-dev
# 
# Add to package.json scripts:
# "scripts": {
#   "deploy": "gh-pages -d dist"
# }
# 
# Then run:
# npm run deploy

```

--------------------------------

### Clone Project Repository

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/README.md

This command clones the project's Git repository to your local machine, allowing you to access the source code.

```shell
git clone git@github.com:xingxingzaixian/django-vue3.2-online-exam.git
```

--------------------------------

### Django Settings for Database Router

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/backend/README.md

Configuration in Django's settings.py to enable the custom database router.

```python
DATABASE_ROUTERS = ['backend.router.CustomRouter']
```

--------------------------------

### Loguru Logging Configuration

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/backend/README.md

Configures the loguru logger to write logs to separate files based on severity (INFO, WARNING, ERROR). It includes log rotation, retention, and compression settings.

```python
# 日志配置
import time
from pathlib import Path
from loguru import logger

root_path = Path(__file__).parent.parent

# 定位到log日志文件
log_path = root_path.joinpath('logs')
log_path.mkdir(parents=True, exist_ok=True)

log_path_info = log_path.joinpath(f'{time.strftime("%Y-%m-%d")}_info.log')
log_path_warning = log_path.joinpath(f'{time.strftime("%Y-%m-%d")}_warning.log')
log_path_error = log_path.joinpath(f'{time.strftime("%Y-%m-%d")}_error.log')

# 日志简单配置 文件区分不同级别的日志
logger.add(log_path_info,
           rotation="10 MB",
           encoding='utf-8',
           enqueue=True,
           level='INFO',
           retention=5,
           compression='zip')

logger.add(log_path_warning,
           rotation="10 MB",
           encoding='utf-8',
           enqueue=True,
           level='WARNING',
           retention=5,
           compression='zip')

logger.add(log_path_error,
           rotation="10 MB",
           encoding='utf-8',
           enqueue=True,
           level='ERROR',
           retention=5,
           compression='zip')

__all__ = ["logger"]

```

--------------------------------

### Using Loguru Logger in Django Views

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/backend/README.md

Demonstrates how to import and use the configured loguru logger within a Django view to record informational messages.

```python
from utils.logger import logger
from rest_framework.views import APIView
# ... other imports


class RegisterView(APIView):
    authentication_classes = []

    def post(self, request):
        # ... your view logic
        username = 'test_user' # Example username
        logger.info('用户: %s 注册成功', username)
        # ... rest of your view logic
        pass

```

--------------------------------

### Custom Database Router

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/backend/README.md

Python code for a custom Django database router to manage multiple databases based on app labels.

```python
class CustomRouter:
    def db_for_read(self, model, **hints):
        if model._meta.app_label in settings.DATABASE_APPS_MAPPING:
            return settings.DATABASE_APPS_MAPPING[model._meta.app_label]

    def db_for_write(self, model, **hints):
        if model._meta.app_label in settings.DATABASE_APPS_MAPPING:
            return settings.DATABASE_APPS_MAPPING[model._meta.app_label]

    def allow_relation(self, obj1, obj2, **hints):
        db_obj1 = settings.DATABASE_APPS_MAPPING.get(obj1._meta.app_label)
        db_obj2 = settings.DATABASE_APPS_MAPPING.get(obj2._meta.app_label)
        if db_obj1 and db_obj2:
            if db_obj1 == db_obj2:
                return True
            else:
                return False

    def allow_syncdb(self, db, model):
        if db in settings.DATABASE_APPS_MAPPING.values():
            return settings.DATABASE_APPS_MAPPING.get(model._meta.app_label) == db
        elif model._meta.app_label in settings.DATABASE_APPS_MAPPING:
            return False

    def allow_migrate(self, db, app_label, model=None, **hints):
        """
        Make sure the auth app only appears in the 'auth_db'
        database.
        """
        if db in settings.DATABASE_APPS_MAPPING.values():
            return settings.DATABASE_APPS_MAPPING.get(app_label) == db
        elif app_label in settings.DATABASE_APPS_MAPPING:
            return False
        return None
```

--------------------------------

### Menu Styling and LESS Variable Integration

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/UPDATE.md

This entry covers modifications to menu styling and the integration of LESS variables into JavaScript for dynamic theming or configuration. This allows for more flexible and maintainable styling.

```Vue.js
// Conceptual example of using LESS variables in Vue component styles
<template>
  <div class="menu-item">Menu Item</div>
</template>

<style lang="scss">
@import './variables.scss'; // Import LESS variables compiled to SCSS or directly if supported

.menu-item {
  background-color: $primary-color; // Using a LESS variable
  color: white;
  padding: 10px;
}
</style>

// Conceptual example of exporting LESS variables to JS
// styles.less
@menu-background: #f0f0f0;

// build process or plugin would extract these
// Example: window.__LESS_VARS__ = { 'menu-background': '#f0f0f0' };

// In a Vue component's script section
<script>
import { computed } from 'vue';

export default {
  setup() {
    const menuStyle = computed(() => ({
      backgroundColor: window.__LESS_VARS__ ? window.__LESS_VARS__['menu-background'] : '#f0f0f0'
    }));

    return { menuStyle };
  }
}
</script>
```

--------------------------------

### Django Settings for Custom Authentication Backend

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/backend/README.md

Specifies the custom `UserBackend` as the authentication backend for the Django project.

```django
AUTHENTICATION_BACKENDS = ['utils.user_backend.UserBackend']

```

--------------------------------

### Element-Plus UI Enhancements and Fixes

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/UPDATE.md

This section details modifications related to the Element-Plus UI library, including theme color customization, fixing style overrides for button controls, and resolving build exceptions.

```Vue.js
// Example of modifying Element-Plus theme variables (conceptual)
// In a SCSS file or within a <style lang="scss">
$--color-primary: #409EFF; // Example: Changing primary color

// Example of fixing button style overrides (conceptual)
.custom-button-class .el-button {
  // Custom styles here
}

// Build exception fix would be in project configuration or build scripts.
```

--------------------------------

### Frontend Component Development

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/UPDATE.md

This snippet covers the development of reusable frontend components for the online exam application. It includes creating a card component for exam display and an image editing component.

```Vue.js
// Exam display card component
<template>
  <div class="exam-card">
    <h3>{{ exam.title }}</h3>
    <p>{{ exam.description }}</p>
    </div>
</template>

<script>
export default {
  props: {
    exam: Object
  }
}
</script>

// Image editing component (conceptual)
<template>
  <div class="image-editor">
    <img :src="imageUrl" alt="Editable Image" />
    </div>
</template>

<script>
export default {
  props: {
    imageUrl: String
  }
}
</script>
```

--------------------------------

### CORS Configuration for Django

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/backend/README.md

Settings in Django's settings.py to enable and configure Cross-Origin Resource Sharing (CORS) using the django-cors-headers library.

```python
INSTALLED_APPS = [
  ...
  'corsheaders'
  ...
]

MIDDLEWARE = [
  ...
  'corsheaders.middleware.CorsMiddleware', # 注意必须放在CommonMiddleware前面
  ...
]

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = ['*']

CORS_ALLOW_HEADERS = ['*']
```

--------------------------------

### General Frontend Component Development

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/UPDATE.md

This entry highlights the encapsulation of common UI elements into generic components for better code reusability and maintainability in the Vue.js frontend. Specifically, 'Table' and 'Tool' components were created.

```Vue.js
// Generic Table Component (conceptual)
<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rowIndex) in data" :key="rowIndex">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    headers: Array,
    data: Array
  }
}
</script>

// Generic Tool Component (conceptual)
<template>
  <div class="tool-container">
    <slot></slot>
  </div>
</template>

<script>
export default {}
</script>
```

--------------------------------

### Backend API Documentation Update

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/UPDATE.md

This entry details the modification of backend API documentation using drf-spectacular. It implies changes to how API endpoints are documented and exposed, likely for better developer experience and integration.

```APIDOC
Backend API Documentation Update:
  - Modified backend API documentation to use drf-spectacular.
  - This change facilitates automatic generation of interactive API documentation.
  - Benefits include improved API discoverability and easier integration for frontend developers.
```

--------------------------------

### Exam and Question Management Features

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/UPDATE.md

This section details the implementation of core functionalities for managing exams and questions, including creating, updating, deleting exams, and creating/updating/deleting question options. It also covers the display of exam lists and question selection interfaces.

```Vue.js
// Conceptual example for creating/updating/deleting exam (using a hypothetical API service)
<script>
import ExamService from '@/services/ExamService';

export default {
  methods: {
    async createExam(examData) {
      try {
        const response = await ExamService.create(examData);
        console.log('Exam created:', response.data);
      } catch (error) {
        console.error('Error creating exam:', error);
      }
    },
    async updateExam(id, examData) {
      try {
        const response = await ExamService.update(id, examData);
        console.log('Exam updated:', response.data);
      } catch (error) {
        console.error('Error updating exam:', error);
      }
    },
    async deleteExam(id) {
      try {
        await ExamService.delete(id);
        console.log('Exam deleted');
      } catch (error) {
        console.error('Error deleting exam:', error);
      }
    }
  }
}
</script>

// Conceptual example for question options management
<script>
import QuestionService from '@/services/QuestionService';

export default {
  methods: {
    async createQuestionOption(questionId, optionData) {
      try {
        const response = await QuestionService.addOption(questionId, optionData);
        console.log('Option created:', response.data);
      } catch (error) {
        console.error('Error creating option:', error);
      }
    },
    async updateQuestionOption(optionId, optionData) {
      try {
        const response = await QuestionService.updateOption(optionId, optionData);
        console.log('Option updated:', response.data);
      } catch (error) {
        console.error('Error updating option:', error);
      }
    },
    async deleteQuestionOption(optionId) {
      try {
        await QuestionService.deleteOption(optionId);
        console.log('Option deleted');
      } catch (error) {
        console.error('Error deleting option:', error);
      }
    }
  }
}
</script>

// Conceptual example for displaying exam list
<template>
  <div>
    <h2>Exams</h2>
    <ul>
      <li v-for="exam in exams" :key="exam.id">
        {{ exam.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import ExamService from '@/services/ExamService';

export default {
  data() {
    return {
      exams: []
    };
  },
  async created() {
    try {
      const response = await ExamService.getAll();
      this.exams = response.data;
    } catch (error) {
      console.error('Error fetching exams:', error);
    }
  }
}
</script>
```

--------------------------------

### Django Settings for Custom User Model

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/backend/README.md

Configuration in Django's settings.py to specify the custom user model.

```python
INSTALLED_APPS = [
  ...
  'users'
]

AUTH_USER_MODEL = 'users.UserInfo'
```

--------------------------------

### JWT Utility Functions

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/backend/README.md

A utility class for generating and validating JWT tokens. It uses `python-jose` for encoding and decoding, integrating with Django settings for secret key and algorithm.

```python
import time
from jose import jwt
from django.conf import settings


class JwtUtil:
    @staticmethod
    def gen_jwt_token(user):
        to_encode = {
            'username': user.username,
            'telephone': user.telephone,
            'exp': time.time() + 24 * 3600,
        }

        encoded_jwt = jwt.encode(to_encode, settings.SECRET_KEY, algorithm=settings.ALGORITHM)
        return encoded_jwt

    @staticmethod
    def check_jwt_token(value):
        playload = {}
        try:
            playload = jwt.decode(value, settings.SECRET_KEY, algorithms=[settings.ALGORITHM])
        except Exception as e:
            # Assuming logger is configured elsewhere or a default is used
            # logger.exception(e) # Uncomment if logger is available
            pass # Placeholder for actual logging

        return playload

```

--------------------------------

### Dynamic Menu and Breadcrumb Generation

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/UPDATE.md

This entry describes the implementation of dynamic menu generation based on user roles or permissions, and the creation of dynamic breadcrumbs for improved navigation within the application. It also mentions exporting LESS variables to JavaScript.

```Vue.js
// Conceptual example for dynamic menu generation
<template>
  <nav>
    <ul v-for="menuItem in dynamicMenu" :key="menuItem.id">
      <li>{{ menuItem.name }}</li>
    </ul>
  </nav>
</template>

<script>
import { computed } from 'vue';
import menuData from './menuConfig'; // Assume this holds menu structure

export default {
  setup() {
    // Logic to determine which menu items to show based on user permissions
    const dynamicMenu = computed(() => {
      // Example: Filter menuData based on user role
      return menuData.filter(item => item.roles.includes('admin'));
    });

    return { dynamicMenu };
  }
}
</script>

// Conceptual example for dynamic breadcrumb generation
<template>
  <el-breadcrumb separator=">">
    <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index" :to="{ path: item.path }">
      {{ item.meta.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const breadcrumbs = ref([]);

    const generateBreadcrumbs = (currentRoute) => {
      const matched = currentRoute.matched.filter(item => item.meta && item.meta.title);
      breadcrumbs.value = matched.map(item => ({
        path: item.path,
        meta: item.meta
      }));
    };

    watch(() => route.fullPath, (newPath) => {
      generateBreadcrumbs(route);
    }, { immediate: true });

    return { breadcrumbs };
  }
}
</script>

// Example of exporting LESS variables to JS (conceptual)
// styles.less
@primary-color: #ff0000;

// main.js or a dedicated file
import './styles.less';
import { get } from 'lodash'; // Assuming lodash is used for deep access

// Accessing the variable might require a build tool setup that injects variables
// or a specific pattern like CSS Custom Properties if using modern CSS.
// A common approach is to use a plugin that extracts variables.
// For simplicity, let's assume a mechanism exists to access them.
// const primaryColor = get(window.__LESS_VARIABLES__, 'primary-color');
// console.log(primaryColor); // Output: #ff0000
```

--------------------------------

### Custom User Authentication Backend (JWT)

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/backend/README.md

A custom Django authentication backend that authenticates users by username or telephone, checks their password, and generates a JWT token upon successful login.

```python
from django.contrib.auth import backends
from django.db.models import Q
from users.models import UserInfo
from utils.jwt_util import JwtUtil


class UserBackend(backends.ModelBackend):
    def authenticate(self, request, username=None, password=None, **kwargs):
        try:
            user = UserInfo.objects.get(Q(username=username) | Q(telephone=username))
            if user.check_password(password):
                jwt = JwtUtil()
                token = jwt.gen_jwt_token(user)
                # Assuming UserInfo model has a 'token' field or similar mechanism
                # user.token = token 
                return user
        except UserInfo.DoesNotExist:
            return None
        except Exception as e:
            # Handle other potential exceptions during authentication
            return None
        return None

```

--------------------------------

### JWT Authentication Implementation (Django)

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/backend/README.md

Provides a custom Django REST Framework authentication class using JWT for stateless authentication. It checks for an 'HTTP_ACCESS_TOKEN' header, validates the token, and retrieves the user.

```python
import time
from django.db.models import Q
from rest_framework.authentication import BaseAuthentication
from rest_framework.exceptions import AuthenticationFailed
from users.models import UserInfo
from utils.auth.jwt_util import JwtUtil
from threading import local

_thread_local = local()


class JwtAuthentication(BaseAuthentication):
    def authenticate(self, request):
        access_token = request.META.get('HTTP_ACCESS_TOKEN', None)
        if access_token:
            jwt = JwtUtil()
            data = jwt.check_jwt_token(access_token)
            if data:
                username = data.get('username')
                telephone = data.get('telephone')
                exp = data.get('exp')
                if time.time() > exp:
                    raise AuthenticationFailed('authentication time out')

                try:
                    user = UserInfo.objects.get(Q(username=username) | Q(telephone=telephone))
                    _thread_local.user = user
                except (UserInfo.DoesNotExist, UserInfo.MultipleObjectsReturned) as e:
                    return (None, None)
                else:
                    return (user, None)

        raise AuthenticationFailed('authentication failed')


def get_current_user():
    return getattr(_thread_local, 'user', None)

```

--------------------------------

### Custom User Model

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/backend/README.md

Definition of a custom user model inheriting from Django's AbstractUser, including fields like uid, nickname, and telephone.

```python
from django.contrib.auth.models import AbstractUser
from django.db import models
from uuid import uuid4


# Create your models here.

class UserInfo(AbstractUser):
    uid = models.CharField(max_length=36, default=uuid4, primary_key=True)
    nickname = models.CharField(max_length=32, verbose_name='昵称')
    telephone = models.CharField(max_length=11, blank=True, null=True, unique=True, verbose_name='手机号码')
    create_time = models.DateTimeField(auto_now_add=True, verbose_name='创建时间')

    class Meta:
        db_table = 'tbl_user'
```

--------------------------------

### Form Validation Implementation

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/UPDATE.md

This entry indicates the addition of form validation logic to the project, likely to ensure data integrity and improve user experience by providing immediate feedback on input errors.

```JavaScript
// Conceptual example using a validation library like VeeValidate or built-in browser validation
// Example using HTML5 validation attributes:
<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="formData.name" required minlength="3">
    <span v-if="!formData.name">Name is required.</span>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: ''
      }
    };
  },
  methods: {
    submitForm() {
      // Form submission logic if validation passes
      console.log('Form submitted:', this.formData);
    }
  }
}
</script>

// Example using a Vue validation plugin (e.g., VeeValidate):
// <template>
//   <VForm @submit="onSubmit">
//     <Field name="email" rules="required|email" v-model="email" />
//     <ErrorMessage name="email" />
//     <button type="submit">Submit</button>
//   </VForm>
// </template>
// 
// <script>
// import { Field, Form as VForm, ErrorMessage } from 'vee-validate';
// import * as yup from 'yup';
// 
// export default {
//   components: { Field, VForm, ErrorMessage },
//   setup() {
//     const schema = yup.object({
//       email: yup.string().required().email(),
//     });
// 
//     const onSubmit = (values) => {
//       console.log('Form submitted:', values);
//     };
// 
//     return {
//       schema,
//       onSubmit
//     };
//   }
// }
// </script>
```

--------------------------------

### Django REST Framework Settings for JWT

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/backend/README.md

Configures Django REST Framework to use the custom JWT authentication class by default and sets datetime formats.

```django
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'utils.authentications.JwtAuthentication'
    ],
    'DATETIME_FORMAT': '%Y-%m-%d %H:%M:%S',
    'DATETIME_INPUT_FORMATS': '%Y-%m-%d %H:%M:%S'
}

```

--------------------------------

### Frontend API Endpoint Address Modification

Source: https://github.com/xingxingzaixian/django-vue3.2-online-exam/blob/master/UPDATE.md

This entry indicates a change in the configuration of frontend API endpoint addresses. This is often done to point to a different backend environment (e.g., development, staging, production) or to update the API base URL.

```JavaScript
// Conceptual example of modifying API endpoint configuration
// Assuming an api.js or config.js file is used:

// Old configuration (example):
// const API_BASE_URL = 'http://localhost:8000/api';

// New configuration (example):
const API_BASE_URL = 'https://api.yourdomain.com/v1';

// Or if using environment variables:
// const API_BASE_URL = process.env.VUE_APP_API_URL || 'http://localhost:8000/api';

// The change would involve updating the value of API_BASE_URL or the environment variable.

// Example usage in a service:
// import axios from 'axios';
// const apiClient = axios.create({ baseURL: API_BASE_URL });
// 
// export default {
//   getExams() {
//     return apiClient.get('/exams');
//   }
// }
```
Tokens:
Raw