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

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

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:*,就是因为这样,用这个上传图片的插件就会报错

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

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

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

效果图

代码挺少的

9.总结

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

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

(0)

相关推荐

  • jQuery实现适用于移动端的跑马灯抽奖特效示例

    本文实例讲述了jQuery实现适用于移动端的跑马灯抽奖特效.分享给大家供大家参考,具体如下: 图片全部隐私处理 跑马灯抽奖特效难点一:奖品位置排放,如下图 <div class="gift_div"> <div class="gift gift1">奖品1</div> <div class="gift gift2">奖品2</div> <div class="gift g

  • vue插件mescroll.js实现移动端上拉加载和下拉刷新

    做一个简单的移动端展示项目,后台分页后前端加载,实现上拉加载下一页,找了下,还是用这个mescroll.js插件好一点 1.npm安装 npm install --save mescroll.js //不要使用cnpm安装 导入(在哪个页面使用,则在哪个页面导入(这里的话,我使用全局导入会出现问题,若有错,还请大家指出,暂时想到的就是局部引入)): import MescrollVue from 'mescroll.js/mescroll.vue' 注册组件: components: { Mes

  • 详解vue移动端项目代码拆分记录

    撸一套vue多端共用,非常适合需要快速且全面上线的项目.但是多端共用一套vue代码,由于平台间的互相限制,每端在某些业务例如支付分享等是完全独立的代码,每个平台的支付方式也会有所差异,造成在这些业务的实现过程中会有太冗余的"if else"判断.所以为了提高代码的复用性.扩展性,可以将代码拆分,以-小程序和App两端举例,一份部署到小程序,一份部署到App(Android&Ios). 首先代码拆分应该保证本地开发的时候只有一套代码,提取所有公共页面,并且分别提取小程序和app的

  • 如何封装了一个vue移动端下拉加载下一页数据的组件

    前言 简单封装了一个vue下拉加载组件,分享一下,已放到github和前端资源库,欢迎下载! 组件代码 <template> <div class="my-scroll" :class="[scrollState?'prohibit':'allow']" ref="myScroll" @scroll.passive="onScroll($event)" @touchmove="onScroll($e

  • jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法

    本文实例讲述了jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法.分享给大家供大家参考,具体如下: 项目描述:九宫格的跑马灯抽奖特效,抽中奖品1-9的概率分别是2%,2%,4%,1%,12%,1%,8%,70%,概率总计100%,并且每天抽奖次数最多为3次. html部分的代码和css部分的代码和上一节<jQuery移动端跑马灯抽奖特效>一样,没有修改,js部分有修改,增加了概率. 原理很简单,同样是取随机数,判断这个随机数的大小在100的0-2,2-4,4-8,8-9,9-21,

  • 原生js实现移动端Touch轮播图的方法步骤

    Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下. 1. html 结构 结构上,还是用ul.li来存放轮播图片,ol.li来存放轮播小圆点: 2. 样式初始化 html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉. /* 清除标签默认边距 */ body,ul,li,ol,img { margin: 0; padding: 0; } /* 清除 ul 等标签前面的"小圆点"

  • 移动端使用CSS或JS判断横屏和竖屏的讲解

    在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢. 首先在head中加入如下代码: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 针对上述viewport标签有如下说明 1).content中的width

  • 移动端(微信等使用vConsole调试console的方法

    前言 因为最近一直在弄移动端项目,由于在移动端无法打开控制台,所以想办法打印调试console的数据一直苦恼.之前用的是chrome的inspect调试,但是只能使用移动版的chrome查看数据,兼容不好,所以最近使用了vConsole 进行调试 使用 废话不多说,说说怎么使用的吧. 首先去下载相关的代码,由于只需要在页面引入一个js文件,直接去下载就可以,地址: 请戳我 或者使用 npm 安装: npm install vconsole 使用webpack,然后js代码中 import VCo

  • 利用Vconsole和Fillder进行移动端抓包调试方法

    在开发中,有时候我们需要在手机上进行测试,可是如果遇到bug,我们怎么进行抓包调试呢?这里介绍两种方式: Vconsole Fillder 利用Vconsole进行调试 一个轻量.可拓展.针对手机网页的前端开发者调试面板 Vconsole特性: 查看 console 日志 查看网络请求 手动执行 JS 命令行 自定义插件 入门 ①首先需要下载Vconsole,地址https://www.npmjs.com/package/vconsole ② npm install vconsole ③ Imp

  • js实现移动端轮播图

    本文实例为大家分享了js实现移动端轮播图的具体代码,供大家参考,具体内容如下 这是结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0&

随机推荐