P1 環境搭建 包括java,idea,maven配置,以及在idea中配置maven。 註：在files->New Project Settings中配置maven路徑，jdk版本1.8，不然重啟會失效 P2 創建springboot項目，熱部署 1、創建springboot項目時type選Mav ...
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請求庫：
|
npm install axios import axios from 'axios' |
2、發送GET請求
①解決占用問題：修改後端伺服器代碼埠server.port=8088
②解決跨域問題：給後端控制器加註解@CrossOrigin，否則無法跨域獲取數據。
③在created方法內發送get請求：
axios.get("http://localhost:8088/XXX").then(function(response){console.log(response)})
3、
|
//先導入axios,再在created方法中用 axios.get("http://localhost:8088/XXX").then((response)=>{this.tableData=response.data;}) |
將get請求的數據渲染到組件
|
axios.defaults.baseURL='http://localhost:8088' Vue.prototype.$http=axios |
4、為了簡化axios使用，只需在main.js中導入一次後按如下配置：
配置之後所有組件發送請求可簡化為：
|
this.$http.get("/user/findAll").then((response)=>{ this.tableData=response.data; }) |
