下面就可以在vue项目引用了（自己定义一个公共组件）
前台和后台乱码的问题可以说是家常便饭，一般两端定义好使用同一个字符集是不会有问题，但是昨天遇见一个小坑，分享一下。
先说环境吧，后台tomcat+spring，标准的SSM框架。tomcat配置文件和我知道能设置编码的地方都设置成UTF-8。之前使用jQuery请求正常，无乱码现象，因为最近使用vue，jQuery各种意义上的很多功能都使用不上，所以找到了vue-resourse，最强大的是这个还带有拦截器功能，嘛，可以在每次请求前后做一些 *** 作，用处诸君可以随便想象。
然后问题来了，一切都那么美好，使用简单，功能强大，可是，可是他居然中文乱码，这就很奔溃了，网上找了大量的教程，官方文档也努力找，可是依然没找到相关问题。so，只能自食其力咯。
乱码嘛，一开始想的当然是服务器的编码，确认再三，应该是没问题的，之前jQuery请求都是正常的，那好么，观察jQuery和vue-resourse发送的请求有何不同，嘛，其实也就content-type后面多了一个charset：utf-8。很简单，我立马想到了拦截器，每次请求前给request设置个请求头，大概是这样写的。
可以，很简单。嗯，看起来应该就可以了，可是试一下发现，这个Content-Type怎么完全没变啊，然后又是一阵折腾，比如设置其他请求头都有效，可是Content-type却无效，嗯，继续看文档，发现Vue.http.options.emulateJSON=true这一句，有个emulateJSON属性，准确意思没弄懂干嘛的，反正如果设置成false后台连参数都接不到了，全都是null。
说了这么多发现好多废话，嗯，好吧。直接说最后解决办法嘛，嗯，vue-resourse嘛，毕竟比较简单，问题也很明显了，就是设置了emulateJSON属性他会自动设置Content-Type请求头，而且比他给的api调用更靠后，so，灵机一动去他的js文件里看看咯。
找到引用js的位置，我的是这样的
找到这些js文件，打开搜索application/x-www-form-urlencoded，然后手动再后面加上charset:utf-8
嗯。暂时OK。不知道将来打包出来会不会有其他问题。
1、style 中设置竖屏时的屏幕处理 @media screen and (orientation:portrait)@media screen and (orientation: portrait) {
/*竖屏样式*/
body {
transform-origin: 0 0
transform: rotateZ(90deg) translateY(-100%)
}
}
2、在页面加载的时候，进行必要的页面宽高处理
forceLandscapeScreenHandle() {
const body = document.getElementsByTagName('body')[0]
const html = document.getElementsByTagName('html')[0]
const width = html.clientWidth
const height = html.clientHeight
const max = width >height ? width : height
const min = width >height ? height : width
body.style.width = max + "px"
body.style.height = min + "px"
}
三、注意事项
1、添加窗口变化的重新 宽高处理
onWindowSizeChanged() {
window.addEventListener("resize", this.forceLandscapeScreenHandle)
}
2、为了页面的变化太多，可以设置屏幕的最大最小比例
<!-- 这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度，这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面-->
<!-- 目的是 让界面显示 更加适应 手机屏幕-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
四、效果预览
五、实现步骤
这里构建 Vue 工程，可参见
Web 前端 之 Vue vue cli 环境的搭建简单整理（简单的一些注意事项）_仙魁XAN的博客-CSDN博客
1、打开 Vue 工程，在 public/index.html 中添加如下 meta 标签处理，屏幕比例的限制处理
<!-- 这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度，这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面-->
<!-- 目的是 让界面显示 更加适应 手机屏幕-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2、在 src/App.vue 中添加测试的内容
3、添加 style 样式，关键处理竖屏时的页面，相关如下
4、在页面加载进行 宽高处理
5、最后运行工程，效果如下
六、关键代码
1、public/Index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度，这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面-->
<!-- 目的是 让界面显示 更加适应 手机屏幕-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %>doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2、src/App.vue
<template>
<div id="container">
TestForceLandscapeScreen
</div>
</template>
<script>
export default {
name: 'ThreeTest',
components: {},
data() {
return {}
},
mounted() {
this.init()
},
methods: {
init() {
this.forceLandscapeScreenHandle()
// 这里监控
this.onWindowSizeChanged()
},
forceLandscapeScreenHandle() {
const body = document.getElementsByTagName('body')[0]
const html = document.getElementsByTagName('html')[0]
const width = html.clientWidth
const height = html.clientHeight
const max = width >height ? width : height
const min = width >height ? height : width
body.style.width = max + "px"
body.style.height = min + "px"
},
onWindowSizeChanged() {
window.addEventListener("resize", this.forceLandscapeScreenHandle)
}
},
// beforeDestroy 废弃，使用 beforeUnmount
beforeUnmount() {
}
}
</script>
<style>
#app {
/*文字居中*/
display: flex
justify-content: center
align-items: center
text-align: center
height: 100%
}
* {
/*初始化样式*/
margin: 0
padding: 0
}
html {
/*用于 获取 屏幕的可视宽高*/
width: 100%
height: 100%
overflow: hidden
}
body {
/*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/
position: fixed
left: 0
top: 0
width: 100%
height: 100%
}
@media screen and (orientation: portrait) {
/*竖屏样式*/
body {
transform-origin: 0 0
transform: rotateZ(90deg) translateY(-100%)
}
}
</style>
七、其他
1、参考博文
1）移动端如何让页面强制横屏_Fizz_kai的博客-CSDN博客_html 强制横屏
2）h5横屏（以vue为例） - 江峰★ - 博客园
2、其他实现强制横屏参考
强制横屏展示，这里用到了css3的旋转功能，就是对屏幕 resize 事件进行监听，当判断为竖屏时将整个根容器进行逆时针 CSS3 旋转 90 度即可。代码如下：
在mounted生命周期中监听resize事件：window.addEventListener('resize', this.resize)
resize方法如下：
resize () {
var width = window.innerWidth,
height = window.innerHeight,
$wrapper = document.getElementById("app"),
style = ""
if (width >= height) { // 横屏
style += "width:" + width + "px" // 注意旋转后的宽高切换
style += "height:" + height + "px"
style += "-webkit-transform: rotate(0)transform: rotate(0)"
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px"
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px"
}
else { // 竖屏
style += "width:" + height + "px"
style += "height:" + width + "px"
style += "-webkit-transform: rotate(90deg)transform: rotate(90deg)"
// 注意旋转中点的处理
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px"
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px"
}
$wrapper.style.cssText = style
}
接下来就是适配的问题了。我采用的是vw跟vh。以前没用过，初次接触，用过之后感觉真的挺好用的。
假如ios用户开启了屏幕固定或者android用户开启了屏幕自动旋转。这两种情况下，会有一点不一样。这时候使用css判断横竖屏就显得尤其重要了。代码如下：
/* 竖屏 */
@media screen and (orientation:portrait) {
// 以vw为单位
}
/* 横屏 */
@media screen and (orientation:landscape) {
// 以vh为单位
}
在竖屏的时候使用vw来进行适配。即根据屏幕的宽度来适配。这里以375 x 667的设计稿为例。例如：一个元素宽为526，高为314。根据屏幕的宽度来适配的话就是526/375 * 100% vw、314/375 * 100% vw了。
如果是横屏的话，就是用vh来进行适配。即根据屏幕的高度来适配。同样以375*667的设计稿为例。此时元素宽为526，高为314。就该写成宽为526/375 * 100% vh、高为314/375 * 100% vh了
tips:最近又重新研究了一下横屏这个，发现其实不管ios用户是否开启了屏幕固定或者android用户是否开启了屏幕自动旋转，，都不需要使用css判断横竖屏来写两套样式了，只需要以正常情况(即竖屏下)的宽度来计算，然后使用vmin作为单位即可，这样写一套样式就全部搞定了。（vmin是相对于视口的宽度或高度中较小的那个来计算的）
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）