点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

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

来源：懂视网责编：小采时间：2020-11-27 22:00:16

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

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

推荐度：

点击下载本文 文档为doc格式

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

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

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

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

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

<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.总结

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

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

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

推荐度：

点击下载本文 文档为doc格式

标签：有什么 VUE 开发

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐