前后端分离—博客网站
Asa-德丶钰
这个作者很懒,什么都没留下…
展开
-
六、React开发—底部栏组件
六、React开发—底部栏组件这次我们写一个简单的组件,网站的底部栏组件,我们写完这个组件之后,整个首页的静态界面就初步完成了。底部栏组件在 my-blog\src\components\footer\ 中新建 footer.jsx 文件,并写入代码:import React, {Component} from "react";import './footer.less'export default class FooterMy extends Component{ ren..原创 2020-12-10 22:55:07 · 409 阅读 · 1 评论 -
五、前端开发—搭建静态网站侧边栏
五、前端开发—搭建静态网站侧边栏高能预警,这次写的组件会非常的多,一大堆代码正在袭来。。。。。构图解析这次我们做一个网页中页面侧边栏,其中会放一些导航信息。在写代码之前,我们先分析一下,我们想要达成的效果:首先,最上方有一个切换按钮,当前是一个网站信息。切换过去,是友情链接的存放地。网站信息栏可以看到,有网站介绍栏、博主联系栏、标签栏、导航栏、网站日志栏。并且我们可以看到,这些栏中标题风格都是一样的,我们可以抽取出来做成一个标题栏。外加一个友情链接栏,所以这次...原创 2020-11-25 16:11:24 · 455 阅读 · 0 评论 -
四、前端开发—搭建静态网站(3)
四、前端开发—搭建静态网站(3)之前,我们搭建了网站首页的导航栏 以及 轮播图,接下来,开始搭建博客文章列表组件搭建文章列表组件在上一节,我们分析网页架构时,也说过,文章列表和个人资料展示共占一行。大概计算下来 文章列表要占24份中的19份,个人资料占24份中的5份。首先分别在my-blog\src\components\show-posts-list\show-posts-list.jsx和 my-blog\src\components\show-sider\show-sider.js..原创 2020-11-21 20:54:26 · 277 阅读 · 0 评论 -
三、前端开发—搭建静态网站(2)
三、前端开发—搭建静态网站(2)上一节,部署了基础环境,以及搭建了博客的静态导航栏。接下来,就搭建博客首页的其他组件: 轮播图 博客文章列表 个人信息栏 网页的底部栏 分析网页布局分析上图可以,整个 内容体里面包含了两行(红色),第二行中又包含两列(绿色框)这时,我们可以根据划分的结构编写各个自定义组件,比如:轮播图组件,个人资料组件,文章列表组件等等。再通过栅格布局将它们组合起来,完成一个完整的页面。搭建轮播图组件在 my-blog\src\原创 2020-11-19 20:45:30 · 258 阅读 · 0 评论 -
二、前端开发—搭建静态网站(1)
二、前端开发—搭建静态网站(1)本节主要的工作就是 搭建React 环境,以及配置一些常用的库,并且通过 react 搭建网站的顶部导航栏。准备工作:最好之前有一些 html 、css 以及 js 的基础。同时学习一些 React 的基础语法。(推荐B站上尚硅谷的React 视频)开始使用 create-react-app 创建 react 应用:# 1.首先使用 npm 在全局安装 create-react-appnpm install -g create-react-ap...原创 2020-11-17 17:16:46 · 808 阅读 · 0 评论 -
一、现阶段工作以及下阶段目标
一、现阶段工作以及下阶段目标现阶段工作又不知道第几遍了,又完完全全重构了一遍博客网站,但这次只是推翻了一部分:这次重构的结果就是前后端完全分离。前端使用 React 前端框架搭建,后端就继续使用 Django 框架。前端使用后端提供的 API 接口,实现了目前看到了样子。此网站目前主要分为了 三个 模块:博客、项目、日记 博客模块基本搭建完成了,就剩一下细节继续完善了。还有评论区一直纠结要不要存在,最终还是删去了。 项目模块第一阶段初步完成,将 OneDrive ...原创 2020-11-12 09:29:51 · 250 阅读 · 0 评论