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;
});
},
},
