编写个人博客网站的一次经历

news/2024/5/15 22:27:14/文章来源:https://blog.csdn.net/qq_38089964/article/details/86523301

我是一直学习java后端开发的,于是想用所学知识写一个网站,记录自己的一些学习知识点或者生活点滴,注意是写,不是搭建,网上有很多的搭建网站教程,界面也多好看,但是为了巩固自己的知识,还是自己写比较好,也就是一个代码一个代码敲上去的。网站地址

效果图:

前端是做成了响应式,移动端:

文章详情页:

既然是web项目,那就采用前后端分离式开发,毕竟是当今主流,现在没谁还用jsp开发啦。

前后端开发的好处就是前后端分开开发,各自不影响,我是从后端开始的,毕竟是学习java后端的人,首先是设计表,想了想自己的需求:以文章为中心,写文章,看文章,根据文章标签查询,评论文章,既然有了评论,那就要用户,有用户,就要注册、登录,还有就是网站陌生人留言了。

综合上面的需求,也就是六个表:

1.文章分类表:所有的文章标签

2.文章表:保存文章

3.用户表:保存用户信息

4.评论表:保存用户对文章的评论

5.留言表:保存陌生人留言

6.网站信息表:相当于参数表,用来展示网站信息(关于网站、浏览量、管理员密码之类的)

设计好数据库表之后,就是编写crud的时候啦,搭建一个SSM项目,用mybatis铺好了dao层的crud,以后就是业务层的事情了,上面的需求来看,业务其实不多,个人网站也用不来了那么多,我在写的时候把所有表对应的crud都写好了,毕竟就是后端也就多几行代码的事情,但是想了下,前端要是多个接口那得多写多少代码,比如博客如果还要修改的话,那又得写个界面,还有留言的管理,评论管理,我写这些没用啊,我是开发人员,直接在数据库里面删除、修改不是方便得多吗,最后业务就只有增加和查找。

上面的需求只有写文章麻烦点,因为文字比较多,选用blob类型存储,在插入文章的时候把具体文字转成字节数组,存到数据库,查的时候反向转成String返给前端。这里插入的内容就是html字符串了,前端用的是百度富文本编辑器,编辑器编辑的内容提交到后台是以html字符串的形式,那么后端就直接接收,转字节存数据库;前端通过ajax获取的文章信息同样也是html字符串,那么只需要将一个<div>的内容替换成这个数据就好了,内容、格式都是以当初写文章的时候为准,前端只需要创建一个空div来承接这个结果就好了。

用户评论也是如此,将后台查询的结果通过js操作dom节点拼接到文章的下面就好,这个具体的格式就得自己设计了,我用的是bootsrap组件来排版的,效果还行。

有几个细节:

分页查询博客列表:像csdn一样,有一个博客列表,显示标题,开头一些描述,编写时间,访问量,评论数之类的,这个开头的描述需要处理一下,前后端处理都行,比如后端传是个文章的信息来,前端for循环遍历追加到div中,同时将一个文章的第一段文字截取出来展示,其他省去。我是后端处理,考虑到一个文章的内容比较多,前端如果不用传过来也是耗大量资源,加之是一个列表,会浪费很大部分网络资源的。

陌生人评论:这里是每个人都能评论,要考虑加一个验证,不然有无聊的人去用脚本瞎提交很多无意义的数据,那数据库不就炸了吗。还有就是后台需要过滤掉js脚本内容(这个简单,正则替换下就行),因为前端是直接把后端传回的留言拼接上去的,所以会执行一些script。

其他的就是js一点击一变换,比如点击博客;js获取当前选中标签、获取当前页码,然后调用后端接口,将结果设置到中间的div中。

写博客的话就引用一个富文本编辑器,编辑器会把内容转成html字符串:比如

会转成:

那么前端获取文章的时候也就是得到这个字符串。另外还支持附件,图片各种功能,也会转换成<img/>等等。

github地址:https://github.com/1510460325/blog2

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

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

相关文章

[转]安全知识3:ASP网站漏洞

以下内容转自 ASP网站漏洞解析及黑客入侵防范方法 如何更好的达到防范黑客攻击&#xff0c;本人提一下个人意见&#xff01;第一&#xff0c;免费程序不要真的就免费用&#xff0c;既然你可以共享原码&#xff0c;那么攻击者一样可以分析代码。如果在细节上注意防范&#xff0c…

Docker部署Flask网站

最近练练手&#xff0c;防止忘了&#xff0c;在docker上部署了下Flask网站。先单步进行&#xff0c;后面可以通过docker compose直接部署。 1. docker运行mysql&#xff0c;数据持久化到宿主机本地硬盘 docker run --name mysql-flask -d -p 3306:3306 -v /home/mysql/conf:/…

微信公众平台开发详解——由浅入深(微网站、LBS云、Api接口调用、服务号高级接口)

微信公众平台开发详解——由浅入深&#xff08;微网站、LBS云、Api接口调用、服务号高级接口&#xff09; 分享一套微信公众平台官方代码教程&#xff0c;由易到难&#xff0c;深入浅出的讲解微信公众平台各种常见功能的开发。 课程内容包括&#xff1a; Api接口调用 lbs应用…

网站性能

一、不同角度的网站性能 普通用户认为的网站性能 网站性能对于普通用户来说&#xff0c;最直接的体现就是响应时间。用户在浏览器上直观感受到的网站响应速度&#xff0c;即从客户端发送请求&#xff0c;到服务器返回响应内容的时间。 做为网站开发人员来说&#xff0c;网站性能…

网站埋点(百度统计)

网站埋点&#xff0c;看数据分析&#xff0c;可以直接用百度统计&#xff0c;功能非常全&#xff0c;自己重新开发一个的话&#xff0c;费时费力&#xff0c;没必要。 https://tongji.baidu.com/web/welcome/basic demo演示 使用教程 1、注册登录 2、登录后新增你的网站 …

CTF Crypto/MISC 在线工具网站

2020.4.2 增加了新佛曰的网站 2020.4.6 添加了Linux系统调用网站 2020.5.25 增加了base58的编码网站&#xff0c;跳舞小人密码&#xff0c;alphabet minimoys密码网站&#xff0c;JS混淆解密网站 在线解码 Unicode&#xff08;HTML&#xff09;编码解码&#xff1a;http://www…

houseoforange_hitcon_2016(House of orange, unsorted bin attack,FSOP)

目录 题目分析利用原理house of orangeFSOP 漏洞利用Exp 题目分析 只有添加&#xff0c;显示&#xff0c;编辑三个功能&#xff0c;没有删除 添加函数&#xff0c;最多只能添加四次&#xff0c;每次添加会依次执行malloc(0x10),malloc(name_size),calloc(8),name_size最大为8 H…

javabean+servlet+JSP页面做购物网站 (附效果图+源码)

一个简单的jsp购物网站 概要需求用到的技术效果图登录页登陆结果购物页消费记录页管理用户信息和商品信息数据库格式 踩过的坑jdbc进行数据库操作java动作指令结合jsp脚本jdbc操作数据库查某个变量源码 概要 复习一下学校里学的javabean&#xff0c;写了个简单的购物网站&…

用asp.net写的一个购物网站

文章目录 一、数据库设计二、登录注册三、功能说明以及运行1.首页2.商品分类3.热门零食4.推荐零食5.商品详情页6.我的购物车7.立即购买8.提交订单 总结 一、数据库设计 二、登录注册 1.登录界面 2.注册界面 首先先在数据库表users中插入几条数据&#xff0c;表示这是已经注册…

用前端写的一个网站

文章目录 一、网站首页1.导航栏2.轮播图3.网格系统 二、热门人物三、热门推荐四、国产动漫五、热血日漫六、个人资料设置七、注册登录总结 一、网站首页 1.导航栏 采用了bootstrap导航条组建。用超链接实现跳转。并同时使该网页对应的导航条处于被选中的状态。当鼠标悬停放在该…

基于ASP.Net写的一个购物网站

网站运行录像 在这里 链接&#xff1a;https://pan.baidu.com/s/1NaFNKnQ3UEorasadRf7EIA 提取码&#xff1a;1i6v 复制这段内容后打开百度网盘手机App&#xff0c;操作更方便哦 可以下载观看。 本网站前端利用了如下技术&a…

springboot实现基本购物网站

本项目部分页面来自天天生鲜项目(原项目使用django编写),本项目中所用到的框架: spring boot mybatis jpa bootstrap redis freemaker 实现注册及登录界面: 用户名需满足:非空&#xff0c;长度2-20位. 密码需满足:为6-20位字母、数字的组合. 卖家与买家信息使用不同的数据…

HTML+CSS简单应用实例——购物网站的制作(一)

HTMLCSS简单应用实例——购物网站的制作&#xff08;一&#xff09; 这是一个用CSS、HTML、JS制作的简单的购物网站&#xff0c;这篇文章是主页&#xff0c;在后面文章中依次有登录页、商品页、客服页面等。有很多不足之处&#xff0c;希望大家能给我指出来。 先看一下效果图…

HTML+CSS简单应用实例——购物网站的制作(二)注册页面

HTMLCSS简单应用实例——购物网站的制作&#xff08;二&#xff09;注册页面 接上一篇文章&#xff0c;本片文章是注册页面。 下面是效果图&#xff1a; 分析&#xff1a;上方欢迎注册是DIV,下面是表单&#xff0c;点击登录按钮会出现注册成功提示。下方为脚本&#xff0c;同…

HTML+CSS简单应用实例——购物网站的制作(三)

HTMLCSS简单应用实例——购物网站的制作&#xff08;三&#xff09; 本页面是商品页面。 下面是效果图&#xff1a; 分析&#xff1a;上方大牌女装为DIV&#xff0c;下面是一个滚动图&#xff0c;年度爆款限时五折是table&#xff0c;今日热门活动也是一个大table&#xff…

HTML+CSS简单应用实例——购物网站的制作(四)

HTMLCSS简单应用实例——购物网站的制作&#xff08;四&#xff09; 本页面是第二个商品页面&#xff0c;做了个限时抢购的页面。 下面是效果图&#xff1a; 分析&#xff1a;上方限时抢购和12点准时开抢是两个DIV&#xff0c;下面每个商品是一个单独的DIV,总体是一个大的D…

HTML+CSS简单应用实例——购物网站的制作(五)

HTMLCSS简单应用实例——购物网站的制作&#xff08;五&#xff09; 本页面是第三个商品页面。 下面是效果图&#xff1a; 分析&#xff1a;上方淘淘超市是一个DIV&#xff0c;下面超值套装每个商品是一个DIV&#xff0c;美容护肤是一个大表格。下面是脚本。 具体代码&…

HTML+CSS简单应用实例——购物网站的制作(六)

HTMLCSS简单应用实例——购物网站的制作&#xff08;六&#xff09; 本页面是一个反馈问卷页面。 效果图&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>淘淘网问卷</title><s…

HTML+CSS简单应用实例——购物网站的制作(七)

HTMLCSS简单应用实例——购物网站的制作&#xff08;七&#xff09; 本页面是客服页面。 效果图&#xff1a; 分析&#xff1a;上方是一个DIV&#xff0c;下面是两个表格&#xff0c;表格里有列表。 具体代码&#xff1a; <!DOCTYPE html> <html><head>&…

专访AJAX发明人:AJAX并不适合所有网站

他从未想到AJAX可以获得这么大的成功&#xff0c;但他也表示并非所有的网站都适合用AJAX技术。 新浪科技讯 2007年3月2日&#xff0c;中国互联网协会与Google(谷歌)公司联合主办“Internet 互联网世纪论坛”&#xff0c;AJAX技术的发明人Jesse James Garrett在会议期间接受新浪…