django-Vue前后端分离后端流程(二)

最新推荐文章于 2023-07-29 14:46:08 发布

卧龙丹心

最新推荐文章于 2023-07-29 14:46:08 发布

阅读量829

点赞数 4

分类专栏： python django 后端

本文链接：https://blog.csdn.net/u010829693/article/details/108171511

版权

python 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

django

3 篇文章 0 订阅

订阅专栏

后端

3 篇文章 0 订阅

订阅专栏

三、前后端跨域问题

这里，主要要提的就是axios的post方式发送数据的数据类型content-type不是x-www-form-urlencoded，而是application/json，对于django的后端来说直接request.POST.get是无法得到数据的，就无法完成调用API的工作，所以就需要这个网页中的几种方式之一才可以:axios 发 post 请求，后端接收不到参数的解决方案

最后，我选择的是以前端的方式来解决数据转换的问题，看前端代码,引入axios和Qs,并将数据进行stringify转换，最终可以看到数据类型变为了x-www-form-urlencoded

import axios from 'axios'
import Qs from 'qs'
 getOpenId(code){
            console.log('请求数据');
            let data = {
                'code':this.code
            }
            
            axios({
                method:'post',
                url:'',
                data: Qs.stringify(data)
            }).then((res)=>{
                this.openid = res.data.openid;
                this.username = res.data.username;
                localStorage.setItem('username',this.username);
                console.log(this.username)
                this.status = res.data.status;
                
            })

	还有，前端vue传递数据时，要带上param，不带param的get方式也是无法调用API的。

            this.$axios.get('',{
                params:{'username':this.username}

前端代码中，还要在nuxt.config.js中开启跨域，同时指定后端的开发服务器启用端口，这里的8000是在python manage.py runserver中用的端口，也可以自己指定

proxy: {
  '/api': {
    target: 'http://127.0.0.1:8000', // 目标接口域名
    changeOrigin: true, // 表示是否跨域
    pathRewrite: {
      '^/api': '/', 
    }
  }
},

后端代码中，需要在settings.py的MIDDLEWALE中引入django-cors-middleware，同时添加

CORS_ORIGIN_ALLOW_ALL = True

具体可看这个网页：web开发时,使用django-cors-middleware解决django的跨域问题https://blog.csdn.net/Daivon_Up/article/details/78055616，还有【跨域问题】Access to XMLHttpRequest at’http://localhost:解决跨域问题，前后端连调，前端Vue后端SSM，解决Vue项目打包后打开页面图片不显示问题https://blog.csdn.net/OrangeChenZ/article/details/86468239

四、Github协作相关

1.图文详解如何利用Git+Github进行团队协作开发

2.【Git学习笔记】Git冲突：commit your changes or stash them before you can merge.

https://blog.csdn.net/liuchunming033/article/details/45368237

五、django的xadmin插件

	django自带admin，但是外观不好，而且不易定制，这里，推荐使用xadmin，具体有这些网页有帮助：

1.python测试开发django-39.xadmin详情页面布局form_layout

2.django-xadmin的使用(比官方文档更精简)https://blog.csdn.net/bocai_xiaodaidai/article/details/94395604

3.DJANGO XADMIN的使用（二）](https://www.cnblogs.com/wumingxiaoyao/p/6945769.html)

4.django自定义User模型(xadmin)https://www.jianshu.com/p/63b893aa0c20

5.xadmin----内置插件http://www.mamicode.com/info-detail-2403646.html

这里我要说一点，就是关于图表，可以下面这两张截图，一个是主页面，另一个是包含图表的页面。

在这里插入图片描述

图表页面中，对于图表学习时间的计算，这里柱状图要用特殊的代码，如下

import xadmin.views
from .models import *
from xadmin.views import CommAdminView
class userProfileAdmin(object):
   
    # 显示的列
    list_display = ['id', 'username', 'sumTimes']
    # 搜索的字段，不要添加时间搜索
    search_fields = ['id', 'username','sumTimes']
    # 过滤
    list_filter = ['id', 'username', 'sumTimes']
    refresh_times = (3,5)
    data_charts = {
    "user_count": {'title': u"学习时间排名", "x-field": "username", "y-field":("sumTimes",),"order":("-sumTimes",),
    'option' : {
            "series" : {"bars":{"align":"center", "barWidth": 0.5,"show":True}},
            "xaxis"  : {"aggregate":"null","mode":"categories"},
            # "yaxis"  : {"aggregate":"count","mode":"categories"}
        },
                   },
    }

图类型是bars，而且图的xaxis计算aggregate是null，不能是其他的，否则比例就会出问题，具体可以看xadmin源代码的一部分/xadmin/plugin/aggregation.py中的源码，可以看到，有min,max,avg,sum,count但只有使用null时，才不会计算，网上查了好多资料都没有查到，查源码才可以看到的东西

AGGREGATE_METHODS = {

  'min': Min, 'max': Max, 'avg': Avg, 'sum': Sum, 'count': Count

}

AGGREGATE_TITLE = {

  'min': _('Min'), 'max': _('Max'), 'avg': _('Avg'), 'sum': _('Sum'), 'count': _('Count')

}

六、服务器部署相关

这里，首先我用的docker-compose形式部署，后来发现这样部署不成功，就不用这种方式了，这里我将我用到的网页都列出来。首先是docker部署相关的：

1.部署并使用Dockerhttps://help.aliyun.com/document_detail/51853.html

2.WIN10下DOCKER的安装与使用https://blog.csdn.net/qq_26870933/article/details/81675201

3.使用Docker Compose部署Django和Vue.js应用

vue + django 项目部署

5.一个 Vue+Django 小型 web 应用的 Docker 化实践案例http://yangyingming.com/article/437/

6.docker 生成 django + uwsgi + nginx + supervisor 镜像https://blog.csdn.net/qq_31325495/article/details/88891525

7.项目部署：docker-django-nginx-uwsgi-postgres-supervisorhttps://blog.csdn.net/qq_36792209/article/details/82778611

8.http://www.kekefund.com/2019/07/10/devops-step1-dockerfile/#3-Vue-js%E9%A1%B9%E7%9B%AE%E7%9A%84Dockerfile

9.docker-nginx-django-vue https://github.com/briancaffey/docker-nginx-django-vue

10.dockerdemo https://github.com/will4906/dockerdemo

https://gitlab.com/briancaffey/verbose-equals-true/-/blob/develop/documentation/README.md
docker中部署django项目~~Dockfile方式和compose方式
使用docker优雅的部署你的nuxtjs项目

接下来是uwsgi+nginx的直接部署方式，这种我是成功过的：

1.Vue+Django项目部署

2.centos安装 python37以及pip3https://blog.csdn.net/qq_40021718/article/details/81710291

3.Apache的部署一（安装部署、基础信息、修改端口、更改默认发布文件、更改默认发布目录）https://blog.csdn.net/songyuchaoshi/article/details/90429259

4.How to use Django with uWSGIhttps://docs.djangoproject.com/en/2.2/howto/deployment/wsgi/uwsgi/

5.Setting up Django and your web server with uWSGI and nginx[https://uwsgi-docs.readthedocs.io/en/latest/tutorials/Django_and_nginx.html?highlight=Django%20nginx](https://uwsgi-docs.readthedocs.io/en/latest/tutorials/Django_and_nginx.html?highlight=Django nginx)

6.在Ubuntu部署Djangohttps://blog.csdn.net/weixin_45646006/article/details/107297263

7.【Django2.0教程】39.用Nginx+uWSGI部署https://www.bilibili.com/video/BV1xW411o77G

最后部署成功用的是网页6和7，这里要提一点的是，教程是按照ubuntu环境配置的，如果你是centos的服务器环境，就得有些变化，变化大概如下:

1.安装nginx的过程 centos中使用

yum install nginx

2.配置mystie.conf时，需要把mysite.conf放入/etc/nginx/conf.d/中，因为在nginx.conf中，有这样一句代码,自然vi的文件位置也要有变化

    include /etc/nginx/conf.d/*.conf;

3.django静态资源挂载问题，这个我在网上查了许多网页，最后用这个网页的方法成功解决了，实际上就是用uwsgi挂载静态资源，因为uwsgi获取动态请求时端口是8001，而nginx listen的端口是80，所以get方式端口是8001自然无法获取到资源，所以要在uwsgi文件中加一个static-map，类似下面这个代码

static-map=/static=/home/api/static/

具体可以看这个网页:linux下使用uwsgi部署django项目时静态文件不能正常加载https://blog.csdn.net/myk082610/article/details/81906174

和我的视频:django在nginx部署时，uwsgi载入静态资源问题处理https://www.bilibili.com/video/BV1v54y1U7Az/

七、微信公众号网页开发相关

由于需求的变更，我们这里需要使用公众号作为入口，公众号按钮进入网页，所以就有了微信授权需求，这里有这些网页可以供参考:

1.微信公众号开发（一）微信网页授权登录

https://blog.csdn.net/iccyuer/article/details/90058467?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param

2.微信公众平台http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

3.Oauth2授权模式访问之授权码模式(authorization_code)访问https://blog.csdn.net/u013887008/article/details/80616422

4.微信授权获取用户openId的方法和步骤https://www.jianshu.com/p/b7e2100b56e4

5.**获取用户基本信息(UnionID机制)**https://developers.weixin.qq.com/doc/offiaccount/User_Management/Get_users_basic_information_UnionID.html#UinonId

6.Markdown基本语法https://www.jianshu.com/p/191d1e21f7ed/

com/p/b7e2100b56e4

5.**获取用户基本信息(UnionID机制)**https://developers.weixin.qq.com/doc/offiaccount/User_Management/Get_users_basic_information_UnionID.html#UinonId

6.Markdown基本语法https://www.jianshu.com/p/191d1e21f7ed/

终于完了哈哈哈哈，这么多，有什么问题可以在评论区或者b站评论区留言。

卧龙丹心

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
django-Vue前后端分离后端流程(二)

三、前后端跨域问题这里，主要要提的就是axios的post方式发送数据的数据类型content-type不是x-www-form-urlencoded，而是application/json，对于django的后端来说直接request.POST.get是无法得到数据的，就无法完成调用API的工作，所以就需要这个网页中的几种方式之一才可以:axios 发 post 请求，后端接收不到参数的解决方案最后，我选择的是以前端的方式来解决数据转换的问题，看前端代码,引入axios和Qs,并将数
复制链接

扫一扫