pc项目配置

你的名字 2021-07-25 21:22 359阅读 0赞

## 如何运行项目 ##

1.首先电脑上面需要有node  
2. cmd 进入项目文件夹 输入 npm install 安装插件过程有点慢,全部安装完成后 cmd路径会回到 文件夹地址下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center]

3.输入 npm run serve 运行项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 1]  
运行完进度地址就可以了

## 如何请求接口 ##

1.首先配置你需要请求接口的地址,进入src -> api -> urls.js文件夹下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 2]  
2. put 请求 get 请求 post 请求 delete 请求调用方法

this.$getData 这就是get请求的调用方式 ,如果你要用的时post请求就用 this.$postData 其他格式方法以此类推.
    	this.$urls.getVipList 这个就是调用请求接口的地址

**get请求例子**

正常带参数请求例子

//1 正常带参数请求例子
     this.$getData(this.$urls.getVipDetails, { 
              adviserId: row.adviserId,//顾问id
              adviserUserId: row.adviserUserId//会员id
            }).then((res) => { 
              console.log(res, '会员详情')
              if (res.data.code == 1000) { 
               //成功之后执行的代码逻辑
    
              }else{ 
              //code 不是1000 执行的代码逻辑
              }
            }).catch((err) => { 
              //捕捉接口报错后的代码逻辑
            })

带参是在请求路径里面的如 login/\{id\}

this.$getData(this.$urls.getVipDetails+ id , { }).then((res) => { 
              console.log(res, '会员详情')
              if (res.data.code == 1000) { 
               //成功之后执行的代码逻辑
    
              }else{ 
              //code 不是1000 执行的代码逻辑
              }
            }).catch((err) => { 
              //捕捉接口报错后的代码逻辑
            })

post请求 put请求 等其他请求如下

//只需要改变请求方法即可
     this.$postData(this.$urls.getVipDetails, { 
              adviserId: row.adviserId,//顾问id
              adviserUserId: row.adviserUserId//会员id
            }).then((res) => { 
              console.log(res, '会员详情')
              if (res.data.code == 1000) { 
               //成功之后执行的代码逻辑
    
              }else{ 
              //code 不是1000 执行的代码逻辑
              }
            }).catch((err) => { 
              //捕捉接口报错后的代码逻辑
            })

## 方法调用和赋值 ##

简单看下代码结构

<template>
      <div>
        <div>这部分是html</div>
    
         
        <div>{ { lou}}</div>
        
        
         
        <div @click="goCompile(row)">这部分是html</div>
        
        
        
        <div v-for="(item,index) in 6 " :key="index">66666666666</div>
        
        
          
    	<div v-show="isShouw">显示隐藏</div>
    	
        
      </div>
    
    </template>
    
    <script>
    //这款是引入此页面之外的东西
      import Vue from 'vue'
      import { 
        getAccessToken,
        removeAccessToken,
        setAccessToken,
      } from '@/utils/accessToken'
    
      export default { 
        data() { 
        //这里面是可以在页面中绑定的数据
          return { 
    		lou:'娄渊洋',
        	isShouw:false,//是否展示 
            ruleForm: { 
              phone: '', //手机号
              name: '', //姓名
              sex: '', //性别
              remark: '', //备注
              label: '', //标签
              industry: '', //行业
              birthday: '', //出生日期
              occupation: '', //职业
            },
          
          }
        },
        //这块是进入界面就会执行的
        created() { 
          this.fetchData() //获取数据
          this.getOccupationList(); //获取行业列表
        },
        //这块是方法
        methods: { 
          //跳转到编辑界面 请求个人数据
          goCompile(row) { 
            this.adviserId = row.adviserId; //赋值顾问id
            this.adviserUserId = row.adviserUserId; //赋值用户id
            this.$getData(this.$urls.getVipDetails, { 
              adviserId: row.adviserId,
              adviserUserId: row.adviserUserId
            }).then((res) => { 
              console.log(res, '会员详情')
              if (res.data.code == 1000) { 
                this.ruleForm.phone = res.data.result.visitorMobile; //手机号
                this.ruleForm.name = res.data.result.visitorName; //姓名
                this.ruleForm.sex = res.data.result.visitorGender; //性别
                this.ruleForm.remark = res.data.result.remark; //备注
                this.ruleForm.label = res.data.result.label; //标签
                this.ruleForm.industry = res.data.result.visitorIndustry; //行业
                this.ruleForm.birthday = res.data.result.visitorBirth; //生日
                this.ruleForm.occupation = res.data.result.visitorOccupation; //职业
                this.imageUrl = res.data.result.userAvatar; //头像
                this.showType = 2;
              }
            }).catch((err) => { 
             
            })
          },
         
        },
      }
    </script>
    <style lang="scss">
      
      
    </style>

## 权限配置 ##

**文件结构**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 3]  
**公共方法**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 4]

**如何修改访问地址 如图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 5]  
**如何修改主题颜色**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 6]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/a5bf3b38dbc94071b3be5ba57f653fc4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/6483dc3c4ff744a79543b7148e7c9006.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/a3446f4e5a1740cab12a6c7f63bbc698.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210725/4748764da1f343ee92dbbbfdfd40b7b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210725/e278dabbe27647f0ab96b83882c0fb14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20210725/1be24576c2e6437b94be4196702c1a4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20210725/da5fe3c1515a429e820153aace85228c.png