美多商城項(xiàng)目4.0文檔完整教程（附代碼資料）主要內(nèi)容講述：美多商城，項(xiàng)目準(zhǔn)備1.B2B–企業(yè)對(duì)企業(yè),2.C2C–個(gè)人對(duì)個(gè)人,3.B2C–企業(yè)對(duì)個(gè)人,4.C2B–個(gè)人對(duì)企業(yè)。項(xiàng)目準(zhǔn)備，配置1. 修改settings/dev.py 文件中的路徑信息,2. INSTALLED_APPS,3. 數(shù)據(jù)庫,4. Redis。用戶部分，圖片驗(yàn)證碼。用戶部分，使用Celery完成發(fā)送短信1. 判斷用戶名是否存在,2. 判斷手機(jī)號(hào)是否存在：。用戶部分，JWT起源,基于token的鑒權(quán)機(jī)制,JWT長(zhǎng)什么樣？,JWT的構(gòu)成。用戶部分，登錄創(chuàng)建模型類,urllib使用說明。登錄，登錄回調(diào)處理創(chuàng)建模型類,urllib使用說明。登錄，綁定用戶身份接口創(chuàng)建模型類,urllib使用說明。郵件與驗(yàn)證，保存郵箱并發(fā)送驗(yàn)證郵件。收貨地址，省市區(qū)地址查詢。收貨地址，使用緩存。商品部分，數(shù)據(jù)庫表設(shè)計(jì)表結(jié)構(gòu),數(shù)據(jù)庫模型類,1. 什么是FastDFS,2. 文件上傳流程。Docker使用，Docker簡(jiǎn)介1. 虛擬化,2. 什么是Docer,3. Docker組件,4 使用Docker做什么。Docker使用，安裝與操作1. 在Ubuntu中安裝Docker,2. 啟動(dòng)與停止,3. Docker鏡像操作,4. Docker 容器操作。商品部分，FastDFS客戶端與自定義文件存儲(chǔ)系統(tǒng)1. FastDFS的Python客戶端,2. 自定義Django文件存儲(chǔ)系統(tǒng),3. 在Django配置中設(shè)置自定義文件存儲(chǔ)類,4. 添加image域名。商品部分，頁面靜態(tài)化。商品部分，商品詳情頁。商品部分，用戶瀏覽歷史記錄1. 保存,2. 查看。商品部分，商品列表頁獲取商品列表數(shù)據(jù)。商品部分，商品搜索。購物車部分，購物車數(shù)據(jù)存儲(chǔ)設(shè)計(jì)1. Redis保存已登錄用戶,2. Cookie保存未登錄用戶。購物車部分，查詢購物車數(shù)據(jù)。購物車部分，登錄合并購物車。訂單部分，保存訂單。支付，接入。Xadmin，用戶權(quán)限控制1. 安裝,2. 使用。數(shù)據(jù)庫讀寫分離，MySQL主從同步1. 主從同步的定義,2. 主從同步的機(jī)制,3. 配置主從同步的基本步驟,4. 詳細(xì)配置主從同步的方法。。meiduo_mallBuild Setup。

全套筆記資料代碼移步： 前往gitee倉庫查看

感興趣的小伙伴可以自取哦，歡迎大家點(diǎn)贊轉(zhuǎn)發(fā)~

---

全套教程部分目錄：

---

部分文件圖片：

用戶部分

圖片驗(yàn)證碼

1. 后端接口設(shè)計(jì)：

訪問方式： GET /image_codes/(?P<image_code_id>[\w-]+)/

請(qǐng)求參數(shù)： 路徑參數(shù)

參數(shù)	類型	是否必須	說明
image_code_id	uuid字符串	是	圖片驗(yàn)證碼編號(hào)

返回?cái)?shù)據(jù)：

驗(yàn)證碼圖片

視圖原型

  # url('^image_codes/(?P<image_code_id>[\w-]+)/$', views.ImageCodeView.as_view()), class ImageCodeView(APIView):"""圖片驗(yàn)證碼"""pass

2. 具體視圖實(shí)現(xiàn)

在verifications/views.py中實(shí)現(xiàn)視圖

class ImageCodeView(APIView):"""圖片驗(yàn)證碼"""def get(self, request, image_code_id):"""獲取圖片驗(yàn)證碼"""# 生成驗(yàn)證碼圖片text, image = captcha.generate_captcha()redis_conn = get_redis_connection("verify_codes")redis_conn.setex("img_%s" % image_code_id, constants.IMAGE_CODE_REDIS_EXPIRES, text)# 固定返回驗(yàn)證碼圖片數(shù)據(jù)，不需要REST framework框架的Response幫助我們決定返回響應(yīng)數(shù)據(jù)的格式# 所以此處直接使用Django原生的HttpResponse即可return HttpResponse(image, content_type="images/jpg")

說明：

django-redis提供了get_redis_connection的方法，通過調(diào)用get_redis_connection方法傳遞redis的配置名稱可獲取到redis的連接對(duì)象，通過redis連接對(duì)象可以執(zhí)行redis命令。

我們需要在配置文件中添加一個(gè)新的redis配置，用于存放驗(yàn)證碼數(shù)據(jù)

CACHES = {"default": {"BACKEND": "django_redis.cache.RedisCache","LOCATION": "redis://10.211.55.5:6379/0","OPTIONS": {"CLIENT_CLASS": "django_redis.client.DefaultClient",}},"session": {"BACKEND": "django_redis.cache.RedisCache","LOCATION": "redis://10.211.55.5:6379/1","OPTIONS": {"CLIENT_CLASS": "django_redis.client.DefaultClient",}},"verify_codes": {"BACKEND": "django_redis.cache.RedisCache","LOCATION": "redis://10.211.55.5:6379/2","OPTIONS": {"CLIENT_CLASS": "django_redis.client.DefaultClient",}}
}

3. 設(shè)置域名

我們現(xiàn)在為前端和后端分別設(shè)置兩個(gè)不同的域名

位置	域名
前端	www.meiduo.site
后端	api.meiduo.site

編輯/etc/hosts文件，可以設(shè)置本地域名

sudo vim /etc/hosts

在文件中增加兩條信息

127.0.0.1   api.meiduo.site
127.0.0.1   www.meiduo.site

windows系統(tǒng)中若設(shè)置本地域名，hosts文件在如下目錄：

C:\Windows\System32\drivers\etc

我們?cè)谇岸薴ront_end_pc/js目錄中，創(chuàng)建host.js文件用以為前端保存后端域名

var host = '

在所有需要訪問后端接口的前端頁面中都引入host.js，使用host變量即可指代后端域名。

修改settings配置中的ALLOWED_HOSTS

一旦不再使用127.0.0.1訪問Django后端，需要在配置文件中修改ALLOWED_HOSTS，增加可以訪問后端的域名

ALLOWED_HOSTS = ['api.meiduo.site', '127.0.0.1', 'localhost', 'www.meiduo.site']

4. 前端Vue代碼：

js/register.js

data: {...image_code_id: '',  // 圖片驗(yàn)證碼編號(hào)image_code_url: '',  // 驗(yàn)證碼圖片路徑
},
mounted: function() {this.generate_image_code();
},
methods: {// 生成uuidgenerate_uuid: function(){var d = new Date().getTime();if(window.performance && typeof window.performance.now === "function"){d += performance.now(); //use high-precision timer if available}var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = (d + Math.random()*16)%16 | 0;d = Math.floor(d/16);return (c =='x' ? r : (r&0x3|0x8)).toString(16);});return uuid;},// 生成一個(gè)圖片驗(yàn)證碼的編號(hào)，并設(shè)置頁面中圖片驗(yàn)證碼img標(biāo)簽的src屬性generate_image_code: function(){// 生成一個(gè)編號(hào)// 嚴(yán)格一點(diǎn)的使用uuid保證編號(hào)唯一， 不是很嚴(yán)謹(jǐn)?shù)那闆r下，也可以使用時(shí)間戳this.image_code_id = this.generate_uuid();// 設(shè)置頁面中圖片驗(yàn)證碼img標(biāo)簽的src屬性this.image_code_url = this.host + "/image_codes/" + this.image_code_id + "/";},...
}

短信驗(yàn)證碼

1. 業(yè)務(wù)處理流程

1. 檢查圖片驗(yàn)證碼
2. 檢查是否在60s內(nèi)有發(fā)送記錄
3. 生成短信驗(yàn)證碼
4. 保存短信驗(yàn)證碼與發(fā)送記錄
5. 發(fā)送短信

2. 后端接口設(shè)計(jì)：

訪問方式： GET /sms_codes/(?P<mobile>1[3-9]\d{9})/?image_code_id=xxx&text=xxx

請(qǐng)求參數(shù)： 路徑參數(shù)與查詢字符串參數(shù)

參數(shù)	類型	是否必須	說明
mobile	str	是	手機(jī)號(hào)
image_code_id	uuid字符串	是	圖片驗(yàn)證碼編號(hào)
text	str	是	用戶輸入的圖片驗(yàn)證碼

返回?cái)?shù)據(jù)： JSON

返回值	類型	是否必傳	說明
message	str	否	OK，發(fā)送成功

視圖原型：

  # url('^sms_codes/(?P<mobile>1[3-9]\d{9})/$', views.SMSCodeView.as_view()),class SMSCodeView(GenericAPIView):"""短信驗(yàn)證碼傳入?yún)?shù)：mobile, image_code_id, text"""pass

3. 后端實(shí)現(xiàn)

在verifications/serializers.py中定義序列化器，用以校驗(yàn)

class ImageCodeCheckSerializer(serializers.Serializer):"""圖片驗(yàn)證碼校驗(yàn)序列化器"""image_code_id = serializers.UUIDField()text = serializers.CharField(max_length=4, min_length=4)def validate(self, attrs):"""校驗(yàn)"""image_code_id = attrs['image_code_id']text = attrs['text']# 查詢真實(shí)圖片驗(yàn)證碼redis_conn = get_redis_connection('verify_codes')real_image_code_text = redis_conn.get('img_%s' % image_code_id)if not real_image_code_text:raise serializers.ValidationError('圖片驗(yàn)證碼無效')# 刪除圖片驗(yàn)證碼try:redis_conn.delete('img_%s' % image_code_id)except RedisError as e:logger.error(e)# 比較圖片驗(yàn)證碼real_image_code_text = real_image_code_text.decode()if real_image_code_text.lower() != text.lower():raise serializers.ValidationError('圖片驗(yàn)證碼錯(cuò)誤')# 判斷是否在60s內(nèi)mobile = self.context['view'].kwargs['mobile']send_flag = redis_conn.get("send_flag_%s" % mobile)if send_flag:raise serializers.ValidationError('請(qǐng)求次數(shù)過于頻繁')return attrs

在verifications/views.py中定義實(shí)現(xiàn)視圖：

class SMSCodeView(GenericAPIView):"""短信驗(yàn)證碼"""serializer_class = serializers.ImageCodeCheckSerializerdef get(self, request, mobile):"""創(chuàng)建短信驗(yàn)證碼"""# 判斷圖片驗(yàn)證碼, 判斷是否在60s內(nèi)serializer = self.get_serializer(data=request.query_params)serializer.is_valid(raise_exception=True)# 生成短信驗(yàn)證碼sms_code = "%06d" % random.randint(0, 999999)# 保存短信驗(yàn)證碼與發(fā)送記錄redis_conn = get_redis_connection('verify_codes')pl = redis_conn.pipeline()pl.setex("sms_%s" % mobile, constants.SMS_CODE_REDIS_EXPIRES, sms_code)pl.setex("send_flag_%s" % mobile, constants.SEND_SMS_CODE_INTERVAL, 1)pl.execute()# 發(fā)送短信驗(yàn)證碼sms_code_expires = str(constants.SMS_CODE_REDIS_EXPIRES // 60)ccp = CCP()ccp.send_template_sms(mobile, [code, expires], SMS_CODE_TEMP_ID)return Response({"message": "OK"})

4. 前端實(shí)現(xiàn)

修改register.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns=" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>美多商城-注冊(cè)</title><link rel="stylesheet" type="text/css" href="css/reset.css"><link rel="stylesheet" type="text/css" href="css/main.css"><script type="text/javascript" src="js/host.js"></script><script type="text/javascript" src="js/vue-2.5.16.js"></script><script type="text/javascript" src="js/axios-0.18.0.min.js"></script>
</head>
<body><div class="register_con"><div class="l_con fl"><a class="reg_logo"><img src="images/logo.png"></a><div class="reg_slogan">商品美 · 種類多 · 歡迎光臨</div><div class="reg_banner"></div></div><div class="r_con fr"><div class="reg_title clearfix"><h1>用戶注冊(cè)</h1><a href="/login.html">登錄</a></div><div class="reg_form clearfix" id="app" v-cloak><form id="reg_form" @submit.prevent="on_submit"><ul><li><label>用戶名:</label><input type="text" v-model="username" @blur="check_username" name="user_name" id="user_name"><span v-show="error_name" class="error_tip">{{ error_name_message }}</span></li>                    <li><label>密碼:</label><input type="password" v-model="password" @blur="check_pwd" name="pwd" id="pwd"><span v-show="error_password" class="error_tip">密碼最少8位，最長(zhǎng)20位</span></li><li><label>確認(rèn)密碼:</label><input type="password" v-model="password2" @blur="check_cpwd" name="cpwd" id="cpwd"><span v-show="error_check_password" class="error_tip">兩次輸入的密碼不一致</span></li><li><label>手機(jī)號(hào):</label><input type="text" v-model="mobile" @blur="check_phone" name="phone" id="phone"><span v-show="error_phone" class="error_tip">{{ error_phone_message }}</span></li><li><label>圖形驗(yàn)證碼:</label><input type="text" v-model="image_code" @blur="check_image_code" name="pic_code" id="pic_code" class="msg_input"><img :src="image_code_url" @click="generate_image_code" alt="圖形驗(yàn)證碼" class="pic_code"><span v-show="error_image_code" class="error_tip">{{ error_image_code_message }}</span></li><li><label>短信驗(yàn)證碼:</label><input type="text" v-model="sms_code" @blur="check_sms_code" name="msg_code" id="msg_code" class="msg_input"><a @click="send_sms_code" class="get_msg_code">{{ sms_code_tip }}</a><span v-show="error_sms_code" class="error_tip">{{ error_sms_code_message }}</span></li><li class="agreement"><input type="checkbox" v-model="allow" @change="check_allow" name="allow" id="allow"><label>同意”美多商城用戶使用協(xié)議“</label><span v-show="error_allow" class="error_tip2">請(qǐng)勾選同意</span></li><li class="reg_sub"><input type="submit" value="注 冊(cè)" name=""></li></ul>                </form></div></div></div><div class="footer no-mp"><div class="foot_link"><a href="#">關(guān)于我們</a><span>|</span><a href="#">聯(lián)系我們</a><span>|</span><a href="#">招聘人才</a><span>|</span><a href="#">友情鏈接</a>        </div><p>CopyRight ? 2016 北京美多商業(yè)股份有限公司 All Rights Reserved</p><p>電話：010-****888    京ICP備*******8號(hào)</p></div><script type="text/javascript" src="js/register.js"></script>
</body>
</html>

修改register.js

var vm = new Vue({el: '#app',data: {host: host,error_name: false,error_password: false,error_check_password: false,error_phone: false,error_allow: false,error_image_code: false,error_sms_code: false,error_name_message: '',error_image_code_message: '',error_phone_message: '',error_sms_code_message: '',image_code_id: '', // 圖片驗(yàn)證碼idimage_code_url: '',sms_code_tip: '獲取短信驗(yàn)證碼',sending_flag: false, // 正在發(fā)送短信標(biāo)志username: '',password: '',password2: '',mobile: '', image_code: '',sms_code: '',allow: false},mounted: function(){this.generate_image_code();},methods: {// 生成uuidgenerate_uuid: function(){var d = new Date().getTime();if(window.performance && typeof window.performance.now === "function"){d += performance.now(); //use high-precision timer if available}var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = (d + Math.random()*16)%16 | 0;d = Math.floor(d/16);return (c =='x' ? r : (r&0x3|0x8)).toString(16);});return uuid;},// 生成一個(gè)圖片驗(yàn)證碼的編號(hào)，并設(shè)置頁面中圖片驗(yàn)證碼img標(biāo)簽的src屬性generate_image_code: function(){// 生成一個(gè)編號(hào)// 嚴(yán)格一點(diǎn)的使用uuid保證編號(hào)唯一， 不是很嚴(yán)謹(jǐn)?shù)那闆r下，也可以使用時(shí)間戳this.image_code_id = this.generate_uuid();// 設(shè)置頁面中圖片驗(yàn)證碼img標(biāo)簽的src屬性this.image_code_url = this.host + "/image_codes/" + this.image_code_id + "/";},check_username: function (){var len = this.username.length;if(len<5||len>20) {this.error_name_message = '請(qǐng)輸入5-20個(gè)字符的用戶名';this.error_name = true;} else {this.error_name = false;}},check_pwd: function (){var len = this.password.length;if(len<8||len>20){this.error_password = true;} else {this.error_password = false;}        },check_cpwd: function (){if(this.password!=this.password2) {this.error_check_password = true;} else {this.error_check_password = false;}        },check_phone: function (){var re = /^1[345789]\d{9}$/;if(re.test(this.mobile)) {this.error_phone = false;} else {this.error_phone_message = '您輸入的手機(jī)號(hào)格式不正確';this.error_phone = true;}},check_image_code: function (){if(!this.image_code) {this.error_image_code_message = '請(qǐng)?zhí)顚憟D片驗(yàn)證碼';this.error_image_code = true;} else {this.error_image_code = false;}    },check_sms_code: function(){if(!this.sms_code){this.error_sms_code_message = '請(qǐng)?zhí)顚懚绦膨?yàn)證碼';this.error_sms_code = true;} else {this.error_sms_code = false;}},check_allow: function(){if(!this.allow) {this.error_allow = true;} else {this.error_allow = false;}},// 發(fā)送手機(jī)短信驗(yàn)證碼send_sms_code: function(){if (this.sending_flag == true) {return;} this.sending_flag = true;// 校驗(yàn)參數(shù)，保證輸入框有數(shù)據(jù)填寫this.check_phone();this.check_image_code();if (this.error_phone == true || this.error_image_code == true) {this.sending_flag = false;return;}// 向后端接口發(fā)送請(qǐng)求，讓后端發(fā)送短信驗(yàn)證碼axios.get(this.host + '/sms_codes/' + this.mobile + '/?text=' + this.image_code+'&image_code_id='+ this.image_code_id, {responseType: 'json'}).then(response => {// 表示后端發(fā)送短信成功// 倒計(jì)時(shí)60秒，60秒后允許用戶再次點(diǎn)擊發(fā)送短信驗(yàn)證碼的按鈕var num = 60;// 設(shè)置一個(gè)計(jì)時(shí)器var t = setInterval(() => {if (num == 1) {// 如果計(jì)時(shí)器到最后, 清除計(jì)時(shí)器對(duì)象clearInterval(t);// 將點(diǎn)擊獲取驗(yàn)證碼的按鈕展示的文本回復(fù)成原始文本this.sms_code_tip = '獲取短信驗(yàn)證碼';// 將點(diǎn)擊按鈕的onclick事件函數(shù)恢復(fù)回去this.sending_flag = false;} else {num -= 1;// 展示倒計(jì)時(shí)信息this.sms_code_tip = num + '秒';}}, 1000, 60)}).catch(error => {if (error.response.status == 400) {this.error_image_code_message = '圖片驗(yàn)證碼有誤';this.error_image_code = true;this.generate_image_code();} else {console.log(error.response.data);}this.sending_flag = false;})},// 注冊(cè)on_submit: function(){this.check_username();this.check_pwd();this.check_cpwd();this.check_phone();this.check_sms_code();this.check_allow();}}
});

跨域CORS

我們?yōu)榍岸撕秃蠖朔謩e設(shè)置了兩個(gè)不同的域名

位置	域名
前端	www.meiduo.site
后端	api.meiduo.site

現(xiàn)在，前端與后端分處不同的域名，我們需要為后端添加跨域訪問的支持。

我們使用CORS來解決后端對(duì)跨域訪問的支持。

使用django-cors-headers擴(kuò)展

[參考文檔

安裝

pip install django-cors-headers

添加應(yīng)用

INSTALLED_APPS = (...'corsheaders',...
)

中間層設(shè)置

MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware',...
]

添加白名單

  # CORSCORS_ORIGIN_WHITELIST = ('127.0.0.1:8080','localhost:8080','www.meiduo.site:8080','api.meiduo.site:8000'
)
CORS_ALLOW_CREDENTIALS = True  # 允許攜帶cookie

• 凡是出現(xiàn)在白名單中的域名，都可以訪問后端接口
• CORS_ALLOW_CREDENTIALS 指明在跨域訪問中，后端是否支持對(duì)cookie的操作。

未完待續(xù)， 同學(xué)們請(qǐng)等待下一期

全套筆記資料代碼移步： 前往gitee倉庫查看

感興趣的小伙伴可以自取哦，歡迎大家點(diǎn)贊轉(zhuǎn)發(fā)~