根据开源的 API 制作论坛项目

fvcvv

已于 2022-12-19 19:44:27 修改

阅读量425

点赞数

CC 4.0 BY-SA版权

文章标签： ui 前端 javascript

于 2022-12-19 16:51:08 首次发布

本文链接：https://blog.csdn.net/fvcvv/article/details/128248684

这篇博客详细介绍了如何根据开源API制作论坛项目，包括页面样式设计、功能实现如文章分类展示、评论点赞、用户登录、文章收藏等，以及项目打包发布到网上的步骤。通过创建组件、封装请求、使用Element-UI等技术，实现了论坛的完整功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

准备

1）创建项目
2）现在图中第三个进行按照
在这里插入图片描述

3）选择内容中的蓝色字内容安装，其中第二个项中的按空格进行选中
4）启动项目，当打开页面出现 About 则证明上面选项中没有出现错误
5）安装 element-ui

6）借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

7）在项目的 bable.config.js中项目中输红色框里面的内容

在这里插入图片描述

8)在项目的src 文件夹中创建一个 plugins 文件夹，并且创建一个element.js
9）在项目的 AboutView.vue 中创建一个 <el-button>按钮并且重启项目
当出现这个按钮的时候证明，以上步骤没有出现错误

在这里插入图片描述

10）删除 components ，views里面的文件内容
11）创建公共样式,style.less 并导入到 main.js

做完以上步骤，那么我们的准备就完成了

1、功能的实现

1.1、页面的样式

在这里插入图片描述
导航：

<template>
<!-- 导航栏 -->
  <header>
    <div class="inner">
      <!-- 存放logo -->
      <router-link to="/">
         <img src="../assets/img/logo.png" alt="" class="logo">
      </router-link>
      <!-- 导航栏右边 -->
      <div class="header-right">
        <router-link class="home-link" to="/">首页</router-link>
          <!-- <router-link class="home-link" to="/">未读消息<router-link> -->
        <router-link to="/">
           <el-button type="info" size="medium"  icon="el-icon-user-solid">登录</el-button>
        </router-link>
        <!-- <router-link class="home-link" to="/">退出<router-link> -->
      </div>
    </div>
  </header>
</template>

<script>
export default {
   
   };
</script>

<style lang='less'>
header {
   
   
  width: 100%;
  height: 50px;
  background-color: rgb(44, 51, 51);
  position: fixed;
  top: 0;
  width: 100%;
  // 固定导航
  .inner {
   
   
    width: 72.5%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 50px;
    justify-content: space-between;
    .logo {
   
   
      width: 140px;
      height: 60px;
      margin-top: 5px;
    }
    .el-button--info {
   
   
      background-color: rgb(90, 89, 83);
      border-color: rgb(90, 89, 83);
      padding: 7px 7px;
    }
    .home-link{
   
   
      color: #fff;
      margin-right: 10px;
    }
  }
}</style>

首页

<template>
  <div class="home">
    <div class="nav">
      <router-link to="/">全部</router-link>
      <router-link to="/">精华</router-link>
      <router-link to="/">分享</router-link>
      <router-link to="/">问答</router-link>
      <router-link to="/">招聘</router-link>
      <router-link to="/">客户端测试</router-link>
    </div>
  </div>
</template>

<script>
export default {
   
   

}
</script>

<style lang='less'>
.home {
   
   
  width: 72.5%;
  margin: 0 auto;
  background-color: rgb(255, 255, 255);
  border-radius: 6px; // 圆角
  overflow: hidden;
  min-height: 80vh;
  .nav{
   
   
    background-color: rgb(190, 185, 185);
    padding: 10px;
    display: flex;
    align-items: center;
    a{
   
   
      margin-left: 10px;
      padding: 4px;
      color: rgba(66, 175, 72, 0.664);
      font-size: 14px;
      border-radius: 4px;
      background-color: rgb(190, 185, 185);
      font-weight: bolder;
    }
    a.activ{
   
   
      color: #fff;
      background-color: aqua;
    }
  }
}
</style>
</style>

router文件下的js，导首页
在这里插入图片描述
add.js

1.2、具体内容

1.2.1、结构画分

对于具体内容，我们可以分成两部分，一个是大的内容页，一个的具体的内容页
在这里插入图片描述

对项目导入 axios 从而回去开源的 API： npm i axios

1.2.2、获取内容

对 axios 获取的内容进行封装

// axios 封装
import axios from 'axios'

const instance = axios.create({
   
   
  // 请求基地址
  baseURL: " https://cnodejs.org/api/v1",
  timeout: 2000 // 控制时间 2000 = 2s，
  // 请求头的配置
  // headers
})

// 请求拦截器
// 例：提示开会员
instance.interceptors.request.use((config) => {
   
   
  // 请求头配置 config
  // config.auth = 'token'
  return config
})

// 响应拦截器
instance.interceptors.response.use((res) => {
   
   
  return res.data
})

// vue 全局加上 $http
// 在组件中使用 this.$http 就相当于 instance 了
// Vue.prototype.$http = instance
export default instance