pc项目配置

如何运行项目

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

3.输入 npm run serve 运行项目

运行完进度地址就可以了

如何请求接口

1.首先配置你需要请求接口的地址,进入src -> api -> urls.js文件夹下

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>

     <!--    数据双向绑定 lou 下面return的值-->
    <div>{{lou}}</div>
    
    
     <!-- 点击执行方法 如果需要阻止冒泡 可以在click后面跟上 .stop 如 @click.stop-->
    <div @click="goCompile(row)">这部分是html</div>
    
    
    <!-- 
     如何使用循环 v-for ,key值一定要带上,item的意思是每一项,index 是当前项的下标,如果涉及到删除,
     和在数组最上方添加数据的情况,不用将index 值作为 key ,使用唯一的值 例如  item.id
     正式循环下 将 6 改为你要循环的数组即可
    -->
    <div v-for="(item,index) in 6 " :key="index">66666666666</div>
    
    
      <!-- 
     显示隐藏 v-if  v-show 两种方式 如果当前页面存在 来回切换显示隐藏的 或者 需要在v-for 中判断显示隐藏的情况下使用  v-show  如何只在当前页面首次进入做判断的使用 v-if 
    -->
	<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>

权限配置

文件结构

公共方法

如何修改访问地址 如图

如何修改主题颜色