vscode搭建Django自带后台管理系统
文章目录
- 一、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数据库
-
在vscode中安装
sqlite插件
-
右键sqlite数据库，新建查询
-
输入查询内容，使用
.help查看帮助，.databases查看数据库，使用.tables查看表，右键选择运行查询即可看到结果
select * from myapp_article
2. 创建UserInfo数据表
- 在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
- 执行如下命令创建数据库
python manage.py makemigrations
python manage.py migrate
- 使用Django后台进行数据管理
在admin.py目录下加入如下代码
from django.contrib import admin
from myapp.models import UserInfoadmin.site.site_header = '任务管理系统'class UserInfoAdmin(admin.ModelAdmin):list_display = ('id', 'username', 'password',)list_display_links = ('username',)list_per_page = 50admin.site.register(UserInfo, UserInfoAdmin)
3. Django rest framework配置
- 安装framework
pip install djangorestframework
# 暂时不装也可以
pip install markdown
# 用于数据筛选
pip install django-filter
在settings中注册framework
INSTALLED_APPS = ['rest_framework',
]
- 序列化
在app目录下创建serializer.py，添加如下代码
from myapp.models import UserInfo
from rest_framework import serializersclass UserInfoSerializer(serializers.ModelSerializer):class Meta:model = UserInfofields = "__all__"
- 添加视图
在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 DjangoFilterBackendclass UserInfoViewSet(ModelViewSet):queryset = UserInfo.objects.all()serializer_class = UserInfoSerializer
- 添加路由
在app目录下创建urls.py文件：
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from tadmin.views import UserInfoViewSetrouter = DefaultRouter()
router.register('UserInfo', UserInfoViewSet, basename='UserInfo')urlpatterns = [
]urlpatterns += [path('', include(router.urls)),
]
- 在项目根目录下的urls中加入如下代码
from django.contrib import admin
from django.urls import path, includeurlpatterns = [path('admin/', admin.site.urls),path('api/v1/', include('tadmin.urls')),
]
- 筛选和搜索功能配置
在app根目录下创建filter.py文件
from django_filters import FilterSet, filters
from myapp.models import UserInfoclass UserInfoFilter(FilterSet):name = filters.CharFilter(field_name='username', lookup_expr='icontains')class Meta:model = UserInfofields = ('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 = UserInfoSerializerfilter_class = UserInfoFilterfilter_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'
- 分页设置
在settings.py中做如下修改
# REST_FRAMEWORK增加全局过滤配置
REST_FRAMEWORK = { # 设置分页 'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination', 'PAGE_SIZE': 10,
}- 自动生成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 openapischema_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模块进行网络请求，这里沿用这种方式，下面是在前端项目中操作：
- 首先命令行安装axios模块，如果没有安装cnpm就还是用npm安装：
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=axiosInstanceexport 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 }) }
- 然后更新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前后端分离项目就已搭建完成，测试添加数据成功
可以看到，列表里面的数据是从后端读取到的，同时前端的提交数据库也能有对应的操作，所以前后端至此是打通了。
相关文章：
vscode搭建Django自带后台管理系统
文章目录 一、django自带的后台管理系统1. 建表2. 后台管理系统2.1 创建账号2.2 运行后台2.3 登录 二、模版渲染1. 直接将数据渲染到页面2. 数据传递给js 三、数据库1. 查看当前数据库2. 创建UserInfo数据表3. Django rest framework配置 四、vue前端搭建1. 在Django项目的根目…...
Verilog零基础入门（边看边练与测试仿真）-时序逻辑-笔记（4-6讲）
文章目录 第四讲第五讲第六讲 第四讲 1、计数器 代码： //计数器 timescale 1ns/10ps module counter(clk,res,y); input clk; input res; output[7:0] y;reg[7:0] y; wire[7:0] sum;//1运算的结果（1࿰…...
2023-09-12力扣每日一题
链接： 1462. 课程表 IV 题意 一个pair<int,int>表示a是b的前置 进行n次查询，查询q是否是p的前置（可以不是直接前置） 解： 就是要把01、12、13这种能转换出02、03，弗洛伊德即可 无环无负权 实际…...
leetcode面试题：交换和（三种方法实现）
交换和： 给定两个整数数组，请交换一对数值（每个数组中取一个数值），使得两个数组所有元素的和相等。 返回一个数组，第一个元素是第一个数组中要交换的元素，第二个元素是第二个数组中要交换的元…...
前端可视化界面开发技术：实战与优化
引言 在当今的互联网时代，数据可视化已经成为信息展示和交互的重要方式。特别是在前端开发领域，可视化界面的应用越来越广泛，涉及到数据监控、分析和决策等多种场景。本文将深入探讨前端可视化界面开发的关键技术，通过实例解析提…...
Python实现机器学习（下）— 数据预处理、模型训练和模型评估
前言：Hello大家好，我是小哥谈。本门课程将介绍人工智能相关概念，重点讲解机器学习原理机器基本算法（监督学习及非监督学习）。使用python，结合sklearn、Pycharm进行编程，介绍iris（鸢尾…...
树结构处理，list和tree互转
1、实体类 package com.iot.common.test.entity;import lombok.Data;import java.util.List;/*** description:* author:zilong* date:2023/9/8*/ Data public class Node {//idprivate String id;//父节点idprivate String pId;//名称private String name;//编码private Stri…...
可视化大屏设计模板 | 主题皮肤（报表UI设计）
下载使用可视化大屏设计模板，减少重复性操作，提高报表制作效率的同时也确保了报表风格一致，凸显关键数据信息。 软件：奥威BI系统，又称奥威BI数据可视化工具 所属功能板块：主题皮肤上传下载（数…...
Spring Boot + Vue的网上商城之客服系统实现
Spring Boot Vue的网上商城之客服系统实现 在网上商城中，客服系统是非常重要的一部分，它能够为用户提供及时的咨询和解答问题的服务。本文将介绍如何使用Spring Boot和Vue.js构建一个简单的网上商城客服系统。 思路 在本教程中，我们学习了…...
RabbitMQ: return机制
1. Return机制 Confirm只能保证消息到达exchange，无法保证消息可以被exchange分发到指定queue。 而且exchange是不能持久化消息的，queue是可以持久化消息。 采用Return机制来监听消息是否从exchange送到了指定的queue中 2.Java的实现方式 1.导入依赖 &l…...
记录一些奇怪的报错
错误：AttributeError: module distutils has no attribute version 解决方案： 第一步：pip uninstall setuptools 第二步：conda install setuptools58.0.4 错误：ModuleNotFoundError: No module named _distutils_hac…...
Ubuntu 安装redis数据库，并设置开机自启动
1、下载安装包 wget http://download.redis.io/releases/redis-7.0.9.tar.gz 2、解压 tar -zxvf redis-7.0.9.tar.gz 3、复制到解压缩的包移动到/usr/local/ sudo mv ./redis-7.0.9 /usr/local/ 4、编译 cd /usr/local/redis-7.0.9 sudo make 5、测试: 时间会比较长࿰…...
基于开源模型搭建实时人脸识别系统（五）：人脸跟踪
继续填坑，之前已经讲了人脸检测，人脸识别实战之基于开源模型搭建实时人脸识别系统（二）：人脸检测概览与模型选型_开源人脸识别模型_CodingInCV的博客-CSDN博客，人脸检测是定位出画面中人脸的位置，…...
VUE | 配置环境变量
本篇目录 1. 创建开发环境配置文件2. 创建正式环境配置文件3. 在代码中访问环境变量4. 加载环境变量 在 Vue 项目中是使用 .env 文件来定义和使用不同的环境变量，这些文件在 Vue 项目根目录下创建。推荐有几种环境就创建几个 .env 文件，下面就开发环境和…...
Dynamic-TP入门初探
背景 在使用线程池的过程中，会出现一些痛点： 代码中创建了一个线程池，但是不知道那几个核心参数设置多少比较合适。凭经验设置参数值，上线后发现需要调整，改代码重新发布服务，非常麻烦。线程池相对开发人…...
Git的基本操作：远程操作
7 Git的远程操作 远程操作主要是指，在不同的仓库之间进行提交和代码更改。是一个明显的对等的分布式系统。其中本地个仓库与远程仓库，不同的远程仓库之间都可以建立这种关系。这种关系之间的操作主要有pull和push。 远程仓库 创建SSH key远程仓库和本…...
【IOC,AOP】spring的基础概念
IOC 控制反转 对象的创建控制权转交给外部实体，就是控制反转。外部实体便是IOC容器。其实就是以前创建java对象都是我们new一下，现在我们可以把这个new交给IOC容器来做，new出来的对象也会交由IOC容器来管理。这个new出来的对象则称为Bean。 …...
安全实战 | 怎么用零信任防范弱密码？
防范弱密码，不仅需要提升安全性，更需要提升用户体验。 比如在登录各类业务系统时，我们希望员工登录不同系统不再频繁切换账号密码，不再需要3-5个月更换一次密码，也不再需要频繁的输入、记录、找回密码。 员工所有的办…...
1-4 AUTOSAR方法论
总目录——AUTOSAR入门详解AUTOSAR入门详解目录汇总：待续中。。。https://xianfan.blog.csdn.net/article/details/132818463 目录 一、前言 二、方法论 三、单个ECU开发流程 一、前言 汽车生产供应链上有以下角色：OEM、TIER1、TIER2，其主…...
MFC C++ 数据结构及相互转化 CString char * char[] byte PCSTR DWORE unsigned
CString： char * char [] BYTE BYTE [] unsigned char DWORD CHAR：单字节字符8bit WCHAR为Unicode字符:typedef unsigned short wchar_t TCHAR : 如果当前编译方式为ANSI(默认)方式，TCHAR等价于CHAR，如果为Unicode方式，…...
多版本CUDA安装切换
系统中默认的安装CUDA为12.0，现在需要在个人用户下安装CUDA11.7。 CUDA 下载 CUDA官网下载 安装 Log file not open.Segmentation fault (core dumped)错误 将/tmp/cuda-installer.log删除即可。重新安装，去掉驱动的安装，设置Toolkit的安装…...
sqlserver union和union all 的区别
1.首先在数据库编辑1-40数字； 2.查询Num<30的数据，查询Num>20 and Num<40的数据，使用union all合并； 发现30-20的数字重复了，可见union all 不去重； 3.查询Num<30的数据，查询Num…...
Matlab 如何计算正弦信号的幅值和初始相角
Matlab 如何计算正弦信号的幅值和初始相角 1、概述 如果已知一个正弦信号的幅值，在FFT后频域上该信号谱线的幅值与设置值不同，而是大了许多；如果不知道某一正弦信号的幅値，又如何通FFT后在頻域上求出该正弦信号的幅值呢? 2、…...
华为hcie认证培训报班培训好?还是自学好
华为HCIE认证培训报班培训和自学各有优势。 培训的优势： 系统性学习：培训课程通常会系统地涵盖HCIE认证所需的各个知识点，帮助你建立全面的理论体系。指导与互动：培训中，能够与资深讲师互动，及时解答疑惑…...
ASP.NET+sqlserver通用电子病历管理系统
一、源码描述 这是一款简洁十分美观的ASP.NETsqlserver源码，界面十分美观，功能也比较全面，比较适合 作为毕业设计、课程设计、使用，感兴趣的朋友可以下载看看哦 二、功能介绍 该源码功能十分的全面，具体介绍如下&…...
wireshark通常无法抓取交换机所有端口报文
Wireshark 是一种网络分析工具，它通常在计算机的网络接口上进行数据包捕获和分析。然而，Wireshark 默认情况下无法直接捕获交换机所有端口的报文。 交换机是一种网络设备，它在局域网内转发数据包，根据目的MAC地址将数据包仅发送到…...
猫头虎的技术笔记：Spring Boot启动报错解决方案
🌷🍁 博主猫头虎（🐅🐾）带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…...
Istio网关流量转发
摘要 Istio网关转发到后端服务的步骤，可以按照以下详细说明进行操作： 配置Istio Sidecar：确保目标后端服务已经部署并成功运行，并为其启用Istio Sidecar。Istio Sidecar负责在Pod中注入Istio代理，以便实现流量控制和…...
阿里云acp云计算认证考试科目有哪些？
阿里云ACP云计算认证考试科目包括以下内容： 阿里云云计算基础知识：包括云计算的定义、特点、服务模式、部署模式、虚拟化技术等相关知识。阿里云产品：包括阿里云ECS、RDS、SLB、OSS、DNS等核心产品的架构、使用方法、优化技巧等相关知识。云…...
8、Spring security配置放过的请求又被拦截了
项目场景： 在项目中有一些接口需要放开spring security拦截，配置方法如下，其中permitUrls为需要放过的请求路径。 Override public void configure(WebSecurity web) {web.ignoring().antMatchers(permitUrls); }问题描述 实际请求地址&am…...
学校网站怎么建设/想学销售去哪培训
气候类 1、北京日均最低气温 var bj_temp_ low [-6,-4,3,10,16,21,24,23,17,9,1,-5]2、北京日均最高气温 var bj_temp_ hight [3,6,15,23,29,32,33,32,27,19,10,4]3、北京历史最高气温 var bj_temp_ max [24,19,29,34,38,38,39,36,32,28,24,28]4、北京历史最低气温 var …...
网站作风建设年专栏/千锋教育出来好找工作吗
纠结两天（浏览器中唤起本地APP），一直找不到解决方案，今天总算基本搞定。 ps：吐槽一下 魔窗那篇文章，为什么就不直接把js代码开源开源，混淆后的代码看得我好恼火 参考文章：魔窗解决方…...
外贸网站如何做推广/shopify seo
近日刚刚升级完win7SP1补丁，想乘着系统稳定的时候做个映像，以后有事恢复一下就OK了。可运行win7的备份还原功能里的备份映像后发现系统会强制备份C和D两个盘的数据，我的D盘是软件分区近百G的东东让我再复制一份我可受不了。结症所在是D盘有文…...
电商网站开发需求/全网营销网络推广
一、wget是Linux下最常用的http/ftp文件下载工具1.wget断点续传，只需要加上-c参数即可，例如：代码:wget-chttp://www.abc.com/abc.zip-Oabc.zip2.当服务器上的文件比本地指定目录下的文件更新时才下载，-P指定目录，-N表示…...
wordpress4.9上传失败/产品软文撰写
前言 ResNet（Residual Neural Network）由微软研究院的Kaiming He、Xiangyu Zhang、Shaoqing Ren、Jian Sun四名华人提出，并在ILSVRC2015比赛中取得冠军，在top5上的错误率为3.57%，对应的论文《Deep Residual Learning …...
做网站的ui框架/百度知道网页版登录入口
赵德明在调研六大新产业十大产业链发展情况时强调加快项目建设进度 推动产业加速集聚 奋力打造全省新产业发展的战略支撑和新的增长极7月15日，省委常委、市委书记、贵安新区党工委书记赵德明到贵州双龙航空港经济区调研六大新产业十大产业链发展情况。他强调&#x…...