Vue+Django2.0 restframework打造前後端分離的生鮮電商專案(1)
1.開發環境配置
Windows7 64位旗艦版
python3.6
node.js
mysql
navicat
pycharm
webstorm或vscode
2.專案初始化
新版的pycharm很貼心的讓每一個新的專案,都自動會在一個虛擬環境中,放心的新建專案就可以了,不用考慮虛擬環境的事兒了
1.新建Django專案,專案名為MxShop,新建app命名為users
2.修改django版本與安裝djangorestframework
使用新版的pycharm新建django專案,因為每一次pycharm都會新建一個虛擬環境,將專案所需的所有模組下載到最新版本,然後放到虛擬環境裡,所以,每次用pycharm新建django專案,則pycharm都會下載最新版本的django,我在寫這篇部落格時,django最新已經更新到2.1.1了,但是,djangorestframework目前只支援到django2.0,如果在django2.1的專案下安裝djangorestframework親測有坑,會報錯的。
so!將django的版本,從最新版本的2.1.1改為2.0
python -m django --version
pip install django==2.0
然後安裝djangorestframework及其依賴包markdown、django-filter
pip install djangorestframework markdown django-filter
安裝 pillow包(做圖片處理的)
pip install pillow
3.將database(資料庫),改成mysql驅動
1.在settings.py裡配置
DATABASES = {'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'mxshop', 'USER':'root', 'PASSWORD':'你的mysql密碼', 'HOST':'127.0.0.1', "OPTIONS":{"init_command":"SET default_storage_engine=INNODB;"}#第三方登入功能必須加上 } }
2.安裝PyMYSQL
pip install PyMYSQL
3.在MxShop/__init__.py中加入程式碼
import pymysql pymysql.install_as_MySQLdb()
4.在mysql操作介面中新建mxshop資料庫
show databases;#檢視資料庫 create database mxshop;#新建資料庫mxshop
4.整理一下專案結構
1.新建
1.新建apps包用來存放我們新建的app,將users拖入。
2.新建extra_apps包,用來存放第三方包。
3.新建media資料夾,用來存放檔案
4.新建db_tools資料夾,用來放一些外部指令碼
2.mark路徑
在apps和extra_apps上分別,右鍵→Mark Directory as→Sources Root
3.settings中加程式碼配置路徑
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'))
4.在settings中配置media路徑
MEDIA_URL='/media/' MEDIA_ROOT=os.path.join(BASE_DIR,'media')
3.Model設計
1.新建goods、trade、user_operation三個app,並且在settings中註冊
開啟終端,執行新建app命令
python manage.py startapp goods
python manage.py startapp trade
python manage.py startapp user_operation
將新建的app拖入apps包
在settings.py中註冊app
2.設計users的models.py
1.models.py
from datetime import datetime from django.db import models from django.contrib.auth.models import AbstractUser # Create your models here. class UserProfile(AbstractUser): """ 使用者 """ name=models.CharField(max_length=30,null=True,blank=True,verbose_name='姓名') birthday=models.DateField(null=True,blank=True,verbose_name='出生年月') mobile=models.CharField(max_length=6,choices=(('male','男'),('female','女')),default='female',verbose_name='性別') gender=models.CharField(max_length=11,verbose_name='電話') email = models.CharField(max_length=100,null=True,blank=True,verbose_name='郵箱') class Meta: verbose_name='使用者' verbose_name_plural = verbose_name def __str__(self): return self.name class VerifyCode(models.Model): """ 簡訊驗證碼 """ code=models.CharField(max_length=10,verbose_name='驗證碼') mobile=models.CharField(max_length=11,verbose_name='電話') add_time=models.DateTimeField(default=datetime.now,verbose_name='新增時間') class Meta: verbose_name='簡訊驗證碼' verbose_name_plural=verbose_name def __str__(self): return self.code
2.在settings.py中配置
AUTH_USER_MODEL='users.UserProfile'
3.設計goods的models.py
1.DjangoUeditor富文字編輯框的安裝與配置
1.將DjangoUeditor匯入extra_apps中
#相容python3+django2.0/2.1的DjangoUeditor https://gitee.com/xueluoyihai/DjangoUeditor-for-python3-django2.0
2.在settings中註冊
3.在urls.py中
from django.contrib import admin from django.urls import path from django.views.static import serve from MxShop.settings import MEDIA_ROOT from django.urls import include urlpatterns = [ path('admin/', admin.site.urls), path('media/<path:path>',serve,{'document_root':MEDIA_ROOT}), path('ueditor/',include('DjangoUeditor.urls' )), ]
2.models.py
from datetime import datetime from django.db import models from DjangoUeditor.models import UEditorField # Create your models here. class GoodsCategory(models.Model): """ 商品類別 """ CATEGORY_TYPE=( (1,'一級類目'), (2,'二級類目'), (3,'三級類目'), ) name=models.CharField(default='',max_length=30,verbose_name='類別名',help_text='類別名') code=models.CharField(default='',max_length=30,verbose_name='類別code',help_text='類別code') desc=models.CharField(default='',max_length=30,verbose_name='類別描述',help_text='類別描述') category_type=models.IntegerField(choices=CATEGORY_TYPE,verbose_name='類別描述',help_text='類別描述') parent_category=models.ForeignKey('self',null=True,blank=True,verbose_name='父類目錄', help_text='父類別',related_name='sub_cat',on_delete=models.CASCADE) is_tab=models.BooleanField(default=False,verbose_name='是否導航',help_text='是否導航') add_time = models.DateTimeField(default=datetime.now, verbose_name='新增時間') class Meta: verbose_name='商品類別' verbose_name_plural=verbose_name def __str__(self): return self.name class GoodsCategoryBrand(models.Model): """ 品牌名 """ category = models.ForeignKey(GoodsCategory, related_name='brands', null=True, blank=True, verbose_name="商品類目",on_delete=models.CASCADE) name=models.CharField(default='',max_length=30,verbose_name='品牌名',help_text='品牌名') desc=models.TextField(default='',max_length=20,verbose_name='品牌描述',help_text='品牌描述') image=models.ImageField(max_length=200,upload_to='brands/') add_time=models.DateTimeField(default=datetime.now,verbose_name='新增時間') class Meta: verbose_name='品牌' verbose_name_plural=verbose_name db_table = "goods_goodsbrand" def __str__(self): return self.name class Goods(models.Model): """ 商品 """ category=models.ForeignKey(GoodsCategory, verbose_name="商品類目",on_delete=models.CASCADE) goods_sn=models.CharField(max_length=50, default="", verbose_name="商品唯一貨號") name=models.CharField(max_length=100, verbose_name="商品名") click_num=models.IntegerField(default=0, verbose_name="點選數") sold_num=models.IntegerField(default=0, verbose_name="商品銷售量") fav_num=models.IntegerField(default=0, verbose_name="收藏數") goods_num=models.IntegerField(default=0, verbose_name="庫存數") market_price=models.FloatField(default=0, verbose_name="市場價格") shop_price=models.FloatField(default=0, verbose_name="本店價格") goods_brief=models.TextField(max_length=500, verbose_name="商品簡短描述") goods_desc=UEditorField(verbose_name="內容", imagePath="goods/images/", width=1000, height=300, filePath="goods/files/", default='') ship_free=models.BooleanField(default=True, verbose_name="是否承擔運費") goods_front_iamge=models.ImageField(upload_to="goods/images/", null=True, blank=True, verbose_name="封面圖") is_new=models.BooleanField(default=False, verbose_name="是否新品") is_hot=models.BooleanField(default=False, verbose_name="是否熱銷") add_time = models.DateTimeField(default=datetime.now, verbose_name='新增時間') class Meta: verbose_name = '商品' verbose_name_plural = verbose_name def __str__(self): return self.name class IndexAd(models.Model): category = models.ForeignKey(GoodsCategory, related_name='category',verbose_name="商品類目",on_delete=models.CASCADE) goods =models.ForeignKey(Goods, related_name='goods',on_delete=models.CASCADE) class Meta: verbose_name = '首頁商品類別廣告' verbose_name_plural = verbose_name def __str__(self): return self.goods.name class GoodsImage(models.Model): """ 商品輪播圖 """ goods=models.ForeignKey(Goods, verbose_name="商品", related_name="images",on_delete=models.CASCADE) image=models.ImageField(upload_to='',verbose_name="圖片", null=True, blank=True) add_time=models.DateTimeField(default=datetime.now,verbose_name='新增時間') class Meta: verbose_name='商品輪播圖' verbose_name_plural=verbose_name def __str__(self): return self.goods.name class Banner(models.Model): """ 輪播的商品 """ goods = models.ForeignKey(Goods, verbose_name="商品",on_delete=models.CASCADE) image = models.ImageField(upload_to='banner', verbose_name="輪播圖片") index = models.IntegerField(default=0, verbose_name="輪播順序") add_time = models.DateTimeField(default=datetime.now, verbose_name="新增時間") class Meta: verbose_name = '輪播商品' verbose_name_plural = verbose_name def __str__(self): return self.goods.name class HotSearchWords(models.Model): """ 熱搜詞 """ keywords = models.CharField(default="", max_length=20, verbose_name="熱搜詞") index = models.IntegerField(default=0, verbose_name="排序") add_time = models.DateTimeField(default=datetime.now, verbose_name="新增時間") class Meta: verbose_name = '熱搜詞' verbose_name_plural = verbose_name def __str__(self): return self.keywords
4.設計trade的models.py
models.py
from datetime import datetime from django.db import models from django.contrib.auth import get_user_model from goods.models import Goods User = get_user_model() # Create your models here. class ShoppingCart(models.Model): """ 購物車 """ user = models.ForeignKey(User, verbose_name="使用者",on_delete=models.CASCADE) goods = models.ForeignKey(Goods, verbose_name="商品",on_delete=models.CASCADE) nums = models.IntegerField(default=0, verbose_name="購買數量") add_time = models.DateTimeField(default=datetime.now, verbose_name="新增時間") class Meta: verbose_name = '購物車' verbose_name_plural = verbose_name unique_together = ("user", "goods") def __str__(self): return "%s(%d)".format(self.goods.name, self.nums) class OrderInfo(models.Model): """ 訂單 """ ORDER_STATUS = ( ("TRADE_SUCCESS", "成功"), ("TRADE_CLOSED", "超時關閉"), ("WAIT_BUYER_PAY", "交易建立"), ("TRADE_FINISHED", "交易結束"), ("paying", "待支付"), ) user = models.ForeignKey(User, verbose_name="使用者",on_delete=models.CASCADE) order_sn = models.CharField(max_length=30, null=True, blank=True, unique=True, verbose_name="訂單號") trade_no = models.CharField(max_length=100, unique=True, null=True, blank=True, verbose_name="交易號") pay_status = models.CharField(choices=ORDER_STATUS, default="paying", max_length=30, verbose_name="訂單狀態") post_script = models.CharField(max_length=200, verbose_name="訂單留言") order_mount = models.FloatField(default=0.0, verbose_name="訂單金額") pay_time = models.DateTimeField(null=True, blank=True, verbose_name="支付時間") # 使用者資訊 address = models.CharField(max_length=100, default="", verbose_name="收貨地址") signer_name = models.CharField(max_length=20, default="", verbose_name="簽收人") singer_mobile = models.CharField(max_length=11, verbose_name="聯絡電話") add_time = models.DateTimeField(default=datetime.now, verbose_name="新增時間") class Meta: verbose_name = "訂單" verbose_name_plural = verbose_name def __str__(self): return str(self.order_sn) class OrderGoods(models.Model): """ 訂單的商品詳情 """ order = models.ForeignKey(OrderInfo, verbose_name="訂單資訊", related_name="goods",on_delete=models.CASCADE) goods = models.ForeignKey(Goods, verbose_name="商品",on_delete=models.CASCADE) goods_num = models.IntegerField(default=0, verbose_name="商品數量") add_time = models.DateTimeField(default=datetime.now, verbose_name="新增時間") class Meta: verbose_name = "訂單商品" verbose_name_plural = verbose_name def __str__(self): return str(self.order.order_sn)
5.設計user_operation的models.py
models.py
from datetime import datetime from django.db import models from django.contrib.auth import get_user_model from goods.models import Goods # Create your models here. User = get_user_model() class UserFav(models.Model): """ 使用者收藏 """ user = models.ForeignKey(User, verbose_name="使用者",on_delete=models.CASCADE) goods = models.ForeignKey(Goods, verbose_name="商品", help_text="商品id",on_delete=models.CASCADE) add_time = models.DateTimeField(default=datetime.now, verbose_name=u"新增時間") class Meta: verbose_name = '使用者收藏' verbose_name_plural = verbose_name unique_together = ("user", "goods") def __str__(self): return self.user.name class UserLeavingMessage(models.Model): """ 使用者留言 """ MESSAGE_CHOICES = ( (1, "留言"), (2, "投訴"), (3, "詢問"), (4, "售後"), (5, "求購") ) user = models.ForeignKey(User, verbose_name="使用者",on_delete=models.CASCADE) message_type = models.IntegerField(default=1, choices=MESSAGE_CHOICES, verbose_name="留言型別", help_text=u"留言型別: 1(留言),2(投訴),3(詢問),4(售後),5(求購)") subject = models.CharField(max_length=100, default="", verbose_name="主題") message = models.TextField(default="", verbose_name="留言內容", help_text="留言內容") file = models.FileField(upload_to="message/images/", verbose_name="上傳的檔案", help_text="上傳的檔案") add_time = models.DateTimeField(default=datetime.now, verbose_name="新增時間") class Meta: verbose_name = "使用者留言" verbose_name_plural = verbose_name def __str__(self): return self.subject class UserAddress(models.Model): """ 使用者收貨地址 """ user = models.ForeignKey(User, verbose_name="使用者",on_delete=models.CASCADE) province = models.CharField(max_length=100, default="", verbose_name="省份") city = models.CharField(max_length=100, default="", verbose_name="城市") district = models.CharField(max_length=100, default="", verbose_name="區域") address = models.CharField(max_length=100, default="", verbose_name="詳細地址") signer_name = models.CharField(max_length=100, default="", verbose_name="簽收人") signer_mobile = models.CharField(max_length=11, default="", verbose_name="電話") add_time = models.DateTimeField(default=datetime.now, verbose_name="新增時間") class Meta: verbose_name = "收貨地址" verbose_name_plural = verbose_name def __str__(self): return self.address
6.在終端執行資料更新命令,生成資料表
python manage.py makemigrations
python manage.py migrate
7.在pycharm中視覺化管理資料庫
1.點選左邊的Database→點選“+”→選擇Data Source→選擇MySQL
2.填入資料庫名稱mxshop→使用者名稱root以及密碼→點選Test Connection(顯示Successful證明連線資料庫成功)→點選Apple然後點選OK
3.點選展開,就可以看到mxshop資料庫,新建的資料表都一目瞭然,可以直接進行視覺化的管理
4.xadmin後臺管理系統的配置
1.將相容python3.6+django2.0的xadmin拷貝到extra_apps中
#適配python3.6+django2.0的xadmin https://gitee.com/xueluoyihai/xadmin-for-django2.0
2.在每個app下新建adminx.py
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 = "mxshop" # menu_style = "accordion" 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)
goods/adminx.py
import xadmin from .models import Goods, GoodsCategory, GoodsImage, GoodsCategoryBrand, Banner, HotSearchWords from .models import IndexAd 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 = ["相關推薦
Vue+Django2.0 restframework打造前後端分離的生鮮電商專案(1)
1.開發環境配置 Windows7 64位旗艦版 python3.6 node.js mysql navicat pycharm webstorm或vscode 2.專案初始化 新版的pycharm很貼心的讓每一個新的專案,都自動會在一個虛擬環境中,放心的新建專案就可以了,不用考慮虛擬環境的事兒了 1.新
真實資料對接 從0開發前後端分離的企業級上線專案(再談前後端分離式 手把手從0打造電商平臺-前端開發)
第1章 課程介紹(2018配套教程:電商前端+電商後端+電商許可權管理系統課程) 本章中會先讓大家瞭解課程整體情況,然後手把手帶大家做一些開發前的準備工作。 1-1 課程導學 1-2 電商平臺需求分析 1-3 架構設計及技術選型 1-4 前後端配合方式及資料介面
2018 Vue+Django API前後端分離開發電商新技術跨域項目實戰
link 選型 模塊 自動 ets 跨域 -a 百度網盤 項目 課程目標幫助大家快速入門Django REST framework這一個API框架。 幫助大家詳細了解Django REST framework中序列化、視圖、路由等模塊的使用。 幫助大家使用Django RE
Vue+Django API前後端分離開發電商新技術跨域專案實戰
目前前後端分離的架構設計越來越流行,前後端通過API來實現資料通訊。 那如何快速開發一套符合RESTful風格的API呢? Django REST framework是基於Django框架開發的一款API框架。 使用它就可以非常快速的開發出一套健全可用的符合RE
2018 Vue+Django API前後端分離開發電商新技術跨域專案實戰
課程目標 幫助大家快速入門Django REST framework這一個API框架。 幫助大家詳細瞭解Django REST framework中序列化、檢視、路由等模組的使用。 幫助大家使用Django REST framework快速開發一套可用的API
前後端分離的思考與實踐(一)
也談基於NodeJS的全棧式開發(基於NodeJS的前後端分離) 前言 為了解決傳統Web開發模式帶來的各種問題,我們進行了許多嘗試,但由於前/後端的物理鴻溝,嘗試的方案都大同小異。痛定思痛,今天我們重新思考了“前後端”的定義,引入前端同學都熟悉的NodeJS,試圖探索一條全新的前後端分
SpringBoot 實現前後端分離的跨域訪問(Nginx)
序言:使用Nginx反向代理,可以解決跨域無權和Session丟失的問題,十分方便。下面我們以前後端分離為案例,展開Nginx的使用教程。 一. 配置和啟動Nginx 下載地址 注意事項:下載之後,記得解壓到全英文路徑,避免中文路徑導致Nginx啟動失敗。 修改配
Django REST framework+Vue 打造生鮮電商專案(筆記四)
(PS:部分程式碼和圖片來自部落格:http://www.cnblogs.com/derek1184405959/p/8813641.html。有增刪) 一、使用者登入和手機註冊 1、drf的token功能 (前言:為什麼有了session了,還要用token呢?因為每次認證使用者發起請求時
Django REST framework+Vue 打造生鮮電商專案(筆記五)
一、viewsets實現商品詳情頁介面 (1)商品詳情頁只需要多繼承一個類(mixins.RetrieveModelMixin)就可以了,(它的功能就是展示商品詳情) class GoodsListViewSet(mixins.ListModelMixin, mixins.RetrieveModel
Django REST framework+Vue 打造生鮮電商專案(筆記六)
九、個人中心功能開發1、drf的api文件自動生成(1) url #drf文件,title自定義 path('docs',include_docs_urls(title='火影忍者')), 訪問:http://127.0.0.1:8000/docs 就可以自動生成 &
Django REST framework+Vue 打造生鮮電商專案(筆記九)
(from:http://www.cnblogs.com/derek1184405959/p/8859309.html) 十二、支付寶沙箱環境配置 12.1.建立應用 進入螞蟻金服開放平臺(https://open.alipay.com/platform/home.htm),登入後進入管理中心-->
Django REST framework+Vue 打造生鮮電商專案(筆記八)
(form:http://www.cnblogs.com/derek1184405959/p/8862569.html) 十一、pycharm 遠端程式碼除錯 第三方登入和支付,都需要有伺服器才行(回撥url),我們可以用pycharm去遠端除錯伺服器程式碼 伺服器環境搭建 以全新阿里雲centos7
Django REST framework+Vue 打造生鮮電商專案(筆記十)
(from:https://www.cnblogs.com/derek1184405959/p/8877643.html 有修改) 十三、首頁、商品數量、快取和限速功能開發 首先把pycharm環境改成本地的,vue中local_host也改成本地 1、輪播圖介面實現 (1)g
django+vue打造前後端分離的專案時,跨域問題的解決!
1、首先你要先安裝django-cors-headers 這個包 pip install django-cors-headers 2、配置settings.py 安裝app INSTALLED_APPS = [ 'django.contri
真實資料對接 從0開發前後端分離的企業級上線專案
=》前往下載 第1章 課程介紹(2018配套教程:電商前端+電商後端+電商許可權管理系統課程) 本章中會先讓大家瞭解課程整體情況,然後手把手帶大家做一些開發前的準備工作。後臺管理系統測試賬號和密碼(切勿修改,導致其他同學體驗不了) 賬號:admin 密碼:admin (Java一期課程I
Node+Express+Vue+Element+MySQL簡易實現前後端分離
原始碼 1、安裝node環境 具體安裝教程請參考http://nodejs.cn/ 2、塔建Vue前端專案 使用Vue官網提供的vue-cli腳手架vue-cli命令列工具 # 全域性安裝 vue-cli $ npm install --global vue-cli # 建立一個
Vue微信授權登入前後端分離較為優雅的解決方案
微信授權登入是一個非常常見的場景,利用微信授權登入,我們可以很容易獲取使用者的一些資訊,通過使用者對公眾號的唯一openid從而建立資料庫繫結使用者身份. 微信授權登入的機制這裡不做詳述,微信官方文件已有詳述,簡述就是通過跳轉微信授權的頁面,使用者點選確認後
Django+Vue+微信登入授權前後端分離實現過程中踩坑問題階段性總結
我要說明的是另外以下幾點: 跨域問題 關於跨域問題是指在開發前端頁面使用前端熱更新除錯過程中與Django進行的資料請求產生的跨域問題. 例如你在本地 http://localhost:8080/#/ 除錯介面請求Django本地伺服器 http://l
一款屬於自己的筆記本【vue+gin+elementUI前後端分離開發部署開源專案】
前言 我為什麼要寫一個個人的雲筆記? (⊙o⊙)…額額額
前後端分離後的JavaWeb專案的執行
“資深”程式碼小白,在開發部門施行前後端分離後,我就找不到專案怎麼啟動運行了…… 工具:IntelliJ IDEA2018.4【maven+SpringBoot】 同事給了我兩個專案名,一個前端、一個後臺,然後分別開啟,配置好SDK那些。 1、在後臺專案中,Maven