前言

本文记录梅科尔工作室IoT组DjangoWeb 应用框架+MySQL数据库第四次培训笔记，主要包括DJango工程目录梳理，以及前后端交互的实现。这里感谢潘学姐的讲解！无敌感谢！

1、DJango工程文件梳理

这里使用的是MySQL数据库，所以需要在主文件夹下的__init__.py导入pymysql

• settings.py 是项目的整体配置文件
• urls.py 是项目的URL配置文件
• wsgi.py 是项目与WSGI兼容的Web服务器入口
• manage.py 是项目管理文件，通过它管理项目

其中settings.py文件是配置连接mysql数据库的文件，如下

1.1  ALLOWED_HOSTS =[‘*’]

 ALLOWED_HOSTS =[‘*’]

可以使所有的网址都能访问Django项目了，在项目测试的时候，可以这么干，但是安全性差，下面是解决办法，参考此链接

(17条消息) Django设置ALLOWED_HOSTS后,依然不能被其他电脑通过ip访问_南国韭菜的博客-CSDN博客_allowed_hosts django

 其他需要注意的细节：

1.记得把创建的app添加放在settings里面，这样才能正常建表。

可以使用pycharm直接连接 MySQL

2. 前后端交互

2.1.前端的实现

准备工作，安装node.js，参考下面的文章

(17条消息) nodejs安装和环境配置-Windows_七维大脑的博客-CSDN博客_nodejs安装及环境配置

主要是因为要安装qs.stringify，所以装上node.js

安装qs.stringify

npm install qs 和 npm install querystring

首先要以管理员身份运行cmd，其次后面的数据源是国外，所以要用一下小猫咪。

qs.stringify和JSON.parse()的不同：

qs.stringify把一个参数对象格式化为一个字符串,将对象 序列化成 URL 的形式(a=b&c=d)，以&进行拼接
JSON.parse() 方法用来解析JSON字符串,将JSON字符串转换为JSON对象(把key=value连接字符串转成对象,如：name=hehe&ange=10==>{name:'hehe', ange:10}

2.2.Config.json配置

以下两个地方需要做修改，打开网络请求配置

1.
"deviceConfig": {
  "default": {
    "process": "com.huawei.hiworld.example",
    "supportBackup": false,
    "network": {
      "cleartextTraffic": true
    }

2.
"reqPermissions": [
  {
    "name": "ohos.permission.GET_NETWORK_INFO"
  },
  {
    "name": "ohos.permission.SET_NETWORK_INFO"
  },
  {
    "name": "ohos.permission.INTERNET"
  }
],

2.3.前端JS代码

主要是onClick方法里后端数据的获取，路径一定要和Django里写的对应上！

import router from '@system.router';
import fetch from '@system.fetch';
import qs from 'querystring';

export default {
    data:{
        winfo:""
    },
    onClick(){
        fetch.fetch({
            url:'', //后端路径
            data: qs.stringify({'id':'1'}),//验证，将字符串转发给后端，后端会受到这个请求
            responseType:"json",//请求的参数类型
            method:"POST",
            success:(resp)=>
            {
                this.winfo = resp.data;//令获取到的后端数据赋给winfo
                console.log("返回的数据："+this.winfo);//打印出数据

            },
            fail:(resp)=>
            {
                this.winfo = resp.data;
                console.log("获取数据失败："+this.winfo)
            }

        });
    }
}

注意：DevEco所需node.js版本是14.19-15.00，除此之外的版本不能使用，另外，DevEco环境如果没有配置好的话，通过新建工程文件的方式解决，配环境很重要。

2.4.后端Django代码

student app下的views.py文件写的类，注意获取数据的时候要和models.py对应上

from django.shortcuts import render
from django.http import HttpResponse
from django.shortcuts import render
from student import models
from rest_framework.views import APIView

class AppReq1(APIView):
    def post(self, request):
        re = models.Students.objects.filter(Age=20)//注意re不能写成request，会报错
        arr = []
        for i in re:
            content = {'姓名': i.Name, '邮箱': i.Email, '年龄': i.Age}
            arr.append(content)
        print(arr)
        print(type(arr))
        ID = request.data.get('id')
        # username = request.data.get('username')
        # password = request.data.get('password')
        print(ID)
        # print(username)
        # print(password)
        return HttpResponse(arr)

主文件下的urls.py文件代码

from django.contrib import admin
from django.urls import path
from django.contrib import admin
from django.urls import path, include
from student import views
from student import urls as student_urls
urlpatterns = [
    path('admin/', admin.site.urls),
    path('student/', include(student_urls, namespace='student')),

]

student app下的urls.py文件

from django.urls import path
from . import views
from student.views import AppReq1
app_name ='student'
urlpatterns = [
    path('AppReq1/', AppReq1.as_view()),

]

效果展示如下： 

总结

今日踩坑，明日不再踩，感谢我潘姐的出手相助！