山东大学暑期实训（7）
2021/7/18 23:10:45
本文主要是介绍山东大学暑期实训（7），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
学习总汇
第三周实训，主要完成成果维护五个功能，分别是专著维护、专利维护、论文维护、奖励维护和项目维护，五个功能都比较类似，因此先完成其中一个后面应该会比较迅速。
先实现了专著维护的功能
<template>
<view id="container">
<view style="height:30rpx"></view>
<u-tabs id="tabs" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
<view v-if="is_delete" class="info-card" v-for="(books,index) in delete_info" :key="books.bookId">
<view class="class-id" style="font-size: 25rpx;font-weight:100rpx ;" >专著号：{{books.bookId}}</view>
<view id="info">
<view class="class-name" style="font-size: 40rpx;font-weight: bold;">{{books.monographName}}</view>
<view class="paper-item class-exam">出版日期：{{books.publishDate}}</view>
<view class="paper-item class-exam">类型：{{books.bookNum}}</view>
<view class="paper-item class-credit-time" >作者位次：{{books.autPosition}}</view>
<view class="btn">
<button type="primary" id="select-button" @click="del_book(index)" style="background-color:#930D14">删除</button>
</view>
</view>
</view>
<view v-if="!is_delete" class="info-card" v-for="(books,index) in select_info" :key="books.bookId">
<view class="class-id" style="font-size: 25rpx;font-weight:100rpx ;" >专著号：{{books.bookId}}</view>
<view id="info">
<view class="class-name" style="font-size: 40rpx;font-weight: bold;">{{books.monographName}}</view>
<view class="paper-item class-exam">出版日期：{{books.publishDate}}</view>
<view class="paper-item class-exam">类型：{{books.bookNum}}</view>
<view class="paper-item class-credit-time" >作者位次：{{books.autPosition}}</view>
<view class="btn">
<button type="primary" class="select-button" @click="add_book(index)" style="background-color:#18B566">添加</button>
</view>
</view>
</view>
<u-divider margin-top='20'>到底了</u-divider>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
name: '选中专著'
}, {
name: '专著选择',
}],
current: 0,
delete_info:[],
select_info:[],
is_delete:true,
delete_book_list:[],
add_book_list:[],
person:{
tea_id:""
}
}
},
methods: {
init(){
this.person.tea_id=parseInt(uni.getStorageSync('id'));
},
formatDate(d) {
const date = new Date(d);
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
console.log("正在格式化数据"+`${year}-${month}-${day}`)
return `${year}-${month}-${day}`;
},
del_book(index){
//删除
const delete_bookId = this.delete_info[index].bookId;
this.delete_book_list.push(delete_bookId);
uni.request({
url:'http://localhost:8081/teacher/deleteBookMaintain',
method:'POST',
data:{
tea_id:parseInt(uni.getStorageSync('id')),
book_id:delete_bookId
},
success:(res) => {
console.log("success ->");
uni.showToast({
title:'删除成功'
})
},
fail:(err) =>{
console.log("err");
uni.showToast({
title:'请求失败'
})
}
})
// console.log("courseId",delete_courseId);
// console.log("this.delete_course_list",this.delete_course_list);
this.delete_info.splice(index,1);
},
add_book(index){
const add_bookId = this.select_info[index].bookId;
// tea_id=parseInt(uni.getStorageSync('id'))
// console.log("courseId ->",add_courseId);
uni.request({
url:'http://localhost:8081/teacher/addBookMaintain',
method:'POST',
data:{
tea_id:parseInt(uni.getStorageSync('id')),
book_id:add_bookId
},
success:(res) => {
console.log("success ->");
uni.showToast({
title:'添加成功'
})
},
fail:(err) =>{
console.log("err");
uni.showToast({
title:'请求失败'
})
}
})
this.select_info.splice(index,1);
this.delete_info.push(index,0);
},
change(index) {
this.current = index;
if(index == 0){
this.find_mes();
}else if(index ==1){
console.log("第2个");
this.select_mes();
}
},
find_mes(){
console.log("选中专著，可以删除已选中的专著");
uni.request({
url: 'http://localhost:8081/teacher/searchBookApplied',
method: 'POST',
data: {
tea_id:parseInt(uni.getStorageSync('id')),
},
success: (res) => {
this.delete_info = res.data.data;
uni.setStorageSync('已选中的数据', res.data.data[0]);
console.log("接收数据为",res);
},
fail: (res) => {
console.log("error");
}
});
this.is_delete = true;
},
select_mes(){
console.log("选择专著，可以选择近五年专著");
uni.request({
url: 'http://localhost:8081/teacher/searchBookUnapplied',
// url: 'http://localhost:8081/teacher/searchBookApplied',
method: 'POST',
data: {
tea_id:parseInt(uni.getStorageSync('id'))
},
success: (res) => {
this.select_info = res.data.data;
uni.setStorageSync('可选中的数据', res.data.data[0]);
console.log("接收数据为",this.select_info);
},
fail: (res) => {
console.log("error");
}
});
this.is_delete = false;
}
},
mounted(){
console.log("mounted",'执行')
init();
this.find_mes();
},
created() {
this.find_mes();
}
}
</script>
<style>
#tabs{
width: 80%;
}
.delete_course{
margin:auto;
margin-top:15rpx ;
width: 40%;
height: 60rpx;
}
#delete{
background-color: #930D14;
width: 100%;
height: 100%;
line-height:60rpx;
color: #FFFFFF;
box-shadow: 0 0 20rpx -10rpx grey;
border-radius: 15rpx;
}
#container{
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#container{
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#avatar{
/* margin:40rpx; */
z-index:0;
margin-top:40rpx;
box-shadow: 0 0 40rpx -10rpx grey;
border-radius:50%;
background-color: #fff9f8;
}
.info-card{
/* //z-index:-1 */;
background-color: white;
position:relative;
margin: 20rpx auto;
/* margin-top:-20rpx;
margin-bottom: 50rpx; */
height:450rpx;
width:700rpx;
border-radius: 20px;
padding:20px 20px;
box-shadow: 0 0 40rpx -10rpx grey;
}
.paper-card{
position: relative;
display: flex;
flex-direction: row;
border-radius: 20rpx;
width: 90%;
box-shadow: 0 0 40rpx -10rpx grey;
margin: 10rpx auto;
}
.info-item{
font-size:12px;
margin-top: 20rpx;
}
.list-item{
position: relative;
border: #18B566;
margin: 0rpx auto;
width: 90%;
height: 80rpx;
display: inline-block;
}
.list-left{
width: 90%;
}
.list-right{
position: absolute;
right:0rpx;
width: 40rpx;
height:40rpx;
}
.save{
bottom: 50rpx;
position: fixed;
width: 30%;
}
.btn_commit{
font-size: 40rpx;
font-weight: 500;
box-shadow: 0 0 24rpx -10rpx grey;
}
.select-button{
float: right;
box-shadow: 0 0 24rpx -10rpx grey;
border-radius: 30rpx;
width: 170rpx;
height: 40rpx;
line-height: 40rpx;
color: white;
font-size: 20rpx;
margin-top: 20rpx;
}
.class-name{
margin:50rpx 100rpx 50rpx 50rpx;
}
.paper-item{
margin:auto 50rpx;
}
/* .book-card{
position: relative;
display: flex;
flex-direction: row;
border-radius: 20rpx;
width: 90%;
box-shadow: 0 0 40rpx -10rpx grey;
margin: 10rpx auto;
} */
/* #info{
width: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content:flex-end;
padding-top: 30rpx;
padding-right: 0rpx;
padding-bottom: 10rpx;
padding-left: 10px;
} */
/* .book-item{
text-align: right;
padding-top:10rpx ;
}
.class-name{
font-size: 30rpx;
color: #358cfb;
}
.class-time{
font-size: 20rpx;
color:grey;
}
.class-type{
font-size: 20rpx;
color:;
}
.class-position{
font-size: 25rpx;
color: #ffa15d;
} */
/* .btn{
text-align: center;
} */
#select-button{
float: right;
box-shadow: 0 0 24rpx -10rpx grey;
border-radius: 30rpx;
width: 170rpx;
height: 40rpx;
line-height: 40rpx;
color: white;
font-size: 20rpx;
margin-top: 7rpx;
}
.info-card{
/* //z-index:-1 */;
background-color: white;
position:relative;
margin: 20rpx auto;
/* margin-top:-20rpx;
margin-bottom: 50rpx; */
height:450rpx;
width:700rpx;
border-radius: 20px;
padding:20px 20px;
box-shadow: 0 0 40rpx -10rpx grey;
}
.select-button{
float: right;
box-shadow: 0 0 24rpx -10rpx grey;
border-radius: 30rpx;
width: 170rpx;
height: 40rpx;
line-height: 40rpx;
color: white;
font-size: 20rpx;
margin-top: 7rpx;
}
</style>
第一个功能实现花费的时间较长，在和接口对接的时候还是做了许多的调整，最终实现后面的效果。
这篇关于山东大学暑期实训（7）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-15JavaMailSender是什么，怎么使用？-icode9专业技术文章分享
- 2024-11-15JWT 用户校验学习：从入门到实践
- 2024-11-15Nest学习：新手入门全面指南
- 2024-11-15RestfulAPI学习：新手入门指南
- 2024-11-15Server Component学习：入门教程与实践指南
- 2024-11-15动态路由入门：新手必读指南
- 2024-11-15JWT 用户校验入门：轻松掌握JWT认证基础
- 2024-11-15Nest后端开发入门指南
- 2024-11-15Nest后端开发入门教程
- 2024-11-15RestfulAPI入门：新手快速上手指南
