網(wǎng)站設(shè)計(jì)流程包括百度指數(shù)app官方下載
小知識(shí)
- 軟件設(shè)計(jì)中提到的UI設(shè)計(jì)中的UI是什么意思？
在軟件設(shè)計(jì)中，UI設(shè)計(jì)中的UI是User Interface的簡稱，即用戶界面。UI設(shè)計(jì)是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)可以讓軟件變得有個(gè)性有品位，同時(shí)讓操作變得舒適簡單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。
遇到的問題
idea中沒有iml文件的處理方式
- 代開idea里面的終端
- .進(jìn)入到對應(yīng)模塊,輸入mvn idea:module 命令
- BUILD SUCCESS后,看到對應(yīng)模塊下,生成了.iml文件
- 右鍵對應(yīng)模塊,選擇導(dǎo)入對應(yīng)模塊
------------第一部分------------
項(xiàng)目概述、環(huán)境搭建
軟件開發(fā)整體介紹
作為一名軟件開發(fā)工程師,我們需要了解在軟件開發(fā)過程中的開發(fā)流程， 以及軟件開發(fā)過程中涉及到的崗位角色，角色的分工、職責(zé)， 并了解軟件開發(fā)中涉及到的三種軟件環(huán)境。那么這一小節(jié)，我們將從 軟件開發(fā)流程、角色分工、軟件環(huán)境 三個(gè)方面整體介紹一下軟件開發(fā)。
軟件開發(fā)流程
- 第1階段: 需求分析
完成需求規(guī)格說明書、產(chǎn)品原型編寫。
需求規(guī)格說明書， 一般來說就是使用 Word 文檔來描述當(dāng)前項(xiàng)目的各個(gè)組成部分，如：系統(tǒng)定義、應(yīng)用環(huán)境、功能規(guī)格、性能需求等，都會(huì)在文檔中描述。例如：
產(chǎn)品原型，一般是通過網(wǎng)頁(html)的形式展示當(dāng)前的頁面展示什么樣的數(shù)據(jù), 頁面的布局是什么樣子的，點(diǎn)擊某個(gè)菜單，打開什么頁面，點(diǎn)擊某個(gè)按鈕，出現(xiàn)什么效果，都可以通過產(chǎn)品原型看到。 例如：
- 第2階段: 設(shè)計(jì)
設(shè)計(jì)的內(nèi)容包含 UI設(shè)計(jì)、數(shù)據(jù)庫設(shè)計(jì)、接口設(shè)計(jì)。
UI設(shè)計(jì)：用戶界面的設(shè)計(jì)，主要設(shè)計(jì)項(xiàng)目的頁面效果，小到一個(gè)按鈕，大到一個(gè)頁面布局，還有人機(jī)交互邏輯的體現(xiàn)。例如：
數(shù)據(jù)庫設(shè)計(jì)：需要設(shè)計(jì)當(dāng)前項(xiàng)目中涉及到哪些數(shù)據(jù)庫，每一個(gè)數(shù)據(jù)庫里面包含哪些表，這些表結(jié)構(gòu)之間的關(guān)系是什么樣的，表結(jié)構(gòu)中包含哪些字段。例如：
接口設(shè)計(jì)：通過分析原型圖，首先，粗粒度地分析每個(gè)頁面有多少接口，然后，再細(xì)粒度地分析每個(gè)接口的傳入?yún)?shù)，返回值參數(shù)，同時(shí)明確接口路徑及請求方式。例如：
3. 第3階段: 編碼
編寫項(xiàng)目代碼、并完成單元測試。
項(xiàng)目代碼編寫：作為軟件開發(fā)工程師，我們需要對項(xiàng)目的模塊功能分析后，進(jìn)行編碼實(shí)現(xiàn)。
單元測試：編碼實(shí)現(xiàn)完畢后，進(jìn)行單元測試，單元測試通過后再進(jìn)入到下一階段。例如：
4. 第4階段: 測試
在該階段中主要由測試人員, 對部署在測試環(huán)境的項(xiàng)目進(jìn)行功能測試, 并出具測試報(bào)告。
- 第5階段: 上線運(yùn)維
在項(xiàng)目上線之前， 會(huì)由運(yùn)維人員準(zhǔn)備服務(wù)器上的軟件環(huán)境安裝、配置， 配置完畢后， 再將我們開發(fā)好的項(xiàng)目，部署在服務(wù)器上運(yùn)行。
角色分工
在對整個(gè)軟件開發(fā)流程熟悉后， 我們還有必要了解一下在整個(gè)軟件開發(fā)流程中涉及到的崗位角色，以及各個(gè)角色的職責(zé)分工。
| 崗位/角色 | 對應(yīng)階段 | 職責(zé)/分工 |
|---|---|---|
| 項(xiàng)目經(jīng)理 | 全階段 | 對整個(gè)項(xiàng)目負(fù)責(zé)，任務(wù)分配、把控進(jìn)度 |
| 產(chǎn)品經(jīng)理 | 需求分析 | 進(jìn)行需求調(diào)研，輸出需求調(diào)研文檔、產(chǎn)品原型等 |
| UI設(shè)計(jì)師 | 設(shè)計(jì) | 根據(jù)產(chǎn)品原型輸出界面效果圖 |
| 架構(gòu)師 | 設(shè)計(jì) | 項(xiàng)目整體架構(gòu)設(shè)計(jì)、技術(shù)選型等 |
| 開發(fā)工程師 | 編碼 | 功能代碼實(shí)現(xiàn) |
| 測試工程師 | 測試 | 編寫測試用例，輸出測試報(bào)告 |
| 運(yùn)維工程師 | 上線運(yùn)維 | 軟件環(huán)境搭建、項(xiàng)目上線 |
上述我們講解的角色分工, 是在一個(gè)項(xiàng)目組中比較標(biāo)準(zhǔn)的角色分工, 但是在實(shí)際的項(xiàng)目中, 有一些項(xiàng)目組由于人員配置緊張, 可能并沒有專門的架構(gòu)師或測試人員, 這個(gè)時(shí)候可能需要有項(xiàng)目經(jīng)理或者程序員兼任。
軟件環(huán)境
作為軟件開發(fā)工程師，在編碼的過程中就不可避免地會(huì)接觸多種軟件環(huán)境，我們主要來分析在工作中經(jīng)常遇到的三套環(huán)境， 分別是: 開發(fā)環(huán)境、測試環(huán)境、生產(chǎn)環(huán)境。 接下來，我們分別介紹一下這三套環(huán)境的作用和特點(diǎn)。
1). 開發(fā)環(huán)境(development)
我們作為軟件開發(fā)人員，在開發(fā)階段使用的環(huán)境，就是開發(fā)環(huán)境，一般外部用戶無法訪問。
比如，我們在開發(fā)中使用的MySQL數(shù)據(jù)庫和其他的一些常用軟件，我們可以安裝在本地， 也可以安裝在一臺(tái)專門的服務(wù)器中， 這些應(yīng)用軟件僅僅在軟件開發(fā)過程中使用， 項(xiàng)目測試、上線時(shí)，我們不會(huì)使用這套環(huán)境了，這個(gè)環(huán)境就是開發(fā)環(huán)境。
2). 測試環(huán)境(testing)
當(dāng)軟件開發(fā)工程師，將項(xiàng)目的功能模塊開發(fā)完畢，并且單元測試通過后，就需要將項(xiàng)目部署到測試服務(wù)器上，讓測試人員對項(xiàng)目進(jìn)行測試。那這臺(tái)測試服務(wù)器就是專門給測試人員使用的環(huán)境， 也就是測試環(huán)境，用于項(xiàng)目測試，一般外部用戶無法訪問。
3). 生產(chǎn)環(huán)境(production)
當(dāng)項(xiàng)目開發(fā)完畢，并且由測試人員測試通過之后，就可以上線項(xiàng)目，將項(xiàng)目部署到線上環(huán)境，并正式對外提供服務(wù)，這個(gè)線上環(huán)境也稱之為生產(chǎn)環(huán)境。
? 開發(fā)環(huán)境 ------------------------------------- 測試環(huán)境 ----------------------------------生產(chǎn)環(huán)境
首先，會(huì)在開發(fā)環(huán)境中進(jìn)行項(xiàng)目開發(fā)，往往開發(fā)環(huán)境大多數(shù)都是本地的電腦環(huán)境和局域網(wǎng)內(nèi)的環(huán)境，當(dāng)開發(fā)完畢后，然后會(huì)把項(xiàng)目部署到測試環(huán)境，測試環(huán)境一般是一臺(tái)獨(dú)立測試服務(wù)器的環(huán)境，項(xiàng)目測試通過后，最終把項(xiàng)目部署到生產(chǎn)環(huán)境，生產(chǎn)環(huán)境可以是機(jī)房或者云服務(wù)器等線上環(huán)境。
蒼穹外賣項(xiàng)目介紹
在開發(fā)蒼穹外賣這個(gè)項(xiàng)目之前，我們需要全方位的來介紹一下當(dāng)前我們學(xué)習(xí)的這個(gè)項(xiàng)目。接下來，我們將從項(xiàng)目簡介、產(chǎn)品原型、技術(shù)選型三個(gè)方面來介紹蒼穹外賣這個(gè)項(xiàng)目。
項(xiàng)目介紹
本項(xiàng)目（蒼穹外賣）是專門為餐飲企業(yè)（餐廳、飯店）定制的一款軟件產(chǎn)品，包括 系統(tǒng)管理后臺(tái) 和 小程序端應(yīng)用 兩部分。其中系統(tǒng)管理后臺(tái)主要提供給餐飲企業(yè)內(nèi)部員工使用，可以對餐廳的分類、菜品、套餐、訂單、員工等進(jìn)行管理維護(hù)，對餐廳的各類數(shù)據(jù)進(jìn)行統(tǒng)計(jì)，同時(shí)也可進(jìn)行來單語音播報(bào)功能。小程序端主要提供給消費(fèi)者使用，可以在線瀏覽菜品、添加購物車、下單、支付、催單等。
接下來，通過功能架構(gòu)圖來展示管理端和用戶端的具體業(yè)務(wù)功能模塊。
1). 管理端功能
員工登錄/退出 , 員工信息管理 , 分類管理 , 菜品管理 , 套餐管理 , 菜品口味管理 , 訂單管理 ，數(shù)據(jù)統(tǒng)計(jì)，來單提醒。
2). 用戶端功能
微信登錄 , 收件人地址管理 , 用戶歷史訂單查詢 , 菜品規(guī)格查詢 , 購物車功能 , 下單 , 支付、分類及菜品瀏覽。
產(chǎn)品原型
產(chǎn)品原型，用于展示項(xiàng)目的業(yè)務(wù)功能，一般由產(chǎn)品經(jīng)理進(jìn)行設(shè)計(jì)。
注意事項(xiàng)： 產(chǎn)品原型主要用于展示項(xiàng)目的功能，并不是最終的頁面效果。
在課程資料的產(chǎn)品原型文件夾下,提供了兩份產(chǎn)品原型。
1). 管理端
餐飲企業(yè)內(nèi)部員工使用。 主要功能有:
| 模塊 | 描述 |
|---|---|
| 登錄/退出 | 內(nèi)部員工必須登錄后,才可以訪問系統(tǒng)管理后臺(tái) |
| 員工管理 | 管理員可以在系統(tǒng)后臺(tái)對員工信息進(jìn)行管理，包含查詢、新增、編輯、禁用等功能 |
| 分類管理 | 主要對當(dāng)前餐廳經(jīng)營的 菜品分類 或 套餐分類 進(jìn)行管理維護(hù)， 包含查詢、新增、修改、刪除等功能 |
| 菜品管理 | 主要維護(hù)各個(gè)分類下的菜品信息，包含查詢、新增、修改、刪除、啟售、停售等功能 |
| 套餐管理 | 主要維護(hù)當(dāng)前餐廳中的套餐信息，包含查詢、新增、修改、刪除、啟售、停售等功能 |
| 訂單管理 | 主要維護(hù)用戶在移動(dòng)端下的訂單信息，包含查詢、取消、派送、完成，以及訂單報(bào)表下載等功能 |
| 數(shù)據(jù)統(tǒng)計(jì) | 主要完成對餐廳的各類數(shù)據(jù)統(tǒng)計(jì)，如營業(yè)額、用戶數(shù)量、訂單等 |
2). 用戶端
移動(dòng)端應(yīng)用主要提供給消費(fèi)者使用。主要功能有:
| 模塊 | 描述 |
|---|---|
| 登錄/退出 | 用戶需要通過微信授權(quán)后登錄使用小程序進(jìn)行點(diǎn)餐 |
| 點(diǎn)餐-菜單 | 在點(diǎn)餐界面需要展示出菜品分類/套餐分類, 并根據(jù)當(dāng)前選擇的分類加載其中的菜品信息, 供用戶查詢選擇 |
| 點(diǎn)餐-購物車 | 用戶選中的菜品就會(huì)加入用戶的購物車, 主要包含 查詢購物車、加入購物車、刪除購物車、清空購物車等功能 |
| 訂單支付 | 用戶選完菜品/套餐后, 可以對購物車菜品進(jìn)行結(jié)算支付, 這時(shí)就需要進(jìn)行訂單的支付 |
| 個(gè)人信息 | 在個(gè)人中心頁面中會(huì)展示當(dāng)前用戶的基本信息, 用戶可以管理收貨地址, 也可以查詢歷史訂單數(shù)據(jù) |
技術(shù)選型
關(guān)于本項(xiàng)目的技術(shù)選型, 我們將會(huì)從 用戶層、網(wǎng)關(guān)層、應(yīng)用層、數(shù)據(jù)層 這幾個(gè)方面進(jìn)行介紹，主要用于展示項(xiàng)目中使用到的技術(shù)框架和中間件等。
1). 用戶層
本項(xiàng)目中在構(gòu)建系統(tǒng)管理后臺(tái)的前端頁面，我們會(huì)用到H5、Vue.js、ElementUI、apache echarts(展示圖表)等技術(shù)。而在構(gòu)建移動(dòng)端應(yīng)用時(shí)，我們會(huì)使用到微信小程序。
2). 網(wǎng)關(guān)層
Nginx是一個(gè)服務(wù)器，主要用來作為Http服務(wù)器，部署靜態(tài)資源，訪問性能高。在Nginx中還有兩個(gè)比較重要的作用： 反向代理和負(fù)載均衡， 在進(jìn)行項(xiàng)目部署時(shí)，要實(shí)現(xiàn)Tomcat的負(fù)載均衡，就可以通過Nginx來實(shí)現(xiàn)。
3). 應(yīng)用層
SpringBoot： 快速構(gòu)建Spring項(xiàng)目, 采用 “約定優(yōu)于配置” 的思想, 簡化Spring項(xiàng)目的配置開發(fā)。
SpringMVC：SpringMVC是spring框架的一個(gè)模塊，springmvc和spring無需通過中間整合層進(jìn)行整合，可以無縫集成。
Spring Task: 由Spring提供的定時(shí)任務(wù)框架。
httpclient: 主要實(shí)現(xiàn)了對http請求的發(fā)送。
Spring Cache: 由Spring提供的數(shù)據(jù)緩存框架
JWT: 用于對應(yīng)用程序上的用戶進(jìn)行身份驗(yàn)證的標(biāo)記。
阿里云OSS: 對象存儲(chǔ)服務(wù)，在項(xiàng)目中主要存儲(chǔ)文件，如圖片等。
Swagger： 可以自動(dòng)的幫助開發(fā)人員生成接口文檔，并對接口進(jìn)行測試。
POI: 封裝了對Excel表格的常用操作。
WebSocket: 一種通信網(wǎng)絡(luò)協(xié)議，使客戶端和服務(wù)器之間的數(shù)據(jù)交換更加簡單，用于項(xiàng)目的來單、催單功能實(shí)現(xiàn)。
4). 數(shù)據(jù)層
MySQL： 關(guān)系型數(shù)據(jù)庫, 本項(xiàng)目的核心業(yè)務(wù)數(shù)據(jù)都會(huì)采用MySQL進(jìn)行存儲(chǔ)。
Redis： 基于key-value格式存儲(chǔ)的內(nèi)存數(shù)據(jù)庫, 訪問速度快, 經(jīng)常使用它做緩存。
Mybatis： 本項(xiàng)目持久層將會(huì)使用Mybatis開發(fā)。
pagehelper: 分頁插件。
spring data redis: 簡化java代碼操作Redis的API。
5). 工具
git: 版本控制工具, 在團(tuán)隊(duì)協(xié)作中, 使用該工具對項(xiàng)目中的代碼進(jìn)行管理。
maven: 項(xiàng)目構(gòu)建工具。
junit：單元測試工具，開發(fā)人員功能實(shí)現(xiàn)完畢后，需要通過junit對功能進(jìn)行單元測試。
postman: 接口測工具，模擬用戶發(fā)起的各類HTTP請求，獲取對應(yīng)的響應(yīng)結(jié)果。
開發(fā)環(huán)境搭建
開發(fā)環(huán)境主要包含前端環(huán)境和后端環(huán)境兩部分。
這里主要是練習(xí)后端，前端部分的代碼在資料中的nginx， 前端頁面的代碼我們只需要能看懂即可。
前端環(huán)境搭建
- 從資料中找到前端運(yùn)行環(huán)境的nginx，移動(dòng)到非中文目錄下
sky目錄中存放了管理端的前端資源，目錄如下：
- 啟動(dòng)nginx訪問測試
雙擊nginx.exe即可訪問nginx服務(wù)
http://localhost:80
后端環(huán)境搭建
熟悉項(xiàng)目結(jié)構(gòu)
后端工程基于 maven 進(jìn)行項(xiàng)目構(gòu)建，并且進(jìn)行分模塊開發(fā)。
1). 從Day01資料中找到后端初始工程：
2). 將初始工程/項(xiàng)目架構(gòu)導(dǎo)入idea，了解項(xiàng)目的整體結(jié)構(gòu)：
對工程的每個(gè)模塊作用說明：
| 序號(hào) | 名稱 | 說明 |
|---|---|---|
| 1 | sky-take-out | maven父工程，統(tǒng)一管理依賴版本，聚合其他子模塊 |
| 2 | sky-common | 子模塊，存放公共類，例如：工具類、常量類、異常類等 |
| 3 | sky-pojo | 子模塊，存放實(shí)體類、VO、DTO等 |
| 4 | sky-server | 子模塊，后端服務(wù)，存放配置文件、Controller、Service、Mapper等 |
對項(xiàng)目整體結(jié)構(gòu)了解后，接下來我們詳細(xì)分析上述的每個(gè)子模塊：
-
sky-common: 模塊中存放的是一些公共類，可以供其他模塊使用
-
分析sky-common模塊的每個(gè)包的作用：
名稱 說明 constant 存放相關(guān)常量類 context 存放上下文類 enumeration 項(xiàng)目的枚舉類存儲(chǔ) exception 存放自定義異常類 json 處理json轉(zhuǎn)換的類 properties 存放SpringBoot相關(guān)的配置屬性類 result 返回結(jié)果類的封裝 utils 常用工具類 -
sky-pojo: 模塊中存放的是一些 entity、DTO、VO
-
分析sky-pojo模塊的每個(gè)包的作用：
名稱 說明 Entity 實(shí)體，通常和數(shù)據(jù)庫中的表對應(yīng) DTO 數(shù)據(jù)傳輸對象，通常用于程序中各層之間傳遞數(shù)據(jù) VO 視圖對象，為前端展示數(shù)據(jù)提供的對象 POJO 普通Java對象，只有屬性和對應(yīng)的getter和setter -
sky-server: 模塊中存放的是 配置文件、配置類、攔截器、controller、service、mapper、啟動(dòng)類等
-
分析sky-server模塊的每個(gè)包的作用：
名稱 說明 config 存放配置類 controller 存放controller類 interceptor 存放攔截器類 mapper 存放mapper接口 service 存放service類 SkyApplication 啟動(dòng)類
Git版本控制
使用Git進(jìn)行項(xiàng)目代碼的版本控制，具體操作：
1). 創(chuàng)建Git本地倉庫
當(dāng)Idea中出現(xiàn)：
說明本地倉庫創(chuàng)建成功。
快速提交至本地倉庫
點(diǎn)擊多次commit即可
2). 創(chuàng)建Git遠(yuǎn)程倉庫
訪問https://gitee.com/，新建倉庫
復(fù)制地址
將項(xiàng)目推送到遠(yuǎn)程倉庫
此時(shí)gitee中可以找到推送的項(xiàng)目，找不到就刷新一下
數(shù)據(jù)庫環(huán)境搭建
在項(xiàng)目資料中，有數(shù)據(jù)庫代碼腳本文件：
將腳本代碼導(dǎo)入MySQL
每張表的說明：
| 序號(hào) | 表名 | 中文名 |
|---|---|---|
| 1 | employee | 員工表 |
| 2 | category | 分類表 |
| 3 | dish | 菜品表 |
| 4 | dish_flavor | 菜品口味表 |
| 5 | setmeal | 套餐表 |
| 6 | setmeal_dish | 套餐菜品關(guān)系表 |
| 7 | user | 用戶表 |
| 8 | address_book | 地址表 |
| 9 | shopping_cart | 購物車表 |
| 10 | orders | 訂單表 |
| 11 | order_detail | 訂單明細(xì)表 |
我們目前先簡單了解大概有哪些表, 每張表存儲(chǔ)什么數(shù)據(jù), 有一個(gè)印象。對于具體的表結(jié)構(gòu), 以及表結(jié)構(gòu)中的字段, 可以參考資料中的《數(shù)據(jù)庫設(shè)計(jì)文檔》，同時(shí)在講解具體的功能開發(fā)時(shí), 我們也會(huì)再詳細(xì)介紹。
將此處的配置文件中的數(shù)據(jù)庫的配置修改成自己的數(shù)據(jù)庫相關(guān)配置，比如：MySQL的用戶名和密碼等
前后端聯(lián)調(diào)
后端的初始工程中已經(jīng)實(shí)現(xiàn)了登錄功能，直接進(jìn)行前后端聯(lián)調(diào)測試即可
先編譯一下，肯能否成功：
找到運(yùn)行程序，啟動(dòng)：
啟動(dòng)成功：
如果啟動(dòng)成功，打開瀏覽器，在地址欄輸入localhost:80
成功打開：
點(diǎn)擊登錄：
這里的報(bào)錯(cuò)在這里是正常，后面會(huì)修改
注：可以通過斷點(diǎn)調(diào)試跟蹤后端程序的執(zhí)行過程
----------------------后續(xù)內(nèi)容-----------------------------
https://gitee.com/zhang-zakcomy/sky-take-out