热搜风云榜
有用、有趣的内容
知识运维如何使用Django和React构建待办事项应用程序
知识运维
如何使用Django和React构建待办事项应用程序

By
ADMIN

2021年5月19日

4
0

Advertisment -
spot_img
介绍
在本教程中，您将使用Django和React构建一个To-Do应用程序。

React是用于开发SPA（单页应用程序）的JavaScript框架。它拥有可靠的文档和周围充满活力的生态系统。

Django是一个Python Web框架，可简化Web开发中的常见做法。Django是可靠的，并且拥有一个充满活力的稳定库生态系统，可满足常见的开发需求。

对于此应用程序，React充当前端或客户端框架，处理用户界面并通过对Django后端的请求获取和设置数据，Django后端是使用Django REST框架（DRF）构建的API。

在本教程的最后，您将拥有一个可以正常运行的应用程序：

注意：本教程的源代码可在GitHub上找到。

该应用程序将允许用户创建任务并将其标记为已完成或未完成。

先决条件
要遵循本教程，您需要：

为Python 3安装并设置本地编程环境
安装Node.js并创建本地开发环境
警告：本教程中提供的代码仅用于教育目的，不用于生产用途。

本教程已通过Python pipv3.9.1 ，v20.2.4，Django v3.1.6，djangorestframeworkv3.12.2，django-cors-headersv3.7.0，Node v15.8.0，npmv7.5.4，React v17.0.1和axiosv0.21.0进行了验证。

第1步-设置后端
在本部分中，您将创建一个新的项目目录并安装Django。

打开一个新的终端窗口，并运行以下命令来创建一个新的项目目录：

mkdir django-todo-react
复制

接下来，导航到目录：

cd django-todo-react
复制

现在使用pip以下命令安装Pipenv ：

pip install pipenv
复制

注意：根据您的安装，可能需要使用pip3而不是pip。

并激活一个新的虚拟环境：

pipenv shell
复制

使用Pipenv安装Django：

pipenv install django
复制

然后创建一个新项目，名为backend：

django-admin startproject backend
复制

接下来，导航到新创建的后端目录：

cd backend
复制

启动一个名为的新应用程序todo：

python manage.py startapp todo
运行迁移：

python manage.py migrate
并启动服务器：

python manage.py runserver
http://localhost:8000在您的网络浏览器中导航到：

如何使用Django和React构建待办事项应用程序
此时，您将看到Django应用程序实例成功运行。完成后，您可以停止服务器（CONTROL+C或CTRL+C）。

注册todo申请
现在，您已经完成了后端的设置，您可以开始将todo应用程序注册为已安装的应用程序，以便Django可以识别它。

backend/settings.py在您的代码编辑器中打开文件，然后将其添加todo到INSTALLED_APPS：backend / settings.py

Application definition

INSTALLED_APPS = [
‘django.contrib.admin’,
‘django.contrib.auth’,
‘django.contrib.contenttypes’,
‘django.contrib.sessions’,
‘django.contrib.messages’,
‘django.contrib.staticfiles’,
‘todo’,
]
复制

然后，保存您的更改。

定义Todo模型
让我们创建一个模型来定义Todo项目应如何存储在数据库中。

todo/models.py在代码编辑器中打开文件，并添加以下代码行：待办事项/ models.py

from django.db import models

Create your models here.

class Todo(models.Model):
title = models.CharField(max_length=120)
description = models.TextField()
completed = models.BooleanField(default=False)

def _str_(self):
    return self.title

复制

上面的代码段描述了Todo模型的三个属性：

title
description
completed
该completed属性是任务的状态。任务将随时完成或未完成。因为您已经创建了Todo模型，所以将需要创建一个迁移文件：

python manage.py makemigrations todo
复制

并将更改应用到数据库：

python manage.py migrate todo
复制

您可以Todo使用Django默认提供的管理界面进行测试，以查看CRUD操作是否在您创建的模型上起作用。

todo/admin.py使用代码编辑器打开文件，并添加以下代码行：待办事项/admin.py

from django.contrib import admin
from .models import Todo

class TodoAdmin(admin.ModelAdmin):
list_display = (‘title’, ‘description’, ‘completed’)

Register your models here.

admin.site.register(Todo, TodoAdmin)
复制

然后，保存您的更改。

您将需要创建一个“超级用户”帐户来访问管理界面。在终端中运行以下命令：

python manage.py createsuperuser
复制

系统将提示您输入超级用户的用户名，电子邮件和密码。请确保输入您可以记住的详细信息，因为您将需要它们登录到管理仪表板。

再次启动服务器：

python manage.py runserver
复制

http://localhost:8000/admin在Web浏览器中导航到。并使用之前创建的用户名和密码登录：

Django应用程序管理界面的屏幕截图。
您可以Todo使用此界面创建，编辑和删除项目：

显示待办事项的Django应用程序管理界面的屏幕快照。
试用了该界面之后，您可以停止服务器（CONTROL+C或CTRL+C）。

第2步-设置API
在本部分中，您将使用Django REST框架创建一个API。

安装djangorestframework和django-cors-headers使用Pipenv：

pipenv install djangorestframework django-cors-headers
复制

您需要将rest_framework和添加corsheaders到已安装的应用程序列表中。backend/settings.py在代码编辑器中打开文件，然后更新INSTALLED_APPS和MIDDLEWARE部分：backend / settings.py

Application definition

MIDDLEWARE = [
‘django.middleware.security.SecurityMiddleware’,
‘django.contrib.sessions.middleware.SessionMiddleware’,
‘django.middleware.common.CommonMiddleware’,
‘django.middleware.csrf.CsrfViewMiddleware’,
‘django.contrib.auth.middleware.AuthenticationMiddleware’,
‘django.contrib.messages.middleware.MessageMiddleware’,
‘django.middleware.clickjacking.XFrameOptionsMiddleware’,
‘corsheaders.middleware.CorsMiddleware’,
]
复制

然后，将以下代码行添加到backend/settings.py文件的底部：backend / settings.py

CORS_ORIGIN_WHITELIST = [
‘http://localhost:3000’
]
复制

django-cors-headers是一个Python库，该库将防止由于CORS规则而通常会导致的错误。在CORS_ORIGIN_WHITELIST代码中，您已列入白名单，localhost:3000因为您希望应用程序的前端（将在该端口上提供服务）与API进行交互。

创造 serializers
您将需要序列化程序将模型实例转换为JSON，以便前端可以处理接收到的数据。

todo/serializers.py使用代码编辑器创建一个文件。打开serializers.py文件并使用以下代码行对其进行更新：待办事项/serializers.py

from rest_framework import serializers
from .models import Todo

class TodoSerializer(serializers.ModelSerializer):
class Meta:
model = Todo
fields = (‘id’, ‘title’, ‘description’, ‘completed’)
复制

此代码指定要使用的模型以及要转换为JSON的字段。

创建视图
您将需要TodoView在todo/views.py文件中创建一个类。

todo/views.py使用代码编辑器打开文件，并添加以下代码行：待办事项/views.py

from django.shortcuts import render
from rest_framework import viewsets
from .serializers import TodoSerializer
from .models import Todo

Create your views here.

class TodoView(viewsets.ModelViewSet):
serializer_class = TodoSerializer
queryset = Todo.objects.all()
复制

viewsets默认情况下，基类提供CRUD操作的实现。这段代码指定serializer_class和queryset。

backend/urls.py使用代码编辑器打开文件，然后用以下代码行替换内容：后端/ urls.py

from django.contrib import admin
from django.urls import path, include
from rest_framework import routers
from todo import views

router = routers.DefaultRouter()
router.register(r’todos’, views.TodoView, ‘todo’)

urlpatterns = [
path(‘admin/’, admin.site.urls),
path(‘api/’, include(router.urls)),
]
复制

此代码指定API的URL路径。这是完成API构建的最后一步。

您现在可以在Todo模型上执行CRUD操作。路由器类允许您进行以下查询：

/todos/-返回所有Todo项目的列表。CREATE并且READ可以在此处执行操作。
/todos/id–Todo使用id主键返回单个项目。UPDATE并且DELETE可以在此处执行操作。
让我们重新启动服务器：

python manage.py runserver
复制

http://localhost:8000/api/todos在您的网络浏览器中导航到：

Todo项目的API结果的屏幕截图。
您可以CREATE使用界面来添加新的待办事项：

用于创建新的待办事项的API工具的屏幕快照。
如果成功创建了“待办事项”项目，将为您提供成功的响应：

成功创建Todo项目的API响应的屏幕截图。
您还可以执行DELETE和UPDATE具体的操作Todo使用项目id的主键。使用地址结构/api/todos/{id}并提供一个id。

添加1到URL来检查带有id“ 1”的待办事项。http://localhost:8000/api/todos/1在您的网络浏览器中导航到：

用于DELETE和PUT的API工具的屏幕截图。
这样就完成了应用程序后端的构建。

第3步-设置前端
现在您已经完成了应用程序的后端，您可以创建前端，并使其通过您创建的接口与后端进行通信。

首先，打开一个新的终端窗口并导航到django-todo-react项目目录。

要设置前端，本教程将依靠Create React App。有几种使用方法create-react-app。一种方法是用于npx运行程序包并创建项目：

npx create-react-app frontend
复制

您可以通过阅读如何使用Create React App设置React项目来了解有关此方法的更多信息。

创建项目后，您可以进入新创建的frontend目录：

cd frontend
复制

然后，启动应用程序：

npm start
复制

您的网络浏览器将打开，http://localhost:3000并且将显示默认的Create React App屏幕：

默认的Create React App应用程序的登录页面的屏幕快照。
接下来，安装bootstrap并reactstrap提供用户界面工具。

npm install bootstrap@4.6.0 reactstrap@8.9.0 --legacy-peer-deps
复制

注意：您可能会遇到unable to resolve dependency tree错误，具体取决于您的React，Bootstrap和Reactstrap版本。

在修订时，popper.js不推荐使用的最新版本，它将与React 17+冲突。这是一个已知问题，可以–legacy-peer-deps在安装时使用该选件。

index.js在您的代码编辑器中打开并添加bootstrap.min.css：frontend / src / index.js

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘bootstrap/dist/css/bootstrap.css’;
import ‘./index.css’;
import App from ‘./App’;
import reportWebVitals from ‘./reportWebVitals’;

ReactDOM.render(
<React.StrictMode>

</React.StrictMode>,
document.getElementById(‘root’)
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
复制

如果您在执行此步骤时遇到困难，则可以查阅官方文档以进行添加bootstrap。

App.js在您的代码编辑器中打开并添加以下代码行：frontend / src / App.js

import React, { Component } from “react”;

const todoItems = [
{
id: 1,
title: “Go to Market”,
description: “Buy ingredients to prepare dinner”,
completed: true,
},
{
id: 2,
title: “Study”,
description: “Read Algebra and History textbook for the upcoming test”,
completed: false,
},
{
id: 3,
title: “Sammy’s books”,
description: “Go to library to return Sammy’s books”,
completed: true,
},
{
id: 4,
title: “Article”,
description: “Write article on how to use Django with React”,
completed: false,
},
];

class App extends Component {
constructor(props) {
super(props);
this.state = {
viewCompleted: false,
todoList: todoItems,
};
}

displayCompleted = (status) => {
if (status) {
return this.setState({ viewCompleted: true });
}

return this.setState({ viewCompleted: false });

};

renderTabList = () => {
return (

<span
className={this.state.viewCompleted ? “nav-link active” : “nav-link”}
onClick={() => this.displayCompleted(true)}
>
Complete

<span
className={this.state.viewCompleted ? “nav-link” : “nav-link active”}
onClick={() => this.displayCompleted(false)}
>
Incomplete

);
};

renderItems = () => {
const { viewCompleted } = this.state;
const newItems = this.state.todoList.filter(
(item) => item.completed == viewCompleted
);

return newItems.map((item) => (
  <li
    key={item.id}
    className="list-group-item d-flex justify-content-between align-items-center"
  >
    <span
      className={`todo-title mr-2 ${
        this.state.viewCompleted ? "completed-todo" : ""
      }`}
      title={item.description}
    >
      {item.title}
    </span>
    <span>
      <button
        className="btn btn-secondary mr-2"
      >
        Edit
      </button>
      <button
        className="btn btn-danger"
      >
        Delete
      </button>
    </span>
  </li>
));

};

render() {
return (

Todo app

Add task

{this.renderTabList()}

{this.renderItems()}

);
}
}

export default App;
复制

该代码包括一些用于四个项目的硬编码值。这些将是临时值，直到从后端获取项目为止。

该renderTabList()函数呈现两个跨度，以帮助控制显示哪些项目集。单击“完成”选项卡将显示已完成的任务。单击“未完成”选项卡将显示未完成的任务。

保存更改并在Web浏览器中观察该应用程序：

当前显示“研究”和“文章”任务的应用程序的屏幕快照。
要处理诸如添加和编辑任务之类的操作，您将需要创建一个模式组件。

首先，components在src目录中创建一个文件夹：

mkdir src/components
复制

然后，创建一个Modal.js文件并使用代码编辑器将其打开。添加以下代码行：frontend / src / components / Modal.js

import React, { Component } from “react”;
import {
Button,
Modal,
ModalHeader,
ModalBody,
ModalFooter,
Form,
FormGroup,
Input,
Label,
} from “reactstrap”;

export default class CustomModal extends Component {
constructor(props) {
super(props);
this.state = {
activeItem: this.props.activeItem,
};
}

handleChange = (e) => {
let { name, value } = e.target;

if (e.target.type === "checkbox") {
  value = e.target.checked;
}

const activeItem = { ...this.state.activeItem, [name]: value };

this.setState({ activeItem });

};

render() {
const { toggle, onSave } = this.props;

return (
  <Modal isOpen={true} toggle={toggle}>
    <ModalHeader toggle={toggle}>Todo Item</ModalHeader>
    <ModalBody>
      <Form>
        <FormGroup>
          <Label for="todo-title">Title</Label>
          <Input
            type="text"
            id="todo-title"
            name="title"
            value={this.state.activeItem.title}
            onChange={this.handleChange}
            placeholder="Enter Todo Title"
          />
        </FormGroup>
        <FormGroup>
          <Label for="todo-description">Description</Label>
          <Input
            type="text"
            id="todo-description"
            name="description"
            value={this.state.activeItem.description}
            onChange={this.handleChange}
            placeholder="Enter Todo description"
          />
        </FormGroup>
        <FormGroup check>
          <Label check>
            <Input
              type="checkbox"
              name="completed"
              checked={this.state.activeItem.completed}
              onChange={this.handleChange}
            />
            Completed
          </Label>
        </FormGroup>
      </Form>
    </ModalBody>
    <ModalFooter>
      <Button
        color="success"
        onClick={() => onSave(this.state.activeItem)}
      >
        Save
      </Button>
    </ModalFooter>
  </Modal>
);

}
}
复制

此代码创建一个CustomModal类，并嵌套从reactstrap库派生的Modal组件。

该代码还以以下形式定义了三个字段：

title
description
completed
这些字段与我们在后端的Todo模型上定义为属性的字段相同。

的CustomModal接收activeItem，toggle以及onSave当道具：

activeItem 代表要编辑的待办事项。
toggle 是用于控制模态状态（即打开或关闭模态）的功能。
onSave 是一个函数，用于保存Todo项的编辑值。
接下来，您将CustomModal组件导入到App.js文件中。

src/App.js使用代码编辑器重新访问该文件，并将全部内容替换为以下代码行：frontend / src / App.js

import React, { Component } from “react”;
import Modal from “./components/Modal”;

class App extends Component {
constructor(props) {
super(props);
this.state = {
viewCompleted: false,
todoList: todoItems,
modal: false,
activeItem: {
title: “”,
description: “”,
completed: false,
},
};
}

toggle = () => {
this.setState({ modal: !this.state.modal });
};

handleSubmit = (item) => {
this.toggle();

alert("save" + JSON.stringify(item));

};

handleDelete = (item) => {
alert(“delete” + JSON.stringify(item));
};

createItem = () => {
const item = { title: “”, description: “”, completed: false };

this.setState({ activeItem: item, modal: !this.state.modal });

};

editItem = (item) => {
this.setState({ activeItem: item, modal: !this.state.modal });
};

displayCompleted = (status) => {
if (status) {
return this.setState({ viewCompleted: true });
}

return this.setState({ viewCompleted: false });

};

renderTabList = () => {
return (

);
};

renderItems = () => {
const { viewCompleted } = this.state;
const newItems = this.state.todoList.filter(
(item) => item.completed === viewCompleted
);

return newItems.map((item) => (
  <li
    key={item.id}
    className="list-group-item d-flex justify-content-between align-items-center"
  >
    <span
      className={`todo-title mr-2 ${
        this.state.viewCompleted ? "completed-todo" : ""
      }`}
      title={item.description}
    >
      {item.title}
    </span>
    <span>
      <button
        className="btn btn-secondary mr-2"
        onClick={() => this.editItem(item)}
      >
        Edit
      </button>
      <button
        className="btn btn-danger"
        onClick={() => this.handleDelete(item)}
      >
        Delete
      </button>
    </span>
  </li>
));

};

render() {
return (

Todo app

Add task

{this.renderTabList()}

{this.renderItems()}

{this.state.modal ? (

) : null}

);
}
}

export default App;
复制

保存更改并在Web浏览器中观察该应用程序：

Modal组件的屏幕快照，显示一个新任务，标题为-Study-，描述为-Read Algebra and History教科书，即将进行的测试
如果尝试编辑和保存Todo项目，则会收到显示该Todo项目对象的警报。单击“保存”或“删除”将对该Todo项目执行相应的操作。

注意：：根据您的React和Reactstrap版本，您可能会遇到控制台错误。在修改的时候，Warning: Legacy context API has been detected within a strict-mode tree.并且Warning: findDOMNode is deprecated in StrictMode.是已知的问题。

现在，您将修改应用程序，使其与上一节中构建的Django API交互。重新访问第一个终端窗口，并确保服务器正在运行。如果未运行，请使用以下命令：

python manage.py runserver
复制

注意：如果关闭此终端窗口，请记住，您将需要导航到该backend目录并使用虚拟Pipenv Shell。

要向后端服务器上的API端点发出请求，您将安装一个名为的JavaScript库axios。

在第二个终端窗口中，确保您在frontend目录中并安装axios：

npm install axios@0.21.1
复制

然后frontend/package.json在代码编辑器中打开文件并添加一个proxy：frontend / package.json

[…]
“name”: “frontend”,
“version”: “0.1.0”,
“private”: true,
“proxy”: “http://localhost:8000”,
“dependencies”: {
“axios”: “^0.18.0”,
“bootstrap”: “^4.1.3”,
“react”: “^16.5.2”,
“react-dom”: “^16.5.2”,
“react-scripts”: “2.0.5”,
“reactstrap”: “^6.5.0”
},
[…]
复制

代理将帮助通过隧道将API请求传送http://localhost:8000到Django应用程序将其处理的位置。没有this proxy，您将需要指定完整路径：

axios.get(“http://localhost:8000/api/todos/”)
复制

使用proxy，您可以提供相对路径：

axios.get("/api/todos/")
复制

注意：您可能需要重新启动开发服务器，代理才能在应用程序中注册。

重新访问该frontend/src/App.js文件，然后使用代码编辑器将其打开。在此步骤中，您将删除硬编码todoItems并使用对后端服务器的请求中的数据。handleSubmit和handleDelete

打开App.js文件并将其替换为最终版本：frontend / src / App.js

import React, { Component } from “react”;
import Modal from “./components/Modal”;
import axios from “axios”;

class App extends Component {
constructor(props) {
super(props);
this.state = {
viewCompleted: false,
todoList: [],
modal: false,
activeItem: {
title: “”,
description: “”,
completed: false,
},
};
}

componentDidMount() {
this.refreshList();
}

refreshList = () => {
axios
.get("/api/todos/")
.then((res) => this.setState({ todoList: res.data }))
.catch((err) => console.log(err));
};

toggle = () => {
this.setState({ modal: !this.state.modal });
};

handleSubmit = (item) => {
this.toggle();

if (item.id) {
  axios
    .put(`/api/todos/${item.id}/`, item)
    .then((res) => this.refreshList());
  return;
}
axios
  .post("/api/todos/", item)
  .then((res) => this.refreshList());

};

handleDelete = (item) => {
axios
.delete(/api/todos/${item.id}/)
.then((res) => this.refreshList());
};

createItem = () => {
const item = { title: “”, description: “”, completed: false };

this.setState({ activeItem: item, modal: !this.state.modal });

};

editItem = (item) => {
this.setState({ activeItem: item, modal: !this.state.modal });
};

displayCompleted = (status) => {
if (status) {
return this.setState({ viewCompleted: true });
}

return this.setState({ viewCompleted: false });

};

renderTabList = () => {
return (

<span
onClick={() => this.displayCompleted(true)}
className={this.state.viewCompleted ? “nav-link active” : “nav-link”}
>
Complete

<span
onClick={() => this.displayCompleted(false)}
className={this.state.viewCompleted ? “nav-link” : “nav-link active”}
>
Incomplete

);
};

renderItems = () => {
const { viewCompleted } = this.state;
const newItems = this.state.todoList.filter(
(item) => item.completed === viewCompleted
);

return newItems.map((item) => (
  <li
    key={item.id}
    className="list-group-item d-flex justify-content-between align-items-center"
  >
    <span
      className={`todo-title mr-2 ${
        this.state.viewCompleted ? "completed-todo" : ""
      }`}
      title={item.description}
    >
      {item.title}
    </span>
    <span>
      <button
        className="btn btn-secondary mr-2"
        onClick={() => this.editItem(item)}
      >
        Edit
      </button>
      <button
        className="btn btn-danger"
        onClick={() => this.handleDelete(item)}
      >
        Delete
      </button>
    </span>
  </li>
));

};

render() {
return (

Todo app

Add task

{this.renderTabList()}

{this.renderItems()}

{this.state.modal ? (

) : null}

);
}
}

export default App;
复制

该refreshList()函数是可重用的，每次完成API请求时都会调用该函数。它将更新“待办事项”列表以显示最近添加的项目列表。

该handleSubmit()功能负责创建和更新操作。如果作为参数传递的项目没有id，则可能尚未创建，因此该函数将创建它。

此时，请验证后端服务器是否在第一个终端窗口中运行：

python manage.py runserver
复制

注意：如果关闭此终端窗口，请记住，您将需要导航到该backend目录并使用虚拟Pipenv Shell。

在第二个终端窗口中，确保您位于frontend目录中并启动前端应用程序：

npm start
复制

现在，当你访问http://localhost:3000你的网页浏览器，应用程序将允许你READ，CREATE，UPDATE，和DELETE任务。

用户与应用程序交互以创建新项目并在完整和不完整状态之间切换的动画gif。
这样就完成了Todo应用程序的前端和后端。

结论
在本文中，您使用Django和React构建了一个To-Do应用程序。你用这个来实现djangorestframework，django-cors-headers，axios，bootstrap，和reactstrap图书馆。

如果您想了解有关Django的更多信息，请查看[我们的Django主题页面]（hhttps：// www.digitalocean.com/community/tags/django）进行练习和编程项目。

如果您想了解有关React的更多信息，请查看我们的React.js系列中的How To Code，或查看我们的React主题页面以获取练习和编程项目。

前一篇文章
如何在Ubuntu 18.04上使用Python在MariaDB中存储和检索数据

admin
https://www.rsfyb.com
留下一个答复
发表评论：
发表评论：
昵称：*
昵称：*
邮箱：*
邮箱：*
网站：
网站：
在我的浏览器中保存我的姓名，电子邮件和网站，以便下次评论。

最新消息
运维2021年5月19日
如何使用Django和React构建待办事项应用程序在本文中，您使用Django和React构建了一个To-Do应用程序。你用这个来实现djangorestframework，django-cors-headers，axios，bootstrap，和reactstrap图书馆。
运维2021年5月19日
如何在Ubuntu 18.04上使用Python在MariaDB中存储和检索数据如果要实现删除，则可以使用必要的声明，语句和调用来构建类似的功能。
运维2021年5月19日
如何在服务器模式下安装和配置pgAdmin 4这样，您就成功创建了一个表，并通过pgAdmin Web界面用一些数据填充了该表。
运维2021年5月19日
如何将Gatsby应用程序部署到DigitalOcean应用程序平台导航至应用程序标题下方列出的URL。您会发现您的Gatsby应用已成功部署。

Advertisement -
spot_img
运维2021年5月19日
如何在Ubuntu 20.04上安装WebminWebmin允许您通过其用户界面更新所有软件包。要更新所有软件包，请首先单击左侧边栏上方的“仪表板”按钮，然后找到“软件包更新”字段。
运维2021年5月19日
如何在Ubuntu 20.04上使用Seafile同步和共享文件您已验证文件同步工作正常，并且可以使用Seafile同步和共享来自多个设备的文件和文件夹。
必读
Advertisement -
spot_img
可能喜欢
运维
如何在Ubuntu 18.04上使用Python在MariaDB中存储和检索数据
如果要实现删除，则可以使用必要的声明，语句和调用来构建类似的功能。
ADMIN
运维
如何在服务器模式下安装和配置pgAdmin 4
这样，您就成功创建了一个表，并通过pgAdmin Web界面用一些数据填充了该表。
ADMIN
运维
如何将Gatsby应用程序部署到DigitalOcean应用程序平台
导航至应用程序标题下方列出的URL。您会发现您的Gatsby应用已成功部署。
ADMIN
运维
如何在Ubuntu 20.04上安装Webmin
Webmin允许您通过其用户界面更新所有软件包。要更新所有软件包，请首先单击左侧边栏上方的“仪表板”按钮，然后找到“软件包更新”字段。
ADMIN
编辑精选
如何使用Django和React构建待办事项应用程序
2021年5月19日

如何在Ubuntu 18.04上使用Python在MariaDB中存储和检索数据
2021年5月19日

如何在服务器模式下安装和配置pgAdmin 4
2021年5月19日
必读
如何使用Django和React构建待办事项应用程序
2021年5月19日

如何在Ubuntu 18.04上使用Python在MariaDB中存储和检索数据
2021年5月19日

原文链接：https://blog.csdn.net/qq_58435143/article/details/117050287

By ADMIN

Application definition

Create your models here.

Register your models here.

Application definition

Create your views here.

Todo app

Todo app

Todo app

By
ADMIN