如何运行项目
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>
权限配置
文件结构
公共方法
如何修改访问地址 如图
如何修改主题颜色