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

时间：2021-08-27 来源：互联网编辑：宝哥软件园浏览：次

独立完成一个移动项目(不太明白为什么会有这样的商品管理背景)，但是经验还是有些欠缺，包括产品的整体思路，插件的选择等。所有这些都有考虑不周的缺点，这导致我想要更改图形界面插件，浪费了一些时间。在这里，记录、总结经验、整理思路。

1.关于该项目的一些经验和体会

首先，这对于图形界面框架的选择非常重要。对于一个项目来说，在开始工作之前，需要对项目的设计图纸有一个完整的了解，这样你就可以自己选择插件或者框架；

那么对于交互操作，比如上传图片、预览图片，就要选择是使用图形界面框架还是选择专门的插件来实现

在项目的完成中，我学习了上传图片插件vue-core-image-upload和手机富文本编辑器Vue-quiet-editor

也有三级链接mt-picker地址(基于mint-ui图形界面框架)

2.2.rem和px之间的转换

从同事的教学中获得的经验，对于rem和px之间的转换，就是把下面的脚本添加到index.html模板文件中，然后1rem=100px(这个可能不准确，有更好的方法，请在评论中留下，非常感谢)

脚本类型=' text/JavaScript ' document . getelementsbytagname(' html ')[0]. style . font size=100/750 * window . screen . width ' px；/script3。对于上传图片插件vue-core-image-upload中遇到的坑，

解决跨域问题的方法很多，这里有相当多的前端跨域解决方案

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

可通过“https://.”访问XMLHttpRequest来自源的“http://localhost:8080”已被CORS策略：阻止。当请求的凭据模式为“包含”时，响应中“访问控制-所有流-源”标头的值不得是通配符“*”。由XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制。

这个问题我绕了很久，也跟后台谈过，就是我在一个圈子里，允许跨域，那为什么还是报错？非常讨厌

然后，我终于找到了解决的办法(我用过其他上传插件，感觉别扭，代码或者思路混乱)

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

只需将该字段添加到使用该插件的代码中

vue-core-image-upload class=' BTN BTN-primary ' : crop=' false '输入文件=' file ' @ image uploaded=' loadMainImg ' : max-file-size=' 5242880 ' : URL=' server URL ' : certificates=' false '/允许使用cookie/vue-core-image-upload。对于具有身份凭证的请求，服务器不应将“访问控制-允许-来源”的值设置为“”。这是因为请求的头部携带了Cookie信息。如果“访问控制-允许-来源”的值为“”，请求将失败。

也就是说，当访问控制允许凭证设置为真时，

访问控制允许来源不能设置为*

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

模板文件

div class=' modal ' @ click=' handleCloseAddress ' div class=' cate container ' @ click . stop div class=' operateBtn ' div class=' cancelBtn ' @ click=' handleCloseAddress '取消/div class='确认BTN ' @ click=' handlecoloseaaddress ' OK/div/div MT-picker class=' address picker ' : slots=' my address slots ' @ change=' on address schange '/MT-picker/div/div js文件

Json文件地址地址文件

//定义一个包含中国各省市信息的json文件导入地址JSON从' @/assets/common/address '导出默认{ data(){ return { my address slots 3360 [{ flex : 1，value : object . keys(address JSON)，className: 'slot1 '，textalign 3360' center'}，{ divider : true，content: '-'，Classname:' slot2'}，{ flex :setslotvalues(。picker.setSlotValues(2，address JSON[values[0]][values[1]])；this .省份=值[0]；this . city=values[1]；this . country=values[2]；} }, }}5.关于是否登录

最开始也有一个已经登录的管理后台。但是登录的时候总会有登录界面的一闪而过，很不好。在这里，记录一个比以前更好的方法

在main.js文件中为路由器添加一个钩子函数

router.beforeEach((to，from，next)={ let token=local storage . getitem(' token ')；if(！token to.path！=='/log in '){ next('/log in ')；} else { next()；}});通过判断缓存中是否有令牌来跳转路由

与以前的方法相比，这里的路由跳转拦截是在路由跳转之前判断的

6.拉起并加载mescroll.js插件

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

这里是关于上拉加载、下拉刷新和滚动无限加载

7.手机富文本插件Vue-Quill-编辑器

翻译

有相关的案例代码vue-quiet-editor

模板quill-editor v-model=' richTextContent ' ref=' myQuillEditor ' : options=' editor option ' @ change=' oneditor change($ event)'/quill-editor/template script从' vue-quill-editor '导入{ quillEditor }；导入' quill/dist/quill . core . CSS '；导入' quill/dist/quill . snow . CSS '；导入“quill/dist/quill . bubble . CSS”；export default { data(){ return } }，methods : { oneditorchange(e){ } }/script响应事件

onEditorChange(e){ console . log(e)this . richtextcontent=e.html；},8.手机图片预览插件

vue-图片-预览

img : src=' http : URL ' v-preview=' URL ' preview-nav-enable=' false '/应将以下代码添加到app.vue中

LG-预览/LG-预览渲染