Djiango《极简信息管理系统》开发

前言：

本篇文章主题内容是讲述关于django自身携带的后台管理数据系统的使用，也可以利用这点实现先后端分离，就是不同与上一节的前后端不分离（html文件写在templates里面。）当然，这也需要我们更加地了解路由的配置。这篇文章，我们也会介绍admin文件的相关配置的设置。

接下来进入实战内容：

1，先创建我们的项目：

这里内容与上节一致：创建好项目后，改settings里面的时区和语言。

然后创建我们的子应用，我们这里就叫DH，因为我们这里的内容多是利用类似导航栏的东西来操作数据库，所以不妨叫他DH。创建完记得在settings里面去给我们的应用名进行注册。

指令1：python manage.py startapp DH

2，创建项目完，我们来创建我们的数据库

（逻辑还是，先创建一个类，然后通过类的元素来定义表的元素。）

类在我们应用的models里面写哦：----相关元素有导航名称和导航地址，显示是否--这个与布尔值挂钩。

from django.db import models# Create your models here.
class DH_data(models.Model):dh_name=models.CharField(max_length=200,verbose_name='导航名称')dh_url=models.CharField(max_length=200,verbose_name='导航地址')is_shown=models.BooleanField(default=True,verbose_name='是否显示')class Meta():db_table="DH_table"verbose_name="导航信息"verbose_name_plural=verbose_namedef __str__(self):return f"{self.dh_name,self.dh_url}"

代码基本上跟我们上节课的代码类型相似。唯一不同的就是布尔值的相关代码，大家可以参考一下上面的，default默认值是True，后边的verbose_name都是我们后台管理显示名称。因为我们前面的配置里面修改了语言么。

然后：

指令2：python manage.py makemigrations DH

指令3：python manage.py migrate

本接口我们的开发是前后端分离式开发，那么我们的数据获取就不是依靠render返回了，而是通过一些接口来返回。

那我们来介绍一下什么接口，怎么传输文件吧，

3，接口传输数据

就像是我们的www.baidu.com这个网址，我们访问的话，给我们的是一个html文件，

但是如果我们是带接口地去访问，里面则是附带着json文件，里面附带这我们页面需要展示的信息，这就是我们接口的作用，这里我们也需要利用接口来实现这一功能，那就必不可少地需要使用json的一些格式和语言了。

在view里面操作：

先利用django里面http模块里面的Jsonreponse工具，这个是django自带的，很方便

from django.http import JsonResponse

# JsonResponse(data,safe)  data:需要返还的数据，列表或者字典。  safe默认值是True，只能返回字典的格式，我们需要修改成False，这样字典和列表都可以返回了。

为了做示范我们将之前的个性网站开发的html文件拿来使用：

而我们想要返回的数据，就是我们页面的导航栏的信息：

我们就把这俩个利用接口形式返给他吧。

view里面写我们需要传输的数据：

from django.http import JsonResponse# 使用json格式返回数据
# Create your views here.
def dh_data(request):# JsonResponse(data,safe)  data:需要返还的数据，列表或者字典。  safe默认值是True，只能返回字典的格式，我们需要修改成False，这样字典和列表都可以返回了。return JsonResponse([{'dh_name':'首页','dh_url':'https://lc1.hunanhaocheng.com/html/hnhc-bing-es/index.html?msclkid=b9bf0d23cde4196f28d36afe97bf2679&u=1668'},{'dh_name':'热门景点','dh_url':'https://x1.haochengguolv.com/html/glv-bing-gz/index.html?msclkid=a0bcea423d951df40a038d9f67ce3b07'},],safe=False)

那我们得先有个网址来放我们的网页：

那我们就规定我们的访问地址为：127.0.0.1:8080/data/dh         ---后面是1，2级路由哦！

那我们现在就去处理路由的问题：

urls里面代码如下，二级路由在外面的dh.urls（指的是在）里面写。

from django.contrib import admin
from django.urls import path,includeurlpatterns = [path('admin/', admin.site.urls),path('data/', include('DH.urls')),]

而在我们的dh.urls里面外面又需要返回我们的values里面的dh_data,那外面如下操作：

都是熟悉的操作，那接下来是启动后端端口：
指令4：python manage.py runserver 8080

跑完给我们个这个                                         ，我们在后面接上data/dh就可以访问我们view里面要传输的数据了。

这样后端数据传输就没有问题了，那我们现在来看看，前端怎样访问后端，

4，前端访问后端

方式:Ajax   

书写位置，js文件或者html的script里面

步骤：

1，新建Ajax对象：

    let xhr=new XMLHttpRequest()

2，设置请求方式以及请求地址：
xhr.open('get','http://127.0.0.1:8080/data/dh')                          ---get是请求方式，后面接网址。

3，发送请求

xhr.send()

4,判断请求是否成功：

    xhr.onreadystatechange=function(){

      // 满足该条件才是请求成功并且成功拿到数据

      if(xhr.readyState==4 && xhr.status==200){

        console.log(xhr.resaponse)

      }

    }

执行上述代码后出现了CORS报错类型：  --同源策略

同源：协议，域名(IP) 端口号一致

浏览器因为你违法了该协议，所以不展示你拿到的信息；我们前端协议是file，后端是http所以不响应。

5，应对方法：

处理跨域：

跨域是一个浏览器安全策略，用于防止恶意网站通过 JavaScript 代码访问来自其他网站的资源。同源策 略要求网页只能访问与其来源相同的资源，即具有相同的协议（如http或https）、域名和端口号。 例如，假设你的网站位于 https://www.example.com，如果你在 JavaScript 中尝试通过 XMLHttpRequest请求 https://www.google.com 的数据，这就是一个跨域请求，因为域名不同。 跨域请求默认会被浏览器阻止，因为这可能会导致安全问题

1，安装处理跨域的库：

pip install django-cors-headers

2，在settings设置里完成该库的注册和配置

中间键里面的配置：

'corsheaders.middleware.CorsMiddleware','django.middleware.common.CommonMiddleware',

固定写法，直接写就好了。

最后：新增：CORS_ALLOW_ALL_ORIGINS = True

这个一个类似信物的东西，让浏览器默认识别为可执行或可接受的对象。

处理完这个跨域后，我们在html里面console.log就可以拿到我们所需要的东西了。

因为是json文件，所以前面有给我们自动转的码。\u9996等。

6，前端应用后端传输的数据。

因为我们转数据的格式是json，那我们现在需要修改其形式，以供我们使用。

转换方式：             ---将json格式转成数组的格式，用于我们的遍历。

JSON.parse(需要转变格式的数据)

在之前的实战中，我们用循环遍历去接收数组里面的数据，也要注意我们的需要是a标签里面的内容。

那就不得不考虑，是往一个固定的格式里面去填塞内容了。

遍历方式：

内容：

那现在我们按照格式填内容：

这就完成了我们的a标签格式，那现在我们把str塞进item-box盒子里面，或者对里面的内容进行修改；

（1）获取装导航的盒子：

    let box = document.querySelector('.item-box')

（2）对.item-box里面内容进行拼接：

box.innerHTML = 拼接好的字符串      ----这里是我们的str

现在只需要把拼接好的内容放在box.innerHTML里面就好了；

box.innerHTML=str

5，django后台管理系统处理数据库：

这个后台管理系统是我们django自带的，位置就在我们的urls里面的这个：

这个请求路径是我们很棒的处理数据库的地址：

http://127.0.0.1:8080/admin

访问后就进入了这个页面：         用户名和密码需要我们单独设置：代码在下面：

设置指令：

1.终端执行创建账号的指令

python manage.py createsuperuser

2，填写账号：

比如：admin

3，填写密码：

比如：123456@qq.com

这个做了加密处理，你看不见写了什么，注意点就好；

创建完登录后，可以看到如下页面，但主力，这里我们的数据库没有显示在里面

具体原因是：我们没有注册数据库的模型：

注册数据库的模型

在子应用的admin文件里面注册：

（1），导入创建的模型：

from .models import 模型名

（2），导入admin

from django.contrib import admin        --这个一般自带，不需要写

（3）注册模型：

admin.site.register(模型名)

现在我们的数据库增删改查都可以在DH这个模块里面进行了；

做个示范：

添加之后刷新数据库，看看里面：

增删改查都可以在这里面简便化进行。不做展示。

前端调用数据库内容：

现在再循环遍历，再次从里面获取

for循环查看里面内容：

现在完全变成字典格式了。只要我们先创个空列表，然后把这些字典放进去就好了：

因为我们需要的格式酒店列表嵌套字典的格式：

这样就直接完毕了：