實(shí)習(xí)生活記錄——SINCE2019-04-19 第二、三、四周

2019-04-19 DAY6

前端到后端的一趟

先是在index。js里import一個(gè)/file的文件內(nèi)容，再在下面concat加上一個(gè)filerouter。---可以從index。js里找到file在哪。然后/file里有各種功能，比如/add和/delete?？梢苑謩e路由到某個(gè)vue頁面。再寫一下vue頁面，很簡(jiǎn)單的就可以,就是一個(gè)form表單.

form表單 action到后端的controller。

比如/filecontroller里面，寫/upload的接口。具體實(shí)現(xiàn)寫在？？？看一下項(xiàng)目里怎么寫的。圖片上上傳到服務(wù)器，再到文件服務(wù)器，返回一個(gè)url地址。 vue頁面上顯示的這個(gè)圖片url就是到這個(gè)服務(wù)器端的地址。 一般之后會(huì)加到數(shù)據(jù)庫(kù)里面去，就是圖片的id,name,url.

還有一般 /add。/select可以返回一個(gè)apiresult〈user〉泛型。

這樣在swagger 里就可以看到他的很多信息。 dynamicbean就是一個(gè)動(dòng)態(tài)的返回map？很多信息返回不了。
返回一個(gè)常量，以后就可以只改一個(gè)常量的值，不用每個(gè)地方都改。

用戶，角色，權(quán)限的關(guān)系

1個(gè)用戶可以有多個(gè)角色，一個(gè)角色可以有多個(gè)權(quán)限。
一般是，把權(quán)限（就是模塊）給角色，再把角色給用戶。
一個(gè)用戶就有所有用的角色都權(quán)限了。

....實(shí)際操作起來和想象中不太一樣。。。。。好困
下午了...........................

admin\src\main\java\com\lh\controller\FileUploadController.java

@Controller
@RequestMapping("fileupload")
public class FileUploadController {

@Value("${aliyun.oss-endpoint}")
String endpoint;

@Value("${aliyun.oss-access-key-id}")
String accessKeyId;

@Value("${aliyun.oss-access-key-secret}")
String accessKeySecret;

@Value("${aliyun.oss-bucket-name}")
String bucketName;

@Value("${aliyun.oss-cname}")
String ossCname;

private static OSS ossClient;

/**
 * 獲取sts臨時(shí)授權(quán)
 *
 * @param
 * @return
 */
@RequestMapping(value = "upload")
@ResponseBody
public ApiResult upload(HttpServletRequest req) {
    FileUtil fileUtil = new FileUtil();
    File file = fileUtil.getUploadFile(req);
    if (ossClient == null) {
        ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
    }

    String key = "images/" + DateUtil.format("yyyyMMdd") + "/" + UUID.randomUUID().toString().replaceAll("-", "");
    String fileName = file.getName();
    String fileType = fileName.contains(".") ? fileName.substring(fileName.lastIndexOf(".") + 1) : "";
    if (StringUtil.hasLength(fileType)) {
        key = key + "." + fileType;
    }
    //System.out.println(key);
    ossClient.putObject(bucketName, key, file);
    ApiResult apiResult = ApiResult.build(200, "上傳成功", "http://" + ossCname + "/" + key);

    file.delete();
    //ossClient.shutdown();
    return apiResult;
}

}


在這里有常量

先貼一完整代碼 ↑↑

一開始出現(xiàn)一個(gè)bug。為什么呢，因?yàn)闆]有寫@Responsebody，就返回不出來了呀。?。?！
image.png

image.png

image.png

image.png

image.png

阿里云-對(duì)象存儲(chǔ)服務(wù)OSS-JAVA簡(jiǎn)單上傳

文件上傳

以下代碼用于上傳本地文件：
要有：endpoint;accesskeyid;accesskeysecret;再創(chuàng)建一個(gè)osslicent的實(shí)例，再putObject方法，就可以上傳到服務(wù)器。到時(shí)候再存到數(shù)據(jù)庫(kù)里去。

// Endpoint以杭州為例，其它Region請(qǐng)按實(shí)際情況填寫。
 String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
// 阿里云主賬號(hào)AccessKey擁有所有API的訪問權(quán)限，風(fēng)險(xiǎn)很高。強(qiáng)烈建議您創(chuàng)建    并使用RAM賬號(hào)進(jìn)行API訪問或日常運(yùn)維，請(qǐng)登錄 https://ram.console.aliyun.com 創(chuàng)建RAM賬號(hào)。
String accessKeyId = "<yourAccessKeyId>";
String accessKeySecret = "<yourAccessKeySecret>";

// 創(chuàng)建OSSClient實(shí)例。
OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);

// 上傳文件。<yourLocalFile>由本地文件路徑加文件名包括后綴組成，例  如/users/local/myfile.txt。
ossClient.putObject("<yourBucketName>", "<yourObjectName>", new File("<yourLocalFile>"));

// 關(guān)閉OSSClient。
ossClient.shutdown();

2019-04-22 DAY7

一開始一直點(diǎn)不出來方法。。是因?yàn)闆]有定義成public的。。

mapper.xml可以不用寫，用這種方式：

有一個(gè)updatecommand（比如），直接寫mapper接口

service中的方法

service實(shí)現(xiàn)有很多種update重寫的方法

當(dāng)然service中要先定義這個(gè)mapper
注解別忘了寫

2019-04-23 DAY8

今天有點(diǎn)懵懵的。。。。因?yàn)関ue不會(huì)
剛剛一直登陸不進(jìn)去，一開始說找不到一個(gè)bean，然后我寫了整個(gè)類名，然后說resultmap，發(fā)現(xiàn)用resulttype就進(jìn)去了?。。。?！因?yàn)槲覜]有定義resultmap

2019-04-23 DAY8

迷茫，不會(huì)vue，前后端分離不會(huì)寫。打算看一下vue.js
老大幫我把bug都改好了。恩！我得學(xué)一下vue了


image.png

2019-04-24 DAY9

vue.js學(xué)習(xí)（一）：

在html中用{{}}傳值，里面可以是data中的key值（屬性）或者是methods中的方法名（帶括號(hào)，可以傳值）
vue中，當(dāng)前對(duì)象的data中的key值用this.key在methods中傳值。
image.png
image.png
屬性綁定：v-bind綁在標(biāo)簽的屬性值上，v-html可以放在標(biāo)簽的中間就是p標(biāo)簽的中間加了一個(gè)websitetag的值就是一個(gè)a標(biāo)簽。
image.png
image.png
關(guān)于方法給不給括號(hào)：如果在{{}中要給括號(hào)，不然以為是屬性值，綁定事件上可以不給括號(hào)。
image.png
v-on:和@是一樣的，一般用@比較方便
image.png
阻止事件冒泡事件；.once只執(zhí)行一次：
image.png
image.png
鍵盤事件：可以指定按那兩個(gè)鍵才觸發(fā)方法
image.png
雙向綁定：先在input中加個(gè)ref的屬性給個(gè)名字，再在vue中用this.$refs.name.value拿到input傳過來的值！
image.png
image.png
雙向綁定用v-model更方便！vue的data中要有name屬性，如果屬性有值，name一開始{{name}}就能顯示值
image.png
計(jì)算屬性：大量耗時(shí)的時(shí)候使用，點(diǎn)擊一個(gè)觸發(fā)一個(gè)，不像methods，點(diǎn)一個(gè)，觸發(fā)全部。在{{}}中寫方法名的時(shí)候不能加()
image.png
image.png
v-if：v-else-if兩個(gè)只會(huì)顯示一個(gè)。
image.png
image.png
v-show和v-if的區(qū)別：v-show在標(biāo)簽中是存在的，只是display是不是none顯不顯示，而v-if不是。
image.png
v-for循環(huán)拿到數(shù)組中的每個(gè)元素值：
image.png
image.png
可以只拿到name和age不會(huì)有格式
image.png
用template標(biāo)簽不會(huì)像div那樣創(chuàng)建很多的div，他只會(huì)有一個(gè)。
image.png
component組件：template模板里面只能有一個(gè)根標(biāo)簽，不可用全局的變量，不然一個(gè)改了全改了。
結(jié)構(gòu)是這樣的
在html中，只要?jiǎng)?chuàng)建一個(gè)<greeting></greeting>標(biāo)簽就行了~！
執(zhí)行順序：component中是注冊(cè)app.vue這個(gè)組件。
先html，再main.js再app.vue
vue的結(jié)構(gòu)：分三個(gè)部分
image.png
vue中調(diào)用別的組件。要在component中注冊(cè)
先import進(jìn)來，然后在components中注冊(cè)，最后在template標(biāo)簽下使用。
image.png
局部組件的構(gòu)建：
image.png
這樣也可以
用了scoped，樣式就不會(huì)影響到別的關(guān)聯(lián)的vue了
image.png
父組件向子組件傳值，屬性傳值props：
image.png
我覺得都寫同名就好了
這樣寫更嚴(yán)謹(jǐn)
傳值和傳引用：
傳值，只變一個(gè)，傳引用，全變
子組件向父組件傳值：
子組件中的點(diǎn)擊事件
觸發(fā)這個(gè)方法，注冊(cè)的事件名字是titlechanged，參數(shù)是后面那個(gè)“”里的
接著去他的父組件里找
找到這個(gè)事件，他要執(zhí)行這個(gè)update的方法，參數(shù)是一個(gè)事件
在方法里改變內(nèi)容
這里的title就是方法中的參數(shù)穿過來的
生命周期鉤子：
image.png
router-link不會(huì)重新加載頁面，而a標(biāo)簽會(huì)
image.png

2019-04-26 DAY10

vue.js學(xué)習(xí)（二）：

components中的模塊名字如果是駝峰的，可以不加引號(hào)，如果不是，就要加引號(hào)，而且不能和已存在的標(biāo)簽重復(fù)。
非駝峰命名
注意上面的標(biāo)簽名都是app-heade
路由配置：
image.png
image.png
路由跳轉(zhuǎn)不進(jìn)行刷新，用view-view，不用a標(biāo)簽。（a標(biāo)簽會(huì)刷新一次）
因?yàn)橛卸鄠€(gè)頁面都在這一塊區(qū)域顯示，所以用這個(gè)標(biāo)簽
router-link不用a標(biāo)簽
不用href，用to屬性
如果url輸入錯(cuò)誤可以用這個(gè)方式
跳轉(zhuǎn)到home
給路由起名字：
image.png
在這里使用，注意to前面的冒號(hào)是綁定的意思
實(shí)現(xiàn)跳轉(zhuǎn)：
image.png
好幾種方式
二級(jí)路由
寫在about的children里面
首先要包裹在一個(gè)div里面，，router-link的tag屬性作用是把這一條標(biāo)簽作為一個(gè)li
image.png
默認(rèn)展示：用redirect
image.png
點(diǎn)到關(guān)于我們，自動(dòng)展示某個(gè)vue
全局守衛(wèi)：就是在沒有登錄前不能看其他頁面
image.png
后置鉤子，組件內(nèi)守衛(wèi)（一般不怎么用，用的多是全局守衛(wèi)）
就是說，進(jìn)入到這個(gè)組件之后會(huì)怎么樣
路由獨(dú)享的守衛(wèi)
兩種方式，第二種是全局守衛(wèi)復(fù)制過來的。就是要進(jìn)入這個(gè)組件之前的守衛(wèi)。next()：進(jìn)入這個(gè)組件，有flase參數(shù)就又進(jìn)不去了
異步；beforeRouterEnter和beforeRouterLeave
beforeRouterEnter、就是進(jìn)入組件之前
beforeRouterLeave：離開組件之前
復(fù)用router-view
image.png
就展示了一個(gè)組件：HOME
也展示其他組件用components，加一個(gè)default，一進(jìn)去就展示的組件，全部，不是只有Home
結(jié)果
路由步驟：
routes.js
import進(jìn)來
image.png
就是下面那個(gè)components里的組件可以用router-view跳轉(zhuǎn)
加入history、可以去掉#，很好
添加header組件，放到app.vue里面，實(shí)現(xiàn)點(diǎn)哪個(gè)跳那個(gè)
image.png
image.png
效果

2019-04-28 DAY11

axios全局配置：
image.png
image.png
全局配置 或者：
image.png
image.png

Java中交互方式分為同步和異步兩種，異同情況如下：

同步交互：指發(fā)送一個(gè)請(qǐng)求,需要等待返回,然后才能夠發(fā)送下一個(gè)請(qǐng)求，有個(gè)等待過程；
異步交互：指發(fā)送一個(gè)請(qǐng)求,不需要等待返回,隨時(shí)可以再發(fā)送下一個(gè)請(qǐng)求，即不需要等待。
區(qū)別：一個(gè)需要等待，一個(gè)不需要等待，在部分情況下，我們的項(xiàng)目開發(fā)中都會(huì)優(yōu)先選擇不需要等待的異步交互方式。

async的用法，它作為一個(gè)關(guān)鍵字放到函數(shù)前面，用于表示函數(shù)是一個(gè)異步函數(shù)，因?yàn)閍sync就是異步的意思， 異步函數(shù)也就意味著該函數(shù)的執(zhí)行不會(huì)阻塞后面代碼的執(zhí)行。
await是等待的意思，那么它等待什么呢，它后面跟著什么呢？其實(shí)它后面可以放任何表達(dá)式，不過我們更多的是放一個(gè)返回promise 對(duì)象的表達(dá)式。注意await 關(guān)鍵字只能放到async 函數(shù)里面
image.png
image.png

2019-04-29 DAY12

新的一天，從報(bào)錯(cuò)開始

成功了！。
image.png

新的任務(wù)：做一個(gè)項(xiàng)目管理的增刪查改，要有樹形目錄。
IMG_20190429_155215.jpg

2019-05-07 DAY13

這一天真的很累，完成了后端的基本內(nèi)容，vue的樹形怎么都不會(huì)寫。

2019-05-09 DAY14

然后電腦又壞了。剛剛?cè)フ伊死洗?，解決了一些問題。
1、前端沒有顯示添加的模塊，但是輸入接口能跳轉(zhuǎn)。是因?yàn)闆]有配置模塊里和到角色的權(quán)限里面。。
2、對(duì)于數(shù)據(jù)庫(kù)的設(shè)計(jì)問題，id應(yīng)該設(shè)置為自增長(zhǎng)，number要計(jì)算。

3、前端中的新增按鈕，不應(yīng)該放在這里。
image.png
image.png

因?yàn)楦讣?jí)目錄到時(shí)候肯定不止這么兩個(gè)。，應(yīng)該放在刪除，下載，按鈕旁邊。無論在哪個(gè)文檔下面都可以添加子文檔。
4、樹形結(jié)構(gòu)的設(shè)計(jì)，后端再寫一個(gè)接口，接受parentId，返回list。就是說接收到parentID為0，就是第一層。

................下午了........
腦子很亂，讓我來理一下。
目前遇到的問題：
1、下載的接口寫不好，不能從給的url地址下載下來文件。
2、上傳文件的前端不知道怎么寫，用他給的uploadfilebutton返回的url是個(gè)很詭異的地址，有80多k。
3、怎么把這一條數(shù)據(jù)的id傳給這一條數(shù)據(jù)的按鈕跳轉(zhuǎn)的新增頁面
4、關(guān)鍵字number在哪里計(jì)算。
5、樹還是出不來

成功了?。。。。。。。。。?！

2019-05-10 DAY15

昨天把功能基本寫好了，今天就總結(jié)一下


image.png

emmmm下載好像還不行。?！，F(xiàn)在是打開這個(gè)東西。

1、樹形是怎么出來的

然后就去看vue.js了。。。?？吹暮芾?/p>

2019-05-13 DAY16

又是周一，今天眼睛不是很舒服。
prop屬性詳解：https://www.cnblogs.com/xiaohuochai/p/7388866.html

靜態(tài)Prop通過為子組件在父組件中的占位符添加特性的方式來達(dá)到傳值的目的

image.png
image.png

動(dòng)態(tài)props：動(dòng)態(tài)地綁定父組件的數(shù)據(jù)到子模板的 props，與綁定到任何普通的HTML特性相類似，就是用 v-bind。每當(dāng)父組件的數(shù)據(jù)變化時(shí)，該變化也會(huì)傳導(dǎo)給子組件

image.png

總結(jié)一下：

子組件在props中創(chuàng)建一個(gè)屬性，用以接收父組件傳過來的值
父組件中注冊(cè)子組件
在子組件標(biāo)簽中添加子組件props中創(chuàng)建的屬性
把需要傳給子組件的值賦給該屬性

子組件向父組件傳值

1.在子組件中創(chuàng)建一個(gè)按鈕，給按鈕綁定一個(gè)點(diǎn)擊事件
image.png

2.在響應(yīng)該點(diǎn)擊事件的函數(shù)中

使用$emit來觸發(fā)一個(gè)自定義事件，并傳遞一個(gè)參數(shù)
image.png

3.在父組件中的子標(biāo)簽中監(jiān)聽該自定義事件并添加一個(gè)響應(yīng)該事件的處理方法
image.png

總結(jié)一下：

子組件中需要以某種方式例如點(diǎn)擊事件的方法來觸發(fā)一個(gè)自定義事件
將需要傳的值作為$emit的第二個(gè)參數(shù)，該值將作為實(shí)參傳給響應(yīng)自定義事件的方法
在父組件中注冊(cè)子組件并在子組件標(biāo)簽上綁定對(duì)自定義事件的監(jiān)聽

Vue的slot-scope的場(chǎng)景的個(gè)人理解（寫的很好）

簡(jiǎn)單來說：

理解插槽作用域的使用方式

1.父組件傳遞了todos數(shù)組給子組件
2.子組件通過props接受了數(shù)組數(shù)據(jù)，這里應(yīng)該沒有任何問題
3.子組件拿到數(shù)組后v-for渲染列表，并且通過 <slot :todo="todo">的方式，把數(shù)組內(nèi)的每一個(gè)todo對(duì)象，傳遞給父組件
4.父組件通過slot-scope="slotProps"的方式，接受todo對(duì)象，之后就可以通過slotProps.todo.xxx的方式來使用了

所以數(shù)據(jù)的流動(dòng)經(jīng)歷了

父組件傳遞todos數(shù)組給子組件
子組件遍歷todos數(shù)組，把里面的todo對(duì)象傳遞給父組件

props，scope，slot，ref，is，slot，sync等知識(shí)點(diǎn)（寫的很好）

好了，看了近一天。?；究炊畍ue了。。。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ORA-00001: 違反唯一約束條件 (.) 錯(cuò)誤說明：當(dāng)在唯一索引所對(duì)應(yīng)的列上鍵入重復(fù)值時(shí)，會(huì)觸發(fā)此異常。 O...
    我想起個(gè)好名字閱讀 5,930評(píng)論 0贊 9
  • 一、Python簡(jiǎn)介和環(huán)境搭建以及pip的安裝 4課時(shí)實(shí)驗(yàn)課主要內(nèi)容 【Python簡(jiǎn)介】： Python 是一個(gè)...
    _小老虎_閱讀 6,313評(píng)論 0贊 10
  • 33、JS中的本地存儲(chǔ) 把一些信息存儲(chǔ)在當(dāng)前瀏覽器指定域下的某一個(gè)地方（存儲(chǔ)到物理硬盤中）1、不能跨瀏覽器傳輸：在...
    萌妹撒閱讀 2,240評(píng)論 0贊 2
  • 點(diǎn)擊查看原文 Web SDK 開發(fā)手冊(cè) SDK 概述 網(wǎng)易云信 SDK 為 Web 應(yīng)用提供一個(gè)完善的 IM 系統(tǒng)...
    layjoy閱讀 14,288評(píng)論 0贊 15
  • width: 65%;border: 1px solid #ddd;outline: 1300px solid #...
    邵勝奧閱讀 5,133評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容