10.8CTFHub網站原始碼
阿新 • • 發佈：2020-10-13
<h3>購物車</h3> <h4>settings配置</h4> <pre><code class='language-python' lang='python'># 快取redis設定 # 配置Redis為Django快取 CACHES = { "default": { "BACKEND": "django_redis.cache.RedisCache", "LOCATION": "redis://127.0.0.1:6379/2", "OPTIONS": { "CLIENT_CLASS": "django_redis.client.DefaultClient", } } } # 將session快取在Redis中 SESSION_ENGINE = "django.contrib.sessions.backends.cache" SESSION_CACHE_ALIAS ="default" # session 設定 SESSION_COOKIE_AGE = 60 * 60 * 12 # 12小時 SESSION_SAVE_EVERY_REQUEST = True SESSION_EXPIRE_AT_BROWSER_CLOSE = True # 關閉瀏覽器，則COOKIE失效 </code></pre> <h5>購物車中redis的操作（雜湊型別）</h5> <pre><code class='language-python' lang='python'># 匯入django-redis from django_redis import get_redis_connection # 連線redis conn = get_redis_connection('default') # 獲取單個值（數量） cart_num = conn.hget(key, field) # 設定單個 conn.hset(key, field, value) # 獲取key下面的總數量 cart_sum = conn.hlen(key) # 獲取key下的所有的鍵值對 conn.hgetall(key) # 刪除某一條商品 conn.hdel(key, field)</code></pre> <h4>django後臺views程式碼</h4> <pre><code class='language-python' lang='python'>class AddCart(View): """ 新增購物車 """ def post(self, request): """ <QueryDict: {'user_id': ['10'], 'goods_id': ['5'], 'cart_num': ['1']}> """ print(request.POST) user_id = request.POST.get('user_id') goods_id = request.POST.get('goods_id') cart_num = int(request.POST.get('cart_num')) try: numbers = int(cart_num) except Exception as e: return HttpResponse(json.dumps({'msg': '數量值不正確', 'code': 404})) # 連線redis conn = get_redis_connection('default') # 獲取redis中商品的數量 cart_count = conn.hget(user_id, goods_id) print(cart_count) if cart_count: numbers += int(cart_count) conn.hset(user_id, goods_id, numbers) cart_sum = conn.hlen(user_id) return HttpResponse(json.dumps({'msg': "OK", 'code': 200, 'cart_sum': cart_sum})) class ShowCartView(View): """ 獲取購物車內的內容 """ def get(self, request, user_id): conn = get_redis_connection('default') cart_all = conn.hgetall(user_id) print(cart_all) goods_list = [] for k, v in cart_all.items(): goods_id = k.decode('utf-8') goods_num = v.decode('utf-8') goods = Goods.objects.get(pk=goods_id) goods_list.append({ 'goods_name': goods.goods_name, 'goods_price': str(goods.goods_price), 'goods_code': goods.pk, 'goods_number': goods_num, 'goods_sum': float(goods.goods_price) * int(goods_num) }) goods_sums = 0 for i in goods_list: goods_sums += i.get('goods_sum') return HttpResponse(json.dumps({'msg': "OK", 'code': 200, 'goods_list': goods_list, 'goods_sums': goods_sums})) class JianView(View): """ 前端減數量介面 """ def post(self, request): print(request.POST) user_id = request.POST.get('user_id') goods_id = request.POST.get('goods_id') cart_num = int(request.POST.get('cart_num')) try: numbers = int(cart_num) except Exception as e: return HttpResponse(json.dumps({'msg': '數量值不正確', 'code': 404})) # 連線redis conn = get_redis_connection('default') # 獲取redis中商品的數量 cart_count = conn.hget(user_id, goods_id) print(cart_count) if cart_count: cart_count = int(cart_count) if cart_count > 1: cart_count -= 1 conn.hset(user_id, goods_id, cart_count) cart_sum = conn.hlen(user_id) return HttpResponse(json.dumps({'msg': "OK", 'code': 200, 'cart_sum': cart_sum})) else: return HttpResponse(json.dumps({'msg': "商品不存在", 'code': 200})) class JiaView(View): """ 前端加數量介面 """ def post(self, request): print(request.POST) user_id = request.POST.get('user_id') goods_id = request.POST.get('goods_id') # 連線redis conn = get_redis_connection('default') # 獲取redis中商品的數量 cart_count = conn.hget(user_id, goods_id) print(cart_count) if cart_count: cart_count = int(cart_count) cart_count += 1 conn.hset(user_id, goods_id, cart_count) cart_sum = conn.hlen(user_id) return HttpResponse(json.dumps({'msg': "OK", 'code': 200, 'cart_sum': cart_sum})) else: return HttpResponse(json.dumps({'msg': "商品不存在", 'code': 200})) </code></pre> <h4>前端vue程式碼, 展示頁面</h4> <pre><code class='language-vue' lang='vue'><template> <div> <table> <tr> <td>編號</td> <td>名稱</td> <td>價格</td> <td>引數</td> <td>詳情</td> <td>圖片</td> <td>分類</td> <td>操作</td> </tr> <tr v-for="goods in goods_array"> <td>{{goods.id}}</td> <td> <router-link :to="{name: 'Detail', params: {'pk': goods.id}}">{{goods.goods_name}}</router-link> </td> <td>{{goods.goods_price}}</td> <td>{{goods.parameter}}</td> <td v-html="goods.goods_content"></td> <td><img :src="'http://127.0.0.1:8000' + goods.goods_img" alt=""></td> <td v-for="c in cate_array" v-if="c.id == goods.cate">{{c.cate_name}}</td> <td> <a href="#" @click.prevent="del_goods(goods.id)">刪除</a> <router-link :to="{name: 'UpdateGoods', params: {'pk': goods.id}}">修改</router-link> <a href="#" @click.prevent="add_cart(goods.id)">加入購物車</a> <router-link :to="{name: 'Cart'}">去購物車({{cart_sum}})</router-link> </td> </tr> </table> <p> <button @click.prevent="up_num">上一頁</button> <button v-for="p in page_array" @click.prevent="get_page_num(p)">{{p}}</button> <button @click.prevent="down_num">下一頁</button> </p> </div> </template> <script> import axios from 'axios' export default { data() { return { goods_array: Array(), // List() [] cate_array: [], page: 1 , page_array: [], current_page: '', sum_page: '', user_id: sessionStorage.getItem('user_id'), // 通過session獲取使用者id cart_sum: '' } }, methods: { get_goods() { //跳轉到當前頁，並根據頁碼，獲取當前頁的商品資訊 axios({ url: 'http://127.0.0.1:8000/mdadmin/page_api/' + this.page, method: 'get' }).then(res=>{ console.log(res.data) this.goods_array = res.data.goods this.page_array = res.data.page_list this.current_page = res.data.number this.sum_page = res.data.page_nums }) }, get_cate() { // 獲取分類 axios({ url: 'http://127.0.0.1:8000/mdadmin/cate_api/', method: 'get' }).then(res=>{ console.log(res.data) this.cate_array = res.data }) }, del_goods(gid) { // 刪除商品 axios({ url: 'http://127.0.0.1:8000/mdadmin/goods_detail/' + gid + '/', method: 'delete' }).then(res=>{ console.log(res.data) window.location.reload() }) }, get_page_num(page_num) { // 獲取頁碼，重新給page賦值，並呼叫get_goods() this.page = page_num this.get_goods() }, up_num(){ // 上一頁 if(this.current_page>1 ) { this.page -= 1 this.get_goods() }else if(this.current_page == 1){ this.page = 1 this.get_goods() } }, down_num() { // 下一頁 if(this.current_page < this.sum_page) { this.page += 1 this.get_goods() }else if(this.current_page == this.sum_page){ this.page = this.sum_page this.get_goods() } }, add_cart(goods_id) { let form_data = new FormData() form_data.append('user_id', this.user_id) form_data.append('goods_id', goods_id) form_data.append('cart_num', 1) axios({ url: 'http://127.0.0.1:8000/mdadmin/add_cart/', method: 'post', data: form_data }).then(res=>{ console.log(res.data) this.cart_sum = res.data.cart_sum }) } }, created() { this.get_goods() this.get_cate() if(sessionStorage.getItem('name')){ }else{ window.location.href = '/login' } } } </script> </code></pre> <h4>購物車頁面</h4> <pre><code class='language-vue' lang='vue'><template> <div> <table> <tr> <td>商品編號</td> <td>名稱</td> <td>價格</td> <td>數量</td> <td>總價</td> </tr> <tr v-for="goods in goods_array"> <td>{{goods.goods_code}}</td> <td>{{goods.goods_name}}</td> <td>{{goods.goods_price | msg}}</td> <td> <button @click.prevent="jian(goods.goods_code)">-</button> <input type="text" :value="goods.goods_number" style="width: 20px" id="input1"> <button @click.prevent="jia(goods.goods_code)">+</button> </td> <td>{{goods.goods_sum | msg}}</td> </tr> <tr> <td></td> <td></td> <td></td> <td>總價：</td> <td>{{goods_sums | msg}}</td> </tr> </table> </div> </template> <script> import axios from 'axios' export default { data(){ return { user_id: sessionStorage.getItem('user_id'), goods_array: [], goods_sums: '' } }, methods: { get_goods() { axios({ url: 'http://127.0.0.1:8000/mdadmin/show_cart/' + this.user_id, method: 'get' }).then(res=>{ console.log(res.data) this.goods_array = res.data.goods_list this.goods_sums = res.data.goods_sums }) }, jian(goods_id) { // 減數量 let form_data = new FormData() form_data.append('user_id', this.user_id) form_data.append('goods_id', goods_id) axios({ url: 'http://127.0.0.1:8000/mdadmin/jian/', method: 'post', data: form_data }).then(res=>{ if(res.data.code == 200){ this.get_goods() } }) }, jia(goods_id) { // 加數量 let form_data = new FormData() form_data.append('user_id', this.user_id) form_data.append('goods_id', goods_id) axios({ url: 'http://127.0.0.1:8000/mdadmin/jia/', method: 'post', data: form_data }).then(res=>{ if(res.data.code == 200){ this.get_goods() } }) } }, created() { if(sessionStorage.getItem('user_id')){ this.get_goods() }else{ window.location.href = '/login' } } } </script> </code></pre> <p> </p> <p> </p>