vue项目配置及代理解决跨域
2024-09-02 16:19:52
axios数据请求
1.下载模块：npm install axios
2.axios特点：
1.支持在浏览器当中发起XMLHttpRequest请求
2.支持Promise
3.自动转换json数据
4.安全，保护面首XSRF攻击
3.实现。
(1)视图页面
<script>
// 在程序加载页面开始渲染的时候调用
mounted() {
console.log('-------')
this.axios.get('/xiaodouyu/api/RoomApi/live').then(function(data){
console.log(data)
},function(err){
console.log(err)
})
}
</script>
(2)主函数main.js
import axios from 'axios'
// 原型对象
Vue.prototype.axios = axios
4.配套的解决跨域的方法
在项目下创建一个vue.config.js文件，里面内容如下：
module.exports = {
configureWebpack:{
devServer:{
proxy:{ //低版本用proxyTable
'/xiaodouyu':{
// 目标
target:"http://open.douyucdn.cn",
// 改变请求源
chaneOrigin:true ,
// 路径重写
pathRewrite:{
'^/xiaodouyu':''
}
}
}
}
}
}
斗鱼小项目
1.斗鱼项目配置
在项目下创建vue.config.js文件
modules.exports = {
//关闭代码检查
lintOnSave:false,
configureWebpack:{
devServer:{
proxy:{
'/douyu':{
target:"http://open.douyucdn.cn",
changeOrigin:true,
pathRewrite:{
'^/douyu':""
}
}
}
}
}
}
2.组件作用域
<style scoped>
//scoped 作用域，使该组件所有css样式仅在本组件有效
</style>
3.组件混入
import share from '../share.js'
export default {
//混入
mixins:[share]
}
4.插槽
组件标签中间写的通通放入插槽<slot></slot>
<vue-first>首页</vue-first>
5.在线人数过滤
<span v-text="$options.filters.onlineNumber(roomInfo.online)"></span>
<script>
export default {
filters:{
onlineNumber:function(oldValue){
if(oldValue < 10000){
return oldValue;
}
var newValue = (oldValue / 10000).toFixed(1) + "万";
return newValue;
}
}
}
</script>
生鲜项目
1.vux所需模块下载
vue init webpack 项目名
npm install vux --save
npm install vux-loader --save
npm install vue-style-loader
npm install css-loader
npm install less-loader
npm install less
最新文章
- jquery 元素控制(追加元素/追加内容)
- js与jq对数组的操作
- flow.ci Beta 上线，将开发工作流自动化
- TI CC2541的红外控制
- HOW TO REMOTELY DEBUG APPLICATION RUNNING ON TOMCAT FROM WITHIN INTELLIJ IDEA
- QCon2013上海站总结 -- 整体印象和感悟
- 可扩展多线程异步Socket服务器框架EMTASS 2.0 续
- DataTables获取表单输入框数据
- Yii2中限制访问某控制器的IP(IP白名单)
- AllPairs运用遇到的问题及解决办法分享
- Java 控制台输入数字 输出乘法表（代码练习）
- Netty源码—六、tiny、small内存分配
- vue教学视频（小程序教学视频）
- 急速安装lnmp 编译版本-wiki-shell脚本实现一键部署
- 洛谷P1274-魔术数字游戏
- maven 打 fat包（jar包有了全部依赖）插件
- Python: Flask框架简单介绍
- 相机拍摄时最重要的三个参数——光圈、快门、ISO
- sprintf与strcat
- JavaScript switch语句