介绍自己的做的网站,北京智联招聘官方网站做家政,智慧物流企业网站建设方案,3c渠道网一、脚手架配置代理
1.回顾常用的ajax发送方式#xff1a;
#xff08;1#xff09;xhr
比较麻烦#xff0c;不常用
#xff08;2#xff09;jQuery
核心是封装dom操作#xff0c;所以也不常用
#xff08;3#xff09;axios
优势#xff1a;体积小、是promis…一、脚手架配置代理
1.回顾常用的ajax发送方式
1xhr
比较麻烦不常用
2jQuery
核心是封装dom操作所以也不常用
3axios
优势体积小、是promise风格的、支持请求拦截器和响应拦截器
4fetch
2.3都是封装xhr的fetch跟xhr平级直接在window身上就能找到而且也是promise风格的但是不兼容ie肯定不能用它会把你返回的数据包两层所以不如axios常用。
2.引出问题
点击按钮获取学生信息app.vue:
import axios from axios
import { response } from express
export default {
name:App,
methods:{getStudent(){axios.get(http://localhost:5000/students),then(response{console.log(请求成功了,response.data)//response是一个响应对象。data里面的东西才是response想给你的},error{console.log(请求失败了,error.message)//maeeage失败的原因})}
}
}
点击按钮之后页面报错出现、、、cors、、、Access-Control-Allow-Oringin说明跨域了协议、域名、端口号出现不一样的我们所在的端口号是8080向端口号5000的要数据5000给8080了然后8080发现跨域了就没有给你数据解决跨域的问题
1.cors写服务器的人在服务器加几个响应头
5000返回的时候还携带几个特殊的响应头8000看见就给你了
2.jsonp借助script 的src属性
src属性在引入外部资源的时候不受同源限制但是得前端后端一起配合而且它只能解决get请求的问题开发不常用但是面试经常问很巧妙的用法
3.配置一个代理服务器
代理服务器是一个中间人但是它所处的位置跟我们一样8080粉色那个跟我们肯定是同域的那粉色跟蓝色呢他俩都是服务器服务器和服务器之间传输局不用ajax用的就是http传就完事了。那粉色的8080服务器得怎么开啊1.nginx学习成本大偏后端 2.vue-cli借助vue脚手架。 然后我们就来配置一下代理服务器
1方式一
在vue.config.js:
它的8080不用你管你只需要告诉这个代理服务器一会要把请求转发给谁就ok后面具体路径不用写写到端口号就行
//开启服务代理
devServer:{proxy:htp://localhost:5000
}
app.vue
methods:{getStudent(){axios.get(http://localhost:8080/students).then(response{console.log(请求成功了,response.data)//response是一个响应对象。data里面的东西才是response想给你的},error{console.log(请求失败了,error.message)//maeeage失败的原因})}
}
而且这个中间代理也不是什么时候都会转发请求的如果粉色的自己本身就有就不会往5000找了public里面文件都算是8080有的。
1、优点配置简单请求资源时直接发给前端8080即可。 2、缺点不能配置多个代理不能灵活的控制请求是否走代理。 3、工作方式若按照上述配置代理当请求了前端不存在的资源时那么该请求会转发给服务器 优先匹配前端资源。
2方式二
vue.config.js:
devServer:{proxy:{/ttt:{ //请求前缀想走代理就在请求的前面加/就把东西转发给targettarget:http://localhost:5000,pathRewrite:{^/ttt:},//不加这个配置粉色找蓝色的时候默认找的/ttt/server1ws:true ,//用于支持websocketchangeOrigin:true//用于控制请求头的host值//这个是告诉5000我也来自5000是true就撒谎来自5000false就是来自8080防止5000用不了设置true比较好},/hhh:{ target:http://localhost:5001,pathRewrite:{^/hhh:},ws:true ,changeOrigin:true},}
}
app
getStudent(){axios.get(http://localhost:8080/ttt/students).then(//前缀就加在端口号后面后面正常写response{console.log(请求成功了,response.data)//response是一个响应对象。data里面的东西才是response想给你的},error{console.log(请求失败了,error.message)//maeeage失败的原因})},getCar(){axios.get(http://localhost:8080/hhh/cars).then(//前缀就加在端口号后面后面正常写response{console.log(请求成功了,response.data)//response是一个响应对象。data里面的东西才是response想给你的},error{console.log(请求失败了,error.message)//maeeage失败的原因})}
如果我自己也有个students它也不会来拿我这个信息因为加了/ttt就强制去5000那里拿数据了所以这种就更灵活。
1、优点可以配置多个代理且可以灵活的控制请求是否走代理。 2、缺点配置略微繁琐请求资源时必须加前缀。
二、github案例
如果第三方库你写在assets里面了就得用import 引用用import引用会很严重的检查有某些字体你没有但是你引用了那就显示不出来但是link方法没事你没有但是引用了就不显示呗
所以像这种引入了外部资源的就不适合用assets/css/里面那就放在public/css然后在index.html中link引用一下他里面引用了app也能用
接口https虽然案例来说跨域了但是人家的工程师用cors已经解决了不用我们担心
list首先展示欢迎用户搜索之后显示 正在加载中 加载完毕显示users加载失败显示error
那怎么判断该显示啥呢数据驱动页面展示
1.app.vue
templatediv classcontainermySearch /myList //div
/templatescript
import mySearch from ./components/mySearch.vue;
import myList from ./components/myList.vue;
export default {name: App,components: { mySearch, myList },
};
/scriptstyle
/style
2.myList.vue
templatediv classrowdivv-showinfo.users.lengthclasscardv-foruser in info.users:keyuser.logina :hrefuser.html_url target_blankimg :srcuser.avatar_url stylewidth: 100px /!-- 头像地址 --/ap classcard-text{{ user.login }}/p!-- 用户名 --/div!-- 欢迎词 --h1 v-showinfo.isFirst欢迎/h1!-- 加载中 --h1 v-showinfo.isLoading加载中······/h1!-- 错误信息 --h1 v-showinfo.errMsg{{ info.errMsg }}/h1!-- 都一样就不一个一个写了但是这次也不用item直接v-for --/div
/templatescript
export default {name: myList,data() {return {info: {isFirst: true, //是不是初次展示isLoading: false, //点击按钮之后才加载errMsg: , //不能用布尔值了得看看是网差还是别的原因呢导致的users: [],//这些东西都得听search的情况不同他们几个值也变},};},mounted() {this.$bus.$on(updateListData, (dataObj) {this.info{...this.dataObj,...dataObj}//es6规则俩人都有的按后边来前面没有的要后面的//这里不要this.datadataObj更不能this._data,赋值过去动了原本配置的getter、setter});},
};
/scriptstyle scoped
.album {min-height: 50rem; /* Can be removed; just added for demo purposes */padding-top: 3rem;padding-bottom: 3rem;background-color: #f7f7f7;
}.card {float: left;width: 33.333%;padding: 0.75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;
}.card img {margin-bottom: 0.75rem;border-radius: 100px;
}.card-text {font-size: 85%;
}
/style
3.mySearch.vue
templatesection classjumbotronh3 classjumbotron-headingSearch Github Users/h3divinputtypetextplaceholderenter the name you searchv-modelkeyword/nbsp;button clicksearchUsersSearch/button/div/section
/templatescript
import axios from axios
//import { response } from express;
export default {name:mySearch,data(){return {keyword:}},methods:{searchUsers(){//请求前更新list的数据this.$bus.$emit(updateListData,{isFirst:false,isLoading:true,errMsg:,users:[]})axios.get(https://api.github.com/search/users?q${this.keyword}).then(response{this.$bus.$emit(updateListData,{isLoading:false,errMsg:,users:response.data.items})// 就最开始欢迎一下之后就不用了但是直接不写之后就少一个属性用es6语法解决console.log(请求成功,response.data.items)this.$bus.$emit(getUsers,response.data.items)},error{this.$bus.$emit(updateListData,{isLoading:false,errMsg:error.message,users:[]})console.log(请求失败,error.message)})// 直接等于this.他肯定不按js给你解析模版字符串然后$}}
};
/scriptstyle
/style
4.vue-resource
也是对xhr的封装,安装插件 npm i vue-resource
就是把axios替换成了this.$http,其他的都一样
main.js引入插件import vueResource from vue-resource 使用插件Vue.use(vueResource)
维护的不频繁用的不多
三、插槽
1.默认插槽
如果我想在最小的组件重复的的其中一个里面添加图片和其他组件都不一样的话我直接在category img、、、/category这样写出不来图片因为人家解析到img之后不知道来到category.vue里人家就不知道把img给你放哪儿了。
用一个特殊的标签slot,告诉人家识别完不知道放哪儿的标签放在哪个位置 (1)app.vue
templatediv classcontainermyCategory title美食img srchttp://s3.ax1x.com/2021/01/16/srJlq0.jpg alt //myCategorymyCategory title游戏ulli v-for(g, index) in games :keyindex{{ g }}/li/ul/myCategory!-- 这三个的样式都是解析完之后才塞到myCategory里面去的所以script可以直接写在app里 --myCategory title电影videocontrolssrchttp://clips.vorwaerts-gmbh.de/big_buck.bunny.mp4/video/myCategory!-- foodsfoods那得传太多了很麻烦 --/div
/templatescript
import myCategory from ./components/myCategory.vue;
export default {name: App,components: { myCategory },data() {return {foods: [火锅, 烧烤, 小龙虾, 牛排],games: [战神4, 极品飞车, 鬼泣, 超级玛丽],films: [《教父》, 《复仇者联盟》, 《绿皮书》, 《阿甘》],};},
};
/scriptstyle
.container {display: flex;justify-content: space-around;
}
img {width: 100%;
}
video {width: 100%;
}
/style
(2)myCategory.vue
templatediv classcategoryh3{{ title }}/h3slot图片加载不出来会看见这些文字/slot!-- 挖坑等组件的使用者进行填充 --/div
/templatescript
export default {name: myCategory,props: [listData, title],
};
/scriptstyle
.category {background-color: aqua;width: 200px;height: 300px;
}
h3 {text-align: center;background-color: orange;
}
/style
2.具名插槽
刚才那个只有一个直接用的slot具名插槽就是具有名字的插槽 app
templatediv classcontainermyCategory title美食imgslotcentersrchttp://s3.ax1x.com/2021/01/16/srJlq0.jpgalt/a slotfooter href更多美食/a/myCategorymyCategory title游戏ul slotcenterli v-for(g, index) in games :keyindex{{ g }}/li/uldiv classfoot slotfootera href单机游戏/aa href更多美食/a/div!-- 这个可以追加 --/myCategory!-- 这三个的样式都是解析完之后才塞到myCategory里面去的所以script可以直接写在app里 --myCategory title电影videoslotcentercontrolssrchttp://clips.vorwaerts-gmbh.de/big_buck.bunny.mp4/videotemplate v-slot:footer!-- 这样slot写一次就可以了 因为template slot就可以这样写了只有它行--div classfoota href单机游戏/aa href更多美食/aa href更多美食/a/divh4欢迎前来观影/h4/template/myCategory!-- foodsfoods那得传太多了很麻烦 --/div
/templatemycategory
templatediv classcategoryh3{{ title }}/h3slot namecenter图片加载不出来会看见这些文字/slotslot namefooter图片加载不出来会看见这些文字/slot!-- 挖坑等组件的使用者进行填充 --/div
/template
3.作用域插槽
现在我们只留下游戏重复三个然后设计第一个是无序列表第二个有序第三个每一个游戏都是h4标题
我把数据交给了插槽的使用者,根据数据所生成的结构由使用者来定 app:
templatediv classcontainermyCategory title游戏template scopeatguigu!-- atguigu收过来的是一个对象 --ulli v-for(g, index) in atguigu.games :keyindex{{ g }}/li/ul/template/myCategorymyCategory title游戏template scope{games}!-- 结构赋值 --!-- atguigu收过来的是一个对象 --olli v-for(g, index) in games :keyindex{{ g }}/li/ol/template/myCategorymyCategory title游戏template slot-scope{games}h4 v-for(g, index) in games :keyindex{{ g }}/h4/template/myCategory/div
/templatescript
import myCategory from ./components/myCategory.vue;
export default {name: App,components: { myCategory },
};
/scriptstyle
.container,
.foot {display: flex;justify-content: space-around;
}
img {width: 100%;
}
video {width: 100%;
}
h4 {text-align: center;
}
/style
category:
templatediv classcategoryh3{{ title }}/h3slot :gamesgames我是默认内容/slot!-- 我在这里写了一个games那么它就把games传给了插槽的使用者app里 --/div
/templatescript
export default {name: myCategory,props: [listData, title],data() {return {games: [战神4, 极品飞车, 鬼泣, 超级玛丽],};},
};
/scriptstyle
.category {background-color: aqua;width: 200px;height: 300px;
}
h3 {text-align: center;background-color: orange;
}
/style
