### 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 ``` -------------------------------- ### 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 // 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 ``` -------------------------------- ### 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