您的位置：首页 > Web前端 > Vue.js

vue项目--iview企业项目后台管理----问题及解决

2018-11-20 10:29 519 查看

1. 基于vue cli3.0打包：npm run serve运行项目。 vue cli3.0安装过程中中途取消，再次安装时，
需要删除C:\Users\Administrator\AppData\Roaming下的npm-cache文件删除，再重新安装。
2. 安装iview:
   下载：npm install --save iview
   引入main.js：
       import iView from 'iview'
       import 'iview/dist/styles/iview.css'
       Vue.use(iView)
3. css预处理器如stylus和less/sass在修改第三方插件样式时：
   方法一： .box >>> .第三方样式插件。
   方法二： .box /deep/ .第三方样式插件。如果是less只能用这个方法修改。.box{/deep/.cc{#要修改的第三方插件样式}}
4. 动态绑定class:
       <p class="p2" :class="{action_color:actionIndex==index}" :style="{fontSize:size_f}">{{item.p2}}</p>
5. 对于vue项目中的图片的加载：
   5.1 图片放在static文件夹下。
   5.2 图片放在非static文件夹下时，require("../1.png")需要用require()去加载图片。
6. iview中的导航菜单跳转路由：在Menu标签绑定@on-select="hanle" hanle(e){console.log(e+"是MenuItem/Submenu的name值")} ,accordion始终保证了只有一个菜单是展开的。
       <Menu mode="horizontal" accordion :theme="theme1" active-name="1" @on-select="hanle">
           <MenuItem name="1">
<Icon type="ios-paper" />
   内容管理
</MenuItem>
<Submenu name="2">
<template slot="title">
<Icon type="ios-stats" />
统计分析
</template>
</Submenu >
7.解决跨域问题：
       方法1:在vue.config.js里面设置跨域代理请求：
           devServer:{ //设置跨域，即将本文件内任何没有匹配到的静态文件，都指向跨域地址http://localhost:4000
              proxy:'http://localhost:4000'
           }
           在发送axios请求里执行：
           axios.post("/login",{uname:"Ace",upwd:"1234"}).then(data=>{})
       方法二：
           在发送axios请求里执行：
           axios.post("http://localhost:3000/login",{uname:"Ace",upwd:"1234"}).then(data=>{})
           在后台（如node的app.js）设置跨域：
           app.all("*",(req,res,next)=>{ //*代表所有请求。
              req.header("Access-Contral-Allow-Origin","*");
              req.header("Access-Contral-Allow-Headers","X-Requested-Width,Content-Type");
              req.header("Access-Contral-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
              next();
           })
8. img标签src直接通过接口获取验证码图片：
       <img :src="imgSrc" @click="changeIdentifyingCode" />
           imgSrc:"/apsbmp/servlet/captchaCode"

在vue.config. devServer:{ //设置跨域,都指向跨域地址http://202.105.247.89:30337
  proxy:'http://202.105.247.89:30337'
  }
           changeIdentifyingCode(){ //点击图片切换验证码
           this.imgSrc="/apsbmp/servlet/captchaCode?rid="+ Math.random();
       }
9. 导航守卫：即没有登录的情况下，不允许跳转到admin页面
   在router/index.js下：
       const IS_LOGIN=false //是否登录的判断，该判断是可以通过cookie中是否保存有登录信息决定
       router.beforeEach((to, from, next) => { //导航守卫，即没有登录的情况下，不允许跳转到admin页面
           if(to.name !=="login"){    //如果即将跳转的页面不是登录页面
                if(IS_LOGIN) {
                     next()      //如果已即登录，就直接跳转
                }else{
                     next({name:'login'})    //如果没有登录，就跳转到登录页面
                }
            }else{   //如果即将跳转的页面是登录页面
                if(IS_LOGIN) {
                     next({name:'admin'})      //如果已即登录，就直接跳转首页,{name:'home'}也可是'/home'
                }else{
                    next()    //如果没有登录，就直接跳转
                }
           }
       })

10. 项目打包：npm run build
   在 vue.config.js中
   const BASE_URL=process.env.NODE_ENV==='procution'?'/iview-admin':'./' ; #生产环境下要"./"
   并在router/index.js下：重定向"/"路由指向。
   {
       path:"/",
       redirect:"/login"
   },
   {
path: '/login',
name: 'login',
component:() => import('@/views/Login.vue')
},
11. 安装echarts: npm install echarts --save,文档参考：http://echarts.baidu.com/echarts2/doc/example.html

12. CryptoJS加密插件：
           下载：
               npm install crypto-js --save;
           引入：
               var CryptoJS = require("crypto-js");
               或者：import CryptoJS from "crypto-js"
           export var   encryption=(word)=>{ //加密函数,Word是明文
                   var key = CryptoJS.enc.Utf8.parse("apsbmphebaoshare");
               var srcs = CryptoJS.enc.Utf8.parse(word);
               var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
               return encrypted.toString();
           }
           export var decryptedData=(word)=>{ //解密，word是加密后的
               var key = CryptoJS.enc.Utf8.parse("apsbmphebaoshare");
           var decrypt = CryptoJS.AES.decrypt(word, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
           return CryptoJS.enc.Utf8.stringify(decrypt).toString();
           }



13. axios请求添加超时时间和修改请求头。
   axios({
               url:url,
               method:"post",
               timeout: 3000 ,//设置超时时间30s
               headers:{
                       'platform':'pc'
               }
   }).then(data=>{})
   或者：
   axios.post(url,
                   {uname:a,
                   upwd:b
                   },{
                       headers:{
                               'platform':'pc'
                       },
                       timeout:3000,
                       }
   }).then(data=>{})

14: vue单页应用如何在页面刷新时保留store状态数据：
       在app.vue里面：
        created(){
           //在页面加载时读取localStorage里的状态信息
   localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
   //在页面刷新时将vuex里的信息保存到localStorage里
   window.addEventListener("beforeunload",()=>{
   localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
   })
       }

15. vue中的props传值，在子组件的methods中通过this获取值，有时候能获取到，有时候不能获取到，是因为this指向问题：
       方法1：https://www.cnblogs.com/pssp/p/5216085.html。
       方法2：存在cookie中，用的时候，在cookie获取。

16. 判断一个对象是否为空对象：JSON.stringify(hbUserStatus) !='{}'

17. 路由传参：
   1.params:传参，不能穿对象。
   路由配置：
       {
           path:"business_details/:name",
           component: () => import( '@/components/admin_base/right_main/business_management/business_details.vue'),
       }
       传参：this.$router.push(`/admin/business_details/${params.row}`)
       接收参数：this.$route.params.paramsInfo
   2.query:传参，可以穿对象。
   路由配置：
       {
           path:"business_details",
           component: () => import( '@/components/admin_base/right_main/business_management/business_details.vue'),
       }
       传参：this.$router.push({
                                               path:"/admin/business_details",
                                               query:{
                                                   paramsInfo:params.row
                                               }
                                           })
       接收参数：this.$route.query.paramsInfo
       {
       "hbType":"1",
       "hbParentId":"0",
       "children":[
           {"hbType":"2",
           "hbParentId":"1",
           "children":[
           {"hbType":"3",
           "hbParentId":"3",
           "children":"null",
           "hbRemark":"",
           "label":"片区AAA",
           "value":"5"}
           ],
           "hbRemark":"",
           "label":"片区AA",
           "value":"3"}
           ],
           "hbRemark":"",
           "label":"片区A",
           "value":"1"
           }

18.登录框密码框input框禁止复制、粘贴、剪切和右键功能，最大输入长度，禁止输入空格
<Input v-model="uname" size="large" placeholder="请输入用户名" :maxlength="11" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"
onpaste="return false" oncontextmenu="return false" oncopy="return false" oncut="return false" />

19.iview中enter按下事件：<Input v-model="uname" size="large" placeholder="请输入用户名" :maxlength="11" @keyup.enter.native="keyUpHandle"/>
keyUpHandle(e){ //enter键盘按下事件
       var keyCode = window.event? e.keyCode:e.which;
if(keyCode == 13){
this.loginHandle();
}
   },
20. 解决从后台获取的数据有时候无法显示在页面的bugl; 通过v-if="dataList.length<=0"，v-else解决。
<div v-if="dataList.length<=0">加载中.....</div>
<div class="box fl" v-for="item in dataList" v-else></div>

21. 获取url后面的参数值
       getUrlKey(name) { //获取url后面的参数，name是参数名。
       return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null;
       },

22. 注意props传递数组和对象时的写法，不然容易报错。
       props:{
           parent:{
               type:Array,
               default:()=>[]
           },
           data:{
               type:Object,
               default:()=>{()}
           }
       },
22. 避免数据data是动态axios获取，在使用/传递时需要判断   v-if="data.length>0"，否则可能传递空值
   <new-area :parent="dataList" @addAreaSettingPage="addAreaSettingPage" :data="data" v-if="data.length>0"></new-area>

23 .禁止复制，剪切，粘贴，右键，空格：
<Input v-model="upwd" size="large" :maxlength="15"
onpaste="return false" oncontextmenu="return false" oncopy="return false" oncut="return false"
onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"/>

24. 日期选择器DatePicker禁止输入：:editable="false"
<DatePicker type="datetime" :clearable="false" :disabled="isDisabled" format="yyyy-MM-dd HH:mm"
   placeholder="请选择开始时间" style="width: 350px" v-model="hbStartTime" :editable="false">
</DatePicker>



25.将json对象转化为json字符串，再判断该字符串是否为"{}"
var data = {};
data.data.beans.length == 0
var b = (JSON.stringify(data) == "{}");
   if(data.data.beans.length == 0){
       this.$Message.info("获取beans信息为空");
           return;
   }
   if(JSON.stringify(data.data.beans.object) == "{}"){
       this.$Message.info("获取object信息为空");
       return;
}
26. 修改iview表的操作为图片：
render: (h, params) => {
return h('div', [
h('img', {
attrs:{
               src:require("../../../../assets/img/admin/ed.png"),
               alt:"编辑",
               title:"编辑",
           },
           style: {
               width:"30px",
               height:"30px",
               padding:"5px",
           },
on: {
click: () => {

}
}
}),
]);
}

27. 下拉搜索输入框搜索按钮的颜色和输入框获得焦点时的边框颜色：
.search_color_hover

28. 解决modal弹框footer边线的问题：
.footerBorder

29. iview表格组件Table隔行变色：
:stripeVal="true"

30. 弹窗的按钮颜色以及禁止关闭，以及没有弹框头。
       <Modal
           v-model="delLists"
           @on-ok="okDel"
           :mask-closable="false"
            :closable="false"
            class="footerBorder"
            width="300px"
           @on-cancel="cancelDel">
           <p style="display: flex;align-items: center;margin-top: 10px;">
               <Icon type="ios-information-circle" size="18" style="margin-right: 5px;"></Icon>
               你确定要删除该维护人员吗？
           </p>
           <div slot="footer" >
   <Button type="primary" size="default" class="gradColor" @click="okDel">确定</Button>
   <Button size="default" @click="cancelDel">取消</Button>
   </div>
       </Modal>



31. 图片上传：
   <Upload
       class="abs lrtb-center"
       type="drag"
       style="width: 100%;height: 100%;"
       action="/apsbmp/ueditor/fileUpload.do"
       :on-success="successUploadHandle1"
       name="upfile"
       :max-size="2048" 最大2M
       :on-exceeded-size="handleMaxSize"
       :on-error="errorUploadHandle"
       :format="['jpg','png']"
       :on-format-error="handleFormatError"
       :show-upload-list="false"
       >
       <div style="padding: 0;width: 109px;height: 145px;background: #F3F3F3;" >
           <div v-show="!hbPopupImg" style="padding-top: 20px;">
               <Icon type="ios-add-circle" size="30" style="color: #CCCCCC;margin-bottom: 10px;"/>
               <div class="tCenter">
                   <p>上传弹框图片</p>
                   <p>支持jpg、png</p>
                   <p>长宽比为1.5:2</p>
               </div>
           </div>
           <img :src="hbPopupImg" alt="弹窗图片" class="wh" v-show="hbPopupImg" style="width: 109px;height: 145px;"/>
       </div>
   </Upload>

32.浅谈css3新单位vw、vh、vmin、vmax的使用详解及撑开整个页面:参考https://www.jb51.net/css/589835.html

33. store刷新页面时，数据丢失，通过本地存储：
   在App.vue中设置：
       created(){
           //在页面加载时读取localStorage里的状态信息
   localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,
                           JSON.parse(localStorage.getItem("userMsg"))));
   //在页面刷新时将vuex里的信息保存到localStorage里
   window.addEventListener("beforeunload",()=>{
   localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
   })
       }

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航