脚本宝典收集整理的这篇文章主要介绍了使用vue开发移动端管理后台,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
独立完成一个移动端项目(不是很明白为何会有这样的商品管理后台),还是有些经验不足,包括对产品的全局思考,对插件的选择等,都有考虑不周的缺点,导致自己中途想换图形界面插件,浪费了点时间,这里记录下,总结下经验,理一下思路。
<script type="text/javascript">
document.getElementsByTagName("html")[0].style.fontSize = 100 / 750 * window.screen.width + "px";
</script>
Access to XMLHttpRequest at 'https://....' from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
然后,终于找了个方法解决(有用过其他的上传插件,感觉不好用,代码或者思路好乱)
<vue-core-image-upload
class="btn btn-primary"
:crop="false"
input-of-file="file"
@imageuploaded="loadMainImg"
:max-file-size="5242880"
:url="serverUrl"
:credentials="false" //允许携带cookie
></vue-core-image-upload>
对于附带身份凭证的请求,服务器不得设置 Access-Control-Allow-Origin 的值为“”。这是因为请求的首部中携带了 Cookie 信息,如果 Access-Control-Allow-Origin 的值为“”,请求将会失败。
也就是说Access-Control-Allow-Credentials设置为true的情况下
Access-Control-Allow-Origin不能设置为*
<div class="modal" @click="handleCloseAddress">
<div class="cateContainer" @click.stop>
<div class="operateBtn">
<div class="cancelBtn" @click="handleCloseAddress">取消</div>
<div class="confirmBtn" @click="handleCloseAddress">确定</div>
</div>
<mt-picker class="addressPicker" :slots="myAddressSlots" @change="onAddressChange"></mt-picker>
</div>
</div>
json文件地址地址文件
// 定义一个包含中国省市区信息的json文件
import addressJson from '@/assets/common/address'
export default {
data() {
return {
myAddressSlots: [
{
flex: 1,
values: Object.keys(addressJson),
className: 'slot1',
textAlign: 'center'
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: ['市辖区'],
className: 'slot3',
textAlign: 'center'
},
{
divider: true,
content: '-',
className: 'slot4'
},
{
flex: 1,
values: ['东城区'],
className: 'slot5',
textAlign: 'center'
}
],
province:'省',
city:'市',
county:'区/县',
}
},
methods: {
onAddressChange(picker, values) {
if(addressJson[values[0]]) {
picker.setSlotValues(1, Object.keys(addressJson[values[0]]));
picker.setSlotValues(2, addressJson[values[0]][values[1]]);
this.province = values[0];
this.city = values[1];
this.county = values[2];
}
},
}
}
router.beforeEach((to, from, next) => {
let token = localStorage.getItem('token');
if (!token && to.path !== '/login') {
next('/login');
} else {
next();
}
});
<template>
<quill-editor
v-model="richTextContent"
ref="myQuillEditor"
:options="editorOption"
@change="onEditorChange($event)">
</quill-editor>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default{
data() {
return {}
},
methods: {
onEditorChange(e) {}
}
}
</script>
onEditorChange(e){
console.log(e)
this.richTextContent = e.html;
},
<img :src="url" v-preview="url" preview-nav-enable="false" />
需要在app.vue中加入如下代码
<lg-preview></lg-preview>
正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^)
以上是脚本宝典为你收集整理的使用vue开发移动端管理后台全部内容,希望文章能够帮你解决使用vue开发移动端管理后台所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。