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=https://www.cnblogs.com/howfasttime/p/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=https://www.cnblogs.com/howfasttime/p/response.data; }) |
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/546951.html
標籤：Java