Vue 蒼穹外賣
node_modules：當前項目依賴的js包
assets：靜態資源存放目錄
components：公共組件存放目錄
App.vue：項目的主組件，頁面的入口文件
main.js：整個項目的入口文件
package.json：項目的配置信息，依賴包管理
vue.config.js：vue-cli配置文件
PS：一定要保存在vs中才能生效！
vue組件、文本插值、屬性綁定、事件綁定、雙向綁定、條件渲染、axios
<template>
<div>
<h1>{{name}}</h1>
<h1>{{age>60?'老年':'青年'}}</h1>
</div>
<script>
export default{
data(){
return {name:'張三', age:30};
}
}
</script>
將數據放在方法體中 data(){return {…}}
{{age>60?‘老年’:‘青年’}} 在插值表達式中還可以進行簡單的計算
屬性綁定
v-bind:xxx 或者:xxx都可以
<template>
<div>
<div><input type="text" v-bind:value="name"></div>
<div><input type="text" :value="age"></div>
<div><img :src ="src"/></div>
</div>
</template>
<script>
export default {
data(){
return {
name:'王五',
age:20,
src:'http.....'
}
}
}
</script>
事件綁定
v-on:xxx 或者 @xxx
<template>
<div>
<div>
<input type="butten" value="保存" v-on:click="handleSave"/>
<input type="butten" value="保存" @click="handleSave"/>
<br>
</div>
</div>
<script>
export default{
data(){return { name:"張三"}}，
methods：{
handleSave(){
alert(this.name)
}
}
}
</script>
</template>
script中有方法體有數據體，有方法體
vue基本使用方式-雙向綁定
<template>
<div>
<div>
雙向綁定：{{name}}
<input type="type" v-model="name"/>
<input type="button" value="改變" @click="handleChange"/>
</div>
</div>
</template>
<script>
export default{
data() {return{name:'張三'}},
methods:{
handleChange(){
this.name='李四'
}
}
}
</script>
vue基本使用方式-條件渲染
v-if、v-else、v-else-if
在data()中，屬性名不需要加引號
<template>
<div>
<div v-if="sex==1">
男
</div>
<div v-else-if="sex==2">
女
</div>
<div v-else>
未知
</div>
</div>
</template>
<script>
export default {
data(){
return {sex:1}
}
}
</script>
vue基本使用方式-axios
依賴和包 dependencies、devDependencies
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.options(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])
-
url：請求路徑
-
data：請求體數據，最常見的是JSON格式數據
-
config：配置對象，可以設置查詢參數，請求頭信息
后端配置跨域不能完美解決問題
const{defineConfig}=require('@vue/cli-server');
module.exports=defineConfig({
transpileDependencies:true,
devServer:{
portL7070,
proxy:{
'/api':{
target:'http://localhost:8080',
pathRewrite:{
'^api':'' //路徑重寫，將'/api'替換為''
}
}
}
}
})
通過axios發送http請求
handleSend(){
// 通過axios發送http請求
axios.post('http://localhost:8080/admin/employee/login',{
username:'admin',
password:'123456'
}).then(res=>{
console.log(res.data)
}).catch(error=>{
console.log(error.response)
})
}
then 成功回調函數
catch 失敗回調函數
Access to XMLHttpRequest at ‘http://localhost:8080/admin/employ/login’ from origin ‘http://localhost:7070’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
POST ‘http://localhost:8080/admin/employee/login’ net::ERR_FAILED
Access-Control-Allow-Origin
axios.post('api/admin/employee/login',{
username:'admin',
password:'123456'
}).then(res=>{
console.log(error.response)
})
axios.get('/api/admin/shop/status',{
// 在請求頭中配置信息
headers:{
token:'xxx.yyy.zzz'
}
})
axios統一使用方式：axios(config)
// 發送一個post請求
axios({
method:'post',
url:'/user/12345',
data:{
firstName:'Fred',
lastName:'Flintstone'
}
})
// ‘param’ 是與請求一起發送的URL參數
// 必須是一個簡單對象或URLSearchParams對象
params:{
ID:12345
},
// 'data' 是作為請求體被發送的數據
// 僅適用'PUT', 'POST', 'DELETE'和'PATCH'請求方法
data:{
firstName:'Fred'
},
handleSend(){
axios(
method:'post',
url:'/api/admin/employee/login',
data:{
username:'admin',
password:'123456'
}
).then(res=>{
console.log(res.data)
}).catch(error=>{
console.log(error.response)
})}
res.data.data.token res.data代表響應體返回的數據
axios({
url:'/api/admin/employee/login',
method:'post',
data:{
username:'admin',
password:'123456'
}
}).then((res)=>{
console.log(res.data.data.token)
axios({
url:'/api/admin/shop/status',
method:'get',
params:{id:100},
headers:{
token:res.data.data.token
}
})
}).catch((error)=>{
console.log(error)
})
總結
)
)
