.net 开发怎么实现前后端分离_React+Egg前后端分离实现个人网站

news/2024/5/13 7:45:00/文章来源:https://blog.csdn.net/weixin_31159999/article/details/112143688

8545b5627983594e07c0356e88f04d80.png

利用闲暇时光,对自己的个人网站进行了改版。虽然自己博客没写几篇,但对博客网站却进行了多次改版。转念又想。独乐乐不如众乐乐,于是又开源了出来,供大家学习和交流。这次和上次不同的是,这次使用了Node全栈开发。并且所有代码都开源出来了。相比上次,这次功能也添加了很多,后期也将逐渐完善,长期维护和更新。为此,也打算写一个更为详细的免费的《Node全栈开发——带你从零开发前后端分离的个人网站》教程。敬请期待。接下来将对博客网站进行简单的说明!

运行效果

首页+详情页

7a56bfb4cefb6a0175361896dd382c29.gif
首页和详情页

编辑器+发布文章

ec350fb23cee1922552ef976c6a25c4c.gif
编辑器页

个人信息+后台管理

febf78c0eccc19a7f27a53cfea49241f.gif

项目说明

该项目作为一个个人网站使用。不过我的想法是不仅仅是只想开源一个博客网站,进一步说是给程序员打造自己的一片小天地。目前实现了一个博客网站的大部分功能,设计风格参考了掘金。更多功能后续会逐渐添加和完善。和上一个版本不同的是,前端采用了react hooks进行重构,服务端使用Egg进行了重构,是一个完整的js全栈项目。希望能给想学js全栈开发的同学提供一手资料。该项目会长期维护和更新。会逐渐向企业级开发靠拢。欢迎大家学习交流。

项目地址

先贴上项目地址以表尊敬!如果该项目对您有帮助。深感荣幸!动动手指帮忙给个Star吧!

前端地址

immisso/blog-web​github.com
645938f48b5fdc08776c68f69bfa5a47.png

后端地址 immisso/blog-web后端地址

immisso/blog-server​github.com
645938f48b5fdc08776c68f69bfa5a47.png

关于Demo

后续我会把项目部署到自己的博客网站

柒叶,一叶相思,二叶离愁,三叶久离,四叶惜别,五叶写意,六叶程情,柒叶携手​www.immisso.com

现在该地址上部署的是老版本博客,如果需要看新版本的在线效果可能需要等段时间,空了我会尽快部署上去。

技术栈

该个人网站采用了前后端分离开发模式,前端采用React+antd+umi+dva开发,服务端采用Node+Egg开发,数据库使用了Mysql,使用Sequelize作为ORM来操作数据库。使用sequelize-cli做数据库的迁移。主要功能模块包括如下

前端:

  • React
  • Antd
  • umi
  • dva
  • react-markdown
  • highlight.js

服务端:

  • Egg全家桶
  • Mysql
  • Sequelize
  • Sequelize-cli

功能描述

该网站最大的一个亮点是,自己实现了一个一款比较好用的Markdown编辑器(因为我找遍了npm官网,也没找到一款好用的react markdown编辑器,所以只好自己实现)。设计风格参考掘金,虽然功能可能还不够多,也不够完善,但是绝大多数情况下是够用的。后续也会在此基础上开发一款教程,用于写教程和文档,类型于掘金的小册功能。下面和就列举一下当前已经实现了的部分功能。

主网站

  • 登录功能
  • 注册功能
  • 文章列表
  • 点赞功能
  • 评论功能(登录用户和游客用户)
  • 一款好用的Markdown编辑器
  • 集成了阿里云OSS上传图片功能
  • 保存草稿
  • 修改草稿
  • 发表文章
  • 个人信息更新

管理系统

  • 分类管理(分类列表、添加、删除)
  • 标签管理(标签列表、添加、删除)
  • 文章管理(文章列表、删除)
  • 评论管理(评论列表、删除)

待开发功能

  • 写教程功能
  • 邮件提醒功能
  • 用户管理功能
  • 主题风格
  • 代码风格
  • 第三方登录功能

功能很多,逐步完善吧!

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

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

相关文章

让用户关上门说话:覆盖全美6000个社区的邻居私密社交网站Nextdoor是如何壮大的?...

中国人常讲“远亲不如近邻”,老一辈的可能做得不错,可越往信息时代走,邻里之间似乎淡漠得越多。现在有多少人不是一回家就紧闭房门两耳不闻窗外事的?技术方便了我们生活的同时,也一定程度淡化了某些温暖的东西。据美国…

云服务器搭网站需要买域名吗,买了云服务器还要买域名吗

买了云服务器还要买域名吗 内容精选换一换当创建文件系统后,您需要使用云服务器来挂载该文件系统,以实现多个云服务器共享使用文件系统的目的。本章节以Windows 2012版本操作系统为例进行CIFS类型的文件系统的挂载。同一SFS容量型文件系统不能同时支持NF…

MSDTC服务无法启动,导致网站打不开

1. 如果只是提示需要MSDTC 那么点开始→运行→输入命令"net start msdtc",运行该命令即可. 2. 如果启动不了,请查看事件查看器 在系统事件中有错误:Distributed Transaction Coordinator 服务因 3221229584 (0xC0001010) 服务性错误而停止。 经多次试验,发…

网站运维异地备份方案及故障应急备用镜像站

网站运维异地备份方案及故障应急备用镜像站 定期检查异地备份故障应急时,启用应急Web服务 欢迎朋友一起交流,讨论。扣扣:柒⑥柒陆叁⑤叁伍转载于:https://blog.51cto.com/jimmyli/584992

web服务器的教学网站,04-WEB服务器

服务器----电脑WEB服务器-是一个程序---软件。在第二节课,我们购买了一台服务器后。接下来我们就可以通过远程连接IP 和电脑的账号密码 远程登录到这台服务器上面。有一些虚拟主机。就不能远程。只能通过FTP工具 登录上去后 进行文件的上传和下载。web服务器。额前面…

高处不胜寒网站排名理想后更需努力

2019独角兽企业重金招聘Python工程师标准>>> “无限风光虽在险峰,但玉树临风,高处不胜寒冷”,网站制作与网站优化就是这样一个过程,每个人都在追逐数目极其有限的几个位置,都在围着梦想不断冲刺努力。每天不…

优化网站设计(十):最小化JAVASCRIPT和CSS

前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议。这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题。 作为通用的原则,雅虎的工程师团队曾经给出过35个最佳实践。这个列表请参考 Best Practices f…

易班站内应用、轻应用、网站接入、移动应用的区别

一、站内应用 地址如下: index.jsp对应如下页面 启动tomcat服务器,此时访问站内地址( http://f.yiban.cn/wangyang)。即可得到如下界面: 可以看到我们的应用是嵌套在易班的一个iframe中 二、轻应用 index.jsp对应如下…

ASP.NET MVC实现网站验证码功能

网站添加验证码,主要为防止机器人程序批量注册,或对特定的注册用户用特定程序暴力破解方式,以进行不断的登录、灌水等危害网站的操作。验证码被广泛应用在注册、登录、留言等提交信息到服务器端处理的页面中。 在ASP.NET网站中应用验证码…

BlueDream.js(蓝梦)——jQuery网站使用引导插件

小菜在前端世界游荡有些时间了,常见的插件多少有些了解,但却很少看到用户引导插件。 所谓用户引导插件,就是在第一次使用某个网站时,会弹出一些小动画,告诉你网站的基本使用方法,帮你快速入门。 这应该是个…

Nginx做为web服务器的网站

2019独角兽企业重金招聘Python工程师标准>>> Nginx 超越Apache的高性能和稳定性,使得国内使用 Nginx 作为 Web 服务器的网站也越来越多,其中有新浪、网易、腾讯等门户网站,六间房、酷6等视频分享网站,Discuz!、水木社区等知名论坛,豆瓣、YUPOO等新兴Web 2.0网站。 N…

ASP.NET vNext MVC 6 电商网站开发实战

国内第一个《微软下一代网站开发框架:ASP.NET MVC 6 新特性揭秘 》课程 微软特邀讲师 徐雷!周六晚8点YY预定:http://t.cn/RPKMLGF 微软Visual Studio 2014 即将发布!ASP.NET MVC 6有什么新特性? Web API 3.0有什么新变…

网站301重定向怎么设置

做网站优化,我们基本知道url标准化需要采用301重定向。重定向说直白点,就是通过方法将各种网络请求重新定个方向转到其它位置,也就是通常说的,网页跳转。那么如何设置和制作301重定向呢?下面列举几个比较常见的情况&am…

如何开发一个网站

希望本篇文章对入门的朋友有所帮助 那么我写这篇文章的目的也就达到了如何开发一个网站? 开发语言不是问题 今天我们就以php为基础展开。一。开发环境:我们熟悉的lamp是当前的流行架构 即 LINUXAPACHEMYSQLPHP 入门的朋友把主要精力放在php与mysql上即可。对于php需…

使用基本MVC2模式创建新闻网站

登录成功后跳转到新闻展示页面: 转载于:https://www.cnblogs.com/hzlshijie/p/10886921.html

太狗血了!分享一次网站百度收录排名异常的检查记录

事情是这样的:我的博客现在的百度收录异常惨淡!而且,我还叮嘱哪些喜欢转载我博客博文的朋友,不要转载半个月内发布的文章,因为我以为几个月来百度不收录、排名下降严重的是因为我先后更换主题-->换用360网站卫士-->文章被人…

环保网站模板源码下载 环保网站制作建设_南岸区拍摄vr全景联系方式,环保公司网站建设,看这里...

首页 > 新闻中心发布时间:2020-11-07 05:26:11 导读:信事达科技为您提供南岸区拍摄vr全景联系方式,环保公司网站建设的相关知识与详情: 首先,我们可以制作投稿,这里说明粘贴是什么,所谓的“投稿”可以在…

c语言做网站_还不懂你现在学习的编程语言能做什么?还不懂如何进阶?过来看图...

前言说七说八发现最近有同学问我编程如何进阶、学什么、能做什么之类的问题,我把我的一些回答用文章的形式编写本篇内容。本篇文章的配图标注、内容并不代表仅有;本篇仅以个人经验及当前大学(大专、本科)相关课程作对比,列出比较常规的语言发…

大型网站架构的演化

一个成熟的大型网站(如淘宝、京东等)的系统架构并不是开始设计就具备完整的高性能、高可用、安全等特性,它总是随着用户量的增加,业务功能的扩展逐渐演变完善的,在这个过程中,开发模式、技术架构、设计思想…

mouseout、mouseover和mouseleave、mouseenter的区别

mouseenter:当鼠标移入某元素时触发。 mouseleave:当鼠标移出某元素时触发。 mouseover:当鼠标移入某元素时触发,移入和移出其子元素时也会触发。 mouseout:当鼠标移出某元素时触发,移入和移出其子元素时…