使用vue开发移动端管理后台

simpleapples 发布于2019-08-23 15:42 / 2514人阅读

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

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

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

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

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

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

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

2.rem与px的转换

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

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.

这个问题我蒙圈了好久，和后台也讲了，就是处于蒙圈状态，已经允许跨域了，怎么还报错呢？很烦

然后，终于找了个方法解决（有用过其他的上传插件，感觉不好用，代码或者思路好乱）

其实这个插件中的文档也有提示，只是刚用，还不是很会

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

对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为“”。这是因为请求的首部中携带了 Cookie 信息，如果 Access-Control-Allow-Origin 的值为“”，请求将会失败。
也就是说Access-Control-Allow-Credentials设置为true的情况下
Access-Control-Allow-Origin不能设置为*

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

效果图

template文件

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

响应事件

onEditorChange(e){
    console.log(e)
    this.richTextContent = e.html;
},

8.移动端图片预览插件

vue-picture-preview

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

效果图

代码挺少的

9.总结

在以后的项目中，首先的一件事就是要对产品要有完成的了解，然后进行技术、框架的选型

对于插件，自己多尝试才能知道是否符合你的要求

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

往期好文推荐：

判断ios和Android及PC端

webpack打包（有面试题）

纯css实现瀑布流（multi-column多列及flex布局）

实现单行及多行文字超出后加省略号

GPU云服务器云服务器移动端开发 web移动端开发移动端网站开发 java移动端开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102472.html

Vue-book 2.0 一个移动端简单的全栈 web APP

摘要：本项目是一个简单的全栈项目，前端新手可以拿来练练手。项目实现了一些简单的功能，后台可以对图书进行录入录出扫码或手动，前台显示录入的图书，并且前台注册登录后可以将书的订单发给服务器，并存到服务器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【觉得不错就来个 star 吧 ^_^】说明（菜鸟请进，大神绕道 ~）前端...

wh469012917 2019-06-27 16:37 评论0 收藏0
Vue-book 2.0 一个移动端简单的全栈 web APP

摘要：本项目是一个简单的全栈项目，前端新手可以拿来练练手。项目实现了一些简单的功能，后台可以对图书进行录入录出扫码或手动，前台显示录入的图书，并且前台注册登录后可以将书的订单发给服务器，并存到服务器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【觉得不错就来个 star 吧 ^_^】说明（菜鸟请进，大神绕道 ~）前端...

NotFound 2019-08-20 16:53 评论0 收藏0
后端开发者从零做一个移动应用（后端篇）

摘要：后端开发的疑惑后端开发最常面对的一个问题性能高并发等等。而到了时代，在方面有了前后端分离概念移动后端更是无力渲染天然前后端分离。先来上一张前端页面的效果图（Vue + Vux + Vuex + Vue-Router）。showImg(https://segmentfault.com/img/remote/1460000010207850); 第一次做gif 没什么经验，太大了。加载...

codergarden 2019-06-27 17:04 评论0 收藏0
前端vue系列-起始篇 vue的基本认知

摘要：管理后台，日常就是提交各种表单了，这部分现有的方案，比如表单提交或者收集信息提交。，可以用于前端开发的工程构建。带了人的前端团队，你的精力开始在配合公司其他部门做用户数据增长了。开始考虑使用的。 hi,大家伙，我是佛系大大，很高兴与你们一起沟通，学习，进步。很久不更新博客了，现在回来再写博客，尽然是有些怀念的感觉，幸福的感觉。因为写博客，内心会很宁静，沉浸在自己的...

I_Am 2019-04-23 11:44 评论0 收藏0
一个基于vue的nuxt框架开源图片管理网站，前后端分离

摘要：在月和月的时候停止开发，然后在三月份的时候上线了第一个版本。简述一个类似下称站的网站，主要实现有用户管理，图片管理，评论回复等功能。前端项目实现基于的框架，设计风格，过渡平滑，详细代码碎片整合和轮子制作会后续发布。首先贴上地址展示地址：http://www.secdra.com/web前端代码地址：https://github.com/JunJieFu/s...mobile前端代码...

姘搁『 2019-08-23 15:40 评论0 收藏0