平台项目列表页实现（二）

谁借莪１个温暖的怀抱￠ 2024-04-01 15:04 72阅读 0赞

#### 这里写目录标题 ####

*  一、顶部盒子设计
 *   *  1. 顶部盒子包含项目列表和添加项目、退出登录2个按钮
 *  二、项目列表盒子设计
 *  三、添加项目盒子设计
 *  四、退出登录功能实现
 *  五、路由导航守卫实现
 *  六、展示项目信息
 *  七、bug修复
 *   *  1、当项目名称太长或者项目负责人太长，需要一行展示，当超过8个字...展示
 *  八、删除单个项目
 *  九、添加项目功能
 *  十、编辑和添加使用同一个弹框
 *  十一、编辑项目
 *  十二、总体实现代码
 *  十三：鼠标放上指定的位置变成手，点击进入home页面

## 一、顶部盒子设计 ##

![在这里插入图片描述][00f7cd0467fd462bab73199279bb67c4.png]

### 1. 顶部盒子包含项目列表和添加项目、退出登录2个按钮 ###

![在这里插入图片描述][93416a3eac564155a2f19d9eb86346d0.png]

<template>
        
        <div class="pros_box">
            
            <div class="top_box">
                <span>项目列表</span>
                <el-button icon="User" color="#00aa7f">退出登录</el-button>
                <el-button icon="Plus" color="#00aa7f">添加项目</el-button>
            </div
        </div>
    </template>
    
    <script>
    
    </script>
    
    <style scoped>
    /* 顶部内容 */
        .top_box{
        
            border-bottom:solid 5px #00aa7f;
            height: 50px;  设置高度
            font:bold 20px/40px '微软雅黑';
            color: #00aa7f; 设置背景颜色
            margin: 20px auto; 
        }
        
        /* 大盒子 */
        .pros_box{
        
            margin: 30px auto;
            max-width: 1400px;
        }
        /* 顶部按钮 */
        .top_box .el-button{
        
            float:right; 右浮动
            margin: 10px;
        }
    </style>

## 二、项目列表盒子设计 ##

![在这里插入图片描述][853750efed474d9faa2b290d974c3f74.png]  
![在这里插入图片描述][b57862d46e2f48d0b8119654acd860ba.png]

项目列表页面（整个页面的大盒子）包含显示项目列表的区域（显示所有项目的盒子）包含单个项目（单个项目的盒子）包含图标、项目名称、负责人、2个按钮，共4个盒子

<template>
        
        <div class="pros_box">
            
            <div class="top_box">
                <span>项目列表</span>
                <el-button icon="User" color="#00aa7f">退出登录</el-button>
                <el-button icon="Plus" color="#00aa7f">添加项目</el-button>
            </div>
    
            
            <div class="pro_list">
                
                <el-card class="pro">
                    
                    <div class="pro_icon">
                        <el-icon><Platform /></el-icon>
                    </div>
                    
                    <div class="pro_name">
                        演示项目
                    </div>
                    
                    <div class="leader">
                        负责人:kobe
                    </div>
                    <div class="btns">
                        <el-button size="small" icon="Edit" style="float:left;" color="#efefef">编辑</el-button>
                        <el-button size="small" icon="Delete" style="float:right;" color="#efefef">删除</el-button>
                    </div>
                </el-card>
    
            </div>
    
        </div>
    </template>
    
    <script>
    
    </script>
    
    <style scoped>
    /* 顶部内容 */
        .top_box{
        
    
            border-bottom:solid 5px #00aa7f;
            height: 50px;
            /* 设置字体加粗 宽度和高度  */
            font:bold 20px/40px '微软雅黑';
            /* 设置颜色 */
            color: #00aa7f;
            margin: 20px auto;
        }
        
    
        /* 大盒子 */
        .pros_box{
        
            margin: 30px auto;
            /* 设置最大宽度 */
            max-width: 1400px;
        }
        /* 顶部按钮 */
        .top_box .el-button{
        
            /* 右浮动 */
            float:right;
            margin: 10px;
        }
        /* 项目列表样式 */
        .pro{
        
            width:200px;
            height: 250px;
            float: left;
            margin: 10px;
        }
        /* 项目中图标的样式 */
        .pro .pro_icon{
        
            width: 60px;
            height: 60px;
            border-radius: 30px;  
            /* 背景颜色 */
            background: #e1ffed;
            color: #00aa7f;
            font: normal 30px/60px '微软雅黑';
            /* 居中 */
            text-align: center;
            margin: 0 auto;
        }
        /* 项目名称的样式 */
        .pro .pro_name{
        
            text-align: center;
            margin-top: 20px;
            font: bold 18px/20px '微软雅黑';
        }
        /* 负责人 */
        .pro .leader{
        
            text-align: center;
            color: rgb(55, 28, 206);
            /* 设置：字体/行高 */
            font: normal 15px/40px '微软雅黑'; 
            /* margin-bottom: 10px;  */
        }
    
        /* 按钮区域 */
        .pro .btns{
        
            margin-top: 50px;
            text-align: center;
        }
     
        	
    </style>

## 三、添加项目盒子设计 ##

![在这里插入图片描述][bb517f9098a2464fb4f65186f183e782.png]

<template>
    	......
    	......
    	 
         <el-card class="pro">
             <div class="add_box">
                 <el-icon :size="50" color="green"><Plus /></el-icon>
             </div>
         </el-card>
    </template>
    
    
    <style scoped>
    	......
    	/* 添加项目 */
        .pro .add_box{
        
            /* 水平居中 */
            text-align: center; 
            /* 高度 */
            /* height: 250px; */
            /* 行高 */
            line-height: 200px;
        }
        ......
    </style>

## 四、退出登录功能实现 ##

<el-button @click="logout"  icon='User' color='#00aa7f'>退出登录</el-button>

## 五、路由导航守卫实现 ##

**添加路由导航守卫，控制前端页面访问的权限**

router.beforeEach(async (to, from) => {
        
    	// 获取sessionStorage是否存在token，如果存在token视为已经登录
    	const isAuthenticated = window.sessionStorage.getItem('token')
        if (
    	   // 检查用户是否已登录
    	   !isAuthenticated &&
    	   // ❗️ 避免无限重定向
    	   to.name !== 'login'
    	 ) {
        
    	   // 将用户重定向到登录页面
    	   return {
         name: 'login' }
    	 }
        })

## 六、展示项目信息 ##

<div class="pro_list">
    			
    			<el-card class="pro" v-for="pro in projectList" :key='pro.id'>
    			  
    			  <div class="pro_icon">
    				  <el-icon><Platform /></el-icon>
    			  </div>
    			  
    			  <div class="pro_name">
    				  {
        {
        pro.name}}
    			  </div>
    			  
    			  <div class="pro_leader">
    				  {
        {
        pro.leader}}
    			  </div>
    			  
    			  <div class="btns">
    				  <el-button  color="#d9d9d9" class="edit" size="small" icon="Edit">编辑</el-button>
    				  <el-button color="#F5F5DC" class="del" size="small" icon="Delete">删除</el-button>
    			  </div>
     
    			</el-card>
    			
    			
    			<el-card class="pro">
    			  
    			  <div class="add_pro">
    				  <el-icon :size=70>
    					  <Plus/>
    				  </el-icon>
    			  </div>
    			 
    			</el-card>
    			
    		</div>

## 七、bug修复 ##

![在这里插入图片描述][b68cff95442745e29e061afe81a2e8b6.png]

### 1、当项目名称太长或者项目负责人太长，需要一行展示，当超过8个字…展示 ###

<div class="pro_name">
    	<span v-if="pro.name.length<8">{
        {
        pro.name}}</span>
    	<el-tooltip v-else class="item" effect="dark" v-bind:content=pro.name placement="top-start">
    			{
        {
        pro.name.slice(0,8)}}...
    	</el-tooltip>
      </div>
      
      
      <div class="pro_leader">
    	  <span v-if="pro.leader.length<8">{
        {
        pro.leader}}</span>
    	  <el-tooltip v-else class="item" effect="dark" v-bind:content=pro.leader placement="top-start">
    	  		{
        {
        pro.leader.slice(0,8)}}...
    	  </el-tooltip>
      </div>

## 八、删除单个项目 ##

index.js

## 九、添加项目功能 ##

index.js

export default{
        
    	// 登录接口
    	login(params){
        
    		return http.post('/login/',params)
    	},
    	// ---------------------------项目操作的api---------------------------
    	// 获取项目列表
    	getAllProjects(){
        
    		return http.get('/projects/')
    	},
    	// 删除项目的接口
    	delProject(id){
        
    		return http.delete(`/projects/${
          id}/`)
    	},
    	//添加项目的接口
    	createProject(params){
        
    		return http.post('/projects/',params)
    	}
    	
    }

<div class="top_box">
    	<span>项目列表</span>
    	<el-button @click="logout"  icon='User' color='#00aa7f'>退出登录</el-button>
    	<el-button @click="addDlg=true" icon='Plus' color='#00aa7f'>添加项目</el-button>
    </div>
    
    
    <el-card class="pro">
      
      <div class="add_pro" @click="addDlg=true">
    	  <el-icon :size=70>
    		  <Plus/>
    	  </el-icon>
      </div>
     
    </el-card>
    
    
    
    
    <el-dialog v-model="addDlg" title="添加项目" >
      <el-form :model="form">
        <el-form-item label="项目名称">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
    	<el-form-item label="负责人">
    	  <el-input v-model="addForm.leader"></el-input>
    	</el-form-item>
      </el-form>
    
      <div class="dialog-footer">
        <el-button @click="addDlg = false">取 消</el-button>
        <el-button type="primary" @click="addPro">确 定</el-button>
      </div>
    </el-dialog>

## 十、编辑和添加使用同一个弹框 ##

title：不写死  
![在这里插入图片描述][c13256582d9c4d1c83600c9622990ae6.png]  
在data中设置dlgTitle为弹窗的标题  
![在这里插入图片描述][8da1fde812a4422d9d9681d442f65096.png]  
接着在显示title的地方，设置数据绑定  
![在这里插入图片描述][377983acb1f348769f5422a150386ac3.png]  
给编辑按钮添加一个事件clickEdit  
![在这里插入图片描述][0296b3c5d7d14312826d84c5eab7ed1e.png]  
![在这里插入图片描述][489f426e06334d16b090c24a899ef267.png]  
修改点击添加的方法clickAdd  
![在这里插入图片描述][1cdaf1a1c2af41b98ac20e3525037309.png]  
![在这里插入图片描述][52316d99aca8487ab13d34e6a0aa3b2a.png]

## 十一、编辑项目 ##

index.js

根据dlgTitle发送不同的接口  
![加粗样式][80c18cbd09434d77b9da2f33c6c660e8.png]  
![在这里插入图片描述][5e8bcf4ac99f4ae8b30b78d9346c9152.png]  
**id怎么传？  
this.addForm=\{…pro\}：将项目信息赋值给addForm**  
![在这里插入图片描述][1d963b584cb44fc782d83696e0fb1977.png]

## 十二、总体实现代码 ##

<template>
    	
    	<div class="pros_box">
    		
    		<div class="top_box">
    			<span>项目列表</span>
    			<el-button @click="logout"  icon='User' color='#00aa7f'>退出登录</el-button>
    			<el-button @click="clickAdd" icon='Plus' color='#00aa7f'>添加项目</el-button>
    		</div>
    		
    		
    		
    		<div class="pro_list">
    			
    			<el-card class="pro" v-for="pro in projectList" :key='pro.id'>
    			  
    			  <div style="cursor: pointer;" @click="selectPro(pro)">
    				  
    				  <div class="pro_icon">
    				  				  <el-icon><Platform /></el-icon>
    				  </div>
    				  
    				  <div class="pro_name">
    				  				<span v-if="pro.name.length<8">{
       {pro.name}}</span>
    				  				<el-tooltip v-else class="item" effect="dark" v-bind:content=pro.name placement="top-start">
    				  						{
       {pro.name.slice(0,8)}}...
    				  				</el-tooltip>
    				  </div>
    				  
    				  
    				  <div class="pro_leader">
    				  				  <span v-if="pro.leader.length<8">{
       {pro.leader}}</span>
    				  				  <el-tooltip v-else class="item" effect="dark" v-bind:content=pro.leader placement="top-start">
    				  				  		{
       {pro.leader.slice(0,8)}}...
    				  				  </el-tooltip>
    				  </div>
    			  </div>
    			  
    			  
    			  <div class="btns">
    				  <el-button @click="clickEdit(pro)"  color="#d9d9d9" class="edit" size="small" icon="Edit">编辑</el-button>
    				  <el-button color="#F5F5DC" class="del" size="small" icon="Delete" @click="clickDelete(pro.id)">删除</el-button>
    			  </div>
     
    			</el-card>
    			
    			
    			<el-card class="pro">
    			  
    			  <div class="add_pro" @click="clickAdd">
    				  <el-icon :size=70>
    					  <Plus/>
    				  </el-icon>
    			  </div>
    			 
    			</el-card>
    			
    		</div>
    	</div>
    	
    	
    	
    	
    	  
    
    	  
    	
    	
    	<el-dialog v-model="addDlg" :title="dlgTitle" >
    	  <el-form :model="form">
    	    <el-form-item label="项目名称">
    	      <el-input v-model="addForm.name"></el-input>
    	    </el-form-item>
    		<el-form-item label="负责人">
    		  <el-input v-model="addForm.leader"></el-input>
    		</el-form-item>
    	  </el-form>
    	
    	  <div class="dialog-footer">
    	    <el-button @click="addDlg = false">取 消</el-button>
    	    
    		 <el-button v-if='(dlgTitle==="添加项目")' type="primary" @click="addPro">确 定</el-button>
    		 <el-button v-else type="primary" @click="updatePro">提交修改</el-button>
    		 
    	  </div>
    	</el-dialog>
    	
    </template>
    
    <script>
    	import {
           ElMessage, ElMessageBox } from 'element-plus'
    	// 导入映射方法的函数mapActions
    	import {
           mapActions } from 'pinia'
    	import {
           userStore } from '../store/user.js'
    	
    	export default{
          
    		data(){
          
    			return{
          
    				//项目列表信息
    				projectList:[
    					
    				],
    				// 添加项目的弹框是否显示
    				addDlg:false,
    				addForm:{
          
    					name:"",
    					leader:""
    				},
    				// 弹框的标题
    				dlgTitle:"添加项目"
    			}
    		},
    		methods:{
          
    			// 退出登录
    			// logout(){
          
    			// 	//清除token和用户名
    			// 	window.sessionStorage.removeItem('token')
    			// 	window.sessionStorage.removeItem('username')
    			// 	//跳转到登录页面
    			// 	this.$router.push({name:'login'})	
    			// },
    
    			// 将全局定义的logout方法，映射为当前组件的logout方法
    			...mapActions(userStore,['logout','savePro']),
    
    			// 通过接口获取后端所有的项目
    			async getAllProject(){
          
    				const response= await this.$api.getAllProjects()
    				if(response.status===200){
          
    					console.log(response.data)
    					// 将获取到的项目信息保存到data中
    					this.projectList=response.data
    				}
    			},
    			// 调用接口删除项目
    			async deletePro(proId){
          
    				//发送接口请求
    				const response = await this.$api.delProject(proId)
    				if(response.status===204){
          
    					//更新页面的数据
    					this.getAllProject()
    					//提示删除成功
    					this.$message({
          
    					  type: 'success',
    					  message: '删除成功!'
    					})
    				}
    			},
    			
    			// 点击删除项目
    			clickDelete(id){
          
    				this.$confirm('此操作不可恢复,确定要删除吗？', {
          
    				          confirmButtonText: '确定',
    				          cancelButtonText: '取消',
    				          type: 'warning'
    				        }).then(() => {
          
    							// 调用删除的接口
    							this.deletePro(id)
    
    						  // 取消操作 -->
    				        }).catch(() => {
          
    				          this.$message({
          
    				            type: 'info',
    				            message: '已取消删除'
    				          });          
    				        });
    			},
    			// 添加项目
    			async addPro(){
          
    				// 发送请求
    				const response=await this.$api.createProject(this.addForm)
    				if(response.status===201){
          
    					//更新页面的数据
    					this.getAllProject()
    					// 关闭窗口
    					this.addDlg=false
    					this.$message({
          
    					  type: 'success',
    					  message: '添加成功!'
    					})
    				}
    			},
    			// 点击编辑执行 的方法
    			clickEdit(pro){
          
    				// 修改title
    				this.dlgTitle='编辑项目'
    				// 将项目信息赋值给addForm
    				this.addForm={
          ...pro}
    				// 显示编辑框
    				this.addDlg=true
    			},
    			// 点击添加项目
    			clickAdd(){
          
    				this.dlgTitle='添加项目'
    				// 将项目信息addForm置空
    				this.addForm={
          
    					name:'',
    					leader:''
    				}
    				// 展示弹窗
    				this.addDlg=true
    			},
    			// 发送请求，修改编辑后的项目信息
    			async updatePro(){
          
    				const id=this.addForm.id
    				const params={
          
    					leader:this.addForm.leader,
    					name:this.addForm.name
    				}
    				const response=await this.$api.updateProject(id,params)
    				if(response.status===200){
          
    					//更新页面的数据
    					this.getAllProject()
    					// 提示
    					this.$message({
          
    					  type: 'success',
    					  message: '修改成功!'
    					})
    				}
    				// 关闭窗口
    				this.addDlg=false
    			},
    			// 选择进入的项目
    			selectPro(pro){
          
    				this.$router.push({
          name:"home"})
    				console.log(666)
    				// 将项目信息保存到vue的全局数据存储仓库
    				this.savePro(pro)
    			}
    			
    		},
    		// 钩子函数,最先执行的方法
    		created(){
          
    			
    			this.getAllProject()
    		}
    	}
    </script>
    
    <style scoped>
    	/* ----------------顶部样式--------------------- */
    	/* 整体盒子 */
    	.pros_box{
          
    		max-width: 1480px;
    		margin: 30px auto;
    	}
    	/* 顶部盒子 */
    	.top_box{
          
    		border-bottom: solid 5px green;
    		height: 40px;
    		font: bold 20px/40px '微软雅黑';
    		color: #00aa7f;
    		margin: 20px auto;
    	}
    	/* 顶部按钮 */
    	.top_box .el-button{
          
    		float: right;
    		margin-left: 10px;
    	}
    	
    	
    	/* ------------------项目列表样式-------------------------- */
    	
    	.pro{
          
    		width: 200px;
    		height: 250px;
    		margin: 20px;
    		float: left;
    	}
    	/* 项目中图标样式 */
    	.pro .pro_icon{
          
    		width: 80px;
    		height: 80px;
    		border-radius: 40px;
    		background: #e1ffed;
    		color: #00aa7f;
    		font: normal 30px/60px '微软雅黑';
    		text-align: center;
    		margin: 0 auto;
    	}
    	/* 项目名称的样式 */
    	.pro .pro_name{
          
    		text-align: center;
    		margin-top: 20px;
    		font: bold 18px/40px '微软雅黑';
    	}
    	/* 负责人的样式 */
    	.pro .pro_leader{
          
    		text-align: center;
    		color: blue;
    		font: normal 12px/20px '微软雅黑';	
    	}
    	/* 按钮区域的样式 */
    	.pro .btns{
          
    		margin-top: 30px;
    	}
    	.pro .btns .edit{
          
    		float: left;
    	}
    	.pro .btns .del{
          
    		float: right;
    	}
    	/*添加的盒子样式*/
    	.pro .add_pro{
          
    		text-align: center;
    		height: 250px;
    		line-height: 250px;
    		color: #d3d4d3;
    	}
    	
    	
    	
    	
    	
    </style>

index.js路由设置

const routes = [
    
      {
        
        path: '/',
        name: 'index',
        redirect:{
        name:"login"}
      },
      {
        
        path: '/user/login',
        name: 'login',
        component: () => import('../views/Login.vue')
      },
      {
        
        path: '/allProject',
        name: 'allProject',
        component: () => import('../views/AllProject.vue')
      },
      {
        
        path: '/home',
        name: 'home',
        component: () => import('../views/Home.vue')
    
      },
    ]

## 十三：鼠标放上指定的位置变成手，点击进入home页面 ##

![在这里插入图片描述][47638dbbb0a94f6ca7cfb90343e564fd.png]  
用大的div包起来

<el-card class="pro" v-for="pro in projectList" :key='pro.id'>
      
      <div style="cursor: pointer;" @click="selectPro(pro)">
    	  
    	  <div class="pro_icon">
    	  				  <el-icon><Platform /></el-icon>
    	  </div>
    	  
    	  <div class="pro_name">
    	  				<span v-if="pro.name.length<8">{
       {pro.name}}</span>
    	  				<el-tooltip v-else class="item" effect="dark" v-bind:content=pro.name placement="top-start">
    	  						{
       {pro.name.slice(0,8)}}...
    	  				</el-tooltip>
    	  </div>
    	  
    	  
    	  <div class="pro_leader">
    	  				  <span v-if="pro.leader.length<8">{
       {pro.leader}}</span>
    	  				  <el-tooltip v-else class="item" effect="dark" v-bind:content=pro.leader placement="top-start">
    	  				  		{
       {pro.leader.slice(0,8)}}...
    	  				  </el-tooltip>
    	  </div>
      </div>
      
      
      <div class="btns">
    	  <el-button @click="clickEdit(pro)"  color="#d9d9d9" class="edit" size="small" icon="Edit">编辑</el-button>
    	  <el-button color="#F5F5DC" class="del" size="small" icon="Delete" @click="clickDelete(pro.id)">删除</el-button>
      </div>
    
    </el-card>

[00f7cd0467fd462bab73199279bb67c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/be6988e91f8848709d4018c39d39070a.png
[93416a3eac564155a2f19d9eb86346d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/38ab4737634f48759b3c153824dd6271.png
[853750efed474d9faa2b290d974c3f74.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/924c4a7ceb084ca0ae646d269d524805.png
[b57862d46e2f48d0b8119654acd860ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/abad8714a0ce4b7ebf019c0089aea29f.png
[bb517f9098a2464fb4f65186f183e782.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5483326089e14d3985347cfc399c4108.png
[b68cff95442745e29e061afe81a2e8b6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c5f19bfef2054353bc9251385149c9e9.png
[c13256582d9c4d1c83600c9622990ae6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/158aad6205114a658f560c13efdcf113.png
[8da1fde812a4422d9d9681d442f65096.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d5181bf3da494b8a8378c38092324adf.png
[377983acb1f348769f5422a150386ac3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/93eeaa72724d466ba14b89f6c07b798d.png
[0296b3c5d7d14312826d84c5eab7ed1e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1233e6eda57e44e8aae6366ae4d49c2d.png
[489f426e06334d16b090c24a899ef267.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d45245654f074d54918ace82183b9b85.png
[1cdaf1a1c2af41b98ac20e3525037309.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5f2ac5defb234b32b282796588bfc16a.png
[52316d99aca8487ab13d34e6a0aa3b2a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e1aa45b8dd5f48d8b4651de213be2b23.png
[80c18cbd09434d77b9da2f33c6c660e8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6326d03cb97a4e658f2416600874b760.png
[5e8bcf4ac99f4ae8b30b78d9346c9152.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/89540e2ebc4545f9bd9f0231b5bab75a.png
[1d963b584cb44fc782d83696e0fb1977.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/916cea97978a4a55bd7e1b586f5151b3.png
[47638dbbb0a94f6ca7cfb90343e564fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0a2cb03dbace4a86a113cb7f502aaf22.png