elementUI學習

　　　　　　　　　　　　　　　　　　　　　　　　　　　　elementUI學習

elementUI入門：在ider里面安裝    命令npm i element-ui -S

　　在使用之前引入JS核心文件

組件的學習：進去elementUI官網：        https://element.eleme.cn/#/zh-CN

 

 Layout布局組件的學習：瀏覽 Layout組件查看你想要的布局風格  點擊顯示代碼 拷貝到你的模板里面

 

 

 

模板：

<template>
 <div class="hello">

 <el-row>
 <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
 </el-row>
 <el-row>
 <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
 <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
 </el-row>
 <el-row>
 <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
 <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
 <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
 </el-row>
 <el-row>
 <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
 <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
 </el-row>
 <el-row>
 <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
 <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
 <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
 <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
 <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
 <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
 </el-row>



 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data () {
 return {
 msg: 'hello啊'
 }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>
<style>
 .el-row {
 margin-bottom: 20px;
 &:last-child {
 margin-bottom: 0;
 }
 }
 .el-col {
 border-radius: 4px;
 }
 .bg-purple-dark {
 background: #99a9bf;
 }
 .bg-purple {
 background: #d3dce6;
 }
 .bg-purple-light {
 background: #e5e9f2;
 }
 .grid-content {
 border-radius: 4px;
 min-height: 36px;
 }
 .row-bg {
 padding: 10px 0;
 background-color: #f9fafc;
 }
</style>

后面的組件學習如上面一樣賦值模板修改你需要的東西即可

 

前后端分離的概念：

1。什么是前端？

2。什么是后端？

3。什么前后端不分離？

4。什么是動態數據？

5。什么是靜態文件？

6。什么是動靜分離？

然后，什么是前后端分離就可以很清楚了。

所以，先來看第一個問題：什么是前端？

這又可以分解成幾個小問題。

1。JS是前端么？

2。只要用JS寫的，都是前端么？

3。只要是前端工程師寫的，都是前端么？

4。大前端就是指的用JS語言寫的前端，哪怕它是運行在服務器那一端么？

5。App算前端么？

6。Html+CSS算前端么？

7。小程序算前端么？

8。ReactNative算前端么？

這些問題其實會困擾很多人，每一個人的想法也是不一樣的。

通常情況下，我們說的前端，都是指瀏覽器這一端，瀏覽器這一端，又在通常情況下，都是用JS來實現的，所以又會引申為，用JS寫的大部分程序都是前端，包括App，小程序，H5等。而NodeJS出現之后，用NodeJS寫的后端部分，也會被人歸類為前端，為了區分之前的前端，就給他們起了一個名字，叫做“大前端”。

但，這種以語言為分界點去區分前后端，真的合理么？

在過去，我們是不分前后端的，無論是Java還是JS，全都是一個人來寫。

倒底是什么原因讓我們開始區分前后端了？

第一個，是可以並行開發。前后端的進度互不影響，在過去，前后端不分離的情況下，前端的工作量相對較少，一個前端可以對四個后端。 可以理解為，前端花了一周時間寫好了靜態頁面，只需要調幾個Ajax接口，不需要路由，也不需要渲染，所以他可以把時間繼續在下一個項目里。

第二個，是成本問題。在過去，后端的成本還是比前端要高一些。同樣的工作，如果能拆給兩個人做，一個成本高一點，一個成本低一點，能接受。

第三個，CSS太難了。JS還好，和后端語言在對技能的訓練上相差不大，可是。。CSS是什么鬼？記住那么多的屬性，和Hash算法有關系嗎？

所以才分成了前后端，而Html+CSS+JS，都是在瀏覽器端執行，統一稱之為前端。

而Java，C，Python，PHP這些可以運行在服務器端的，統一稱之為后端。

 

所以前后端的定義，不應該是以語言來定義，而是應該以它的運行環境，如果是在服務器端，就應該被稱之為后端，代表着你看不見，摸不着。而如果運行在用戶端，就應該被稱之為前端，代表你是可以看得到的。

按照這種說法，前端和后端就分的很清楚了。

我們接下來再看，什么叫前后端不分離。

在Android和IOS沒有出現的年代，還有一種流行的說法，叫做C/S和B/S架構。現在已經很少有人提了，如果你知道，這又是一個暴露年齡的名詞。

C/S架構，指的就是Client-Server，意思就是在桌面程序上，有一個客戶端，然后遠程連接服務器端，用Socket或者是Http傳輸數據。

而B/S架構，就是指通過瀏覽器訪問，不用提前安裝一個客戶端。

B/S架構，曾一度被認為是C/S架構的替代者，好處就是無須安裝，簡單方便，研發速度也快。

這是什么意思呢？就是指，瀏覽器訪問的是一個完整的Html網頁，而這個網頁呢，並不是一個靜態的網頁，寫好在服務器上的，而是應用程序從數據庫里取數據生成的，動態網頁。

 

所以，前后端不分離的交互方式很簡單，就是瀏覽器發請求，服務器端給出一個完整的網頁，瀏覽器再發請求，服務器端再給出一個完整的網頁。

壞處很明顯，傳輸的重復數據比較多，網絡又會有延遲。所以有沒有辦法，只傳送必要的數據？

這是Ajax的起源。

Ajax就是只傳遞數據，不傳遞整個網頁。這也是被用來在翻頁，注冊，發送驗證碼等場景，但也僅僅止布於此了。

怎么樣提升訪問的性能，更多的人用的是網頁靜態化的技術。

就是把所有的動態數據都提前生成很多很多靜態的Html網頁，這樣就避免了從數據庫里取數據的時間。

這種方式本來不會發生變化，大家都習慣了這種做法。

突然有一天，蘋果說我們發布了Iphone。這個Iphone居然可以讓程序運行在手機上。

很有一種C/S架構的感覺。

只是過去的C/S架構並沒有大規模的應用在互聯網上，多數上傳統行業，互聯網還是前后端不分離的多一些。

可是后端在寫這些被稱之為客戶端的程序，就覺得太爽了。

過去還要套頁面，還要控制跳轉，現在呢？

面向Api編程啊，只需要告訴我Api是什么，我的每一個Api都是獨立的，互相之間沒有依賴。

App自己做控制，做緩存，做跳轉，做交互。

 

后端神馬都不用管，只需要保證自己的Api接口是好的。Postman很好用啊。還能自我驗證。

但是不爽的在哪里？

就是針對客戶端會有一個ApiServer，然后針對網頁，還會有一個Home。

兩個功能經常會一致，但是后端人員要寫兩套代碼。一套是生成Json的，一套是生成Html網頁的。

前端JS也很羡慕客戶端的開發人員啊。過去前端就是一個打邊角料的角色，只能寫寫靜態文件，看着后端去把頁面套的錯誤百出，偶爾寫個校驗，發送一個請求。

可是人家客戶端！跟后端就沒什么廢話說，你只需要把API保證正確，剩下的全部我來。

兩者之間的交互簡單方便，快捷省力。多好的方式？

所以網頁能否和客戶端一樣，也把決策權拿自己手里？

實際上是可以的啊。Angular就這么干了！

這就是SPA的含義之一，總之，到這個時候，前后端分離的意義才展示出來。

再說什么叫做動靜分離，這里還牽涉到一個叫做打版本的概念。

一般而言，會分成開發，測試和線上的環境。

在SVN的年代，分成Trunk，Branches和Tags。

Tag，就是一個版本的快照。

為什么要有版本的快照？是希望能夠在發生錯誤的時候回滾。

所以在前后端不分離的時候，如果發現網頁上有一個錯別字，怎么辦？

不好意思，拉一個分支出來，重新打Tag，前端后端的代碼一起打。不允許你手動修改。

但是后端的發布是需要重啟服務的啊。

為嘛我改一個錯別字就需要重啟服務？有沒有辦法讓后端和前端不在一起部署？

互相獨立？前端你寫錯字了，你自己來，反正 你又不需要重啟？

這就是動靜分離的起源。

把動態程序和靜態程序分開，大家互相不影響，各自部署分開。

現在，你能區分出來這些概念了嗎?