[项目技巧]VUE小米商城+跨域+sass编译器封装+吸顶功能
前端跨域 三种方案
什么是跨域
解决方法
CORS 后端修改
JSOP跨域
安装插件
JSONP和CORS跨域的区别? JSONP通过js携带请求进行跨域，他不是传统的XHR请求；CORS后台处理跨域
接口代理-重要
核心思路在vue.config.js中修改配置项目
通过修改nginx服务器配置来实现（欺骗浏览器）
说明：前端修改后端不动
访问的地址不需要再加头了
前端配置代码如下：(开发环境)
module.exports = {// 默认加载devServer: {host: 'localhost',// 项目端口port: 8080,// 代理访问a代理成b再由b访问aproxy: {'/api': {// 代理网址target: 'http://mall-pre.springboot.cn',// 是否将主机头原点更改为url地址-这段代码重要changeOrigin: true,// 转发地址//如果有很多种接口 这一种就可以解决了而不是写很多拦截搞了一个虚拟地址api// 之后再把api设置成空只转发后面的部分pathRewrite: {'/api': ''}}}},
项目安装包
封装sass+定制化主题
在当前文件中引入
把他放在合适的位置；可以减少代码量
而且可以传值
在文件先@important引入
再在@include + 名称使用
图片自适应高宽
鼠标移动 显示下拉折叠
实现思路
css
核心功能 children的高度默认0；鼠标移动 高度展开；动画：子元素默认不透明度0； 鼠标经过变1；高度变高
鼠标经过
性能优化 - 图片懒加载
在main.js文件中引入vue-lazeload插件 并且添加配置项
在组件标签上面通过v-lazy
VUE 实现动画对话框
我们需要封装一个对话框 怎么实现vue动画？
1.用transiton包裹对话框
//添加动画<transition name="slide-fade">//动画框盒子<div class="btn" v-show='isShow'>//内容<div :class="[activeClass,rotateClass]" @click='rotate'>关闭</div></div></transition>
const app = new Vue({el: '#app',data: {name: '点击显示模态框',isShow: false,//样式activeClass: 'close',rotateClass: '',},methods: {ButtonClick() {this.isShow = true},//点击旋转rotate() {this.rotateClass ? this.rotateClass = '' : this.rotateClass = 'rotate'this.isShow = false}}})
.mask {position: fixed;top: 0;left: 0;height: 100vh;width: 100vw;background: rgba(0, 0, 0, .3);}.btn {z-index: 1000;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);height: 200px;width: 400px;background: red;transition: all .3s;}.close {position: absolute;top: 0;right: 0;height: 20px;width: 20px;cursor: pointer;transition: all .3s;}.rotate {transform: rotate(90deg);transition: all .3s;}.slide-fade-enter-active {transition: all .2s linear;top: 0;opacity: 0;}.slide-fade-leave-active {transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);top: -100%;}/* 组件进入,离开 */.slide-fade-enter,.slide-fade-leave-to {top: -100%;opacity: 0;}
吸顶功能实现
实现思路 在mounted中 添加一个Scroll监听
判断被卷去的头部是否大于我们组件和顶部的距离
如果大于就固定定位
最后一步在组件销毁的时候移除监听
前端网页版支付
一般来说；支付功能大多数需要后端实现 只需要对接接口；然后渲染即可
以支付宝支付为列
1.调用支付结构；准备参数
2.成功会返回一个html；我们通过v-html来渲染
3.渲染内容是一个from表单，利用原生js获取fomr表单利用document.submit()方法提交表单
总结
[项目技巧]VUE小米商城+跨域+sass编译器封装+吸顶功能相关推荐
- vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
- 【全栈项目上线（vue+node+mongodb）】06.nodejs服务上线（生产环境前后分离的vue项目中怎么解决跨域问题）...
以下操作使用下面项目为案例 https://github.com/itguide/vnshop ## 启动node服务 克隆好项目后记得把依赖包安装好 npm i 使用 node 启动node服务 c ...
- vue php axios 跨域,在vue项目中,使用axios跨域处理
下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助. 跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无 ...
- vue项目打包部署nginx跨域
vue项目打包部署nginx跨域 vue项目连接外部api接口时,打包部署到nginx后出现api404,api跨域问题,这个时候需要给vue项目本身进行跨域,再配置nginx中进行跨域即可解决,详见 ...
- springboot+Vue项目使用axios实现跨域(CROS)
springboot+Vue项目使用axios实现(CROS)跨域 一.项目背景 二.跨域资源共享 CORS 详解 三.axios跨域实现 3.1 安装qs模块 3.2 axios使用 四.sprin ...
- node.js后端及Vue前端跨域解决方案
node.js后端及Vue前端跨域解决方案 从目前我了解的情况来看,前后端跨域使用的方式有很多种,这里记录我使用最顺手的一种,即在后端使用cors跨域 node.js后端跨域解决方案 先看后端的入口文 ...
- 【vue axios 跨域】cookie、origin等一步步递进的跨域踩坑 已解决
前后端对接必出bug,最近连续对接了两个项目,对解决跨域有点感觉了,跟大家分享一下经验,都是血的教训- 两个项目都是Springboot+Vue(axios网络请求).本人主要负责前端,所以前端会分享 ...
- Vue 前端跨域的解决方案（心得记录）
背景: 今天面试一面和二面都还ok,三面是两个小姐姐(工作性质应该是外包驻场,所以有甲方来面),简历上巴拉巴拉的简单聊了一下,到了关键了,小姐姐说问一下基础的东西(这也是最怕的,毕竟Vue我之前用的挺 ...
- ssm把图片保存到项目中_项目中的图片跨域问题解决方式
现象 首先,在生产环境中,由于进行编辑图片时,将图片回显到ReactCrop组件中进行可裁剪编辑,然而回显时,需要将图片转化为base64的格式或者blob对象, 此时需要将图片次绘制成canvas进 ...
最新文章
- SQL标准结构化语言练习，SQL增删查改，SQL实现对bank数据的操作
- android ip 黑白名单,GaussDB T 单机 IP黑白名单配置
- 7.3.2 非阻塞IO（non-blocking IO）
- 服务器上运行arp,服务器ARP病毒的特征及防护说明
- python中urframe函数的用法_python类中的内置函数
- VC 2010下安装OpenCV2.4.4(来自wiki）
- [期刊科普]期刊划分和分区：北大核心、南大核心、SCI、万方维普知网
- .net html5 微信支付接口,解析微信支付的实现方法（.NET版）
- blob 在线解码_一款支持在线的磁力播放工具
- php excel库,phpexcel类库下载
- 四旋翼无人机飞行原理
- AE（自动曝光）系统简介
- 模式识别技术是人工智能的基础技术，模式识别技术的发展潜力
- 计算机常温环境,计算机CPU温度70度正常吗？电脑cpu常温简介
- 手机QQ怎么使用群签到
- Mac OS 版本历史
- ISTQB TM考点总结之第三章
- android 设置背景ah,Ahjesus，
- CSS语法及其选择器
- SafeSignCertReg.exe导致系统工作异常