富文本编辑器和fastdfs的使用

宜立方商城的系统架构
a) 功能介绍(项目架构,有哪些功能模块,这些功能模块如何实现?)
b) 架构讲解
工程搭建-后台工程
c) 使用maven搭建工程(后台工程如何搭建?)
d) 使用maven的tomcat插件启动工程
SSM框架整合。
 
服务中间件dubbo,使用dubbo实现soa架构。
项目改造为基于SOA架构(什么是SOA架构,有什么好处,如何使用),面向服务的架构
 
图片上传功能分析,图片服务器,如何保存图片,如何访问图片?
nginx的安装:反向代理服务器、Nginx配置虚拟机,Nginx实现反向代理,Nginx实现负载均衡。
 
FastDFS分布式文件系统,使用FastDFS搭建图片服务器,主要用于存储图片。
上传图片功能实现1

// 1、加载配置文件,配置文件中的内容就是 tracker 服务的地址。

ClientGlobal.init("D:\\itcastworkspaceMars\\fastDfsDemo\\src\\main\\resources\\fdfs_client.conf");

// 2、创建一个 TrackerClient 对象。直接 new 一个。

TrackerClient trackerClient = new TrackerClient();

// 3、使用 TrackerClient 对象创建连接,获得一个 TrackerServer 对象。

TrackerServer trackerServer = trackerClient.getConnection();

// 4、创建一个 StorageClient 对象,需要两个参数 TrackerServer 对象、StorageServer 的引用

StorageClient1 storageClient = new StorageClient1(trackerServer, null);

// 5、使用 StorageClient 对象上传图片。

//扩展名不带“.”

String path = storageClient.upload_file1("E:\\image\\Koala.jpg", "jpg", null);

// 6、包含组名和图片的路径。

System.out.println(path);

富文本编辑器使用

KindEditor.ready(function(K) {

editor = K.create(‘textarea[name="content"]‘, {

allowFileManager : true

});

再添加之前,获得富文本编辑器中的内容。

$scope.entity.goodsDesc.introduction=editor.html();

商品添加功能实现
 
Cms系统的实现(内容管理系统):内容分类管理、内容管理。
Redis服务器搭建,每次访问都查询数据库,数据库压力会很大。
1、向业务逻辑中添加缓存。
2、使用redis做缓存
3、缓存同步。Redis集群
Solr服务器安装,使用solr服务器实现商品搜索功能。
1、Solrj使用测试
2、把数据库中的数据导入索引库
3、搜索功能的实现 solr集群搭建
什么是MQ,MQ的应用场景,使用Activemq发送接收消息
ActiveMQ整合spring。
使用freemarker实现网页静态化
ActiveMq同步生成静态网页
Sso系统工程搭建(单点登录系统):sso注册,登录功能实现,通过token获得用户信息,Ajax跨域请求(jsonp)
mycat的使用(数据库分片)
 
电商行业技术要求很高、高可用、海量数据的存储。每一个功能模块是如何实现的?

商场架构:前端和服务器端。

一款应用包含哪些模块?
后台管理系统:管理商品、订单、类目、商品规格属性、用户管理以及内容发布等功能。
前台系统:用户可以在前台系统中进行注册、登录、浏览商品、首页、下单等操作。
会员系统:用户可以在该系统中查询已下的订单、收藏的商品、我的优惠券、团购等信息。
订单系统:提供下单、查询订单、修改订单状态、定时处理订单。
搜索系统:提供商品的搜索功能。

单点登录系统:为多个系统之间提供用户登录凭证以及查询登录用户的信息。
使用maven进行依赖管理:jar包依赖,module依赖。
Maven软件:在setting.xml中修改本地仓库的位置。
<!-- 集中定义依赖版本号 --> 使用版本锁定<properties></properties>
<!-- 资源文件拷贝插件 --><!-- java编译插件 --> <!-- 配置Tomcat插件 -->
父工程
<parent>
<groupId>cn.e3mall</groupId>
<artifactId>e3-parent</artifactId>
<version>0.0.1-SNAPSHOT</version>
</parent>
引用另一个项目
<dependency>
<groupId>cn.e3mall</groupId>
<artifactId>e3-common</artifactId>
<version>0.0.1-SNAPSHOT</version>
</dependency>
 
Mybatis的配置文件:SqlMapConfig.xml
不需要配置任何内容,需要有文件头。文件必须存在。
 
mybatis整合spring,通过由spring创建数据库连接池,spring管理SqlSessionFactory、mapper代理对象。需要mybatis和spring的整合包。
 
Service层:applicationContext-service.xml:所有的service实现类都放到spring容器中管理。并由spring管理事务。
管理Service:<context:component-scan base-package="cn.e3mall.service"/>
 
Springmvc框架,由springmvc管理controller。Springmvc的三大组件。
 
Web.xml:初始化spring容器,配置前端控制器
<!-- 加载spring容器 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring/applicationContext*.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

</listener>

sftp安全文件传送协议:(图片存储的时候使用)
sftp是Secure File Transfer Protocol的缩写,安全文件传送协议。可以为传输文件提供一种安全的网络的加密方法。sftp 与 ftp 有着几乎一样的语法和功能。
从某种意义上来说,SFTP并不像一个服务器程序,而更像是一个客户端程序。SFTP同样是使用加密传输认证信息和传输的数据,所以,使用SFTP是非常安全的。但是,由于这种传输方式使用了加密/解密技术,所以传输效率比普通的FTP要低得多,如果您对网络安全性要求更高时,可以使用SFTP代替FTP。
 
富文本编辑器实际上是通过Html代码实现的。
在jsp页面中嵌入富文本编辑器,如何实现?
图片上传流程:1)把图片上传到如偏服务器,并返回对应的图片存储路径2)将图片路径保存到数据库中。
图片上传工具类
 
使用FastDFS,分布式文件系统:
存储空间可以横向扩展;可以实现服务器的高可用,支持每个节点有备份机。
 
图片上传封装成工具类使用,链接图片服务器,通过流的方式上传,关闭连接。
 
请求的url:/pic/upload
参数:MultiPartFile uploadFile
业务逻辑:
1、接收页面传递的图片信息uploadFile
2、把图片上传到图片服务器。使用封装的工具类实现。需要取文件的内容和扩展名。
3、图片服务器返回图片的url
4、将图片的url补充完整,返回一个完整的url。
5、把返回结果封装到一个Map对象中返回。
 
1、需要把commons-io、fileupload 的jar包添加到工程中。
2、配置多媒体解析器。
!-- 定义文件上传解析器 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 设定默认编码 -->
<property name="defaultEncoding" value="UTF-8"></property>
<!-- 设定文件上传的最大值5MB,5*1024*1024 -->
<property name="maxUploadSize" value="5242880"></property>
</bean>
 
在jsp页面中插入富文本编辑器。
KindEditor
http://kindeditor.net/
UEditor:百度编辑器
http://ueditor.baidu.com/website/
 
商品添加功能实现,功能分析
请求的url:/item/save
参数:表单的数据。可以使用pojo接收表单的数据,要求pojo的属性和input的name属性要一致。

使用TbItem对象接收表单的数据。

  1. package cn.e3mall.controller;

  2.  

  3.  

    import cn.e3mall.common.E3Result;

  4.  

    import cn.e3mall.common.EasyUIDataGridResult;

  5.  

    import cn.e3mall.pojo.TbItem;

  6.  

    import cn.e3mall.service.ItemService;

  7.  

    import com.alibaba.fastjson.JSON;

  8.  

    import com.alibaba.fastjson.JSONArray;

  9.  

    import com.sun.org.apache.bcel.internal.generic.RETURN;

  10.  

    import net.sf.jsqlparser.statement.select.ValuesList;

  11.  

    import org.springframework.beans.factory.annotation.Autowired;

  12.  

    import org.springframework.beans.factory.annotation.Value;

  13.  

    import org.springframework.stereotype.Controller;

  14.  

    import org.springframework.web.bind.annotation.PathVariable;

  15.  

    import org.springframework.web.bind.annotation.RequestMapping;

  16.  

    import org.springframework.web.bind.annotation.RequestMethod;

  17.  

    import org.springframework.web.bind.annotation.ResponseBody;

  18.  

  19.  

  20.  

    /**

  21.  

    * describe:商品Controller

  22.  

    *

  23.  

    * @author chenrushui

  24.  

    * @date 2018/06/26

  25.  

    */

  26.  

    @Controller

  27.  

    public class ItemController {

  28.  

  29.  

    /**

  30.  

    * 沒有接口实现,需要有接口定义

  31.  

    */

  32.  

    @Autowired

  33.  

    private ItemService mItemService;

  34.  

  35.  

    //json数据格式,并且为utf-8的编码方式

  36.  

    @RequestMapping(value = "/item/{itemId}", produces = "text/json;charset=UTF-8")

  37.  

    @ResponseBody

  38.  

    public String getProductById(@PathVariable Long itemId) {

  39.  

    TbItem tbItem = mItemService.selectItemById(itemId);

  40.  

    //使用fastjson把json字符串转化成json对象,不能直接toString.

  41.  

    return JSON.toJSONString(tbItem);

  42.  

    }

  43.  

  44.  

    @RequestMapping(value = "/test")

  45.  

    @ResponseBody

  46.  

    public String getProductById() {

  47.  

    return "ceshi";

  48.  

    }

  49.  

  50.  

    /**

  51.  

    * 获取商品列表数据

  52.  

    *

  53.  

    * @return

  54.  

    */

  55.  

    @RequestMapping(value = "/list")

  56.  

    public EasyUIDataGridResult getItemList(Integer page, Integer rows) {

  57.  

    EasyUIDataGridResult itemList = mItemService.getItemList(page, rows);

  58.  

    return itemList;

  59.  

    }

  60.  

  61.  

    /**

  62.  

    * 添加商品信息

  63.  

    *

  64.  

    * @param item

  65.  

    * @param desc

  66.  

    * @return

  67.  

    */

  68.  

    @RequestMapping(value = "/item/save", method = RequestMethod.POST)

  69.  

    @ResponseBody

  70.  

    public E3Result addItem(TbItem item, String desc) {

  71.  

    E3Result e3Result = mItemService.addItem(item, desc);

  72.  

    return e3Result;

  73.  

    }

  74.  

    }

为什么jsp页面需要放到WEB-INF目录下?因为配置的视图解析器路径是WEB-INF目录。
 
后台管理系统web项目(spring MVC)和商城前端项目(jsp页面)。
 
mybatis中的@Param注解和参数
1、不使用@Param注解时,参数只能有一个,并且是Javabean。在SQL语句里可以引用JavaBean的属性,而且只能引用JavaBean的属性。
//这里id是user的属性
@Select("SELECT * from Table where id = ${id}")
Enchashment selectUserById(User user);
2、使用@Param注解
表示给参数命名,名称就是括号中的内容。给参数命名,然后在映射文件中就能根据名称获取参数值了。
 
操作xml的快捷键
1、注释:ctrl+shift+/
2、取消注释:ctrl+shift+\
 
当前编写的代码都是可用模块,将来工作中都能拿来用。
BaseResult类敲一遍,能够背下来;对这个类理解的不透彻。
返回jsp页面,Model对象的使用。
根据id查询信息,pid,cid,uid(商品信息,内容信息,用户信息)
springMVC中的配置:静态资源映射,多媒体解析器,视图解析器
数据库表中的字段createTime,updateTime (new Date())
别忘了@Service注解,要不然会找不到对象类型的。
接收表单数据,使用pojo进行接收。
Mybatis的主键返回,把当前对象返回。
 
按照自己的思路把代码写完 而不是抄一遍,抄一遍没效果的。
 
异常设计:
dao层捕获异常,然后向controller抛出。(只捕获异常,不向外抛出,还是没有用的)。
 
设置tomcat默认启动谷歌浏览器。

查看方法参数,快速文档。

原文地址:https://www.cnblogs.com/shan1393/p/9567395.html

时间: 2024-11-07 04:07:01

富文本编辑器和fastdfs的使用的相关文章

使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百度开发的插件,lite版是UM EasyUI编辑器:用easyUI的都懂,基本上肯定用到 其他的富文本编辑器就不说了,前两个小编我用的比较多 本来我是比较倾向于CKEditor,但是这个插件不支持图片上传,图片功能只能链接过去,而不能在控件本身中上传,所以就选择了UMeditor 为啥选择UM,不选

TinyMCE(富文本编辑器)

[转]TinyMCE(富文本编辑器)在Asp.Net中的使用方法 官网演示以及示例代码:https://www.tinymce.com/docs/demo/image-tools/ 转自:http://www.cnblogs.com/hahacjh/archive/2010/07/24/1784268.html TinyMCE 在Asp.Net中的使用方法其实挺简单的,从官方网站下载TinyMCE),然后将里面的jscripts目录拷到你的网站目录 假设你的aspx页面中某一个地方需要用到编辑器

Android富文本编辑器RichEditor的使用

以前有个项目做一个笔记本类似的东西,觉得写的不太好,最近重新写,就发现了这个富文本编辑器他的效果是这样的 感觉有点厉害啊 废话不多说开始撸码 1先添加依赖 dependencies { compile 'jp.wasabeef:richeditor-android:1.2.0' } 2写布局 <jp.wasabeef.richeditor.RichEditor android:id="@+id/editor" android:layout_width="match_pa

商城项目整理(四)JDBC+富文本编辑器实现商品增加,样式设置,和修改

UEditor富文本编辑器:http://ueditor.baidu.com/website/ 相应页面展示: 商品添加: 商品修改: 前台商品展示: 商品表建表语句: 1 create table TEST.GOODS_TABLE 2 ( 3 gid NUMBER not null, 4 gname VARCHAR2(90), 5 gdetails CLOB, 6 gpicture VARCHAR2(100), 7 gprice NUMBER, 8 gleixing NUMBER, 9 gpi

关于富文本编辑器UEditor

2017.1.18,星期三?     关于富文本编辑器:     富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器. 富文本编辑器不同于文本编辑器,程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里(当然付费的功能会更强大些),方便用户编辑文章或信息.比较好的文本编辑器有kindeditor,fckeditor等. 关于UEditor:官网                           UEditor文档,我们的说明书

UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效果如图2: 这样子UEditor百度富文本编辑器会在第一次加载的时候获取屏幕宽度,然后赋值给initialFrameWidth属性. 这样子确实是可以在第一次加载的时候适应屏幕宽度,但是却似乎宽度稍微过了一点点,超过上面的灰条了.而且这里还有一个问题: 当你改变浏览器大小时,会有个很严重的排版BUG

富文本编辑器UEditor的配置使用方法

将下载的富文本编辑器的文件解压后放到 webcontent 下 如果 文件中的jsp文件夹下的controller.java文件报错的话    就将jsp下的lib文件夹中的文件都复制到  web-inf 文件夹下的lib中,就可以解决报错的问题了 按理说 还需要修改config.js中的URL值  但是我没修改  运行也出来效果了 <%@ page language="java" contentType="text/html; charset=utf-8"

kindEditor 富文本编辑器 使用介绍

第一版:存放位置:  ---->把该创建的文件包放到javaWeb 过程的 WEB_INF 下:如图所示. 第二步:< kindEditor 插件的引用> :JS引用 1 <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script> 2 <scrip

富文本编辑器的使用

第一步: 添加富文本编辑器的js的引用: 第二步:在jsp中添加textarea域,因为富文本编辑器是基于这个域进行创建的 第三步:富文本编辑器的引用 第四步:提交表单前需要将富文本编辑器和texarea的内容同步