个人博客网站的制作教学视频,包含了以下几块:个人博客网站功能讲解、个人博客网站jsp页面制作,个人博客网站java后台代码自动生成,个人博客网站前后台代码融合。
一、个人博客网站功能讲解
一个完整的个人博客,从选择模板,开发java后台,制作成型,本视频演示功能,具体制作方法往下看视频。
1、这个是网上下载的静态html代码,然后盖成了自己的个人博客。
2、后台管理,超级管理员账号 密码 admin 123456。
3、增删改查,模糊查询,分页,都有的,分页是数据库分页,修改自动加载存在信息。
4、图片上传、富文本编辑器,都是有的,富文本编辑器已经集成了图片上传。
5、还有日期选择器,都是有的。
6、博客分类,内容、留言,后台都可以管理。
7、热门博客,热门新闻,最新新闻,数据都是来自于后台配置。
8、上一篇,下一篇,大家都在看,都有。
9、评论,您留言过于频繁,60秒后再试吧 对于恶性评论拦截。
10、博客中心,分类来自于后台配置,配置多少显示多少,都是动态。
11、新闻中心,分页,都是数据库分页。
12、站内查询,。
13、访问数,评论数。。
14、一个不错的个人博客网站,学习,商用都可以作为模板,框架都是注解模式,开发简单,jsp都是标准的标签写法,没有一点java写法。
质量杠杠的。
15、都是标准写法,然后公共部分还提取出来,方便大家扩展自己的需求,拦截器也有,层次清晰,简单明了,是一个学习兼使用的好源码。
二、个人博客网站jsp页面制作
直播制作java的网站,如何从一个静态模板开始制作。
首先下载模板
http://www.wangzhanmoban.top/ 可以免费下载网站模板
打开就是这个静态模板,我们如何用java把他制作成一个动态的
这个是myeclipse10.0版本的java开发工具,数据库我们选用mysql
开始制作
1、首先创建一个空的项目。
2、具体软件开发配置什么的操作,可以查看其他相关视频,这里就直接演示了。
3、这个就是起步最简单的创建项目,发布项目,然后网页就可以访问了。
4、接下来我们把静态文件放到里面去。
5、我们把css文件,js文件放到一个文件夹中去(为什么要这样?项目可能涉及到多个样式,这样好分类区分,养成良好的习惯)。
6、接着把html文件放进去。
7、这个开发工具问题,可以暂时不理他。
8、这样就可以访问发布到tomcat服务器上的静态页面了。
9、这样是样式没有引用对,我们把他放到了文件加下,所以只要改相应的地方就可以,接着往下看。
10、这里介绍一个很好用的工具,也是基本工具了,就是F12这个按钮,这个每个浏览器都自带的,可以查看网页的整个属性。
11、错误是因为没有bak的,所以需要加上层级。
12、剩下的是图片,我们暂时不弄,静态文件发布到服务器就可以访问了,现在我们要把它改成java的jsp,就是html变成jsp。
13、整个网站,网站的标题,网站的导航栏,网站的底部都是可以共用的,所以我们建立了一个inc文件夹, 专门放共用的jsp文件。
14、jsp文件之间是可以互相引用的,这样,每个页面引用公共部分就行了。
15、这个tag.jsp文件,内容就是这样,基本可以固定内容,需要的话可以再往里面加,解释下。
<!-- 基本的编码,必须的-->
<%@ page language="java" pageEncoding="UTF-8"%>
<!-- 去掉jsp中标签引起的空格,影响百度seo-->
<%@ page trimDirectiveWhitespaces="true"%>
<!-- c标签,jsp最基本的,不懂可以暂时不管,就理解成必须要的-->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!-- fmt标签,也是最基本的,格式化数据用,例如把日期格式化成时间-->
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!-- 这个详细讲解下,pageContext.request.contextPath 是上下文路径,就是你服务器发布的项目的路径,有了,这个我们写jsp,就不用每个都用
../resource/front/js/lazysizes.min.js 这种写法了,因为如果哪天这个网站改名字,或者改域名,那你不是要每个文件都去改一遍,肯定不行的
这个就是提取公共路径,到时候不管网站域名改了,还是项目名称改了,他都自动对应的,你理解成用了这个自动匹配就完了
-->
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
这个就是引用公共方法
<%@ page language="java" pageEncoding="UTF-8"%>
<%@include file="inc/tag.jsp"%>
16、我们把html所有代码都拷贝过来。
17、修改了标签,需要重启下服务器(当然有方法可以不需要重启就行,这个是开发工具配置问题,有需要可以自己百度,重启下也无所谓)。
18、因为index.jsp文件不在文件夹下了,所以不需要../。
19、这样一个html变成jsp就好了,接下来改路径,ctx就是我们配置好的。
20、加上这个不管项目如何变动,他都自动找到对应的路径了。
21、我们把图片也对应的改下。
22、聪明点,不要一个个改了,用替换的方式,ctrl+f 跳出替换面板。
23、全部替换。
24、这样就全部ok啦!!!,我们看到顶上有个圆圈圈还在转,说明网页没有加载完成,说明有的地方访问不到,都可以用f12,调出强大的页面控制器。
25、这样就完全好了,刚才的是这个模板调用twitter的插件,我们网络访问不到所以一直转圈圈。
26、接着把公共部分提取出来,比如头部的。
27、像我一样,把认为是可以提取的,就把他做成公共的提取出来 <%@include file="inc/head.jsp"%> 这种方式引入。
28、还有需要把图片logo也做成公共的。
29、如果需要把这个滚动条也做成公共的,也加进去就行了,一个原则,同层级的可以放在一起(jsp中,html不同层级也可以放一起的,主要是页面不美观,个人观点)。
30、那三个就固定就行了, 后台查询了数据,一个ie个展示。
31、hotnews不要了,这个模板太复杂,我们整写基础的先用,反正后期需要的话可以再加上去。
32、faceboOk也没有,也可以删了。
33、这个操作也是f12,快速找到对应代码,是不是很有用。
34、好了,我们留这么多内容进行制作网站。
35、这样代码是不是很整洁呢,结构又清清楚楚。
36、找到这样重复的块,只需要一个,因为这些数据都是从数据库中读取出来,后台再传过来,循环展示的,所以我们只需I要一个例子,到时候遍历展示即可,
这样代码更简洁了。
37、这个是是全尺寸自适应的网站,比较漂亮了,所以有些代码是要多写一点的。
38、<%----%>这个是注释,强制注释,包裹任何想要隐藏的东西。
39、底部的foot也修正下。
40、好了,首页基本完工,接着做详情页面,详情页面就比较快了,公共都提取了,只要内容放进去就可以了。
41、把相应的公共代码放进去就可以了。
42、我们发现,右边模块是共用的,可以做成一个。
43、你看,是不是很简单了,然后把详情页修正下。
44、这个详情页面的留言,我们就把它做成匿名留言,然后管理员可以回复。
45、好了,一个博客基本成型了,接下来制作后台代码, 然后把内容输出到这个jsp页面即可,一个java的完整的博客论坛就好啦!!!!是不是很简单。
这个录制也就1个半小时。估计5个小时内就可以制作一个完整的java版本前后台博客了。下一个视频录制,我看看拼接在一起。
三、个人博客网站java后台代码自动生成
这个就是我们之前架构好的个人博客静态代码jsp。
我们就根据这个静态代码页面需要展示的内容,进行梳理,把那些信息需要做成后台增删改查的,列出来。
热点、博客文章、新闻、热门标签、友情链接
好,我们就以以上六点进行后台代码开发,借助本站工具,只需要1个小时就能搞定后台java代码开发!!!
访问http://www.javawebxx.com/index.html
1、登录,不需要注册,手机号码登录即可。
2、登录成功后,点击在线制作,需要vip。
3、操作说明:1、初学者,不太懂的人群请谨慎操作,适合有点java基础的人群,可以快速理解框架原理,各种工具类已经集成,自由搭配2、主要功能是对填入的对象生成增删改查的代码3、附带给出超级管理员登录,注销等代码(无需再配置生成)4、默认主键id,自增(oracle自动创建序列)。
4、这个需要基本的java知识,一点不懂的请考虑清楚了操作。
5、就是javabean的增删改查,然后和我们做好的静态代码配合,就是一个完整的java的前后台网站了!!
6、超级管理员是默认的,不需我们操作,我们只要管业务就行。
7、还有主键已经默认做好,也不需要关心。
8、我们先创建 热点 博客文章 新闻 热门标签 友情链接 这个5个对象,既javaBean 又名pojo。
9、如我这样操作,这些都是基本的java概念,应该都懂的。
10、这样5个对象就好了,然后就是把这个对象写入到网站里面,当然,也可以直接写到网站中,我这里为了演示方便大家理解,网站就是一个javaBean配置器!!!
11、数据库选择mysql ,框架如果没要求的话就默认 springmvc。
12、可以选择后台样式。
13、开发工具默认myeclipse10.0。
14、项目名称:个人博客 ,就是你?飧鱿钅拷惺裁?
15、项目代号 :javawebxx_blog ,就是你的项目的开发工具中的名称,自己随便取。
16、注释对应这个注释。
17、登录注册,这里的登录注册就是你有多个用户的时候选择即可,常规就是默认,也可以选不是。
18、对应javaBean名称。
19、private Long id; //主键-自增(程序自动生成,请勿再加,只需填写业务字段即可) 这个id已经有了,不需要配置跳过。
20、字段名称就是title,备注就是这个字段的含义。
21、字段就是input输入框就可以了,然后,需不需要验证,是否需要添加查询项。
22、点击添加属性字段,就是一个个加上去了。
23、可以自定义下啦选择 提醒!!!备注需要注意格式必须是:名称-下拉值1@下拉值2[如:性别-男@女]。
就是按照这种格式自动分割, 状态-1@0。
24、然后添加一个bean。
25、这里有图片选择器。
26、内容可以选择富文本编辑器!也可以input,也可以textarea,至于什么是富文本编辑器,自己百度下把。
27、日期选择有年月日,时分秒,都有。
28、标签少定义了一个,需要点击跳转的链接。
29、这样5个javaBean就好了。
30、点击保存,px多添加了一个,删除。
31、保存好后,点击开始制作。
32、制作中...预计5分钟。
33、请5分钟后刷新页面查看下载 ,5分钟后下载源代码即可。
四、个人博客网站前后台代码融合
1、等待5分钟制作好以后。
2、下载。
3、分两部分,一部分是源码,还有一个是数据库,数据库是标准的,sql创建语句,可以放到任意数据库连接工具中执行即可。
create table t_admin(
id int primary key auto_increment comment '主键',
username varchar(100) comment '超级管理员账号',
password varchar(100) comment '超级管理员密码'
) comment '超级管理员';
insert into t_admin(username,password) values('admin','123456');
create table t_redian(
id int primary key auto_increment comment '主键',
title varchar(100) comment '标题',
link varchar(100) comment '地址',
status int comment '状态',
px double comment '排序'
) comment '热点';
create table t_xinwen(
id int primary key auto_increment comment '主键',
title varchar(100) comment '标题',
headPic varchar(100) comment '头部图片',
content text comment '内容',
showDate datetime comment '显示日期',
status int comment '状态',
px double comment '排序'
) comment '新闻';
create table t_blog(
id int primary key auto_increment comment '主键',
title varchar(100) comment '标题',
headPic varchar(100) comment '头部图片',
content text comment '内容',
showDate datetime comment '显示日期',
status int comment '状态',
px double comment '排序'
) comment '博客文章';
create table t_biaoqian(
id int primary key auto_increment comment '主键',
tagName varchar(100) comment '标签名称',
link varchar(100) comment '跳转链接'
) comment '标签';
create table t_youqing(
id int primary key auto_increment comment '主键',
title varchar(100) comment '链接名称',
link varchar(100) comment '跳转链接'
) comment '友情链接';
4、可以用navicat导入,其他没试过,语句是标准的范式,任何开发工具都可以执行的。
5、这里用导入navicat链接工具给大家看下。
6、新建一个数据库。
7、然后。
8、按照视频例子,就导入成功了,直接执行一遍也可以,都一样的。
9、接下来导入项目。
10、导入项目有两种方式,1、拷贝复制黏贴覆盖,2、大家都会的工具中导入项目
11、我们首先备份之前做好的jsp页面。
12、找到下载的文件源码。
13、等验证完成。
14、这个就是博客文章的后台增删改查,然后我们把之前做好的jsp拷贝进去。
15、按照我视频的步骤,新建一个front,然后拷贝jsp到里面。
16、js,图片,css文件还是放到resource下面。
17、启动tomcat,然后就可以访问了!!!
18、这个相对路径 /javawebxx_blog/adminLogin/login.html。
19、登录后可以管理,这个就是后台全部的增删改查,是不是很快!!!,一个小时搞定了。
20、然后我们录入些测试数据,然后进行与jsp的融合。
21、这个富文本已经融合了图片上传,方便大家操作,这个就跟csdn那个博客文章一样全!!!
22、数据添加完,开始制作前台。
23、按照我的操作,具体含义,这里不做解释了,不懂的可以百度,应该走到这一步的同学这点基础知识应该都明白的。
24、少一点,我们先看下效果。
25、热点搞定。
26、c标签什么的操作这个是必须要会的,这里不解释。
27、重启下tomcat看看效果。
28、怎么样,基本就完工了,然后把新闻和博客也做一下。
29、c标签有时候需要重启。
30、创作的时候少了两个字段,我们也可以补上。
31、少了博客简单描述内容,还有一个博客分类,我们立马补上。
32、重启下我们试一下效果。
33、报错是desc是mysql关键词,不能用。
34、然后头部的三块,我们就用最新的三个博客文章把。
35、好了,左边的就ok,然后就是右边的公共部分。
36、广告位可以不管。
37、那我们博客处还少一个是否推荐。
38、重启下把推荐信息更新下。
39、首页全部信息遍历进去了,现在就是博客和新闻的列表页面,因为之前没有制作,我们就现在制作。
40、我们可以把首页的信息修改下就是想请页面了。
41、分页都是数据库分页,我们可以参考后台自动生成的代码如何分页的,拷贝一下即可。
42、这个分页标签和后台是共用的,css样式有冲突,那我们拷贝一份,修改下css。
43、样式我已经跳好了, 这里就不演示了,比较费时。
44、数据库分页就好了。
45、然后最后一个就是详情页面了。
46、好了,基本完成了,还有评论,访问次数显示,查询,分类博客显示,这里就不演示了,做好了直接看成品吧,代码也是和之前一样修整下即可。谢谢观看。
注:非会员或会员等级不够可以通过源码币下载,源码币获取方式:源码币获取方式
个人博客_mysql_ssh_myeclipse_java源码下载下载