其他分享
首页 > 其他分享> > 山东大学软件学院暑期项目实训记录(二)

山东大学软件学院暑期项目实训记录(二)

作者:互联网

一、根据E-R图确定接口需求

博客浏览页
博客头部,返回用户头像,用户名,邮箱,用户标识
点击博客编辑,查询文章id,返回文章标题,文章摘要,文章内容
热门文章,返回热门文章标题
博主最新文章,返回该博主最新发布的三篇文章标题
文章,返回文章标题,创建时间,标签,(浏览量待定),文章内容
返回点赞数,收藏数
点赞,查询文章id,点赞数+1
收藏,查询用户id,文章id,收藏数+1
评价,用户给文章打分,评价记录+1
评论,查询文章id,返回评论用户头像,用户名,评论内容,评论时间
用户在文章下评论,评论记录+1
 

二、学习Vue以及Element的使用

https://www.bilibili.com/video/BV14y4y1M7Nc?p=1&share_medium=iphone&share_plat=ios&share_source=QQ&share_tag=s_i&timestamp=1625032827&unique_k=Fsjfcv

根据视频快速学习vue,尝试搭建页面

Element是一个网站快速成型工具,它提供了很多组件,可以直接使用。

三、开始编写文章浏览页面代码

App.vue 代码

<template>
  <div>
  <el-container class="common-layout" style="height:800px" >
    <el-aside width="250px" height="800px" class="aside">
        <div  class="aside-header">
          <div>
            <el-row class="demo-avatar demo-basic">
              <el-col :span="12">
                <div class="demo-basic--circle">
                  <div class="block"><el-avatar :size="80" :src="circleUrl"></el-avatar></div>
                  <div class="block" v-for="size in sizeList" :key="size">
                    <el-avatar :size="size" :src="circleUrl"></el-avatar>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div  class="aside-main">main</div>
        <div  class="aside-footer">Footer</div>
</el-aside>
    <el-container class="container">
      <el-header class="header">Header</el-header>
      <el-main class="main">Main</el-main>
      <el-footer class="footer">Footer</el-footer>
    </el-container>
  </el-container>
  </div>
</template>

<script>
import Header from "./components/Header";
export default {
  name: 'App',
  data () {
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      sizeList: ["large"]
    }
  }
}
</script>

<style>
body{margin:75px;position: relative;background-color: #ccc}
.common-layout{background-color:rgb(238, 241, 246)}
.aside-header{height:18% ;border-bottom:8px solid #ccc; border-right:8px solid #ccc}
.aside-main{height:40% ;border-bottom:8px solid #ccc;border-right:8px solid #ccc}
.aside-footer{height:40% ;border-right:8px solid #ccc }
.container{height:750px}
.aside{position:relative}
.header{height:100px;}
.main{height:800px;border:1px solid #ccc}
.footer{height:300px;border:1px solid #ccc}
</style>
<script>

export default{
  name:"Layout",

}
</script>

大致实现了一个框架,预计后面会参照https://blog.csdn.net/li3455277925?type=blog,添加内容。

标签:solid,border,暑期,height,8px,实训,文章,山东大学,ccc
来源: https://blog.csdn.net/arccsec/article/details/118393492