使用vue开发移动端管理后台的注意事项


Posted in Javascript onMarch 07, 2019

独立完成一个移动端项目(不是很明白为何会有这样的商品管理后台),还是有些经验不足,包括对产品的全局思考,对插件的选择等,都有考虑不周的缺点,导致自己中途想换图形界面插件,浪费了点时间,这里记录下,总结下经验,理一下思路。

1.对于项目的一些心得与体会

首先的一点,就是,对于图形界面框架的选型,这个很重要,对于一项目来说,开始动手前就要对项目的设计图有个完整的了解,以便于自己选择插件或者框架;

然后就是,对于交互性操作,比如:上传图片,预览图片啥的,应该选择是否是用图形界面框架来实现还是另选专门的插件来实现

在完成项目中,我又新学到了上传图片插件vue-core-image-upload,移动端富文本编辑器vue-quill-editor

还有个地址的三级联动mt-picker,(是基于mint-ui图形界面框架的)

2.rem与px的转换

从同事传授中获到的经验,对于rem与px的转换,就是在index.html模板文件中加入下面的脚本,然后就是1rem=100px(这个可能不准确,有更好的方法,各位大佬请在评论中留下,感激不尽)

<script type="text/javascript">
 document.getElementsByTagName("html")[0].style.fontSize = 100 / 750 * window.screen.width + "px";
</script>

3.对于上传图片插件vue-core-image-upload中遇到的坑

对于跨域问题,有好多方法可以解决,这里讲的挺多的前端跨域解决方法

还有就是后台设置响应头access-control-allow-origin可以指定特定的域名,我这里的后台设置的就是access-control-allow-origin:*,就是因为这样,用这个上传图片的插件就会报错

使用vue开发移动端管理后台的注意事项

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开发移动端管理后台的注意事项

就是在使用这个插件的代码中加上这个字段就可以了

<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不能设置为*

4.基于mint-ui的三级地址选择效果图

使用vue开发移动端管理后台的注意事项

template文件

<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>

js文件

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];
      }
   },
  }
}

5.关于对是否登录的处理

开始也有做过登录的管理后台,不过,在进行登录时,总会一闪过登录的界面,这种感觉很不好,在这里记录下相比之前更好点的方法

在main.js文件中添加对router的钩子函数

router.beforeEach((to, from, next) => {
 let token = localStorage.getItem('token');
 if (!token && to.path !== '/login') {
  next('/login');
 } else {
  next();
 }
});

通过判断缓存里是否有token来进行路由的跳转

相对于之前的那种方法,这里对路由的跳转进行的拦截,在路由进行跳转前,进行判断

6.上拉加载mescroll.js插件

这里对于分页加载第二页使用的上拉加载的插件还是用了原来的插件,还是感觉挺好用的

这里有讲述上拉加载,下拉刷新,滚动无限加载

7.移动端富文本插件Vue-Quill-Editor

效果图

使用vue开发移动端管理后台的注意事项

这里有相关案例代码vue-quill-editor

<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;
},

8.移动端图片预览插件

vue-picture-preview

<img :src="url" v-preview="url" preview-nav-enable="false" />

需要在app.vue中加入如下代码

<lg-preview></lg-preview>

效果图

使用vue开发移动端管理后台的注意事项

使用vue开发移动端管理后台的注意事项

代码挺少的

9.总结

  • 在以后的项目中,首先的一件事就是要对产品要有完成的了解,然后进行技术、框架的选型
  • 对于插件,自己多尝试才能知道是否符合你的要求

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 全角转半角部分
Oct 28 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 Javascript
vue 封装面包屑组件教程
Nov 16 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 #Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 #Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 #Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 #Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 #Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 #Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 #Javascript
You might like
php tp验证表单与自动填充函数代码
2012/02/22 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
微博短链接算法php版本实现代码
2012/09/15 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
犀利的js 函数集合
2009/06/11 Javascript
Javascript学习笔记2 函数
2010/01/11 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
Python 复平面绘图实例
2019/11/21 Python
python高级特性简介
2020/08/13 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
简单英文演讲稿
2014/01/01 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
全民创业工作总结
2015/08/13 职场文书
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫