您的位置: 主页 > 业务领域 > 栏目分类1 >
实学:Java开发自己的博客系统-第二十七篇(后台添加栏目功能-1)

  这一节开始制作添加栏目功能。栏目是每篇文章属于的一个分类,我们在前面的后台侧栏上,已经预留了程序入口,具体位置是sidebar.ftl中的分类目录。原先是一个链接到#的功能,现在来改动。

  把该处的#改成/catalog。也就是说,如果分类栏目这个地方被点击,那么就会让我们的页面往/catalog跳转。改动后的sidebar.ftl整体如下:

  这个控制器返回了editCatalog的字符串,也就是说我们需要给它做一个这个名字的模板,用作给用户的展示。

  工程中,templates目录下,新增一个文件,全名editCatalog.ftl。里面添加内容如下:

  这个初始的内容我基本上都是从newArticle.ftl中搬运过来的,删去了编辑文章的功能而已。

  做过这么一次,我们就发现里面有两个可以重构的地方,都属于跟sidebar相关的,一个是sidebar的开关显示,另外一个是sidebar的开关脚本。

  3、改动newArticle.ftl,使用复用的模板文件和脚本,最后内容如下:

  不要忘记我们本来是做编辑栏目的页面。在已经存在的添加模板上,我们细化,需要添加页面功能说明,需要添加一个按钮用来增加新的栏目等等。

  第一步,添加功能说明,让用户知道自己目前在哪个页面。只要在class=card-header的元素里面加入

  然后我们在编辑分类栏目下方,加入一个按钮,用来让用户建立新的栏目,这一部分的用户界面,我们在class=card-body的元素里面做。完成后,这个元素整体变成:

  新增栏目按钮的功能,我们希望它被点击后,在它的下方显示一个输入栏,让用户输入栏目名称。

  1、给按钮本身加上onclick时间处理代码的调用,同时加上一个隐藏的input

  2、工程javascript目录下,新增文件,全名catalog.js。里面内容用来把原先的隐藏属性改成不隐藏而已:

  显然,不是很好看。按钮跟输入栏挨得太近,而且太长了。修整一下,只要给input加上上方的间距,让后约束它的宽度即可:

  我们已经在输入栏中提示用户,输入的内容确认是靠回车键,所以,需要实现回车键的侦听。

  这意思是我们的input通过它的id绑定在页面初始化的时候,就绑定了方法,方法会查看自身的键盘输入(只有焦点是input的时候,这个方法才会被调用),发现是回车(13),就会打印出hello world的字眼(调试窗口中)。

  运行起来看看,点出input,当焦点是它的时候,回车,大键盘一次,小键盘一次,如图五结果:

  后面就是完善这个脚本,我们需要把用户的输入提交给服务器,具体代码更改成如下:

  也就是说,用户回车后,我们会通过url: /api/addcatalog把数据提交给服务器。

  对于分类栏目,我们马上想到的是必须有栏目名字,可能还要加一个创建时间备用。马上动手:

  工程上,在Model文件夹中创建一个新的java文件,全名Catalog.java。里面内容如下:

  工程中,API文件夹下新建java文件,全名CatalogApi.java,里面内容如下:

  暂时我们使用return null来返回,这里只是做个框架,等会回来实现具体的代码。

  工程中,Database目录下新建java文件(或者右键直接建立所谓的interface文件),里面内容如下:

  好,准备工作完成。总结一下,因为有新的数据模型在后台出现。所以我们做了几件事情:

  以后只要是新建一个数据类型,如果跟数据库绑定的,我们这里要创建的4个文件都是套路化的。其中只是改改名字,所以在公司项目中,都有可能会使用工具直接生成这些框架文件。

  总结就这么多。这一节也码了很多字了,栏目功能跟原来的article还不大一样,我们必须查询栏目名字是否已经在数据库中存在,然后决定是否真的添加,这个对我们现在来说是新功能,那就下一节再讲。实学:Java开发自己的博客系统-第二十七篇(后台添加栏目功能-1)



Copyright 2000 - 2020 500app下载-500彩票app下载-500官网下载 .All Right Reserved 沪公网安备 44030002001001号

扫描二维码分享到微信

在线咨询
联系电话

400-858-5421