Django建教育平台(二)--Users App

本文介绍如何在Django项目中构建Users应用,包括新建应用、设计用户表,增加自定义字段,处理migrations,以及在Navicat中查看数据表结构。在Django默认user表基础上,增加了昵称、生日、性别和地址等字段。
摘要由CSDN通过智能技术生成

1. 新建Users App

a. 点击pycharm Tools菜单--Run manage.py task

b. 输入startapp users

一般web app中, users表是需要第一个设置的.


2. 设计Users表

a. 设计Users表之前, 先看一下django默认的user表

①双击elearn数据表, ②然后双击all_user表


查看其中的字段:

id:主键

password:用户密码

last_login:最后一次登录时间

is_superuser:是否超级用户

username:用户名

first_name:英文名名字

last_name:英文名姓氏

email:email

is_staff:是否为员工

is_active:是否激活状态

date_joined:加入日期

b. 查看我们的网站users设计了哪些字段

以下是一个粗略设计图


可以看出昵称, 生日,性别,地址,手机号字段都没有在django自带的all_user中.

c. 增加我们需要的字段

users\models中修改代码:

from django.contrib.auth.models import AbstractUser


cl
在前面的文章中,我们已经学习了如何使用DRF创RESTful API,并将其与Angular应用程序集成。在本文中,我们将继续深入探讨如何使用DRF实现前后端分离。 ### 前后端分离 前后端分离是一种软件架构模式,其中前端和后端是独立的应用程序。前端应用程序通过API与后端应用程序通信,以获取数据并执行操作。这种模式有很多好处,例如: - 可以使前端和后端的开发人员专注于各自的任务,从而提高开发效率。 - 可以使前端和后端的技术栈不受限制,从而允许使用最佳的工具和技术。 - 可以使前端应用程序更容易扩展和重用。 ### 使用DRF实现前后端分离 我们可以使用DRF创一个RESTful API,然后使用任何前端框架(如Angular、React或Vue.js)来消费它。在这里,我们将使用Angular作为前端框架。 #### 创一个简单的Angular应用程序 我们首先需要创一个基本的Angular应用程序。我们可以使用Angular CLI来创一个新应用程序: ``` ng new my-app cd my-app ng serve ``` 现在我们可以在浏览器中访问`http://localhost:4200/`来查看我们的应用程序。 #### 使用HttpClient获取数据 接下来,我们需要使用Angular的HttpClient模块来获取数据。我们可以在Angular组件中注入HttpClient服务,并使用它来执行GET请求: ``` import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-root', template: ` <h1>Users</h1> <ul> <li *ngFor="let user of users">{{ user.username }}</li> </ul> `, }) export class AppComponent { users = []; constructor(private http: HttpClient) {} ngOnInit() { this.http.get('http://localhost:8000/api/users/').subscribe((data: any) => { this.users = data.results; }); } } ``` 在上面的代码中,我们使用`HttpClient`服务来执行GET请求,并将结果存储在`users`数组中。然后我们可以在HTML模板中使用`*ngFor`指令来遍历所有用户。 #### 使用HttpClient提交数据 我们也可以使用`HttpClient`服务来提交数据。例如,我们可以在Angular组件中创一个新用户并将其提交到后端: ``` import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-root', template: ` <h1>New User</h1> <form (submit)="onSubmit()"> <label for="username">Username:</label> <input type="text" id="username" name="username" [(ngModel)]="username"> <br> <label for="email">Email:</label> <input type="email" id="email" name="email" [(ngModel)]="email"> <br> <button type="submit">Submit</button> </form> `, }) export class AppComponent { username = ''; email = ''; constructor(private http: HttpClient) {} onSubmit() { const data = { username: this.username, email: this.email }; this.http.post('http://localhost:8000/api/users/', data).subscribe((response: any) => { console.log(response); }); } } ``` 在上面的代码中,我们创了一个表单来创一个新用户。当用户提交表单时,我们使用`HttpClient`服务来执行POST请求,并将表单数据作为JSON对象传递给后端。 ### 结论 在本文中,我们学习了如何使用DRF和Angular创一个前后端分离的Web应用程序。我们了解了如何使用Angular的HttpClient模块来获取和提交数据。我们还了解了前后端分离的好处,并了解了如何使用DRF实现这种模式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值