超详细Django+vue+vscode前后端分离搭建

news2025/1/18 17:13:12

文章目录

      • 一、Django后端搭建
          • 1.1 创建项目和app
          • 1.2 注册app
          • 1.3 运行项目
          • 1.4 配置mysql数据库
          • 1.5 创建数据库类
          • 1.6 使用Django后台进行数据管理
        • 2、Django rest framework配置
          • 2.1 序列化
          • 2.2 添加视图
          • 2.3 添加路由
          • 2.4 在项目根目录下的urls中加入如下代码
          • 2.5 api测试
          • 2.6 筛选和搜索功能配置
          • 2.7 分页设置
        • 3、自动生成api文档
      • 二、vue前端搭建
          • 1、前端工具及框架
          • 2、在Django项目的根目录下创建前端文件
          • 3、修改src/components/HelloWorld.vue中的代码如下
          • 4、前后端联调
          • 5、前端打包
      • 三、总结

一、Django后端搭建

1.1 创建项目和app
django-admin startproject tman
python manage.py startapp tadmin

在这里插入图片描述

1.2 注册app
INSTALLED_APPS = [
    'tadmin',
]
1.3 运行项目
python manage.py runserver
1.4 配置mysql数据库
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'taskmanage',
        'USER': 'root',
        'PASSWORD': '密码',
        'HOST': '192.168.75.132',
        'PORT': '3306',
    }
}

在项目tman项目下的init.py中加入如下代码

pip install pymysql

import pymysql
pymysql.version_info = (1, 4, 3, "final", 0)
pymysql.install_as_MySQLdb()

在这里插入图片描述

1.5 创建数据库类

在tadmin的model.py中加入如下代码

from django.db import models


class UserInfo(models.Model):
    username = models.CharField('用户名', max_length=128)
    password = models.CharField('密码', max_length=128)

    class Meta:
        verbose_name = '用户信息'
        verbose_name_plural = '用户信息'

    def __str__(self):
        return self.username

执行如下命令创建数据库

python manage.py makemigrations
python manage.py migrate
1.6 使用Django后台进行数据管理

在tadmin应用目录下加入如下代码

from django.contrib import admin
from tadmin.models import UserInfo

admin.site.site_header = '任务管理系统'


class UserInfoAdmin(admin.ModelAdmin):
    list_display = ('id', 'username', 'password',)
    list_display_links = ('username',)
    list_per_page = 50


admin.site.register(UserInfo, UserInfoAdmin)

创建后台管理员用户

python manage.py createsuperuser

在这里插入图片描述

2、Django rest framework配置

pip install djangorestframework
# 暂时不装也可以
pip install markdown
# 用于数据筛选
pip install django-filter

在settings中注册framework

INSTALLED_APPS = [
    'rest_framework',
    'django_filters',
]
2.1 序列化

在app目录下创建serializer.py，添加如下代码

from tadmin.models import UserInfo
from rest_framework import serializers


class UserInfoSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserInfo
        fields = "__all__"
2.2 添加视图

在app目录下的view.py中加入如下代码：

from rest_framework.viewsets import ModelViewSet
from tadmin.models import UserInfo
from tadmin.serializer import UserInfoSerializer
from tadmin.filter import UserInfoFilter
from django_filters.rest_framework import DjangoFilterBackend


class UserInfoViewSet(ModelViewSet):
    queryset = UserInfo.objects.all()
    serializer_class = UserInfoSerializer

    filter_class = UserInfoFilter
    filter_fields = ['username',]
    search_fields = ('username',)
2.3 添加路由

在app目录下创建urls.py文件：

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from tadmin.views import UserInfoViewSet

router = DefaultRouter()
router.register('UserInfo', UserInfoViewSet, basename='UserInfo')

urlpatterns = [
]

urlpatterns += [
    path('', include(router.urls)),
]
2.4 在项目根目录下的urls中加入如下代码
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/v1/', include('tadmin.urls')),
]
2.5 api测试

http://127.0.0.1:8000/api/v1/UserInfo/

在这里插入图片描述

2.6 筛选和搜索功能配置

在app根目录下创建filter.py文件

from django_filters import FilterSet, filters
from tadmin.models import UserInfo


class UserInfoFilter(FilterSet):
    name = filters.CharFilter(field_name='username', lookup_expr='icontains')

    class Meta:
        model = UserInfo
        fields = ('username',)

修改app目录下的view文件：在这里插入代码片

from django.shortcuts import render

from rest_framework.viewsets import ModelViewSet
from tadmin.models import UserInfo
from tadmin.serializer import UserInfoSerializer
from tadmin.filter import UserInfoFilter
from django_filters.rest_framework import DjangoFilterBackend


class UserInfoViewSet(ModelViewSet):
    queryset = UserInfo.objects.all()
    serializer_class = UserInfoSerializer

    filter_class = UserInfoFilter
    filter_fields = ['username']
    search_fields = ('username',)

在settings中注册django_filters：

INSTALLED_APPS = [
    'django_filters',
]

# REST_FRAMEWORK增加全局过滤配置  
REST_FRAMEWORK = {  
 'DEFAULT_FILTER_BACKENDS': [  
     'django_filters.rest_framework.DjangoFilterBackend',
     'rest_framework.filters.SearchFilter',
 ],  
}
# 如果可以实现模糊查询，则以下语句可省略
FILTERS_DEFAULT_LOOKUP_EXPR = 'icontains'

Django Rest Framework页面出现Filters图标说明配置成功

在这里插入图片描述

2.7 分页设置

在settings.py中做如下修改

# REST_FRAMEWORK增加全局过滤配置  
REST_FRAMEWORK = {  
    # 设置分页  
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',  
    'PAGE_SIZE': 10,
}

在这里插入图片描述
在这里插入图片描述

3、自动生成api文档

pip install drf-yasg

在项目文件夹urls.py中做如下修改

INSTALLED_APPS = [
    'drf_yasg',  # swagger
]

在app的urls.py中做如下修改

from drf_yasg.views import get_schema_view
from drf_yasg import openapi

schema_view = get_schema_view(
    openapi.Info(
        title="API平台",
        default_version="v1",
        description="接口文档",
        terms_of_service="",
        contact=openapi.Contact(email='2495128088@qq.com'),
        license=openapi.License(name="BSD License"),
    ),
    public=True
)

router = DefaultRouter()
router.register('UserInfo', UserInfoViewSet, basename='UserInfo')

urlpatterns = [
    path('docs/', schema_view.with_ui('swagger',cache_timeout=0), name='schema-swagger-ui'),
]

文档查看文档是否成功，http://127.0.0.1:8000/api/v1/docs/

在这里插入图片描述

二、vue前端搭建

1、前端工具及框架
  • node.js
  • npm
  • vue3
  • axios
  • Element plus
  • 前端开发工具：VS Code
2、在Django项目的根目录下创建前端文件
npm init webpack tmanfront

最终的文件目录如下：

在这里插入图片描述

3、修改src/components/HelloWorld.vue中的代码如下
<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <ul>
            <li v-for="(user,index) in users" :key="index" style="display: block;">
                {{ index }}--{{ user.username }}--{{ user.password }}
            </li>
        </ul>
        <form action="">
            用户名：<input type="text" placeholder="user name" v-model="inputUser.username"><br>

            密码：<input type="text" placeholder="user password" v-model="inputUser.password"><br>
            <button type="submit" @click="userSubmit()">提交</button>
        </form>
    </div>
</template>

<script>
import { getUsers,postUser } from '../api/api.js';
export default {
    name:'hellouser',
    data () {
        return {
            msg:'Welcome to Your Vue.js App',
            users:[
                {username:'test1',password:'test1'},
                {username:'test2',password:'test2'}
            ],
            inputUser:{
                "username":"",
                "password":"",
            }
        }
    },
    methods:{
        loadUsers(){},
        userSubmit(){}
    },
    created: function(){
        this.loadUsers()
    }
}
</script>

启动前端项目，浏览器访问127.0.0.1:8080，可以看到刚写的页面已经更新上去了

在这里插入图片描述

4、前后端联调

利用django-cors-headers模块解决跨域问题

pip install django-cors-headers

然后在项目settings.py中添加该模块：

INSTALLED_APPS = [
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # 需注意与其他中间件顺序，这里放在最前面即可
    ...
]
# 支持跨域配置开始
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

后端部分告于段落，接下来需要补充一下前端的逻辑，Vue框架现在一般都用axios模块进行网络请求，这里沿用这种方式，下面是在前端项目中操作：
首先命令行安装axios模块，如果没有安装cnpm就还是用npm安装：

cnpm install axios
或者
npm install axios

为了方便管理api请求的各种逻辑，在前端项目的src目录下创建api目录，然后创建api.js和index.js文件。index.js文件是对axios做配置：
/src/api/index.js

import Vue from 'vue'
import Axios from 'axios'

const axiosInstance=Axios.create({
    withCredentials:true
})

axiosInstance.interceptors.request.use((config)=>{
    config.headers['X-Requested-With'] = 'XMLHttpRequest'
    const regex = /.*csrftoken=([^;.]*).*$/
    config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1]
    return config
})

axiosInstance.interceptors.response.use(
    response=>{
        return response
    },
    error=>{
        return Promise.reject(error)
    }
)

Vue.prototype.axios=axiosInstance

export default axiosInstance

api.js文件是对后端进行请求，可以看到，获取books列表和添加一本book各对应于一个请求：

import axiosInstance from "./index";

const axios = axiosInstance
export const getUsers = () => { return axios.get(`http://127.0.0.1:8000/api/v1/UserInfo/`) }

export const postUser = (username, password) => { return axios.post(`http://127.0.0.1:8000/api/v1/UserInfo/`, { 'username': username, 'password': password }) }

然后更新HelloWorld.vue中的处理逻辑：

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <ul>
            <li v-for="(user,index) in users" :key="index" style="display: block;">
                {{ index }}--{{ user.username }}--{{ user.password }}
            </li>
        </ul>
        <form action="">
            用户名：<input type="text" placeholder="user name" v-model="inputUser.username"><br>

            密码：<input type="text" placeholder="user password" v-model="inputUser.password"><br>
            <button type="submit" @click="userSubmit()">提交</button>
        </form>
    </div>
</template>

<script>
import { getUsers,postUser } from '../api/api.js';
export default {
    name:'hellouser',
    data () {
        return {
            msg:'Welcome to Your Vue.js App',
            users:[
                {username:'test1',password:'test1'},
                {username:'test2',password:'test2'}
            ],
            inputUser:{
                "username":"",
                "password":"",
            }
        }
    },
    methods:{
        loadUsers(){
            getUsers().then(response=>{
                this.users=response.data
            })
        },
        userSubmit(){
            postUser(this.inputUser.username,this.inputUser.password).then(response=>{
                console.log(response)
                this.loadUsers()
            })
        }
    },
    created: function(){
        this.loadUsers()
    }
}
</script>

至此，一个简单的Django+vue前后端分离项目就已搭建完成，测试添加数据成功

在这里插入图片描述
在这里插入图片描述

可以看到，列表里面的数据是从后端读取到的，同时前端的提交数据库也能有对应的操作，所以前后端至此是打通了。

5、前端打包

现阶段是前后端分开开发，但是当最后要用的时候，还需要把代码合在一起。
首先对前端项目进行打包，这里用Vue的自动打包，进入前端的根目录下：

npm run build

在这里插入图片描述

可以看到前端项目中多出了一个dist文件夹，这个就是前端文件的打包结果。需要把dist文件夹复制到tman项目文件夹中

在这里插入图片描述

然后对settings.py文件进行相应的修改，其实就是帮django指定模版文件和静态文件的搜索地址：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'dist')],
        ...
    },
]
...
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'dist/static'),
]

最后在项目根urls.py文件中配置一下入口html文件的对应路由：

from django.views.generic.base import TemplateView
urlpatterns = [
    path('', TemplateView.as_view(template_name='index.html'))
]

重新启动项目，这次用浏览器访问127.0.0.1:8000，即django服务的对应端口即可。
可以看到，项目的交互是正常的，符合我们的预期。

在这里插入图片描述

三、总结

本文以一个非常简单的demo为例，介绍了利用django+drf+vue的前后端分离开发模式，基本可以算是手把手入门。有了这个小demo之后，不管是前端页面还是后端功能，都可以做相应的扩展，从而开发出更加复杂使用的网站。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/422743.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

BGP协议解析（白话版）

BGP协议解析（白话版）

之前一直没搞明白BGP有啥用&#xff0c;加了跟没加没啥区别&#xff0c;专门查资料写了这篇《BGP协议解析》。 下面使用eNSP模拟器演示&#xff01; IBGP与EBGP的区别 BGP分为两种&#xff1a;IBGP与EBGP。 两个路由器的BGP号相同&#xff0c;建立邻居关系叫IBGP&#xff0…
阅读更多...
树莓派连接串口时无法开机

树莓派连接串口时无法开机

树莓派连接串口时无法开机我的情况我的思考我的解决过程重点参考我的情况 因为项目需要&#xff0c;因此需要使用树莓派控制电机&#xff0c;而电机是一上电就会给树莓派发送数据&#xff0c;而这时树莓派还正处于开机时&#xff0c;结果就是开机失败。当将串口断开时就又可以…
阅读更多...
PHP快速入门05-时间日期与时区，附30个常用案例

PHP快速入门05-时间日期与时区，附30个常用案例

文章目录前言一、时间日期与时区1.1 时间与日期1.2 时区二、 30个日期时间函数的用法示例2.1 获取当前的时间戳2.2 将时间戳格式化为日期时间2.3 获取当前的日期2.4 获取当前的时间2.5 获取当前年份2.6 获取当前月份2.7 获取当前日期的第几天2.8 计算两个日期之间的天数差2.9 计…
阅读更多...
央媒报道的长与短

央媒报道的长与短

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体 胡老师。 在最近的媒体服务中&#xff0c;遇到一个问题&#xff0c;与大家讨论下&#xff0c;很多媒体特别是央媒&#xff0c;在活动报道中不会完全按照新闻稿通稿的内容去报道&#xff0c;有的会根…
阅读更多...
MQ选型，kafka、RocketMQ、RabbitMQ、ActiveMQ

MQ选型，kafka、RocketMQ、RabbitMQ、ActiveMQ

MQ&#xff08;Message Queue&#xff09;&#xff0c;是基础数据结构中“先进先出”的一种数据结构。指把要传输的数据&#xff08;消息&#xff09;放在队列中&#xff0c;用队列机制来实现消息传递——生产者产生消息并把消息放入队列&#xff0c;然后由消费者去处理。消费者…
阅读更多...
java SimpleDateFormat和Calendar日期类

java SimpleDateFormat和Calendar日期类

目录一、SimpleDateFormat使用二、Calendar使用一、SimpleDateFormat使用 使用Date直接输出日期时&#xff0c;是使用系统默认的格式输出&#xff0c;所以需要使用SimpleDateFormat来格式化日期。 那么SimpleDateFormat类怎么使用呢&#xff0c;我们需要先了解此类的格式化符号…
阅读更多...
Codeforces Round 866 (Div. 2) 题解

Codeforces Round 866 (Div. 2) 题解

目录 A. Yuras New Name&#xff08;构造&#xff09; 思路&#xff1a; 代码&#xff1a; B. JoJos Incredible Adventures&#xff08;构造&#xff09; 思路&#xff1a; 代码&#xff1a; C. Constructive Problem&#xff08;思维&#xff09; 思路&#xff1a; 代…
阅读更多...
一、计算机的发展历史

一、计算机的发展历史

一、计算机的发展历史 第一台现代计算机 ENIAC&#xff1a;世界上第一台现代通用电子数字计算机&#xff0c;诞生于1946年2月14日的美国宾夕法尼亚大学。研制电子计算机的想法产生于第二次世界大战进行期间。当时激战正酣&#xff0c;各国的武器装备还很差&#xff0c;占主要地…
阅读更多...
Java垃圾收集原理

Java垃圾收集原理

程序计数器、虚拟机栈、本地方法栈这三个区域随线程而灭&#xff0c;栈中栈帧的内存大小也是在确定的。这几个区域的内存分配和回收都具有确定性&#xff0c;因此不需要过多考虑如何回收。 Java堆和方法区这两个区域有着很显著的不确定性 一个接口的实现类需要的内存可能不一…
阅读更多...
软考第七章 下一代互联网

软考第七章 下一代互联网

下一代互联网 1.IPv6 IPv4的缺陷&#xff1a; 网络地址短缺路由速度慢&#xff0c;IPv4头部多达13个字段&#xff0c;路由器处理的信息量很大缺乏安全功能不支持新的业务模式 关于PIv6的研究成果都包含在1998年12月发表的RFC 2460文档中 1.1 IPv6分组格式 版本&#xff1a…
阅读更多...
量子退火Python实战（3）：投资组合优化（Portfolio） MathorCup2023特供PyQUBO教程

量子退火Python实战（3）：投资组合优化（Portfolio） MathorCup2023特供PyQUBO教程

文章目录前言一、什么是投资组合优化&#xff1f;二、投资组合优化建模1. 目标函数&#xff1a;回报2.约束函数&#xff1a;风险3.最终优化目标函数三、基于PyQUBO实现1. 获取数据2. 数据处理3. 目标函数PyQUBO实现4. OpenJij实施优化总结前言 提示&#xff1a;包含pyQUBO用法…
阅读更多...
硬件语言Verilog HDL牛客刷题day11 A里部分 和 Z兴部分

硬件语言Verilog HDL牛客刷题day11 A里部分 和 Z兴部分

1.VL72 全加器 1.题目&#xff1a; ① 请用题目提供的半加器实现全加器电路① 半加器的参考代码如下&#xff0c;可在答案中添加并例化此代码。 2. 解题思路 &#xff08;可以看代码&#xff09; 2.1 先看 半加器 s 是加位 &#xff0c; C 是进位。 2.2 再看全加器 …
阅读更多...
2023年新手如何选择云服务器配置来部署自己的网站？

2023年新手如何选择云服务器配置来部署自己的网站？

现在做网站的人越来越少了&#xff0c;没有以前那种百万网站站长的势头。但是&#xff0c;不论个人站长还是企业&#xff0c;只要网上开展业务其实都会需要自己网站或小程序、APP等平台。如今&#xff0c;很少有人使用虚拟主机&#xff0c;但是独立服务器成本高&#xff0c;一般…
阅读更多...
【2023】Kubernetes-网络原理

【2023】Kubernetes-网络原理

目录kubernetes网络模型kubernetes网络实现容器到容器之间通信Pod之间的通信Pod到Service之间的通信集群内部与外部组件之间的通信开源容器网络方案FlannelCalicokubernetes网络模型 Kubernetes网络模型设计的一个基础原则是&#xff1a;每个Pod都拥有一个独立的IP地址&#x…
阅读更多...
异地远程访问本地SQL Server数据库【无公网IP内网穿透】

异地远程访问本地SQL Server数据库【无公网IP内网穿透】

文章目录1.前言2.本地安装和设置SQL Server2.1 SQL Server下载2.2 SQL Server本地连接测试2.3 Cpolar内网穿透的下载和安装2.3 Cpolar内网穿透的注册3.本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置4.公网访问测试5.结语转发自CSDN远程穿透的文章&#xff1a;无需公网IP&a…
阅读更多...
哪吒探针 - Windows 和Linux端agent安装（详细注意版）

哪吒探针 - Windows 和Linux端agent安装（详细注意版）

一、Windows端agent安装配置 环境准备 环境: Windows 服务器软件:哪吒探针点击下载、nssm 点击下载(探针agent和nssm都要下载准备好) 设置环境变量下载软件后&#xff0c;解压到任意位置&#xff0c;然后按 winR 打开运行窗口&#xff0c;输入 sysdm.cpl 打开系统属性–>高级…
阅读更多...
基于GIS/SCADA的智慧燃气数字孪生Web3D可视化系统

基于GIS/SCADA的智慧燃气数字孪生Web3D可视化系统

在低碳经济快速发展的今天&#xff0c;天然气在我国能源结构的占比逐年提高&#xff0c;安全供气成为关乎民生福祉、经济发展和社会和谐的大事。 自我国开展燃气铺设以来&#xff0c;经过长期运营的家用燃气和工业燃气设备管道设施设备基础差、检维修难度大&#xff0c;且传统燃…
阅读更多...
[Java Web]会话跟踪技术

[Java Web]会话跟踪技术

⭐作者介绍&#xff1a;大二本科网络工程专业在读&#xff0c;持续学习Java&#xff0c;努力输出优质文章 ⭐作者主页&#xff1a;逐梦苍穹 ⭐所属专栏&#xff1a;Java Web 目录1、会话跟踪技术概述2、数据共享3、Cookie4、Session5、Cookie和Session的区别6、总结1、会话跟踪…
阅读更多...
大数据应用——Hadoop运行模式（伪分布式运行）

大数据应用——Hadoop运行模式（伪分布式运行）

4.2 伪分布式运行模式4.2.1 启动HDFS并运行MapReduce程序1. 分析 &#xff08;1&#xff09;配置集群&#xff08;2&#xff09;启动、测试集群增、删、查没有改&#xff08;多台机子麻烦&#xff09;&#xff08;3&#xff09;执行WordCount案例2. 执行步骤&#xff08;1&…
阅读更多...
NestJS：TypeORM 连接mysql数据库，增删改查

NestJS：TypeORM 连接mysql数据库，增删改查

一、安装数据库相关模块 pnpm add nestjs/typeorm typeorm mysql package.json 二、navicat创建nestjs_base数据库&#xff0c;创建products数据表&#xff0c;添加记录 创建nestjs数据库&#xff0c;创建products数据表 navicat&#xff1a;连接MySQL&#xff0c;创建库、表…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023