wanglin
/
practice_VUE
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

接口对接

live_lh
lenghui 7 months ago
parent
30771975b9
commit
46829c0206
6 changed files with 146 additions and 109 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 91
      vueHomilyLink/package-lock.json
  2. 1
      vueHomilyLink/package.json
  3. 13
      vueHomilyLink/src/api/LiveApi.js
  4. 3
      vueHomilyLink/src/api/index.js
  5. 138
      vueHomilyLink/src/views/LiveView.vue
  6. 9
      vueHomilyLink/vite.config.js

91
vueHomilyLink/package-lock.json
View File

@ -8,6 +8,7 @@
"name": "vuehomilylink", "name": "vuehomilylink",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"axios": "^1.7.8",
"pinia": "^2.2.6", "pinia": "^2.2.6",
"vue": "^3.5.12", "vue": "^3.5.12",
"vue-router": "^4.4.5" "vue-router": "^4.4.5"
@ -1434,6 +1435,21 @@
"integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==", "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/axios": {
"version": "1.7.8",
"resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.8.tgz",
"integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/birpc": { "node_modules/birpc": {
"version": "0.2.19", "version": "0.2.19",
"resolved": "https://registry.npmmirror.com/birpc/-/birpc-0.2.19.tgz", "resolved": "https://registry.npmmirror.com/birpc/-/birpc-0.2.19.tgz",
@ -1514,6 +1530,17 @@
], ],
"license": "CC-BY-4.0" "license": "CC-BY-4.0"
}, },
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/convert-source-map": { "node_modules/convert-source-map": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz", "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
@ -1619,6 +1646,14 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.5.64", "version": "1.5.64",
"resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.64.tgz", "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.64.tgz",
@ -1727,6 +1762,38 @@
"url": "https://github.com/sindresorhus/execa?sponsor=1" "url": "https://github.com/sindresorhus/execa?sponsor=1"
} }
}, },
"node_modules/follow-redirects": {
"version": "1.15.9",
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/form-data": {
"version": "4.0.1",
"resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.1.tgz",
"integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/fs-extra": { "node_modules/fs-extra": {
"version": "11.2.0", "version": "11.2.0",
"resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-11.2.0.tgz", "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-11.2.0.tgz",
@ -1990,6 +2057,25 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mimic-fn": { "node_modules/mimic-fn": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-4.0.0.tgz", "resolved": "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-4.0.0.tgz",
@ -2239,6 +2325,11 @@
"node": "^10 || ^12 || >=14" "node": "^10 || ^12 || >=14"
} }
}, },
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/rfdc": { "node_modules/rfdc": {
"version": "1.4.1", "version": "1.4.1",
"resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz", "resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz",

1
vueHomilyLink/package.json
View File

@ -9,6 +9,7 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"axios": "^1.7.8",
"pinia": "^2.2.6", "pinia": "^2.2.6",
"vue": "^3.5.12", "vue": "^3.5.12",
"vue-router": "^4.4.5" "vue-router": "^4.4.5"

13
vueHomilyLink/src/api/LiveApi.js
View File

@ -2,14 +2,15 @@ import service from ".";
const liveApi = { const liveApi = {
//获取直播列表 //获取直播列表
getLiveList() { getLiveList() {
return service.get('/live');
return service.post('/live', { UserId: 90000001 });
}, },
//预约 //预约
addReservation(id,userId){
return service.post('/reservation',{id,userId});
addReservation(Id, UserId) {
return service.post('/reservation', { Id, UserId });
}, },
//取消预约 //取消预约
cancelReservation(id,userId){
return service.delete('/reservation',{id,userId});
cancelReservation(Id, UserId) {
return service.delete(`/reservation?Id=${Id}&UserId=${UserId}`);
} }
}
}
export default liveApi;

3
vueHomilyLink/src/api/index.js
View File

@ -1,7 +1,8 @@
import axios from "axios"; import axios from "axios";
const service = axios.create({ const service = axios.create({
baseURL: 'http://localhost:8080',
// baseURL: 'http://192.168.9.19:8080',
baseURL: '/api'
}); });

138
vueHomilyLink/src/views/LiveView.vue
View File

@ -13,11 +13,11 @@
<!-- 用户头像 --> <!-- 用户头像 -->
<img :src=live.user.avatar alt="节目1" class="user-avatar"> <img :src=live.user.avatar alt="节目1" class="user-avatar">
<!-- 用户昵称，与头像同行显示 --> <!-- 用户昵称，与头像同行显示 -->
<div class="card-info">{{ live.user.userName }}</div>
<div class="card-info">{{ live.user.username }}</div>
<!-- 预约按钮,如果预约过了，按钮变灰色，文字变灰色，按钮文字为“已预约” --> <!-- 预约按钮,如果预约过了，按钮变灰色，文字变灰色，按钮文字为“已预约” -->
<a v-if="live.reservation == 0" href="#" class="card-button" <a v-if="live.reservation == 0" href="#" class="card-button"
@click="booking(live.id, live.user.userId)">预约</a>
<a v-else href="#" class="card-button" style="background-color: #ccc;">已预约</a>
@click="booking(live.id, 90000001)">预约</a>
<a v-else href="#" @click="cancelBooking(live.id, 90000001)" class="card-button" style="background-color: #ccc;">已预约</a>
</div> </div>
</div> </div>
</div> </div>
@ -26,82 +26,23 @@
<script setup> <script setup>
import liveApi from '@/api/LiveApi';
import { ref } from 'vue'; import { ref } from 'vue';
/* /*
模拟后端数据 模拟后端数据
*/ */
const liveList = ref([]);
const liveList = ref({});
//获取直播列表 //获取直播列表
function getLive() { function getLive() {
liveList.value = [
{
id: 1,
cover: "src/assets/live.jpg",
user: {
userId: 1,
userName: "冷辉老师",
avatar: "src/assets/live.jpg"
},
liveName: "猎庄之顶级波段",
startTime: "2024-12-01 09:55",
reservation: 1, //0表示未预约，1表示已预约
status: 1 //0表示未开播，1表示已开播
},
{
id: 2,
cover: "src/assets/live.jpg",
user: {
userId: 2,
userName: "冷辉老师",
avatar: "src/assets/live.jpg"
},
liveName: "猎庄之顶级波段",
startTime: "2024-12-01 09:55",
reservation: 1, //0表示未预约，1表示已预约
status: 1
},
{
id: 3,
cover: "src/assets/live.jpg",
user: {
userId: 3,
userName: "冷辉老师",
avatar: "src/assets/live.jpg"
},
liveName: "猎庄之顶级波段",
startTime: "2024-11-30 12:55",
reservation: 1, //0表示未预约，1表示已预约
status: 1
},
{
id: 4,
cover: "src/assets/live.jpg",
user: {
userId: 4,
userName: "冷辉老师",
avatar: "src/assets/live.jpg"
},
liveName: "猎庄之顶级波段",
startTime: "2024-12-30 12:55",
reservation: 0, //0表示未预约，1表示已预约
status: 1
},
{
id: 5,
cover: "src/assets/live.jpg",
user: {
userId: 5,
userName: "冷辉老师",
avatar: "src/assets/live.jpg"
},
liveName: "猎庄之顶级波段",
startTime: "2024-12-30 12:55",
reservation: 0, //0表示未预约，1表示已预约
status: 1,
}
]
liveApi.getLiveList()
.then(resp => {
if(resp.code == 0){
liveList.value = resp.data.liveList;
console.log(liveList.value);
}else{
alert("获取直播列表失败，请联系管理员");
}
})
} }
getLive(); getLive();
@ -119,36 +60,29 @@ function getDateDay(startTime) {
} }
} }
// //获取用户信息
// const userInfo = ref([]);
// function getUserInfo() {
// userInfo.value = {
// userId: 1,
// userName: "冷辉老师",
// avatar: "src/assets/live.jpg",
// //预约信息
// reservationList: [1,2,3]
// }
// }
// getUserInfo();
// console.log(userInfo.value);
// /* 判断预约状态 */
// function isBooking(liveId) {
// for (let i = 0; i < userInfo.value.reservationList.length; i++) {
// if (userInfo.value.reservationList[i] == liveId) {
// return true;
// }
// }
// return false;
// }
/*点击预约按钮以后显示预约成功的提示，并将按钮变为不可点击状态，且将按钮的文字改为“已预约”，并将按钮的背景颜色改为灰色*/ /*点击预约按钮以后显示预约成功的提示，并将按钮变为不可点击状态，且将按钮的文字改为“已预约”，并将按钮的背景颜色改为灰色*/
function booking(liveId, userId) { function booking(liveId, userId) {
alert("预约成功！");
liveApi.addReservation(liveId,userId)
.then(resp => {
if (resp.code == 0) {
getLive();
alert("预约成功！");
} else {
alert("预约失败！请联系管理员");
}
})
}
function cancelBooking(liveId, userId) {
liveApi.cancelReservation(liveId, userId)
.then(resp => {
if (resp.code == 0) {
alert("取消预约成功！");
} else {
alert("取消预约失败！请联系管理员");
}
})
getLive();
} }
</script> </script>
@ -226,7 +160,7 @@ function booking(liveId, userId) {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 207px;
width: 209px;
height: 120px; height: 120px;
/*最后一个参数是半透明度，可以透过调整0-1的数值，调整到满意的透明度*/ /*最后一个参数是半透明度，可以透过调整0-1的数值，调整到满意的透明度*/
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);

9
vueHomilyLink/vite.config.js
View File

@ -15,4 +15,13 @@ export default defineConfig({
'@': fileURLToPath(new URL('./src', import.meta.url)) '@': fileURLToPath(new URL('./src', import.meta.url))
}, },
}, },
server: {
proxy: {
'/api': {
target: 'http://192.168.9.19:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},
}) })
Write Preview
Loading…
Cancel
Save