1、创建 Django 环境
Pycharm Python 3.7
pip install Django==2.2.5
pip install djangorestframework==3.10.2
2、项目创建
新建
extra_apps (扩展的源码包)
apps (放所有app)
media (保存图片)
# 把extra_apps和apps标记为sources root,然后settings中也要加路径
# 修改 settings.py
import sys
sys.path.insert(0,BASE_DIR)
sys.path.insert(0,os.path.join(BASE_DIR, 'apps'))
sys.path.insert(0,os.path.join(BASE_DIR, 'extra_apps'))
3、创建 users
cd apps
python ../manage.py startapp users
users/models.py
from django.db import models
from datetime import datetime
from django.contrib.auth.models import AbstractUser
class UserProfile(AbstractUser):
# 用户信息
GENDER_CHOICES = (
("male", u"男"),
("female", u"女"),
)
# 用户用手机注册,姓名、生日和邮箱可以为空
name = models.CharField("姓名", max_length=30, null=True, blank=True)
# avatar = models.ImageField(upload_to="avatar/", verbose_name="用户头像", null=True, blank=True)
avatar = models.CharField("用户头像", max_length=4096, default="avatar/", null=True, blank=True)
birthday = models.DateField("出生年月", null=True, blank=True)
gender = models.CharField("性别", max_length=6, choices=GENDER_CHOICES, default="male")
mobile = models.CharField("电话", max_length=11, null=True, blank=True)
title = models.CharField("职位", max_length=300, default="代码人", blank=True)
email = models.EmailField("邮箱", max_length=100, null=True, blank=True)
class Meta:
verbose_name = "用户信息"
verbose_name_plural = verbose_name
def __str__(self):
return self.username
settings.py
#重载系统的用户,让UserProfile生效
AUTH_USER_MODEL = 'users.UserProfile'
# 设置成中文环境
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False
4、安装 Xadmin
安装依赖包 pip install -r xadmin.txt
将 xadmin 目录 放到 extra_apps
# urls.py
from django.urls import path
import xadmin
urlpatterns = [
path('xadmin/', xadmin.site.urls),
]
把下面两个app注册到settings.py的INSTALLED_APPS中
'xadmin',
'crispy_forms'
5、启动
重新生成数据库
python manage.py makemigrations
python manage.py migrate
创建一个管理员用户 ps: 7net
python manage.py createsuperuser
运行
python manage.py runserver
6、修改
# users/adminx.py 新建
__author__ = '7net'
import xadmin
from xadmin import views
class BaseSetting(object):
#添加主题功能
enable_themes = True
use_bootswatch = True
class GlobalSettings(object):
#全局配置,后台管理标题和页脚
site_title = "AILab"
site_footer = "www.7net.cc"
#菜单收缩
menu_style = "accordion"
xadmin.site.register(views.BaseAdminView, BaseSetting)
xadmin.site.register(views.CommAdminView, GlobalSettings)
修改app名字为中文
# users/apps.py
from django.apps import AppConfig
class UsersConfig(AppConfig):
name = 'users'
#app名字后台显示中文
verbose_name = "用户管理"
# users/__init__.py
default_app_config = 'users.apps.UsersConfig'
7、创建前端
vue init webpack front
cd front
npm install -D node-sass sass-loader
# 安装 UI 框架 https://element.eleme.cn/#/zh-CN
npm i element-ui -S
拷贝 static/css 主题文件
src 目录下创建api、store、axios,并创建相应的 index.js 文件
在 main.js 加载
安装 axios 用于http请求 npm install --save axios
安装 vuex 用于 web 存储 npm install --save vuex
$ npm run dev
创建 components/Home.vue
8、实现登录
使用 rest 框架
$ pip install djangorestframework==3.10.2
- pip install coreapi drf的文档支持
- pip install django-guardian drf对象级别的权限支持
-
pip install django-cors-headers 跨域问题
# urls.py
from django.urls import path
from django.urls import include
import xadmin
from rest_framework.documentation import include_docs_urls
urlpatterns = [
path('xadmin/', xadmin.site.urls),
path('docs',include_docs_urls(title='API 文档')),
path('api-auth/',include('rest_framework.urls')),
]
重新生成数据库
安装 jwt 登录
pip install djangorestframework-jwt
自定义用户登录