vscode搭建Django自带后台管理系统

news2024/10/5 19:20:33

文章目录

  • 一、django自带的后台管理系统
    • 1. 建表
    • 2. 后台管理系统
      • 2.1 创建账号
      • 2.2 运行后台
      • 2.3 登录
  • 二、模版渲染
    • 1. 直接将数据渲染到页面
    • 2. 数据传递给js
  • 三、数据库
    • 1. 查看当前数据库
    • 2. 创建UserInfo数据表
    • 3. Django rest framework配置
  • 四、vue前端搭建
    • 1. 在Django项目的根目录下创建前端文件
    • 2. 修改src/components/HelloWorld.vue中的代码如下
  • 五、 前后端联调
    • 1. 利用`django-cors-headers`模块解决跨域问题
    • 2. Vue框架请求

一、django自带的后台管理系统

1. 建表

1.1 打开myapp下models.py，添加以下内容

from django.db import models

# Create your models here.
class Article(models.Model):
    title = models.CharField('标题', max_length=256)
    content = models.TextField('内容')
    time = models.DateTimeField()

1.2 接下来需要同步数据库，只需要两行命令。

python ./manage.py makemigrations
python ./manage.py migrate

在这里插入图片描述

这时候会发现根目录下有一个db.sqlite3的文件，打开是乱码，没错这就是刚刚新建的表。以文本的形式存储在根目录下。还需要一步操作，打开myapp目录下的admin.py,添加如下内容，用后台管理系统来管理刚创建的表。

from django.contrib import admin
from myapp.models import Article

# Register your models here.
class ArticleAdmin(admin.ModelAdmin):
    list_display = ['title', 'content', 'time']

admin.site.register(Article, ArticleAdmin)

2. 后台管理系统

django的后台管理系统已经很完善了，我们需要做的就是创建一个账号，登录操作，没有其他了，不需要自己写任何东西。

2.1 创建账号

python manage.py createsuperuser

我的用户名和密码均为：admin
在这里插入图片描述

2.2 运行后台

admin的url已经默认存在，直接运行项目即可访问Django后台
在这里插入图片描述

python ./manage.py runserver

2.3 登录

在浏览器输入http://127.0.0.1:8000/admin
在这里插入图片描述

在这里插入图片描述
点击添加我们来添加一组数据。
在这里插入图片描述
在这里插入图片描述

二、模版渲染

1. 直接将数据渲染到页面

有了数据就要显示在前端，这就要用到模版渲染，首先需要在渲染模版的时候把数据一起返回，打开 myapp 目录下的 views.py

from django.shortcuts import render
from myapp.models import Article
# Create your views here.

def index(request):
    article_list = Article.objects.all()
    return render(request, 'index.html', {'article_list': article_list})

templates目录下的index.html需要修改如下，这里用到了django的janja2渲染模版的语法。

<html>
    <head>
        <title>test</title>
    </head>
    <body>
        {% for article in article_list %}
        <h1>{{ article.title }}</h1>
        <span>{{ article.time }}</span>
        <p>{{ article.content }}</p>
        {% endfor %}
    </body>
</html>

刷新浏览器

2. 数据传递给js

有时候数据需要做一些处理再渲染到页面，这就要先把数据给js，具体操作方法和直接渲染其实差不多。

在index.html里加上这句代码

<script>
    let articleList = {{ article_list | safe }};
    console.log(articleList)
</script>

修改views的代码

from django.shortcuts import render
from myapp.models import Article
import json
from django.core import serializers
from django.core.serializers.json import DjangoJSONEncoder
# Create your views here.


def index(request):
    article_list = serializers.serialize('python', Article.objects.all())
    return render(request, 'index.html', {'article_list': json.dumps(article_list, cls=DjangoJSONEncoder)})

三、数据库

1. 查看当前数据库

django自带的是sqlite数据库

  1. 在vscode中安装sqlite插件
    在这里插入图片描述

  2. 右键sqlite数据库，新建查询
    在这里插入图片描述

  3. 输入查询内容，使用.help查看帮助，.databases查看数据库，使用.tables查看表，右键选择运行查询即可看到结果

select * from myapp_article

在这里插入图片描述

2. 创建UserInfo数据表

  1. 在model.py中加入如下代码
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
  1. 执行如下命令创建数据库
python manage.py makemigrations
python manage.py migrate
  1. 使用Django后台进行数据管理
    在admin.py目录下加入如下代码
from django.contrib import admin
from myapp.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)

3. Django rest framework配置

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

在settings中注册framework

INSTALLED_APPS = [
    'rest_framework',
]
  1. 序列化
    在app目录下创建serializer.py，添加如下代码
from myapp.models import UserInfo
from rest_framework import serializers


class UserInfoSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserInfo
        fields = "__all__"
  1. 添加视图
    在app目录下的view.py中加入如下代码：
from rest_framework.viewsets import ModelViewSet
from myapp.models import UserInfo
from myapp.serializer import UserInfoSerializer
from django_filters.rest_framework import DjangoFilterBackend


class UserInfoViewSet(ModelViewSet):
    queryset = UserInfo.objects.all()
    serializer_class = UserInfoSerializer
  1. 添加路由

在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)),
]
  1. 在项目根目录下的urls中加入如下代码
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/v1/', include('tadmin.urls')),
]
  1. 筛选和搜索功能配置
    在app根目录下创建filter.py文件
from django_filters import FilterSet, filters
from myapp.models import UserInfo


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

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

修改app目录下的view文件：

from myapp.models import UserInfo
from myapp.serializer import UserInfoSerializer
from myapp.filter import UserInfoFilter
from django_filters.rest_framework import DjangoFilterBackend


# Create your views here.
def index(request):
    article_list = serializers.serialize('python', Article.objects.all())
    return render(request, 'index.html', {'article_list': json.dumps(article_list, cls=DjangoJSONEncoder)})

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'
  1. 分页设置
    在settings.py中做如下修改
# REST_FRAMEWORK增加全局过滤配置  
REST_FRAMEWORK = {  
    # 设置分页  
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',  
    'PAGE_SIZE': 10,
}
  1. 自动生成api文档
pip install drf-yasg

在项目文件夹setting.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. 在Django项目的根目录下创建前端文件

vue init webpack frontProject

2. 修改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>

五、 前后端联调

1. 利用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

后端部分完成配置，接下来需要补充一下前端的逻辑，

2. Vue框架请求

Vue框架现在一般都用axios模块进行网络请求，这里沿用这种方式，下面是在前端项目中操作：

  1. 首先命令行安装axios模块，如果没有安装cnpm就还是用npm安装：
npm install axios
  1. 为了方便管理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
  1. 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 
        }) 
    }
  1. 然后更新Login.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.results
            })
        },
        userSubmit(){
            postUser(this.inputUser.username,this.inputUser.password).then(response=>{
                console.log(response)
                this.loadUsers()
            })
        }
    },
    created: function(){
        this.loadUsers()
    }
}
</script>

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

在这里插入图片描述

在这里插入图片描述

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

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

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

相关文章

vue 使用canvas 详细教程

vue 使用canvas 详细教程

Vue.js 中使用 Canvas Vue.js 是一个流行的 JavaScript 框架&#xff0c;用于构建用户界面。它提供了一种简洁的方式来管理和渲染数据&#xff0c;同时也支持与其他库和工具的集成。要在 Vue.js 中使用 Canvas&#xff0c;您可以按照以下步骤进行操作&#xff1a; 在 Vue.js …
阅读更多...
Visual Studio 2022安装SVN插件教程

Visual Studio 2022安装SVN插件教程

1. 第一步&#xff1a;避免踩坑&#xff0c;超级重要&#xff01;&#xff01;&#xff01;关闭Visual Studio 2022应用程序&#xff1b;&#xff08;不然插件装不上&#xff0c;一直转圈&#xff01;&#xff09; 2.第二步&#xff1a;下载Visual Studio 2022版本对应的SVN插件…
阅读更多...
最新IDE流行度最新排名（每月更新）

最新IDE流行度最新排名（每月更新）

2023年09月IDE流行度最新排名 顶级IDE排名是通过分析在谷歌上搜索IDE下载页面的频率而创建的 一个IDE被搜索的次数越多&#xff0c;这个IDE就被认为越受欢迎。原始数据来自谷歌Trends 如果您相信集体智慧&#xff0c;Top IDE索引可以帮助您决定在软件开发项目中使用哪个IDE …
阅读更多...
Excel显示列号

Excel显示列号

默认表格打开列以字母显示 设置方法 文件 -> 工具 -> 选项 -> 常规与保存 设置后效果如下图
阅读更多...
2023年在线教育行业研究报告

2023年在线教育行业研究报告

第一章 行业概况 1.1 定义 随着技术的飞速发展和互联网的普及&#xff0c;我们的学习方式正在经历一场革命。在线教育&#xff0c;作为这场变革的核心&#xff0c;已经成为全球教育领域的热门话题。但究竟什么是在线教育行业呢&#xff1f; 在线教育行业是指通过互联网平台提…
阅读更多...
【vue2】data中数据赋值失败找不到、data数据不声明的影响

【vue2】data中数据赋值失败找不到、data数据不声明的影响

&#x1f609;博主&#xff1a;初映CY的前说(前端领域) ,&#x1f4d2;本文核心&#xff1a;vue2data作用 前言&#xff1a;当你看到这篇文章相比你已经对vue有了一定的了解&#xff0c;对data的有了一个基本的认识&#xff1a;data是存放我们当前页面数据地方。是的&#xff0…
阅读更多...
【Python小项目之Tkinter应用】随机点名/抽奖工具大优化：新增选项窗口！可选是否重复点名以及随机点名！可以手动选择文件及文件类型并预览文件！

【Python小项目之Tkinter应用】随机点名/抽奖工具大优化：新增选项窗口！可选是否重复点名以及随机点名！可以手动选择文件及文件类型并预览文件！

文章目录 前言一、实现思路窗口逻辑按钮逻辑二、关键代码设置窗口布局实现具体组件实现选择文件与预览文件重中之重：抽取模式三、完整代码总结前言 老规矩，先看效果： 我们为抽奖工具新增了一个设置按钮，点击设置按钮后会出现一个弹窗，弹窗中有各种组件以帮助我们完成初始…
阅读更多...
C语言——qsort()函数_学习笔记

C语言——qsort()函数_学习笔记

本文目录 一、qsort()介绍二、参数详解三、qsort()函数应用举例3.1 排序数组类型的数据3.2 排序结构体类型的数据 四、模拟实现qsort()函数4.1 冒泡排序简单介绍4.2 实现bubble_sort()函数 一、qsort()介绍 qsort()函数是一个库函数&#xff0c;包含在头文件 <stdliib.h>…
阅读更多...
Nginx部署前后端分离项目（Linux）

Nginx部署前后端分离项目（Linux）

Nginx代理前端页面、后端接口 一、前端打包二、后端打包三、Linux部署Nginx启动、暂停、重启服务器部署文件地址&#xff1a; 一、前端打包 npm run build二、后端打包 通过Maven 使用package打包 三、Linux部署 安装Nginx 安装环境 yum -y install gcc pcre pcre-devel z…
阅读更多...
电脑更换硬盘的时候怎么迁移系统？

电脑更换硬盘的时候怎么迁移系统？

为什么需要迁移系统&#xff1f; 在一些关于电脑DIY或Windows相关的论坛社区中&#xff0c;有很多人发帖询问怎么迁移系统。那么这个系统迁移&#xff0c;究竟是何含义呢&#xff1f;通俗易懂地解释一下&#xff0c;就是创建一个完整无缺的操作系统复制品&#xff0c;它与系…
阅读更多...
硬件总线基础07：PCIe总线基础-事务层（1）

硬件总线基础07：PCIe总线基础-事务层（1）

说在开头&#xff1a;关于我的世界&#xff08;4&#xff09; 几年前追过一个综艺&#xff1a;《导演请指教》。不仅仅是因为节目中那一部部小电影的诱惑力&#xff0c;更让人上头的是各方的点评&#xff1a;制片人&#xff0c;学院派&#xff0c;影评人&#xff0c;发行人、大…
阅读更多...
Linux系统上安装docker

Linux系统上安装docker

文章目录 一、Docker的简介二、Docker的组成部分三、Docker的安装命令安装之前先卸载系统上原有的Docker安装需要的安装包yum-utils设置镜像仓库地址安装docker相关的引擎安装docker启动docker查看是否启动使用hello-world镜像测试docker 四、docker run运行思维导图参考文档 一…
阅读更多...
jira流转issue条目状态transitions的rest实用脚本，issue状态改变调整

jira流转issue条目状态transitions的rest实用脚本，issue状态改变调整

官方文档链接地址&#xff1a; POST Transition issue Performs an issue transition and, if the transition has a screen, updates the fields from the transition screen. sortByCategory To update the fields on the transition screen, specify the fields in the fiel…
阅读更多...
redis持久化策略【面试必看】

redis持久化策略【面试必看】

目录 持久化RDB&#xff08;定期备份&#xff09;手动触发savebgsave 自动触发实际操作rdb的优缺点 AOF&#xff08;定时备份&#xff09;重写机制混合持久化aof和rdb 总结 持久化 内存中的数据是不持久的&#xff0c;要想做到持久&#xff0c;就需要把redis中的数据存储到硬盘…
阅读更多...
JSP ssm 特殊人群防走失系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

JSP ssm 特殊人群防走失系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 JSP ssm 特殊人群防走失系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源 代码和数据库&#xff0c;系统主要…
阅读更多...
SpringMVC之JSR303和拦截器

SpringMVC之JSR303和拦截器

目录 一.JSR303 二.JSR常用的注解 三.JSR快速入门 四.拦截器 ⭐⭐⭐拦截器和过滤器有什么不一样&#xff0c;或者它们的区别是什么&#xff1f;&#xff1f; 五.拦截器快速入门--登录的案例 一.JSR303 JSR 303 是 Java 规范的一部分&#xff0c;全称为 Bean Validation 框…
阅读更多...
从零开始，轻松学习如何在CentOS 7服务器上安装、调优和使用Tomcat 8.5

从零开始，轻松学习如何在CentOS 7服务器上安装、调优和使用Tomcat 8.5

PS&#xff1a;文章最后有“开心一刻”&#xff0c;记得看哦&#xff0c;给生活增加点儿趣味。 前言 Tomcat是一个广泛使用的开源Java Servlet容器&#xff0c;也是部署、管理和运行Java Web应用程序的首选之一。本文将为您详细介绍在CentOS 7服务器上安装、调优和使用Tomcat 8…
阅读更多...
2023年数维杯数学建模B题节能列车运行控制优化策略求解全过程文档及程序

2023年数维杯数学建模B题节能列车运行控制优化策略求解全过程文档及程序

2023年数维杯数学建模 B题 节能列车运行控制优化策略 原题再现&#xff1a; 在城市交通电气化进程快速推进的同时&#xff0c;与之相应的能耗增长和负面效应也在迅速增加。城市轨道交通中的快速增长的能耗给城轨交通的可持续性发展带来负担。2018 年&#xff0c;北京、上海、…
阅读更多...
Firefox使用SSH代理配置

Firefox使用SSH代理配置

原料 火狐浏览器 SSH账号 配置MyEntunnel MyEntunnel是用来登录SSH服务器并在本机自动架设一个socks5代理的软件。 把SSH帐号信息&#xff08;包括SSH服务器地址&#xff0c;SSH帐号&#xff0c;SSH密码&#xff09;一一填写到MyEntunnel对应的地方后&#xff0c;点击 “保存…
阅读更多...
centos通过docker安装rabbitMq和延迟队列说明

centos通过docker安装rabbitMq和延迟队列说明

安装步骤 首先进行docker安装可参考docker官网 下载镜像启动rabbitmq下载rabbitMq插件进入docker命令安装插件重新启动rabiitmq 1.下载镜像 docker pull rabbitmq:3.9.152.启动镜像 docker run -d --name rabbitmq -p 5672:5672 -p 15672:15672 -e RABBITMQ_DEFAULT_USERad…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023