Servlet从了解到放弃(06)

解决1.5改1.7 修改不成功方案: 复制以下内容到pom.xml

<properties>
    <!-- 设置 JDK 版本为 1.8 -->
    <maven.compiler.target>1.8</maven.compiler.target>
    <maven.compiler.source>1.8</maven.compiler.source>
    <!-- 设置编码为 UTF-8 -->
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <maven.compiler.encoding>UTF-8</maven.compiler.encoding>
</properties>

如果改动了pom.xml工程没有反映,需要在工程名上右键->Maven->UpdateProject 更新maven工程

导入老师工程:

工程Project Explorer面板 空白处右键Import->Import ->General->Existing Projects into…-> 点击Browse… 选择工程文件夹

看工程是否需要修改jdk版本,在工程上右键->build Path->Config…->Libraries选项卡 看jre system libraries是否保存 如果报错 双击 勾选 workspace default…

检查是否需要重新关联Tomcat

jdbc.properties 配置文件中的数据库密码

1. 实现发布作品功能

在home.html中 给发布作品超链接添加herf=“ShowSendServlet”

创建ShowSendServlet, 通过THUtils 工具类 显示 send.html页面

在ShowSendServlet中 创建TagDao 并调用里面的findAll方法 把获取到的集合 放到Context中 然后在send.html页面中把容器中的标签信息 显示到选择标签的位置

创建SendServlet,留下doPost方法,方法中设置字符集并获取传递过来的参数

把上传的文件保存到tomcat的webapps目录下的imgs文件夹里面

上传文件注意事项:

servers面板中的Tomcat 里面单选的选项一定要在中间第二个 ,这个设置的目的是将Tomcat服务器部署工程的路径设置在Tomcat安装包里面

因为浏览器中的图片并不能访问磁盘任意位置,必须把图片放到Tomcat服务器指定的路径

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KTwoOG0J-1593008187323)(C:\Users\pc\AppData\Roaming\Typora\typora-user-images\image-20200624114549375.png)]

文件保存完之后 把得到的文件路径以及接收到的作品相关信息保存到数据库作品表中

在vrd数据里面创建作品表product 在终端中执行以下代码

use vrd;

create table product(id int primary key auto_increment,

title varchar(50),author varchar(20),intro text(100),viewCount int,likeCount int,created bigint,path varchar(255),tagId int)charset=utf8;

创建Product实体类属性有(id,title,author,intro String ,viewCount,likeCount,created long,path,tagId)

创建ProductDao 里面什么都不写

在SendServlet里面把接收到的参数封装到Product实体类中 创建ProductDao并调用save方法 把封装的对象传递进去, 最后重定向到HomeServlet

首页查询及显示作品

在HomeServlet里面 创建ProductDao 调用findAll方法 查询所有作品信息,得到装着Product对象的List集合,并且把list集合放进Context容器中

在home.html页面中处理显示

轮播图实现方式: 百度中搜索 Bootstrap 找到菜鸟教程 里面左侧边栏找到轮播 , 使用第二种带标题的代码 复制到工程中改图片路径即可

瀑布流:

在页面中准备一个大的div class为grid 里面添加div class为grid-item 里面添加显示的图片

添加css样式代码:

.grid-item{

width: 200px;

margin: 0 10px 10px 0;

}

添加引入瀑布流框架的代码

<!-- 引入瀑布流js文件 -->

<script type="text/javascript"

src="js/masonry.pkgd.min.js"></script>

添加js代码

//初始化瀑布流 设置选取图片的选择器 和 图片所占宽度

       $(".grid").masonry({

        itemSelector:".grid-item",

        columnWidth:210

       });

        //调用布局方法

        $(".grid").masonry("layout");

瀑布流解决图片层叠问题:

引入图片加载完成事件的js文件

<script type="text/javascript"

src="js/imagesloaded.pkgd.js"></script>

把调整布局的代码放到页面加载完成时

//在图片加载完之后再去调整布局

$(".grid").imagesLoaded().progress(function(){

//调用布局方法

$(".grid").masonry("layout");

});