Vue過(guò)渡 & nanoid && 代理服務(wù)器

1. 過(guò)渡

使用vue的transition標(biāo)簽結(jié)合css樣式完成動(dòng)畫

頁(yè)面
    <button @click="isShow=!isShow">顯示/隱藏</button>
    <!-- 將需要有過(guò)渡效果的內(nèi)容用transition組件包裹起來(lái) -->
    <transition name="box">
       <div class="box" v-show="isShow">我一定會(huì)好好學(xué)習(xí)的</div>
    </transition>
    <hr>
    <button @click="addGoods">添加商品</button>
    <!-- transition-group組件,用于包裹多個(gè)組件的過(guò)渡,
    tag屬性設(shè)置transition-group自身渲染的標(biāo)簽 -->
    <transition-group name="box" tag="ul">
      <li v-for="(item,index) in goodses" :key="item.id">{{item.id}}-{{item.name}}
        <button @click="goodses.splice(index,1)">刪除</button>
      </li>
    </transition-group>
給列表添加動(dòng)畫或過(guò)渡效果,用transition-group ↑

樣式

//進(jìn)入時(shí)樣式 和 離開(kāi)時(shí)樣式
// 過(guò)濾的持續(xù)時(shí)間
.box-enter-active,
.box-leave-active {
  transition: all 1s;
}
// 開(kāi)始進(jìn)入樣式 和 離開(kāi)完成樣式
// 過(guò)渡的具體動(dòng)作
.box-enter,
.box-leave-to {
  transform: translateX(10px);
  // 注意:這里只能設(shè)置透明為0
  opacity: 0;
}

2. nanoid

安裝

npm install nanoid

導(dǎo)入nanoid函數(shù)

import { nanoid } from 'nanoid'

使用

let goods = {
        // nanoid()方法跌帐,每次返回一個(gè)全球唯一的id
        id:nanoid(),
        name:'商品'
      }

3. 服務(wù)器

新建一個(gè)server文件夾,在終端管理器下載一個(gè)包的描述文件

npm init -y

安裝express

npm i express

在新建一個(gè)index.js為一號(hào)服務(wù)器

// 導(dǎo)入express
let express = require("express");
// 創(chuàng)建一個(gè)服務(wù)器對(duì)象
let app = express();
// 開(kāi)啟一個(gè)端口號(hào)
app.listen(5566, () => {
  console.log("服務(wù)器成功開(kāi)啟绊率!端口號(hào)5566");
});

//配置中間件含末,攔截所有的請(qǐng)求
app.use((req, res, next) => {
  //允許ajax請(qǐng)求跨域
  //默認(rèn)情況下:ajax請(qǐng)求必須要遵循同源策略:協(xié)議名,主機(jī)名即舌,端口號(hào)一致佣盒。
  // 允許一臺(tái)指定的服務(wù)器跨域
  // res.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
  // 不限制跨域
  // res.setHeader("Access-Control-Allow-Origin", "*");
  next();
});

//學(xué)生數(shù)組
let stus = [
  {
    no: "1001",
    name: "張三",
    age: 20,
    sex: "男",
  },
  {
    no: "1002",
    name: "李四",
    age: 22,
    sex: "女",
  },
  {
    no: "1003",
    name: "王五",
    age: 24,
    sex: "男",
  },
]

// 定義一個(gè)get請(qǐng)求接口
app.get("/list", (req, res) => {
  res.send(stus);
});

2號(hào)服務(wù)器

// 導(dǎo)入express
let express = require("express");
// 創(chuàng)建一個(gè)服務(wù)器對(duì)象
let app = express();
// 開(kāi)啟一個(gè)端口號(hào)
app.listen(7788, () => {
  console.log("服務(wù)器成功開(kāi)啟!端口號(hào)7788");
});

//配置中間件顽聂,攔截所有的請(qǐng)求
app.use((req, res, next) => {
  //允許跨域
  // res.setHeader("Access-Control-Allow-Origin", "*");
  next();
});

//汽車數(shù)組
let cars = [
    {
      id: "1001",
      name: "奔馳"
    },
    {
      id: "1002",
      name: "寶馬"
    },
    {
      id: "1003",
      name: "奧迪"
    },
  ]

// 定義一個(gè)get請(qǐng)求接口
app.get("/list", (req, res) => {
  res.send(cars);
});

4. 配置代理

配置一個(gè)vue.config.js文件

module.exports = {
  lintOnSave: false,
  //devServer是腳手架中的開(kāi)發(fā)服務(wù)器
  devServer: {
    //配置主機(jī)名
    host: "localhost",
    //配置端口號(hào)
    port: "8080",
    //注意:在開(kāi)發(fā)階段肥惭,通過(guò)向當(dāng)前開(kāi)發(fā)服務(wù)器發(fā)送ajax請(qǐng)求,當(dāng)前服務(wù)器會(huì)將請(qǐng)求轉(zhuǎn)發(fā)給配置的代理服務(wù)器地址紊搪。
    //這里只能配置一個(gè)代理服務(wù)器
    // proxy:'http://localhost:7788',
    // 配置多個(gè)代理服務(wù)器地址
    proxy: {
      // /stu是前綴
      "/stu": {
        //代理的地址
        target: "http://localhost:5566",
        //路徑重寫蜜葱,因?yàn)橄蛘鎸?shí)的后臺(tái)發(fā)送請(qǐng)求時(shí),不需要加前綴
        pathRewrite: {
          //將地址中耀石,/stu替換成空
          // ajax向http://localhost:8080/stu/list發(fā)送請(qǐng)求
          // 代理服務(wù)器會(huì)幫我們向http://localhost:5566/stu/list發(fā)送請(qǐng)求
          // 但是http://localhost:5566服務(wù)器的真實(shí)地址應(yīng)該是http://localhost:5566/list牵囤,沒(méi)有/stu前綴
          // 所以在向真實(shí)的后臺(tái)發(fā)送請(qǐng)求時(shí),要將路由中的前綴刪除掉。
          "^/stu": "", //將/stu替換成空
        },
      },
      "/car": {
        //代理的地址
        target: "http://localhost:7788",
        pathRewrite: {
          "^/car": "",
        },
      },
    },
  },
};

ajax請(qǐng)求數(shù)據(jù)揭鳞,必須要遵循同源策略炕贵,什么是同源策略?
請(qǐng)求地址的協(xié)議名野崇,主機(jī)名(域名或ip地址)称开,端口號(hào),必須跟當(dāng)前地址相同乓梨,否則就是跨域請(qǐng)求鳖轰。
解決跨域有兩種途徑:1.后端允許跨域,2.前端想辦法騙過(guò)后端實(shí)現(xiàn)跨域(jsonp技術(shù)扶镀,代理服務(wù)器技術(shù))

methods: {
    // 加載學(xué)生信息的方法
    loadStudent() {
      // 向當(dāng)前服務(wù)器發(fā)請(qǐng)求蕴侣,當(dāng)前服務(wù)器會(huì)作為代理服務(wù)器,在通過(guò)原生http的方式向后臺(tái)服務(wù)器發(fā)請(qǐng)求
      // ajax請(qǐng)求默認(rèn)要遵循同源策略:協(xié)議名臭觉,主機(jī)名昆雀,端口號(hào)要一致。
      // 注意:這里的/list胧谈,其實(shí)是http://localhost:8080/list
      axios.get("/stu/list").then(({ data }) => {
        this.stus = data;
      });
    },
    // 加載車輛信息的方法
    loadCar() {
      axios.get("/car/list").then(({ data }) => {
        this.cars = data;
      });
    },
  },
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末忆肾,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子菱肖,更是在濱河造成了極大的恐慌客冈,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,865評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件稳强,死亡現(xiàn)場(chǎng)離奇詭異场仲,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)退疫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門渠缕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人褒繁,你說(shuō)我怎么就攤上這事亦鳞。” “怎么了棒坏?”我有些...
    開(kāi)封第一講書人閱讀 169,631評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵燕差,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我坝冕,道長(zhǎng)徒探,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 60,199評(píng)論 1 300
  • 正文 為了忘掉前任喂窟,我火速辦了婚禮测暗,結(jié)果婚禮上央串,老公的妹妹穿的比我還像新娘。我一直安慰自己碗啄,他們只是感情好质和,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,196評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著挫掏,像睡著了一般侦另。 火紅的嫁衣襯著肌膚如雪秩命。 梳的紋絲不亂的頭發(fā)上尉共,一...
    開(kāi)封第一講書人閱讀 52,793評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音弃锐,去河邊找鬼袄友。 笑死,一個(gè)胖子當(dāng)著我的面吹牛霹菊,可吹牛的內(nèi)容都是我干的剧蚣。 我是一名探鬼主播,決...
    沈念sama閱讀 41,221評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼旋廷,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼鸠按!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起饶碘,我...
    開(kāi)封第一講書人閱讀 40,174評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤目尖,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后扎运,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體瑟曲,經(jīng)...
    沈念sama閱讀 46,699評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,770評(píng)論 3 343
  • 正文 我和宋清朗相戀三年豪治,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了洞拨。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,918評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡负拟,死狀恐怖烦衣,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情掩浙,我是刑警寧澤花吟,帶...
    沈念sama閱讀 36,573評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站涣脚,受9級(jí)特大地震影響示辈,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜遣蚀,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,255評(píng)論 3 336
  • 文/蒙蒙 一矾麻、第九天 我趴在偏房一處隱蔽的房頂上張望纱耻。 院中可真熱鬧,春花似錦险耀、人聲如沸弄喘。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,749評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)蘑志。三九已至,卻和暖如春贬派,著一層夾襖步出監(jiān)牢的瞬間急但,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,862評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工搞乏, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留波桩,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,364評(píng)論 3 379
  • 正文 我出身青樓请敦,卻偏偏與公主長(zhǎng)得像镐躲,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子侍筛,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,926評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容