目录

准备工作

1.创建项目

2.引入依赖

3.创建必要目录

4.编写代码

5/6.打包和部署

7.验证程序

正式开始

V（页面显示）

M（操作数据存储逻辑）

数据库建表

 封装数据库

创建实体类

封装对数据库的增删查改

C（处理请求之后的逻辑）

博客列表页

博客详情页

 博客登录页

 博客编辑页

注销功能

 删除博客

 部署到linux云服务器上

给服务器准备依赖

微调java代码

将项目部署到云服务器上

---

 

准备工作

1.创建项目

2.引入依赖

3.创建必要目录

4.编写代码

随便写点方便测试

5/6.打包和部署

利用smartTomcat一键打包部署

7.验证程序

正式开始

我们使用MVC框架模式，采用模型(Model)-视图(View)-控制器(controller)的方法把业务逻辑、数据与界面显示分离。

V（页面显示）

把我们之前写的前端代码直接拷贝到webapp目录下

M（操作数据存储逻辑）

数据库建表

我们使用数据库来存储相关信息。

写好上述代码，拷贝到mysql中，做出查询

 封装数据库

创建实体类

一个User类，定义字段后，直接一键生成get/set

同理bolg类也一样~

封装对数据库的增删查改

对于blogDao类方法的实现：

对于userDao类方法实现：

C（处理请求之后的逻辑）

博客列表页

①约定前后端接口

②编写后端代码：

 ③使用postman发送get请求测试下：

可预期好像与我们的有点偏差，这个发布时间不太对劲，我们需要的是xxxx-xx-xx格式，他却给我们返回了一个毫秒级的时间戳，修改一下 。直接在blog类中的获取时间时按照格式返回一个字符串类型。

 ④编写前端代码：

修改前端blog_list.html代码，可以对照着这些写

 似乎有个小问题，强制刷新或第一次进入这个页面时，会先把我们之前写死的代码先拷贝到这个页面，最后再和我们数据库中的数据来替换。

解决办法：直接删掉或者注释掉~

还有点小问题，我们的博客顺序不应该这样排序，应该是我们最新写的博客放在最上面，这个问题也很好解决，我们查询时为这些博客排个序就ok了。

重新插入一条数据测试下：

博客详情页

瞅一眼详情页长啥样（emm，样式好像失效了，大概是我重命名时导致引入的css名字被修改了，后面已修改）：

通过这个能获取到博客id号。

①约定前后段交互接口

②编写后端代码

③使用posmant构造请求测试

 优化：我们发现博客列表页和博客详情页的请求似乎只多了个查询字符串，那么可以据此判定：

直接将二者合并了 ，但是需要修改一下，因为我们将servlet-path修改成了blog。

 合起来重新使用postman测试：

测试发现完美适应了。

④编写前端代码

前端js怎么获取博客id了，其实有个专门的操作

在控制台输入location.search直接就会返回查询的字符串，连问号都有，都不需要我们再重新连接

好像成功了，但又没有完全成功

 还记得我们之前写的博客编辑页吗，当时我们引入了Markdown编辑，但是这里并没有显示出那些Markdown渲染后的样式~

插入一条数据测试下：

这时我们就任需要editor.md库了，这个库不仅给我们提供了Markdown编辑，也提供了Markdown渲染~

 

修改一下背景透明度`

 博客登录页

①约定前后端交互

②编写前端代码

 

③编写后端代码

 看起来好了是吧，但其实这里还有坑，遇到是纯英文还好，但是一旦遇到中文，直接凉凉

我们打印一下我们所获取到的数据：

发现张三是乱码。

看我们写的前端代码，前端页面已经告诉了浏览器汉字是utf8，因此浏览器就会默认使用utf8编码

 但servlet并不是使用utf8来解析的，因此就出现了乱码。我们更改一下解析编码

④完善博客列表页、详情页

当我们访问博客列表页或者详情页时，需要判断用户是否处于登录状态，如果未登录，会跳转到登录界面。

通过ajax访问服务器，获取登录状态~

1》约定前后段交互

2》编写后端代码

为了方便，将前面为user的初始数据更改一下：

3》编写前端代码

给博客列表页和博客详情页都加上这个函数：

4》测试

当我们登录时，左边的个人信息要与之匹配

这个其实非常简单我们先前的登录页面的前端代码就能直接使用：

博客列表页和博客详情页都需要修改一下~

但是博客详情页还是不行，我们应该让博客详情也显示的是作者信息，而非登录用户的信息

这里可就不能向上面一样了，没有多余的代码让我们继续偷懒，但我们还是能获取到博客id的因此还是挺简单的（在博客详情页的查询字符串中有博客id）：

①约定前后端交互接口

②编写后端代码

③使用postman测试

④编写前端代码

大功告成了。

 博客编辑页

预期：点击发布文章后能存储到数据库中，并且会跳转到博客列表页且能访问到刚才写的博客~

①约定前后端交互接口

②编写后端代码

③postman测试（emm，没有登录还不好测试这步就省了）

④编写前端代码

emm当我们打开博客编辑页时发现缩水了，因为之前editor的父级元素是blog-edit-container，现在套了一层form表单后，父级元素变为了form，高度也就和form一样高了。

解决办法：

注销功能

预期效果：按下注销后退出登录并跳转至登录页面。

①约定前后端交互

②编写后端代码

③postman测试（同样没有登录不好测试）

④编写前端代码

只需修改这一个，其他几个界面也是要改这个的

测试：

 删除博客

删除博客肯定不能随便删，只有当自己是作者时才能删除所选的博客。

我们在这个函数里获取了用户信息

同时在这个函数里又获取到了作者信息：

因此这就很简单了，我们直接在博客详情页里面判断作者是否就是用户，如果是就在导航栏构造一个删除按钮，不是就没有~

但是当我们调用者两个函数时，我们是不确定哪个先执行的，因为ajax是异步执行，所以可能会导致信息匹配失败。

因此我们做出一个规定：

我们希望先发送登录用户的请求后发送获取博客作者信息的请求~

 

404是很正常的我们还没写后端代码呢~

①约定前后端交互（这个前端我们差不多已经约定好了）

②编写后端代码

③测试

所有的功能都已经实现了，接下来就是部署到云服务器上~

 部署到linux云服务器上

给服务器准备依赖

我们买的云服务器上的mysql是“空的”，也不算完全空，但对我们没用，因此要在云服务器上也新建库和表

打开我们先前写的db.sql

复制到linux上~

 

微调java代码

将项目部署到云服务器上

打包：

 

 

新建连接，在linux上找到webapps目录

 

等待传输完毕，就可以使用外网ip访问我们所写的网站了（为了安全，我还是不漏外网ip了）

最后如果在打包时修改了下名字，记得改路径~（搁着给我自己埋下了找了几小时的错）

完~