2018-05-05 20:57:37 youyou_LIN 阅读数 3011
  • Django 从入门到精通

    本课程从Django环境搭建讲起,详细讲述了Django开发的各个环节,内容包括:创建Django项目、创建Django应用、Django数据库、Django视图、Django模型、Django表单和Django模板。

    13396 人正在学习 去看看 郭宏志

初学react,在学完基本的语法之后,想要做一个基本的小demo出来,首先分别建好一个python的项目,我使用的框架为django,然后再创建好一个react的项目,接下来就是django与react的结合了(嗯,困扰了我一天多的问题)。

首先,将react项目进行编译打包(由于我创建react项目用的是create-react-app,所以直接运行npm run start就可以了),完成后会生成一个build文件,然后将build文件夹里的文件(除static文件夹)全部app下的templates文件夹下,static文件夹里的内容放到app下的static文件夹里(此时build文件夹可以让它彻底消失了),然后将react项目里的其他的文件可以放在app下的某个文件夹里了,这是就可以运行python manage.py runserver这个命令了(python项目的一些基本配置例如:urls, settings等等提前都要配置好哦),ok , 结束。

项目文件的目录结构;


frontend详情:


2019-06-04 09:15:57 qq_26608423 阅读数 462
  • Django 从入门到精通

    本课程从Django环境搭建讲起,详细讲述了Django开发的各个环节,内容包括:创建Django项目、创建Django应用、Django数据库、Django视图、Django模型、Django表单和Django模板。

    13396 人正在学习 去看看 郭宏志

自学react,作为一个只有后端python方面知识的人,看过一点点前端教程基础,学习react还是不轻松的。

记过两天的学习,自制一个简单的登录,注册界面,组件的划分用的还不是熟悉。

登录界面:http://localhost:3000/login

 

注册界面:http://localhost:3000/register

 

首页的界面:http://localhost:3000/homepage

 

一共三个界面,前端是用react画的,后端是用django做的登录注册。

 

django部分的登录注册代码,用的是restframework的模式:

class UserViewset(ModelViewSet):
    '''
    用户类,用于登录注册
    '''
    serializer_class = UserSerializer
    queryset = User.objects.all()

    @action(methods=['POST'], url_path='login', detail=False)
    def login(self, request):
        '''
        登录
        :param request: 用于传参数,必要参数 username:用户名   password:密码
        :return:
        '''
        username = request.data.get('username')
        pwd = request.data.get('password')

        res = {
            'code': 0,
            'msg': '',
            'data': {}
        }
        if not all([username, pwd]):
            res['msg'] = '参数异常。'
            return Response(res)
        print(request.data)
        try:
            user = User.objects.get(username=username, password=pwd)
        except:
            res['msg'] = '用户名或者密码错误,请重新登陆。'
            return Response(res)
        if user.is_active != 1:
            res['msg'] = '用户不可用,请重新登陆。'
            return Response(res)

        login(request, user)
        request.session['login'] = True
        request.session['FS_YWPT'] = True
        request.session.set_expiry(0)
        res['msg'] = '登陆成功'
        res['code'] = 1
        res['data'] = {'username': username}
        return Response(res)

    @action(methods=['POST'], url_path='register', detail=False)
    def register(self, request):
        '''
        注册
        :param request: 用于传参数,必要参数 email:邮箱   password:密码  username:用户名  residence:地区  website:暂时没啥用
        :return:
        '''
        email = request.data.get('email')
        password = request.data.get('password')
        username = request.data.get('username')
        residence = request.data.get('residence')
        website = request.data.get('website')
        res = {
            'code': 0,
            'msg': '',
            'data': {}
        }

        if not all([email, password, username, residence, website]):
            res['msg'] = '参数异常。'
            return Response(res)

        print([email, password, username, residence, website])
        if User.objects.filter(username=username):
            res['msg'] = '用户已存在。'
            return Response(res)

        User.objects.create(password=password, is_superuser=0, username=username, email=email)
        res['code'] = 1
        res['data'] = [email, password, username, residence, website]
        return Response(res)

 

react部分:

登录界面,用的是ant中的表单组件。

注册界面,用的是ant中的表单组件。

首页,用的是ant中的布局。

 

还有一些js代码的编写。

 

详细代码,git地址:https://github.com/SmallRedHXB/loginAndReact.git

 

2018-12-12 12:12:12 sinat_34276739 阅读数 525
  • Django 从入门到精通

    本课程从Django环境搭建讲起,详细讲述了Django开发的各个环节,内容包括:创建Django项目、创建Django应用、Django数据库、Django视图、Django模型、Django表单和Django模板。

    13396 人正在学习 去看看 郭宏志

单纯想学习如何写django项目,直接访问djangoproject.com的教程,学会创建project和apps即可。

本文重点是建立restframework提供REST的DRF项目,并且完成与REACT的前端交互(加上必要的中间插件)

1、后端的搭建

1、按照官方教程安装相关依赖

http://www.django-rest-framework.org/

sudo pip3 install djangorestframewor
sudo pip3 install markdown
sudo pip3 install django-filter

2、创建新的DJANGO项目和对应的API项目

# Set up a new project with a single application
django-admin.py startproject Backend.  # Note the trailing '.' character
cd Backend
django-admin.py startapp api
cd ..

3、执行命令建立数据库

python3 manage.py migrate

4、创建新用户

python3 manage.py createsuperuser --email admin@example.com --username admin

5、创建一个新的 Backend/api/serializers.py

from django.contrib.auth.models import User, Group
from rest_framework import serializers


class UserSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = User
        fields = ('url', 'username', 'email', 'groups')


class GroupSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Group
        fields = ('url', 'name')

6、在api/views.py下创建如下内容

from django.contrib.auth.models import User, Group
from rest_framework import viewsets
from Backend.api.serializers import UserSerializer, GroupSerializer


class UserViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows users to be viewed or edited.
    """
    queryset = User.objects.all().order_by('-date_joined')
    serializer_class = UserSerializer


class GroupViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows groups to be viewed or edited.
    """
    queryset = Group.objects.all()
    serializer_class = GroupSerializer

7、在根目录Backend/urls 创建如下内容

from django.contrib.auth.models import User, Group
from rest_framework import viewsets
from Backend.api.serializers import UserSerializer, GroupSerializer


class UserViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows users to be viewed or edited.
    """
    queryset = User.objects.all().order_by('-date_joined')
    serializer_class = UserSerializer


class GroupViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows groups to be viewed or edited.
    """
    queryset = Group.objects.all()
    serializer_class = GroupSerializer

8、在Backend的 settings.py中添加如下内容

INSTALLED_APPS = (
    ...
    'rest_framework',
)

9、最终API调用图

python3 manage.py runserver

 

 

2、前端的搭建

先安装nodejs

 

参考官方网站的教程

https://reactjs.org/docs/add-react-to-a-new-app.html

1、安装并创建新app

sudo npm install -g create-react-app
create-react-app my-app

2、启动app

cd my-app
npm start

3、刷新页面看到结果

 

4、接下来安装相关依赖

(不安装会提示 ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed)

sudo npm install -g npm-install-peer #这是解决ajd@^6.0.0的问题
sudo npm install webpack
sudo npm install --save-dev babel-preset-es2015 babel-preset-stage-3
sudo npm install --save redux redux-logger redux-persist react-redux
sudo npm install --save axios react-router-dom lodas

(可能安装完还会提示requires a peer of react@>=15 but none is installed. You must install peer dependencies yourself。

检查一下package.json,如安装了react高版本就没问题,可能没识别对)

现在,我们先只展示将前端连接后端的主要部分。

5、首先创建一个 redux store,用它来保存用户的 token,以便将来进行更多的API调用。

 

2019-08-16 14:48:23 weixin_43506858 阅读数 115
  • Django 从入门到精通

    本课程从Django环境搭建讲起,详细讲述了Django开发的各个环节,内容包括:创建Django项目、创建Django应用、Django数据库、Django视图、Django模型、Django表单和Django模板。

    13396 人正在学习 去看看 郭宏志

在这里插入图片描述

在这里插入图片描述

2016-10-31 16:22:08 qq_25936689 阅读数 8573
  • Django 从入门到精通

    本课程从Django环境搭建讲起,详细讲述了Django开发的各个环节,内容包括:创建Django项目、创建Django应用、Django数据库、Django视图、Django模型、Django表单和Django模板。

    13396 人正在学习 去看看 郭宏志

最近还没找到工作,就在学校磨练下自己的技术,之前搭了一个django的爬虫数据展示网站,

不过没做到前后端分离,项目在这https://github.com/Yangzhedi/spiderwebsite

因为之前在的公司是用react在做项目,所以打算用react+django搭建一个前后分离的博客。

这样各玩各的,互相的干扰做到最小,只有之间数据的连接。

这个blog的项目在这https://github.com/Yangzhedi/myBlog

安装环境,安装模块什么的这里就先不说了,

这里默认是已经建立好了一个blog的项目,这是整个blog的目录。


static里放css文件,一些图片,reactjs的js文件和一些package.json和webpack的配置。

templates里放html的模版,也就是至少有一个webpack的出口文件,我的出口文件是index.html,意思就是webpack打包编译好的js都会在index.html中展示出来。

这里的index.html是前后分离的展示,index2.html是前后为分离的展示,也可以正常使用。




未完待续。。。

django与vue结合

阅读数 1055

没有更多推荐了,返回首页