django模板语法+Element-Plus+Axios

静态文件配置说明文档

项目概述

本项目是一个基于 Django 6.0.5 的前后端不分离架构，前端使用 Vue 3 和 Element Plus 组件库。静态文件通过 npm 安装依赖后，手动复制到 static 目录 的方式引入，在 Django 模板中直接使用模板语法调用。

静态文件清单

项目中的静态文件位于 static/ 目录下，具体文件如下：

文件路径 文件名 版本 类型 用途
static/css/ element-plus.css 2.14.1 CSS Element Plus 组件样式文件
static/js/ vue.global.js 3.x JavaScript Vue 3 全局构建版本
static/js/ element-plus.full.js 2.14.1 JavaScript Element Plus 完整构建版本
static/js/ axios.min.js ^1.17.0 JavaScript HTTP 请求库（压缩版）

安装与文件复制流程

1. 初始化 npm 项目

npm init -y

2. 安装依赖

根据 package.json，项目依赖如下：

npm install element-plus@2.14.1 axios@1.17.0

3. 从 node_modules 复制文件到 static 目录

安装完成后，从 node_modules 目录复制以下文件：

Vue 3

# Vue 未在 package.json 中，需额外安装或从 CDN 下载
npm install vue@3
cp node_modules/vue/dist/vue.global.js static/js/

Element Plus

cp node_modules/element-plus/dist/index.full.js static/js/element-plus.full.js
cp node_modules/element-plus/dist/index.css static/css/element-plus.css

Axios

cp node_modules/axios/dist/axios.min.js static/js/axios.min.js

文件来源路径说明：

源文件路径（node_modules） 目标文件路径（static）
node_modules/vue/dist/vue.global.js static/js/vue.global.js
node_modules/element-plus/dist/index.full.js static/js/element-plus.full.js
node_modules/element-plus/dist/index.css static/css/element-plus.css
node_modules/axios/dist/axios.min.js static/js/axios.min.js

Django 静态文件配置

配置文件

在 django_temp_demo/settings.py 中配置：

STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / "static"]

模板中引入方式

在 templates/base.html 中使用 Django 模板标签 {% static %} 引入：

{% load static %}

<!-- CSS 引入（放置在 <head> 标签内） -->
<link rel="stylesheet" href="{% static 'css/element-plus.css' %}">

<!-- JS 引入（放置在 </body> 标签前） -->
<script src="{% static 'js/vue.global.js' %}"></script>
<script src="{% static 'js/element-plus.full.js' %}"></script>
<script src="{% static 'js/axios.min.js' %}"></script>

引入顺序说明：

  1. 先引入 CSS 文件（确保样式在组件渲染前加载）
  2. 先引入 Vue，再引入 Element Plus（Element Plus 依赖 Vue）
  3. Axios 放在最后（按需使用）

Vue 3 + Element Plus 在 Django 模板中的使用方法

基础用法示例

在子模板中（如 templates/index.html）使用：

{% extends 'base.html' %}

{% block content %}
    <div id="app">
        <!-- Element Plus 组件 -->
        <el-button type="primary">主要按钮</el-button>
        <el-input v-model="message" placeholder="请输入内容"></el-input>
        
        <!-- Vue 数据绑定 -->
        <p>{{ message }}</p>
    </div>
{% endblock %}

{% block script %}
    <script>
        // 创建 Vue 应用
        const { createApp } = Vue
        
        const app = createApp({
            data() {
                return {
                    message: ''
                }
            },
            methods: {
                handleClick() {
                    this.$message.success('按钮被点击！')
                }
            },
            mounted() {
                console.log('Vue 应用已挂载')
            }
        })
        
        // 注册 Element Plus
        app.use(ElementPlus)
        
        // 挂载到 DOM 元素
        app.mount('#app')
    </script>
{% endblock %}

在模板中使用 Django 变量

可以通过 Django 模板语法将后端数据传递给 Vue：

{% extends 'base.html' %}

{% block content %}
    <div id="app" data-init-data="{{ initial_data|safe }}">
        <el-card title="用户信息">
            <p>用户名：{{ username }}</p>
            <p>邮箱：{{ email }}</p>
        </el-card>
    </div>
{% endblock %}

{% block script %}
    <script>
        const { createApp } = Vue
        
        createApp({
            data() {
                return {
                    // 从 Django 模板获取初始数据
                    initialData: JSON.parse(document.getElementById('app').dataset.initData)
                }
            }
        })
        .use(ElementPlus)
        .mount('#app')
    </script>
{% endblock %}

全局对象说明

通过静态文件引入后，以下全局对象可用：

对象名 说明
Vue Vue 3 主对象，包含 createApp、ref、reactive 等 API
ElementPlus Element Plus 插件对象，通过 app.use(ElementPlus) 注册
axios Axios HTTP 客户端，用于发送请求

前后端交互示例

使用 Axios 发起请求

{% extends 'base.html' %}

{% block content %}
    <div id="app">
        <el-button @click="fetchData" type="primary">获取数据</el-button>
        <el-table :data="tableData" border>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
        </el-table>
    </div>
{% endblock %}

{% block script %}
    <script>
        const { createApp, ref } = Vue
        
        createApp({
            setup() {
                const tableData = ref([])
                
                const fetchData = async () => {
                    try {
                        const response = await axios.get('/api/users/')
                        tableData.value = response.data
                    } catch (error) {
                        console.error('请求失败:', error)
                        ElMessage.error('获取数据失败')
                    }
                }
                
                return {
                    tableData,
                    fetchData
                }
            }
        })
        .use(ElementPlus)
        .mount('#app')
    </script>
{% endblock %}

注意事项

  1. 版本一致性：Element Plus 和 Vue 的版本需要匹配，当前项目使用 Vue 3.x + Element Plus 2.14.1
  2. 文件更新：当升级依赖版本时，需要重新从 node_modules 复制最新文件到 static 目录
  3. 缓存问题：静态文件修改后可能存在浏览器缓存，可通过添加版本号或清理缓存解决
  4. 开发模式：此方式适合前后端不分离的 Django 项目，便于快速开发

相关配置文件

文件路径 说明
django_temp_demo/settings.py Django 静态文件配置
templates/base.html HTML 模板基础文件
package.json npm 依赖配置
static/js/ JavaScript 文件目录
static/css/ CSS 文件目录

更新静态文件的步骤

当需要升级依赖版本时：

# 1. 更新 npm 依赖
npm update element-plus axios vue

# 2. 删除旧的静态文件
rm -rf static/js/* static/css/*

# 3. 重新复制文件
cp node_modules/vue/dist/vue.global.js static/js/
cp node_modules/element-plus/dist/index.full.js static/js/element-plus.full.js
cp node_modules/element-plus/dist/index.css static/css/element-plus.css
cp node_modules/axios/dist/axios.min.js static/js/axios.min.js
posted @ 2026-06-03 23:30  伟仔技术博客  阅读(15)  评论(0)    收藏  举报