iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
Modern Web

30天肝出購物網站系列 第 1

Day01: 01 - 前置準備: 版面設計、安裝、開啟專案

Hello! 我是Charlie。
在這「30天肝出購物網站」系列文章中,我將與大家分享如何使用Django + Vue.js做出一個典型的購物網站。
在Day01中,我們將安裝好所需的library跟framework,並且做好版型設計。

================================◉‿◉=================================

安裝

首先,先安裝Python。
Python使用的是3.7.9,可到下方連結下載:
https://www.python.org/downloads/release/python-379/
請依照自己的電腦架構,選擇適宜的executable installer:
https://ithelp.ithome.com.tw/upload/images/20210915/20141666Kv8l9Kctqm.png

安裝完後,請至cmd確認是否有安裝完成:
$ python --version
https://ithelp.ithome.com.tw/upload/images/20210915/20141666e0xy3nJQZu.png

安裝完成後,我們要依序安裝幾個套件:

$ pip install django==3.1.5
$ pip install django-cors-headers==3.6.0
$ pip install PyMySQL==1.0.2
$ pip install PyJWT==2.0.1

接著安裝MySQL,可以到下方連結下載:
https://downloads.mariadb.org/mariadb/5.5.68/

安裝好之後,到控制台設立環境變數:
https://ithelp.ithome.com.tw/upload/images/20210915/20141666zAYV2ax6Iv.png

並到終端機底下確認是否能正常登入:
$ mysql -uroot -p
https://ithelp.ithome.com.tw/upload/images/20210915/20141666ETya73fWSN.png

接著安裝node.js,node.js可到下方連結下載:
https://nodejs.org/ko/blog/release/v14.16.0/

安裝好後,一樣到終端機中確認:
$ node --version
https://ithelp.ithome.com.tw/upload/images/20210915/201416667LergpGbhx.png

本次專案使用工具:

Sublime Text
Sublime Text Package - Emmet
Sublime Text Package - Terminal
Sublime Text Package - Vue Syntax Highlight
Sublime Text Package - HTML-CSS-JS Prettify


版面設計

這次要設計的是一個購物網站,會有以下幾點:

  1. 購物車放置於右上方按紐,以漂浮方式顯示
  2. 商品分類會放置於header下方,以dropdown-menu顯示
  3. 搜尋與購物車按鈕並排,如未登入則顯示登入跟註冊

============================================

所以目前的版面設計,首頁:
https://ithelp.ithome.com.tw/upload/images/20210915/20141666bdS0ZLIxVX.png

商品詳情頁面:
https://ithelp.ithome.com.tw/upload/images/20210915/20141666nLLH7RBZLn.png

訂單查詢:
https://ithelp.ithome.com.tw/upload/images/20210915/201416663QUXUXe7LX.png

而本次的LOGO是由Hatchful自動產生:
https://ithelp.ithome.com.tw/upload/images/20210915/20141666Q9j7j69iWo.png

================================◉‿◉=================================

Day01結束了!在今天我們完成了安裝跟版面設計,Day02將作前端的頁面刻畫,不過在此之前我們必須先建立專案,See ya next day!


下一篇
Day02: 02 - 前端 - 開啟專案、頁面刻劃、bootstrap-vue使用
系列文
30天肝出購物網站30

尚未有邦友留言

立即登入留言