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

2021-07-01 19:00:45 阅读：225 来源： 互联网

标签：solid border 暑期 height 8px 实训文章山东大学 ccc

一、根据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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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