Django+Vue开发生鲜电商平台之3.数据模型设计和资源导入(中)

简介: 文章目录一、项目初始化二、数据模型设计1.用户数据模型设计2.商品数据模型设计3.交易数据模型设计4.用户操作数据模型设计三、xadmin后台管理系统的配置四、数据迁移和数据导入1.migration原理和表的生成2.导入商品类别和商品数据

三、xadmin后台管理系统的配置

xadmin是一个Django自带后台管理工具的替代品,可以直接使用pip install xadmin命令安装,但是由于通过这种方式安装的官方版本对版本2.1及以后的Django支持不友好,因此可点击https://download.csdn.net/download/CUFEECR/12647622下载修改后的版本,并将其解压放入extra_apps下。

然后在4个apps下分别创建adminx.py,apps/goods/adminx.py如下:

import xadmin
from .models import Goods, GoodsCategory, GoodsImage, GoodsCategoryBrand, Banner
class GoodsAdmin(object):
    list_display = ["name", "click_num", "sold_num", "fav_num", "goods_num", "market_price",
                    "shop_price", "goods_brief", "goods_desc", "is_new", "is_hot", "add_time"]
    search_fields = ['name', ]
    list_editable = ["is_hot", ]
    list_filter = ["name", "click_num", "sold_num", "fav_num", "goods_num", "market_price",
                   "shop_price", "is_new", "is_hot", "add_time", "category__name"]
    style_fields = {"goods_desc": "ueditor"}
    class GoodsImagesInline(object):
        model = GoodsImage
        exclude = ["add_time"]
        extra = 1
        style = 'tab'
    inlines = [GoodsImagesInline]
class GoodsCategoryAdmin(object):
    list_display = ["name", "category_type", "parent_category", "add_time"]
    list_filter = ["category_type", "parent_category", "name"]
    search_fields = ['name', ]
class GoodsBrandAdmin(object):
    list_display = ["category", "image", "name", "desc"]
    def get_context(self):
        context = super(GoodsBrandAdmin, self).get_context()
        if 'form' in context:
            context['form'].fields['category'].queryset = GoodsCategory.objects.filter(category_type=1)
        return context
class BannerGoodsAdmin(object):
    list_display = ["goods", "image", "index"]
class HotSearchAdmin(object):
    list_display = ["keywords", "index", "add_time"]
class IndexAdAdmin(object):
    list_display = ["category", "goods"]
xadmin.site.register(Goods, GoodsAdmin)
xadmin.site.register(GoodsCategory, GoodsCategoryAdmin)
xadmin.site.register(Banner, BannerGoodsAdmin)
xadmin.site.register(GoodsCategoryBrand, GoodsBrandAdmin)

apps/trade/adminx.py如下:

import xadmin
from .models import ShoppingCart, OrderInfo, OrderGoods
class ShoppingCartAdmin(object):
    list_display = ["user", "goods", "nums", ]
class OrderInfoAdmin(object):
    list_display = ["user", "order_sn", "trade_no", "pay_status", "post_script", "order_mount",
                    "order_mount", "pay_time", "add_time"]
    class OrderGoodsInline(object):
        model = OrderGoods
        exclude = ['add_time', ]
        extra = 1
        style = 'tab'
    inlines = [OrderGoodsInline, ]
xadmin.site.register(ShoppingCart, ShoppingCartAdmin)
xadmin.site.register(OrderInfo, OrderInfoAdmin)

apps/user_operation/adminx.py如下:

import xadmin
from .models import UserFav, UserLeavingMessage, UserAddress
class UserFavAdmin(object):
    list_display = ['user', 'goods', "add_time"]
class UserLeavingMessageAdmin(object):
    list_display = ['user', 'message_type', "message", "add_time"]
class UserAddressAdmin(object):
    list_display = ["signer_name", "signer_mobile", "district", "address"]
xadmin.site.register(UserFav, UserFavAdmin)
xadmin.site.register(UserAddress, UserAddressAdmin)
xadmin.site.register(UserLeavingMessage, UserLeavingMessageAdmin)

apps/users/adminx.py如下:

import xadmin
from xadmin import views
from .models import VerifyCode
class BaseSetting(object):
    enable_themes = True
    use_bootswatch = True
class GlobalSettings(object):
    site_title = "生鲜后台"
    site_footer = "fresh_ec"
class VerifyCodeAdmin(object):
    list_display = ['code', 'mobile', "add_time"]
xadmin.site.register(VerifyCode, VerifyCodeAdmin)
xadmin.site.register(views.BaseAdminView, BaseSetting)
xadmin.site.register(views.CommAdminView, GlobalSettings)

将xadmin配置到settings.py中:

INSTALLED_APPS = [
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'apps.users.apps.UsersConfig',
    'goods',
    'trade',
    'user_operation',
    'DjangoUeditor',
    'xadmin',
    'crispy_forms',
    'django.contrib.admin'
]

还需要安装xadmin的依赖包,从https://github.com/sshwsfc/xadmin/blob/master/requirements.txt可以看到,包括django、django-crispy-forms、django-import-export、django-reversion、django-formtools、future、httplib2和six,可以直接使用一条命令pip install django django-crispy-forms django-import-export django-reversion django-formtools future httplib2 six安装即可。


此外,还需要安装xlwt和xlsxwriter,这主要用于操作Excel文件、使功能更完善,直接使用命令pip install xlwt xlsxwriter安装即可。

最后还需要对xadmin进行数据映射,即执行makemigrations和migrate即可。


如果遇到ImportError: cannot import name 'six' from 'django.utils',可按照下面方法解决:



如果遇到以下报错:

forms.Field.__init__(self, required, widget, label, initial, help_text,
TypeError: __init__() takes 1 positional argument but 6 were given

可直接在xadmin\views\dashboard.py中将forms.Field.__init__(self, required, widget, label, initial, help_text, *args, **kwargs)改为forms.Field.__init__(self)即可。

如果遇到其他问题,可参考https://blog.csdn.net/CUFEECR/article/details/104031620进行解决。

进行映射后,再查询数据库:

+------------------------------------+                   
| Tables_in_fresh_ec                 |                   
+------------------------------------+                   
| auth_group                         |                   
| auth_group_permissions             |                   
| auth_permission                    |                   
| django_content_type                |                   
| django_migrations                  |                   
| django_session                     |                   
| goods_banner                       |                   
| goods_goods                        |                   
| goods_goodscategory                |                   
| goods_goodscategorybrand           |                   
| goods_goodsimage                   |                   
| trade_ordergoods                   |                   
| trade_orderinfo                    |                   
| trade_shoppingcart                 |                   
| user_operation_useraddress         |                   
| user_operation_userfav             |                   
| user_operation_userleavingmessage  |                   
| users_userprofile                  |                   
| users_userprofile_groups           |                   
| users_userprofile_user_permissions |                   
| users_verifycode                   |                   
| xadmin_bookmark                    |                   
| xadmin_log                         |                   
| xadmin_usersettings                |                   
| xadmin_userwidget                  |                   
+------------------------------------+                   
25 rows in set (0.01 sec)                                

显然,xadmin的数据表已经映射进数据库。

此时,还需要对xadmin配置访问路径,urls.py如下:

from django.conf.urls import url
import xadmin
urlpatterns = [
       url(r'^xadmin/', xadmin.site.urls),
]

此时还需要创建超级用户,在manage.py@Fresh Ecommerce窗口中执行createsuperuser命令,输入用户名、邮箱和密码后即可创建超级管理员。

然后访问http://127.0.0.1:8000/xadmin/如下:


显然,此时可以(用刚刚创建的用户名和密码)登录后台,但是网页语言还是英文,需要对settings.py进行设置如下:

LANGUAGE_CODE = 'zh-hans'  # 中文支持
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False

apps/goods/apps.py如下:

from django.apps import AppConfig
class GoodsConfig(AppConfig):
    name = 'goods'
    verbose_name = '商品'

apps/trade/apps.py如下:

from django.apps import AppConfig
class TradeConfig(AppConfig):
    name = 'trade'
    verbose_name = '交易管理'

apps/user_operation/apps.py如下:

from django.apps import AppConfig
class UserOperationConfig(AppConfig):
    name = 'user_operation'
    verbose_name = '用户操作管理'

apps/user/apps.py如下:

from django.apps import AppConfig
class UsersConfig(AppConfig):
    name = 'apps.users'
    verbose_name = '用户管理'

此时再查看网页如下:



显然,此时已经变为中文,并且点击每个导航栏都能看到具体内容,并且可以进行导出数据等多种操作。

四、数据迁移和数据导入

1.migration原理和表的生成

在导航栏Tools选择点击Run manage.py Task…,在命令行中输入makemigrations并执行,执行完之后,可以看到每个app下的migrations均生成了0001_initial.py文件。

但是此时数据还并未真正映射到数据库中,还需要执行migrate命令来执行之前生成的Python文件来映射数据库。也可以在migrate后跟一个具体的app名称来对某个app进行数据库映射,如migrate users命令就只会映射users下的数据模型。


执行之后,数据库中已经创建出数据模型所对应的表,可以查询如下:

show tables;

打印:

+------------------------------------+
| Tables_in_fresh_ec                 |
+------------------------------------+
| auth_group                         |
| auth_group_permissions             |
| auth_permission                    |
| django_content_type                |
| django_migrations                  |
| django_session                     |
| goods_banner                       |
| goods_goods                        |
| goods_goodscategory                |
| goods_goodscategorybrand           |
| goods_goodsimage                   |
| trade_ordergoods                   |
| trade_orderinfo                    |
| trade_shoppingcart                 |
| user_operation_useraddress         |
| user_operation_userfav             |
| user_operation_userleavingmessage  |
| users_userprofile                  |
| users_userprofile_groups           |
| users_userprofile_user_permissions |
| users_verifycode                   |
+------------------------------------+
22 rows in set (0.00 sec)

可以看到,所有的表名称都是由两部分组成,前面是所在的app的名称,剩下的是模型名称的小写形式。


注意:

(1)映射完之后,再修改模型,还需要再次执行makemigrations和migrate命令再次同步表到数据库;

django_migrations表保存了每次映射所执行的Python文件,因此不能随意删改这个表中的数据和映射产生的Python文件,否则会对数据映射产生影响。

(2)一旦使用Django模型设计和修改数据模型,就不要再轻易使用MySQL管理工具如Navicat等来手动修改表结构,这样两边不一致会很容易出错。

相关文章
|
1月前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
2月前
|
JavaScript 前端开发 测试技术
组件化开发:创建可重用的Vue组件
【10月更文挑战第21天】组件化开发:创建可重用的Vue组件
27 1
|
2月前
|
JavaScript 前端开发
vue全局公共组件自动引入并注册,开发效率直接起飞!
【10月更文挑战第14天】vue全局公共组件自动引入并注册,开发效率直接起飞!
55 1
|
2月前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
422 0
|
2月前
|
存储 JSON JavaScript
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
75 0
|
2月前
|
设计模式 JavaScript 开发工具
Vue开发中使用好钩子方法(hook method)可以使你的代码更加模块化和可维护
Vue开发中使用好钩子方法(hook method)可以使你的代码更加模块化和可维护
20 0
|
2月前
|
JavaScript 算法 前端开发
在Vue开发中v-if指令和v-show指令的使用介绍,v-if和v-for的优先级以及使用注意事项的介绍
在Vue开发中v-if指令和v-show指令的使用介绍,v-if和v-for的优先级以及使用注意事项的介绍
23 0
|
22天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
23天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
25天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
28 1
vue学习第一章

热门文章

最新文章