2024.6.17 山东大学项目实训纪实-CSDN博客

本文链接：https://blog.csdn.net/silence_li_/article/details/139916639

数据库精选-数据库详情前端代码实现：

<template>
<div class="container" >

  <div class="header" style="margin: 0 auto;  width: 1000px;">
    <div class="left">
    </div>
    <p style="color:#2d2b2b; font-size: 30px">Database Details</p>
    <div class="right">
    </div>
  </div>

  <div class="main" style="margin-top: 0px;margin-left: auto;margin-right: auto">  <!--那个红色的框框-->
    <el-row style="margin-top: 30px;height: 280px">
      <el-col :span="6" style="height: 250px">

          <div class="imgdiv" style="margin-left: 30px">
            <img class="centered-image"  :src="require(`@/assets/img/database/${imgname}`)">
          </div>

      </el-col>

      <el-col :span="18">

          <div class="info">

            <div class="login-wrapper">
              <span class="login-text" style=";margin-left: 10px;margin-right: 15px"><strong>{{db.dName}}</strong></span>
            </div>
            <div class="login-wrapper">
              <span class="line"></span>
<!--              <span class="login-text"><strong>{{db.dName}}</strong></span>-->
<!--              <span class="line"></span>-->
            </div>


            <el-row :gutter="30">
              <p style="margin-top: 15px;margin-left: 22px;margin-right: 15px">
                {{db.ab}}
              </p>
            </el-row>
            <el-row style="text-align: left;margin-top: 25px;">
              <el-button @click="redirectToLink" style="margin-left: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);" round type="info">直达链接 <i class="el-icon-arrow-right" style="transition: transform 0.3s;"></i></el-button>
            </el-row>

          </div>

      </el-col>

    </el-row>
  </div>

  <div class="main" style="margin-top: 30px;margin-bottom: 30px;margin-left: auto;margin-right: auto">
    <el-row :gutter="20">
      <div class="info">
        <p v-html="details" style="text-align: left;margin-left: 20px;margin-right: 20px;margin-top: 20px;margin-bottom: 20px"></p>
      </div>
    </el-row>
  </div>

</div>

</template>


<script setup>

export default {
  name: "DBDetails",
  data(){
    return{
      dbid: sessionStorage.getItem("id"),
      db: {},
      imgname: "",
      imgUrl: "",
      details: "",
      weburl: "",
    }
  },
  computed: {
    backgroundImage(){
      return require('@/assets/img/database/' + this.imgname);
    },

  },
  mounted(){
    console.log(sessionStorage.getItem("id"))
    this.request.get("/db/findbyID/" + sessionStorage.getItem("id")).then(res => {
      if(res.code === '200'){
        console.log(res.data)
        this.db = res.data
        this.imgname = res.data.img
        this.imgUrl = "@/assets/img/database/"+this.imgname
        console.log(this.imgUrl)
        this.details = res.data.details
        this.weburl = res.data.url
        // this.imgUrl = require('@/assets/img/database/' + this.imgname);
        // const imgdiv = document.querySelector(".imgdiv");
        // const imgurl = this.imgUrl.default;
        // console.log(imgurl)
        // imgdiv.style.backgroundImage = `url(${imgurl})`;
      }
    })
  },
  methods: {
    redirectToLink(){
      // window.location.href = this.weburl; // 要跳转的链接
      window.open(this.weburl, "_blank");
    },
  }
}

</script>

<style scoped>

.home {
  display: flex;
  width: 100vw;
  height: 633px;
  background-color: rgb(178, 209, 187);
  border-radius: 15px;
  position: relative;
}

.container {
  max-width: 1500px;
  margin:auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.inner{

  border-bottom: 1px solid rgba(155, 151, 151, 0.54);
  width: 90%;margin: 50px auto;
}
.header {
  padding: 20px;
  text-align: center;

}
.left{

  border-top: 2px solid darkgreen; /* 控制横线的粗细、颜色和样式 */
  width: 15%; /* 控制横线的长度 */
  margin: 10px 340px auto; /* 控制横线的上下间距及水平居中 */
}

.right{

  border-top: 2px solid darkgreen; /* 控制横线的粗细、颜色和样式 */
  width: 15%; /* 控制横线的长度 */
  margin: 10px 490px auto; /* 控制横线的上下间距及水平居中 */

}

.header h1 {
  font-size: 36px;
  color: #333;
}

.main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  text-align: center;
  width: 80%;
  border-radius: 10px;
  border-left: 4px solid rgba(224, 63, 9, 0.54);
  border-bottom: 2px solid rgba(155, 151, 151, 0.54);

  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}

.info {

  padding: 10px 10px 10px 5px;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 10px;
}

.info h2 {
  font-size: 40px;
  color: #333;
}

.info p {
  font-size: 15px;
  line-height: 2;
  color: #666;
  text-align: left;
}


.login-wrapper {
  margin-right: auto;
  margin-top: 10px;
  display: flex;
  align-items: center; /* 垂直居中 */
  text-align: left; /* 文字水平居中 */
}

.line {
  flex: 1; /* 让横线自适应宽度，两边相等 */
  height: 1px; /* 横线的高度 */
  background-color: #d2d4d7; /* 使用文本颜色，保证与文本颜色一致 */
  margin: 0 10px; /* 横线与文本间的间隔 */
}

.login-text {
  font-size: 36px;
  color: #333;
}

.row {
  display: flex;
  margin-top: 50px;
}

.item {
  flex: 1;
  padding: 10px;
  border: 1px solid #000;
}
.item1 {
  flex: 4; /* 第一块内容占四分之一的宽度 */
}

.item2 {
  flex: 6; /* 第二块内容占六分之一的宽度 */
}

.divcontainer {
  width: 250px;
  height: 250px;
}
.imgdiv {
  position: relative;
  width: 250px;
  height: 250px;
  background-size: cover;
  background-image: url("../../assets/img/database/background.jpg");
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
.imgdiv::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  //filter: blur(10px); /* 虚化效果，可以调整模糊程度 */
  opacity: 0.6;
  z-index: -1;

}
.centered-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
}
.el-button:hover i {
  transform: translateX(8px); /* 向右浮动5像素 */
}
</style>

后端

package com.rainng.coursesystem.controller;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.rainng.coursesystem.common.Result;
import com.rainng.coursesystem.entity.DB;
import com.rainng.coursesystem.entity.Methods;
import com.rainng.coursesystem.service.DBService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @ClassName DBController
 * @Description TODO
 * @Author lkf
 * @Date 2024/6/22
 * Version 1.0
 **/

@RestController
@RequestMapping("/db")
public class DBController {

    @Autowired
    private DBService dbService;

    @GetMapping("/findall")
    public Result findAll() {
        System.out.println(dbService.list());
        return Result.success(dbService.list());
    }

    @GetMapping("/findbyID/{id}")
    public Result findById(@PathVariable Integer id) {
        id = id + 1;
        DB db = dbService.getById(id);
        db.setVisit(db.getVisit()+1);
        System.out.println("_________________________________________________________________");
        System.out.println(db.getDetails());
        System.out.println("_________________________________________________________________");
        dbService.updateById(db);
        System.out.println(db.getVisit());
        return Result.success(dbService.getById(id));
    }

    private static String url = "jdbc:mysql://localhost:3306/xmsx?useUnicode=true&characterEncoding=UTF-8";
}