搭建个人博客中遇到的问题及解决方法

前一阵子学完了Spring,SpringMVC,Mybatis,于是就想着做个小项目练练手,
思来想去还是觉得个人博客,一来做好之后可以用来记录些心得体会,二来之前闲置的云服务器也可以派上用场,下面就记录了自己碰到的一些困难和解决方法

既然是写个人博客,首先要考虑的肯定是使用哪个富文本编辑器,开始是想用百度的UEditor 的,毕竟有中文文档,肯定要好弄一些,后来看了下,还是觉得UEditor 不够美观,于是乎就使用了CKEditor,界面如下

然后第一只拦路虎就出现了,我该怎么实现上传图片,并将其显示在编辑框里呢?

按照官方文档的解释,这个时候我使用图像按钮只能实现url上传,不能本地上传,十分的麻烦
这里写图片描述

于是乎我就去百度本地上传的方法,然后,在经过配置文件上传地址,后台接受并将图片输出到指定文件等一系列操作,然后再输出一段js代码进行回显(以下即为输出的代码段),终于实现了上传………..

PrintWriter out = response.getWriter();
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
            + ",'" + imageContextPath + "',''" + ")");
out.println("</script>");
out.flush();
out.close();

但是!!!!只是可以上传,不能回显至编辑框,浏览器控制台打印服务器不正常响应,这段js代码未能正确执行,然后我就郁闷了,涉及到CKEditor内部的代码,我就真没辙了

好在天无绝人之路,我惊讶发现CKEditor有个配套的图片上传小框架….CKFinder
只要集成CKEditor和CKFinder很轻松的就能实现文件上传,回显等。

首先,官网下载CKFinder,我使用的版本是 ckfinder_java_2.6.2.1
地址:https://ckeditor.com/ckeditor-4/download/#ckfinder
注意选择Java版的
这里写图片描述
解压之后如下
这里写图片描述

再将 CKFinderJava-2.6.2.1.war 解压后进入 ckfinder 文件夹
这里写图片描述
将 ckfinder 文件夹粘贴至 webapp 下的 js 目录(自己建的)
由于之前CKEditor已经配置完成,所以引入ckfinder.js就OK

<script src="${pageContext.request.contextPath}/js/ckfinder/ckfinder.js"></script>

然后就是集成,按照官方文档的说法,有三种集成方式
我选择的是手动集成方式,当然你也可以选择自动集成,在CKEditor文件夹中
找到config.js,添加如下代码段
注意,这里的 js/ckfinder/ckfinder.htm l中的js是我的ckfinder所放的目录,注意修改

    //上传设置
    config.filebrowserBrowseUrl = 'js/ckfinder/ckfinder.html';
    config.filebrowserImageBrowseUrl = 'js/ckfinder/ckfinder.html?type=Images';
    config.filebrowserFlashBrowseUrl = 'js/ckfinder/ckfinder.html?type=Flash';
    config.filebrowserUploadUrl = 'js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
    config.filebrowserImageUploadUrl = 'js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
    config.filebrowserFlashUploadUrl = 'js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';

这里写图片描述
如果成功,则在URL栏的右侧会出现浏览服务器按钮,当然,现在还没配置完,打不开服务器

然后将CKFinderJava-2.6.2.1.war解压后得到的config.xml拷贝到WEB-INF目录下,
修改名字为 ckfinder.xml

这里写图片描述
这里写图片描述

然后扎web.xml 最后加上如下代码

<!-- ckfinder -->
    <servlet>
        <servlet-name>ConnectorServlet</servlet-name>
        <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
        <init-param>
            <description>
                Path to configuration file can be relative path inside application,
                absolute path on local file system or UNC path.
            </description>
            <param-name>XMLConfig</param-name>
            <!--注意,这里要修改路径 -->
            <param-value>/WEB-INF/ckfinder.xml</param-value>
        </init-param>
        <init-param>
            <param-name>debug</param-name>
            <param-value>false</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>ConnectorServlet</servlet-name>
        <url-pattern>
            <!--注意,这里要修改路径 -->
            /js/ckfinder/core/connector/java/connector.java
        </url-pattern>
    </servlet-mapping>

还需要引入ckfinder需要的jar包,jar包在CKFinderJava-2.6.2.1.war解压后的WEB-INF/lib目录下,根据需要引入相关的jar,CKFinder-2.6.2.1.jar是必须的,上传文件需要commons-fileupload-1.2.2.jar,和commons-10-2.0.jar,图片缩放需要thumbnailator-0.4.8.jar,其他jar包根据需要自行引入即可。

然后将ckfinder.xml文件的15行修改,否则不能浏览文件

<enabled>true</enabled>

完成后重启服务器,输入地址
点击图像的浏览服务器之后,就会出现服务器页面
这里写图片描述

这样就能上传图片,并从服务器中获取图片了。
默认上传的文件被放在web容器webapps\ROOT\CKFinderJava\userfiles

如果想更改路径,打开 ckfinder.xml,修改21行的

<baseURL>Blog/picture/CKFinderJava/userfiles/</baseURL>

至此,完成图片上传和回显
参考博客:https://blog.csdn.net/frankcheng5143/article/details/50907013

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Spring Boot 是一种快速构建企业级应用的框架。在建立个人博客系统时,它可以帮助开发人员快速构建博客系统的后端架构,并使用其内置的自动配置功能为博客系统提供各种功能,如数据持久化、安全认证、文件上传和下载等。 使用 Spring Boot 开发个人博客系统可以解决以下问题: 1. 快速构建后端架构:Spring Boot 内置了许多常用的框架和库,可以帮助开发人员快速构建出博客系统的后端架构。 2. 自动配置功能:Spring Boot 可以自动配置许多常用的功能,如数据库连接、安全认证、文件上传下载等,使开发人员可以专注于开发业务逻辑。 3. 简化部署流程:Spring Boot 可以使用内置的 tomcat 服务器进行部署,简化了部署流程。 4. 提供企业级应用所需的功能:Spring Boot 提供了许多企业级应用所需的功能,如安全认证、数据持久化等,可以使个人博客系统更加完善。 ### 回答2: Spring Boot 个人博客系统是一款基于Spring Boot框架开发的博客系统,它能够解决以下问题: 1. 快速开发:Spring Boot框架提供了许多开箱即用的功能和组件,极大地简化了开发流程。其包括自动配置、内嵌服务器、自动项目构建等,可以快速搭建一个功能完善的博客系统。 2. 简化部署:Spring Boot使用嵌入式服务器,如Tomcat或Jetty,可以将应用程序打包成一个可执行的JAR文件,只需执行一条命令即可启动应用程序,无需额外部署和配置服务器,极大地简化了部署流程。 3. 高度可定制:Spring Boot提供了丰富的配置选项和扩展点,可以根据个人需求进行灵活的定制。可通过配置文件进行自定义配置,也可以通过扩展Spring Boot的自动配置机制来引入额外的功能。 4. 高效性能:Spring Boot集成了很多优化的组件,如Spring MVC、Spring Data、Spring Security等,能够提供高性能的Web服务。此外,Spring Boot还支持异步处理、缓存机制等,可以进一步提升系统的响应速度和并发能力。 5. 微服务支持:Spring Boot天生支持构建微服务架构,可以将一个大型的博客系统拆分为多个小型的服务,每个服务专注于特定的功能,提高了系统的可维护性和可扩展性。 6. 生态系统丰富:Spring Boot是Spring生态系统的一部分,可以与其他Spring项目无缝集成,如Spring Cloud、Spring Security等。同时,Spring Boot还支持各种第三方库和工具的集成,如数据库、缓存、消息队列等。 综上所述,Spring Boot个人博客系统不仅能够提供快速开发和部署的能力,还能够提供高度定制性、高效性能、微服务支持以及丰富的生态系统,为个人博客的开发者提供了一个可靠和便捷的解决方案。 ### 回答3: Spring Boot个人博客系统是一种基于Spring Boot框架开发的博客系统,它能够解决以下几个问题: 1. 快速开发:Spring Boot个人博客系统采用了Spring Boot框架,这个框架提供了很多开箱即用的特性,如自动配置、快速构建等,极大地减少了开发者的开发时间和精力,使得开发者能够更专注于业务逻辑的实现,从而实现快速开发。 2. 简化配置:Spring Boot个人博客系统采用了约定优于配置的原则,大部分的配置都可以通过少量的配置文件完成,大大简化了系统的配置工作。同时,Spring Boot还有一个在线配置工具——Spring Initializr,可以在线生成项目的初始配置,进一步减轻了配置的负担。 3. 整合丰富的开源组件:Spring Boot个人博客系统内置了许多常用的开源组件,如Thymeleaf模板引擎、Spring Data JPA、Spring Security等,这些组件都经过了充分的测试和验证,能够提供稳定、高效的功能实现。同时,Spring Boot还提供了自动配置功能,可以自动根据项目的依赖关系自动配置相关的组件,大大简化了整合的工作。 4. 响应式设计:Spring Boot个人博客系统支持响应式设计,可以很方便地适配不同的终端设备,如PC、手机、平板等,提供更好的用户体验。 总之,Spring Boot个人博客系统通过快速开发、简化配置、整合丰富的开源组件和响应式设计等特性,能够解决开发者在开发个人博客系统时遇到的瓶颈,提高开发效率,降低开发成本。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值