中型項目 01
1 企業web項目類型
- 商城
- B2C 直銷商城商家與會員 直接交易 ( Business To Customer )，等
- B2B2C 購物平臺 商家和 會員 在另外一個商家提供的平臺上面進行交易，京東、天貓
- C2B 定製商城 會員向商家發起定製商品的需求，商家去完成，小米手機中就有個私人定製過程，它是發起投票，讓你們對需求有必定的定製性，人數多的需求它就開發上，還有一些互聯網+計劃，定製農場之類的。
- O2O線上線下交易平臺： 1230六、美團、餓了麼等
- C2C二手交易平臺 ： 早起淘寶、閒魚、人人車，產品不是這個網站本身的，是另一個客戶的
-
在axtrueshop上能夠看到不少項目原型https://www.axure.com.cn/，是經過axtrue這種原型製做工具作出來的，就是一個排版效果，通常pc端原型工具用的是axture，移動端通常用墨刀，https://modao.cc/css
前段技術博客：https://www.zhangxinxu.com/前端
原型出來之後，會有公司的設計人員對原型進行一些美化（ps等）和修飾，而後出設計稿，通常裏面都是一些png類型圖片，設計稿會再交給公司或者產品經理進行審覈，審覈經過以後再交給咱們的前端工做人員進行靜態頁面的開發，而且同時其實咱們的後端人員也會拿到原型以後，後端就知道前端須要什麼數據了，那麼後端就開始搭建服務器，進行網站架構設計，技術選型，域名申請等，服務器所需環境準備好（也就是項目代碼運行環境，一些軟件之類的安裝），而後進行數據庫設計，好比咱們若是用的django，那麼就須要進行models類的設計，而後進行數據庫遷移指令，數據庫設計的好很差，直接影響業務層面的開發和運行效率，因此很重要，而且要求比較高。而後咱們須要經過後端的代碼程序完成數據庫數據的獲取和加工，而後交給前端，完成動態數據展現。vue
那麼在項目的功能開發的時候，咱們須要記錄項目開發的過程，代碼的邏輯，進度等等，還須要測試咱們的代碼功能是否是有bug、漏洞等，咱們在開發的過程當中不只僅開發人員本身要測試，還有專業的人員進行測試，通常稱爲QA（QA（QUALITY ASSURANCE），中文意思是「質量保證」），也就是測試部門的人。其中有單元測試（將代碼中的一個函數或者一套邏輯做爲一個總體來進行測試，測試一下參數或者返回值等是否有問題）QA人員是須要寫代碼的，每每有公司稱之爲測試開發人員。須要編寫測試用例。node
項目的在開發的過程當中，可能有不少的功能，那麼一個項目可能有好多人來開發，每一個人開發一部分功能，而後不停的進行代碼的整合、測試、使用等，那麼咱們就會用到代碼管理和整合工具，也就是git、svn等。而後會有另一批人，叫作集成測試人員，這些人不須要懂代碼，就是拿着工具去測一下咱們項目的運行效果是什麼樣的，可以承受多大併發量等等，就是常常說的什麼性能測試、壓力測試、容量測試等等，看一些咱們項目運行的邊界在哪裏，何時會支撐不住，他們就是各類軟件花裏胡哨的用，直到測試經過了咱們的立項標準才表示項目合格，而後再交給運維人員將咱們的項目遷移到線上服務器，可能也會藉助一些工具來進行代碼部署上線，而後運維人員就須要他們藉助專業知識來保證項目7*24小時不間斷的運行。python
mysql
一般公司內部要研發一款軟硬件的產品以前，都要通過市場評估和調研分析，產生一份產品項目立項報告給公司。linux
webpack
項目概述
需求市場
需求分析和項目建設的必要性
業務分析
整體建設方案
項目風險和風險管理
可行性分析階段
參考資料：https://blog.csdn.net/m0_37370820/article/details/81077886ios
git
可是咱們如今只須要完成視頻銷售和視頻播放這兩塊流程，大概有下面九個頁面。
這是商城項目的核心部分。
-
-
註冊容聯雲短信接口平臺的帳號[https://www.yuntongxun.com/?ly=baidu-pz-p&qd=cpc&cp=ppc&xl=null&kw=10360228]
-
註冊保利威視頻服務平臺的帳號[暫時別註冊,由於有個7天免費測試期，若是到時候過時了就無法用了,網址：
-
註冊gitee[碼雲]的帳號
-
註冊阿里雲帳號,若是能夠購買一個服務器和域名, 或者第一次使用的能夠申請一個免費外網服務器
依賴包安裝
pip install django -i https://pypi.douban.com/simple/ #注意：在虛擬環境中安裝第三方包的時候，不要使用sudo，由於sudo是以管理員身份來安裝，會將安裝的東西安裝到全局中去，而不是在虛擬環境中，而且在linux系統下不要出現中文路徑 pip install djangorestframework -i https://pypi.douban.com/simple/ pip install PymySQL -i https://pypi.douban.com/simple/ pip install Pillow -i https://pypi.douban.com/simple/ pip install django-redis -i https://pypi.douban.com/simple/
4. 搭建項目
4.1 建立項目
cd ~/Desktop
mkdir luffy
cd luffy
django-admin startproject luffyapi
效果:
在pycharm中打開項目
先使用127.0.0.1:8000的網址來運行項目。
4.2 調整目錄
luffy/
├── docs/ # 項目相關資料保存目錄
├── luffycity/ # 前端項目目錄
├── luffyapi/ # 後端項目目錄
├── logs/ # 項目運行時/開發時日誌目錄
├── manage.py
├── luffyapi/ # 項目主應用，開發時的代碼保存
│ ├── apps/ # 開發者的代碼保存目錄，以模塊[子應用]爲目錄保存（包）
│ ├── libs/ # 第三方類庫的保存目錄[第三方組件、模塊]（包）
│ ├── settings/ #（包）
│ ├── dev.py # 項目開發時的本地配置
│ ├── prod.py # 項目上線時的運行配置
│ ├── test.py # 測試人員使用的配置(我們不須要)
│ ├── urls.py # 總路由（包）
│ ├── utils/ # 多個模塊[子應用]的公共函數類庫[本身開發的組件]
└── scripts/ # 保存項目運營時的腳本文件
在編輯中開發項目時,必須指定項目目錄才能運行,例如,開發後端項目,則必須選擇的目錄是luffyapi
上面的目錄結構圖，使用Ubuntu的命令tree輸出的。
若是沒有安裝tree，可使用 sudo apt install tree，就有了。
注意：建立文件夾的時候，是建立包(含init.py文件的)仍是建立單純的文件夾，看目錄裏面放的是什麼，若是放的是py文件相關的代碼，最好建立包，若是不是，那就建立單純的文件夾。
4.2.1 分不一樣環境進行項目配置
開發者本地的環境、目錄、數據庫密碼和線上的服務器都會不同,因此咱們的配置文件能夠針對不一樣的系統分紅多分.
-
在項目主應用下,建立一個settings的配置文件存儲目錄
-
根據線上線下兩種狀況分別建立2個配置文件 dev.py和prod.py
-
把原來項目主應用的 settings.py配置內容複製2份到dev.py和prod.py裏面
-
把原來的settings.py配置文件修改文件名或者刪除
新的目錄settings:
接下來,就能夠根據在manage.py中根據不一樣的狀況導入對應的配置文件了.
4.3 建立代碼版本
cd進入到本身但願存儲代碼的目錄路徑，並建立本地倉庫.git【pycharm直接打開終端就是項目根目錄了。無須cd了】 新建立的本地倉庫.git是個空倉庫
cd 目錄路徑
git init
4.3.1 配置用戶名和郵箱
git config --global user.name 'xxx'
git config --global user.email 'xxx@163.com'
4.4 在gitee平臺建立工程
公司通常都會有本身的代碼倉庫，通常都是本身搭建，也有使用第三方提供代碼管理平臺。
經常使用的代碼管理平臺：github、gitee(碼雲)、codepen
若是公司本身搭建的代碼管理平臺，gitlab框架
1） 建立私有項目庫
建立私有空倉庫之後的界面:
2）克隆項目到本地
注意：
咱們當前項目不須要這個步驟
這個步驟是 當之後咱們進入公司裏面，參與人家已經在作的項目時，別人已經有倉庫了，可是咱們是新人加入項目中的，那麼咱們不須要在本身本地進行git init，直接git clone 複製別人的倉庫代碼
git clone 倉庫地址
注意，若是當前目錄下出現git倉庫同名目錄時，會克隆失敗。
3）建立並切換分支到dev
# git branch dev # 建立本地分支dev,dev是自定義
# git checkout dev # 切換本地分支代碼
git checkout -b dev # 這裏是上面兩句代碼的簡寫
git提交
git add 代碼目錄 # 添加代碼到上傳隊列
git status # 查看當前項目的版本狀態
git commit -m '添加項目代碼' # 提交代碼到本地倉庫， -m 表示本次提交的描述
推送到遠端
git push origin dev:dev
若是推送代碼,出現如下提示: git pull ....,則表示當前本地的代碼和線上的代碼版本不一樣.
1. 把線上的代碼執行如下命令,拉取到本地,進行同步
git pull
2. 根據提示,移除多餘的衝突的文件,也能夠刪除.
完成這些步驟之後,再次add,commit,push便可.
接下來，咱們就把上面建立好的本地項目提交到gitee碼雲上面
# .表示當前目錄下全部的文件或目錄提交到上傳隊列[上傳隊列也叫"暫存區"]
git add .
# 把本地上傳隊列的代碼提交到本地倉庫
git commit -m "項目初始化搭建"
# 給本地的git版本控制軟件設置項目的遠程倉庫地址
git remote add origin https://gitee.com/mooluo/luffyproject.git
# 提交代碼給遠程倉庫
git push -u origin master
擴展：
1. 經過 git status 能夠查看當前項目的代碼版本狀態
2. 經過 git reflog 能夠查看代碼版本日誌[簡單格式]
3. 經過 git log 能夠查看代碼版本日誌[詳細格式]
4. 刪除分支 git branch -D 分支名稱
注意,不能刪除當前所在分支,必須切換到別的分支上才能進行刪除
最終，成功提交了代碼版本到gitee平臺。效果：
上面雖然成功移交了代碼版本，可是一些不須要的文件也被提交上去了。
因此，咱們針對一些不須要的文件，能夠選擇從代碼版本中刪除，而且使用.gitignore把這些垃圾文件過濾掉。
git rm 文件 # 刪除單個文件
git rm -rf 目錄 # 遞歸刪除目錄
# 如下操做建議經過終端來完成，不要使用pycharm提供，不然刪除.idea還會繼續生成。
git rm -rf .idea
git rm db.sqlite3
# 注意，上面的操做只是從項目的源代碼中刪除，可是git是不知情的，因此咱們須要同步。
git add .
git commit -m "刪除沒必要要的文件或目錄"
git push -u origin master
使用.gitignore把一些垃圾文件過濾掉。
vim .gitignore
./idea
./idea/*
./git
./db.sqlite3
開發時咱們常常會使用pycharm的提供的git管理工具來完成代碼的拉取和推送。
4.5 異常處理
新建utils/exceptions.py
from rest_framework.views import exception_handler
from django.db import DatabaseError
from rest_framework.response import Response
from rest_framework import status
import logging
logger = logging.getLogger('django')
def custom_exception_handler(exc, context):
"""
自定義異常處理
:param exc: 異常類
:param context: 拋出異常的上下文
:return: Response響應對象
"""
# 調用drf框架原生的異常處理方法
response = exception_handler(exc, context)
if response is None:
view = context['view']
if isinstance(exc, DatabaseError):
# 數據庫異常
logger.error('[%s] %s' % (view, exc))
response = Response({'message': '服務器內部錯誤'}, status=status.HTTP_507_INSUFFICIENT_STORAGE)
return response
settings.py配置文件中添加
REST_FRAMEWORK = {
# 異常處理
'EXCEPTION_HANDLER': 'luffyapi.utils.exceptions.custom_exception_handler',
}
4.6 日誌配置
django官方文檔
在settings/dev.py文件中追加以下配置：
# 日誌配置
LOGGING = {
'version': 1, #使用的python內置的logging模塊，那麼python可能會對它進行升級，因此須要寫一個版本號，目前就是1版本
'disable_existing_loggers': False, #是否去掉目前項目中其餘地方中以及使用的日誌功能，可是未來咱們可能會引入第三方的模塊，裏面可能內置了日誌功能，因此儘可能不要關閉。
'formatters': { #日誌記錄格式
'verbose': { #levelname等級，asctime記錄時間，module表示日誌發生的文件名稱，lineno行號，message錯誤信息
'format': '%(levelname)s %(asctime)s %(module)s %(lineno)d %(message)s'
},
'simple': {
'format': '%(levelname)s %(module)s %(lineno)d %(message)s'
},
},
'filters': { #過濾器：能夠對日誌進行輸出時的過濾用的
'require_debug_true': { #在debug=True下產生的一些日誌信息，要不要記錄日誌，須要的話就在handlers中加上這個過濾器，不須要就不加
'()': 'django.utils.log.RequireDebugTrue',
},
'require_debug_false': { #和上面相反
'()': 'django.utils.log.RequireDebugFalse',
},
},
'handlers': { #日誌處理方式，日誌實例
'console': { #在控制檯輸出時的實例
'level': 'DEBUG', #日誌等級；debug是最低等級，那麼只要比它高等級的信息都會被記錄
'filters': ['require_debug_true'], #在debug=True下才會打印在控制檯
'class': 'logging.StreamHandler', #使用的python的logging模塊中的StreamHandler來進行輸出
'formatter': 'simple'
},
'file': {
'level': 'INFO',
'class': 'logging.handlers.RotatingFileHandler',
# 日誌位置,日誌文件名,日誌保存目錄必須手動建立
'filename': os.path.join(os.path.dirname(BASE_DIR), "logs/luffy.log"), #注意，你的文件應該有讀寫權限。
# 日誌文件的最大值,這裏咱們設置300M
'maxBytes': 300 * 1024 * 1024,
# 日誌文件的數量,設置最大日誌數量爲10
'backupCount': 10,
# 日誌格式:詳細格式
'formatter': 'verbose',
'encoding': 'utf-8', # 設置默認編碼，不然打印出來漢字亂碼
},
},
# 日誌對象
'loggers': {
'django': { #和django結合起來使用，將django中以前的日誌輸出內容的時候，按照咱們的日誌配置進行輸出，
'handlers': ['console', 'file'], #未來項目上線，把console去掉
'propagate': True, #冒泡：是否將日誌信息記錄冒泡給其餘的日誌處理系統，工做中都是True，否則django這個日誌系統捕獲到日誌信息以後，其餘模塊中可能也有日誌記錄功能的模塊，就獲取不到這個日誌信息了
},
}
}
4.7 建立數據庫
create database lyapi default charset=utf8mb4; -- utf8也會致使有些極少的中文出現亂碼的問題，mysql5.5以後官方纔進行處理，出來了utf8mb4，這個是真正的utf8，可以容納全部的中文，其實通常狀況下utf8就夠用了。
爲當前項目建立數據庫用戶[這個用戶只能看到這個數據庫]
create user ly_user identified by '123';
grant all privileges on lyapi.* to 'ly_user'@'%';
flush privileges;
mysql -u luffy_user -pluffy
select user(); #luffy_user
4.8 配置數據庫鏈接
打開settings/dev.py文件，並配置
DATABASES = {
"default": {
"ENGINE": "django.db.backends.mysql",
"HOST": "127.0.0.1",
"PORT": 3306,
"USER": "luffy_user",
"PASSWORD": "luffy",
"NAME": "luffy",
}
}
在項目主模塊的 __init__.py中導入pymysql
import pymysql
pymysql.install_as_MySQLdb()
python manage.py makemigrations
python manage.py migrate
調整錯誤
數據庫版本檢測致使的錯誤
數據庫的版本檢測代碼註釋掉。
第二個錯誤也是由於數據庫版本的默認編碼致使，query返回的內容格式使用有誤。
新增一行代碼，把query查詢結果轉換格式爲 bytes類型
luffyapi項目後端基本就配置完了，下面搞一下前端客戶端。
git add .
git commit -m 'v2 各類配置'
git push orgin dev
5. 搭建前端項目
5.1 建立項目目錄
cd /home/hkxpz/py32/
vue init webpack lyweb
5.2 前端初始化全局變量和全局方法
在src目錄下建立settings.js站點開發配置文件：
export default {
host:"http://127.0.0.1:8000",
}
在main.js中引入
// // The Vue build version to load with the `import` command
// // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// import Vue from 'vue'
// import App from './App'
// import router from './routers/index';
import settings from "./settings"
// Vue.config.productionTip = false;
Vue.prototype.$settings = settings; #將settings中的內容做爲vue的屬性，之後就不用每次都導包了
//
// /* eslint-disable no-new */
// new Vue({
// el: '#app',
// router,
// components: { App },
// template: '<App/>'
// });
App.vue，全局css初始化代碼
reset.css
body{
margin: 0;
padding: 0;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
li{
list-style: none;
}
/*.el-header{*/
/* width: 1200px;*/
/*}*/
input,select,textarea{
border: none;
outline: none;
}
a{
text-decoration: none;
color: #4a4a4a;
}
也能夠把App.vue的style標籤的css代碼放到static外部目錄下引用過來
main.js
import "../static/css/reset.css";
6. 跨域CORS
咱們如今爲前端和後端分別設置兩個不一樣的域名：
| 位置 | 域名 |
|---|---|
| 前端 | www.lyweb.com |
| 後端 | www.lyapi.com |
編輯/etc/hosts文件，能夠設置本地域名
sudo vim /etc/hosts
在文件中增長兩條信息
127.0.0.1 localhost
127.0.0.1 www.lyapi.com
127.0.0.1 www.lyweb.com
暫停運行前端項目，並修改配置文件config/index.js
host: 'www.lyweb.com', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
保存修改信息，並重啓項目
這樣就能夠了，如今儘可能先不用使用80端口，比較麻煩
經過瀏覽器訪問drf項目,會出現如下錯誤信息
能夠經過settings/dev.py的ALLOWED_HOSTS,設置容許訪問
# 設置哪些客戶端能夠經過地址訪問到後端
ALLOWED_HOSTS = [
'www.lyapi.com',
'www.lyweb.com',
]
讓用戶訪問的時候，使用api.luffycity.cn:8000
1. 修改pycharm的manage.py的配置參數
如今，前端與後端分處不一樣的域名，咱們須要爲後端添加跨域訪問的支持
不然前端沒法使用axios沒法請求後端提供的api數據，咱們使用CORS來解決後端對跨域訪問的支持。
使用django-cors-headers擴展
在 Response(headers={"Access-Control-Allow-Origin":'客戶端地址/*'})
文檔：https://github.com/ottoyiu/django-cors-headers/
安裝
pip install django-cors-headers
添加應用
INSTALLED_APPS = (
...
'corsheaders',
...
)
中間件設置【必須寫在第一個位置】
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', #放在中間件的最上面，就是給響應頭加上了一個響應頭跨域
...
]
須要添加白名單，肯定一下哪些客戶端能夠跨域。
# CORS組的配置信息
CORS_ORIGIN_WHITELIST = (
#'www.luffycity.cn:8080', #若是這樣寫不行的話，就加上協議(http://www.luffycity.cn:8080，由於不一樣的corsheaders版本可能有不一樣的要求)
'http://www.lyweb.com:8080',
)
CORS_ALLOW_CREDENTIALS = False # 是否容許ajax跨域請求時攜帶cookie，False表示不用，咱們後面也用不到cookie，因此關掉它就能夠了，以防有人經過cookie來搞咱們的網站
完成了上面的步驟，咱們就能夠經過後端提供數據給前端使用ajax訪問了。
前端使用 axios就能夠訪問到後端提供給的數據接口，可是若是要附帶cookie信息，前端還要設置一下。
前端引入axios插件並配置容許axios發送cookie信息[axios自己也不容許ajax發送cookie到後端]
npm i axios -S --registry https://registry.npm.taobao.org
在main.js中引用 axios插件
import axios from 'axios'; // 從node_modules目錄中導入包
// 客戶端配置是否容許ajax發送請求時附帶cookie，false表示不容許
axios.defaults.withCredentials = false;
Vue.prototype.$axios = axios; // 把對象掛載vue中
若是你拷貝前端vue-cli項目到我們指定目錄下，若是運行起來有問題，一些不知名的錯誤，那麼就刪除node_modules文件件，而後在項目目錄下執行npm install 這個指令，從新按照package.json文件夾中的包進行node_modules裏面包的下載
- 1. 01-項目簡介
- 2. 01項目概述
- 3. 項目進度-01
- 4. React電商項目--01項目搭建
- 5. 01-Flask-初始化項目
- 6. CRM項目開源（01）
- 7. IT項目管理01
- 8. 項目三--BBS論壇--01
- 9. #git管理項目01#
- 10. Java項目筆記01
- 更多相關文章...
- • Mozilla 項目 - 瀏覽器信息
- • Maven 項目模板 - Maven教程
- • Kotlin學習（二）基本類型
- • Scala 中文亂碼解決
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 01-項目簡介
- 2. 01項目概述
- 3. 項目進度-01
- 4. React電商項目--01項目搭建
- 5. 01-Flask-初始化項目
- 6. CRM項目開源（01）
- 7. IT項目管理01
- 8. 項目三--BBS論壇--01
- 9. #git管理項目01#
- 10. Java項目筆記01