P1   環境搭建

包括java,idea,maven配置,以及在idea中配置maven。

註：在files->New Project Settings中配置maven路徑，jdk版本1.8，不然重啟會失效

P2   創建springboot項目，熱部署

1、創建springboot項目時type選Maven,springboot版本選2.x版本。

2、熱部署配置(包括pom.xml,application.properties,軟體內配置）。

P3   Controller概念;路徑映射;get,post方法（4種方式）

get，post區別：

①GET不安全，大小有限，POST安全，大小沒有限制。

②在瀏覽器地址欄發起請求是get請求，一般情況下form標簽發起的是post請求。

P4   文件上傳（MultipartFile）及攔截器

攔截器：

步驟:

①定義一個Interceptor類繼承HandleInterceptor介面,重寫preHandle,postHandle,aferHandle三種方法實現請求前後等操作，返回true則可通過。

②定義一個config類繼承WebMvcConfigurer介面,類前加@Configuration註解字，在類裡面重寫addInterceptors方法註冊攔截器並設置要攔截的地址

P5  Restful風格，Swagger框架（配置三個地方）

Restful:

使用前：刪除用戶操作/deleteuser?id=10<------>查找用戶/searchuser?id=10

使用後都是/user/10,通過get,delete請求方式區分,通過對應的Mapping方法進行處理

Swagger:訪問Swagger UI。

P6  資料庫單表查詢（mybatisPlus）

知識點：

1、Controller：響應前端發來的請求；

Mapper：定義SQL請求並向資料庫發送【實現實體類與資料庫表的映射】。

2、Plus使用步驟：

①定義一個UserMapper介面【使用Mybatis註解簡化介面方法實現（只需要寫SQL語句，通過註解的方式加入到方法上就行）】，繼承BaseMapper後不用寫SQL【Plus獨有】

②使用介面定義的方法：在Controller類里註入(@Autowired)，通過註入的對象調用對應方法

3、Plus的常用註解

●使用Plus方法時實體類類名要與資料庫表名要一致，不一致要用註解@TableName("sys_user")

●實體類主鍵加入註解@TableId(type = IdType.AUTO)：好處是會生成一個唯一id值【不加註解的話預設發送0】代碼里拿不到id值

4、MB與MBP的區別

手動寫SQL的為MB框架，MBP不用寫SQL（全自動）

P7  多表查詢，分頁查詢

1、多表查詢（mybatis）

例：查詢用戶時同時查詢其所有訂單

●資料庫-->實體類（欄位會增加，新增的要手動做映射）

●先改資料庫（加表，改名），再改實體類（加映射類，欄位），再改Mapper（加Mapper，通過@Result跨Mapper傳數據），最後改Controller（增加響應方法）

2、分頁查詢（mybatisPlus）

①定義分頁配置類②查詢時創建Page對象，返回IPage對象。

P8  vue入門

1、前端環境準備

編碼工具: VSCode

依賴管理:NPM

項目構建: VueCli

2、vue是一套用於構建用戶界面的漸進式框架。

MVVM架構模式：提供對View和ViewModel的雙向數據綁定，保證視圖和數據的一致性。

3、Vue的使用步驟

①引入vue

<script src="https://unpkg.com/vue@next"></script>

②定義變數，數組等後臺數據或JS方法

<script>

Vue.createApp({

            data(){

                return {      JSON數據       }

            },methods(){        方法       }

        }).mount('#app')

</script>

③使用v-bind,v-html,v-on,v-if,v-for,指令將數據渲染在前端頁面中或將方法綁定到事件。

具體使用查看vue官網

P9  vue項目開發（利用組件進行開發）

1、NPM（項目管理工具）使用：下載node.js安裝包，直接安裝即可。

2、Vue CLl（腳手架）使用（類似IDEA）

①安裝: 命令行輸入npm install -g @vue/cli

②創建vue cli項目:在Code文件夾命令行輸入vue create hello，配置

Manually select features->取消Linter/Formatter->2.x->package.ison->N

③在hello文件目錄下啟動伺服器：npm run serve

3、組件化開發

①一個vue頁面通常由三部分組成:模板(template)、js(script)、樣式(style)

②組件的導入、註冊與使用：在App主組件中導入註冊其它組件，直接用組件名作為標簽名使用。

*註意：vue2里所有組件必須包在一個div里

P10  element-ui組件使用

1、 組件間組件間的傳值：

①內部傳值用Data，

②組件間由父組件通過prop的方式傳值：子組件定義prop，父組件使用子組件時再給屬性賦值。

③兄弟組件可以通過Vuex等統─數據源提供數據共用

2、  element-ui組件使用

項目目錄下輸入npm install element-ui下載，在main.js中導入註冊，

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

接著在官網複製組件代碼。

*註：網上項目下載後沒有node_modules目錄，npm install自動下載所需包

3、圖標的使用

安裝命令：npm install font-awesome

導入：import ‘font-awesome/css/font-awesome.min.css’

官網複製使用

P11  Axios網路請求

1、安裝導入Axios請求庫：

2、發送GET請求

①解決占用問題：修改後端伺服器代碼埠server.port=8088

②解決跨域問題：給後端控制器加註解@CrossOrigin，否則無法跨域獲取數據。

③在created方法內發送get請求：

axios.get("http://localhost:8088/XXX").then(function(response){console.log(response)})

3、

將get請求的數據渲染到組件

4、為了簡化axios使用，只需在main.js中導入一次後按如下配置：

配置之後所有組件發送請求可簡化為：