一、vue-source【全局】配置需要注意的问题
Vue.http.options.emulateJSON = true; Vue.http.options.emulateHTTP = true;
1. emulateHTTP
emulateHTTP(布尔值)。默认值为:false,设置值为true时,PUT, PATCH和DELETE等请求会以普通的POST方法发出,并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。。
2. emulateJSON
emulateJSON(布尔值)。默认值为:false,设置值为true时,数据(无论是get还是post)都会以formdata(表单提交方式)的形式发送数据。所以我们在给后台传递参数的时候需要加JSON.stringify(参数)
处理一下。
如果服务器无法处理编码为application/json的请求,可以启用emulateJSON选项。启用之后,请求会以application/x-www-form-urlencoded为MIME type,就像普通的HTML表单一样。
二、正则转义
Ps:需求在使用富文本编辑器(我使用的是Ueditor)时,传到后台数据需要对“双引号”进行转义
str.replace(/\"/g,'\\"');//进行转义然后转给后台 str.replace(/\\"/g,'"');//从后台拿到的数据进行反转义
三、混合开发中的异步部请求处理
混合开发中我们会用到安卓或者ios同事提供的jsBridge,来调用原生事件。但我们在请求后台的接口中需要把“这个参数”传递过去,所以我们就需要用异步处理。
import jsBridge from 'common/js/jsbridge'; // 引入jsBridge jsBridge.getHeader().then((data)=>{//成功处理函数},(err)=>{//失败处理函数});//注意此处的“getHeader()”函数不一定和我的一样名称。这个是别小伙伴(安卓或IOS)定的
四、vue脚手架(vue-cli)生成项目渲染注意点
在用vue生成的项目中,,针对index.html、app.vue、main.js三者之间关系
项目目录
|----src |--App.vue |--main.js |----index.html
简要说明
mian.js将项目的依赖关系(包括vue,vue-router,axios,mintui等等插件)引入,其中也包括App.vue(主要展示区)文件,渲染到index.html中。这其中有几种配合方案千万不要混淆,否则效果会出不来。
第一种写法
index.html中:
<div id="app" style="width:100%;height: 100%;"></div>
main.js中:
new Vue({ template:<App/>, components: {App} }).$mount('#app');
第二种写法
index.html中:
<div id="app" style="width:100%;height: 100%;"> <router-view></router-view> </div>
main.js中:
new Vue({
components: {App}
}).$mount('#app');
第三种写法
index.html中:
<div id="app" style="width:100%;height: 100%;"> <App></App> </div>
main.js中:
new Vue({
components: {App}
}).$mount('#app');
第二种写法文件内容
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>h5</title> </head> <body> <div id="app" style="width:100%;height: 100%;"> <router-view></router-view> </div> </body> </html>
mian.js
import Vue from 'vue'; import App from './App'; new Vue({ components: {App} }).$mount('#app');
App.vue
<template> <div class="app-wrapper"> <router-view></router-view> </div> </template> <script> export default {}; </script> <style lang='scss' rel="stylesheet/scss" type="text/css" scoped> .app-wrapper{ width:100%; height:100%; } </style>