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)
})
总结
