商品描述的修改及回显
前台item-list.jsp代码63行-69行：
$("#itemEditWindow").window({
onLoad :function(){
//回显数据
var data = $("#itemList").datagrid("getSelections")[0];
data.priceView = KindEditorUtil.formatPrice(data.price);
$("#itemeEditForm").form("load",data);
// 加载商品描述
$.getJSON('/item/query/item/desc/'+data.id,function(_data){
if(_data.status == 200){
itemEditEditor.html(_data.data.itemDesc);
}
});
注意：
1.加载商品描述的请求路径是Restful风格的。
2.注意加载数据的代码：_data.data.itemDesc，后台在封装数据时候记得要吻合
后台ItemController代码：
/*
* 商品描述回显，前台代码在 item-list.jsp 第63行-69行
* 前台会发送一个ajax异步请求，请求路径是：
* /item/query/item/desc/'+data.id
* 注意，这是一个RESTFUL的请求，所以接参时需要注意。
*
*/
@RequestMapping("/item/query/item/desc/{itemId}")
@ResponseBody
public SysResult viewBackDesc(@PathVariable Long itemId){
return itemService.viewBackDescByItemId(itemId);
}
ItemService代码：
public SysResult viewBackDescByItemId(Long itemId) {
try {
ItemDesc itemDesc=itemDescMapper.selectByPrimaryKey(itemId);
//如果成功，则调用SysResult.ok()方法，但是前台还需要解析回显的数据，
//对应的前台解析数据的代码： itemEditEditor.html(_data.data.itemDesc);（item-list.jsp第67行）
//所以这里，我们调用SysResult.ok(Objec data)重载方法
return SysResult.ok(itemDesc);
} catch (Exception e) {
return SysResult.build(201, e.getMessage());
}
}
富文本编译器KindEditor
什么是富文本编译器？
Rich Text Editor 简称RTE，是一种内嵌于浏览器，所见即所得的文本编译器。常见的有KindEditor,UEditor等。
如何引入富本文编译器KindEditor
步骤：
1.引入相关的CSS样式文件和js文件
2.建一个文本域标签 ，并给他赋值一个id属性或class属性
3.写一段jquery代码，让这个文本域标签变成一个功能强大的富文本编译器
相关的CSS样式文件和js文件：
<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
创建一个文本域标签：
<textarea style="width:700px;height:350px" id="editor"></textarea>
写一段Jquery代码：
<script type="text/javascript">
$(function(){
KindEditor.ready(function(){
KindEditor.create('#editor',{height:"350px"})
})
})
</script>
合并后的页面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<body>
<h1>文本域</h1>
<textarea style="width:700px;height:350px" id="editor"></textarea>
</body>
<script type="text/javascript">
$(function(){
KindEditor.ready(function(){
KindEditor.create('#editor',{height:"350px"})
})
})
</script>
用KindEditor向后台传递文本内容
jsp代码:
<form action="${pageContext.request.contextPath }/kindeditor" method="post">
<textarea style="width:700px;height:350px" id="editor" name="desc"></textarea>
<input type="submit" value="提交">
</form>
实现思路：
1.建立form表单，把文本域标签裹起来，并制定请求路径
2.给文本域标签起一个name属性，这样，后台就可以通过这个name属性来封装页面传来的内容
3.别忘了加提交按钮
知识点：
当文本域变成富文本编辑器之后，表面上是在编辑普通文字，但实际上都是有Html标签在修饰，所以我们才能编辑文体的字体以及颜色。
后台Controller代码：
@RequestMapping("/kindeditor")
public String kindEditor(String desc){
System.out.println(desc);
return null;
}
商品图片上传和回显
PicUploadController代码：
用于存储图片和向前台传递图片路径，用于回显
@Controller
public class PicUploadController {
/*
* 1.图片上传，对应的前台代码在common.js 第22行-26行
* uploadJson :/pic/upload 是发送的请求路径
* filePostName :uploadFile 是上传文件的属性名，所以我们在后台用这个名字来接受上传的文件
* 2.图片保存
* 3.图片回显
* 图片回显，要求返回指定的json格式数据
* ********
* {"error":0,"url":"图片的保存路径","width":图片的宽度,"height":图片的高度}
* 参数说明：
* 0代表是一张图片，前天可以解析并显示。1代表不是图片，不显示
* 如果不设置宽度和高度，则默认用图片原来的大小，所以不用设置
* *********
*
* 4.图片回显遇到的问题：图片的url路径如果是c:\jt-load\1.png 这是一个本地磁盘路径，这并不是一个url路径，图片上传组件不能识别这样的路径
* 再者，我们也不可能让用户来访问这样的路径，
* 因为当用户访问这个路径时，相当于在访问用户自己的c盘。
* 所以，我们应该把服务器上的 c:\jt-load\1.png路径配置成 比如：http://image.jt.com/1.png，
* 这样的路径，浏览器才认识，才能找到图片，进而进行回显。
* 所以，现在的问题就转换成：把c:\jt-load 和 http://image.jt.com 做地址映射 ，这就需要用Nginx来做反向代理了。
*/
@RequestMapping("/pic/upload")
@ResponseBody
public PicUploadResult picUpload(MultipartFile uploadFile) throws Exception{
String savePath="c:\\jt-upload\\"+uploadFile.getOriginalFilename();
FileUtils.writeByteArrayToFile(new File(savePath), uploadFile.getBytes());
PicUploadResult picUploadResult=new PicUploadResult();
picUploadResult.setError(0);
String urlPath="http://image.jt.com/"+uploadFile.getOriginalFilename();
picUploadResult.setUrl(urlPath);
return picUploadResult;
}
}
Nginx介绍
Nginx是一个web服务器，是俄罗斯人用C语言开发的。
2012年，Nginx成长为世界第二大Web服务器。全世界流量最高的前1000名网站中，超过25%都使用Nginx来处理海量的互联网请求。Nginx已经成为业界高性能Web服务器的代名词。
Nginx的竞争对手
Apache,Lighttped,Tomcat,Jetty,IIS,它们都是Web服务器，通过HTTP位浏览器等客户端程序提供各种网络服务，然而，由于这些Web服务器在设计阶段就受到许多局限，比如当时的互联网用户规模、网络带宽、产品特点等局限，并且各自的定位和发展方向都不尽相同，使得每一款Web服务器的特点与应用场合都很鲜明
Tomcat和Jetty
面向java语言的，先天就是重量级的Web服务器，他们的性能和Nginx没有可比性，略过。
IIS
只能在Windows操作系统上运行，Window作为服务器在稳定性与UNIX操作系统没有可比性，所以IIS经常被冷落，但是它的市场占有份额不低。
Apache
Apahce的发展时期很长，而且是目前毫无争议的世界第一大Web服务器，一直处于领先地位。
Aache有很多优点，稳定、开源、跨平台。Apache出现在一个比较久远的时代，那个时代互联网的产业规模远远比不上今天，所以它当时被设计成了一个重量级、不支持高并发的Web服务器。如果有数以万计的并发Http请求同时访问，会导致服务器上消耗大量内存，系统内核对成百上千的Apache进程间进行切换也会消耗大量CPU资源，同时导致HTTP请求的平均响应速度降低，这导致了Apache服务器不可能成为高性能Web服务器，这也促使了Lighttpd和Nginx的出现。
Lighttpd 和Nginx
都是轻量级、高性能的Web服务器，欧美的开发者比较喜欢Lighttpd，国内的开发者比较喜欢Nginx
Nginx
是俄罗斯开发者，Igor Sysoev 使用C语言开发了Nginx。Nginx使用基于事件驱动的架构能够并发处理百万级别的TCP连接，具有极佳的稳定性。所以，其作为Web服务器，被广发应用到大流量的网站上，包括腾讯、新浪、网易、淘宝等访问量巨大的网站。
nginx是一个跨平台的Web服务器，可运行在Linux,FreeBSD,Solaris,AIX，Mac OS,Windows等操作系统上，并且他还可以使用当前操作系统特有的一些高效API来提高自己的性能。比如，它支持Linux上的epoll来处理linux服务器上的高并发请求，Solaris的 event ports 和 FreeBSD上的kqueue等。
再比如，对于Linux，Nginx支持其独有的sendfile系统调用，这个系统可以高效地把硬盘中的数据发送到网络上。提高传输性能。
2011年，Nginx正式成立公司，立足于提供商业级的Web服务器。
Nginx的优点
1.响应快速
2.高扩展性
3.高可靠性
4.低内存消耗，一般情况下，10000个非活跃的HTTP Keep-Alive 连接在Nginx中仅消耗2.5mb的内存，这是Nginx支持高并发连接的基础。
5.单机支持10万以上的并发连接，理论上，Nginx支持的并发连接上限取决于内存，10万远远没有封顶，这需要优秀的业务代码来配合。
6.热部署，比如像升级Nginx的可执行文件，更新配置，更换日志文件等，不用停止服务，支持热部署，所以能达到7*24小时不间断工作。
7.能够把服务器硬件资源压榨到极致。
Windows环境下Ngnix安装和启动
Nginx反向代理+配置Host文件+SwitchHosts工具介绍
Nginx配置后台服务器访问地址
Nginx-轮询
需求说明：
比如现在有3台tomcat服务器，一台nginx服务器，我们现在利用nginx服务器做负载均衡，把用户发来的请求平均分配给4台tomcat服务器来处理
实现步骤:
1.启动3个tomcat服务器（别忘了更改每个tomcat的三个端口号）
比如，三个tomcat的访问地址分别是：
http://localhost:8010
http://localhost:8011
http://localhost:8012
2.修改每个tomcat服务器的webapp目录下的ROOT目录下的index.jsp（这个就是tomcat猫的访问主页），修改下每个tomcat的主页，加个标识
3.修改nginx.conf的配置文件，配置负载均衡
配置负载均衡的服务器列表：
upstream jt{
server 127.0.0.1:8090;
server 127.0.0.1:8091;
server 127.0.0.1:8092;
}
让Nginx做负载均衡
server {
listen 80;
server_name localhost; 之所以写localhost 是因为 我们要实现 当用户访问 http://localhost (访问的nginx服务器），由nginx服务器做负载均衡，负载到那三台tomcat服务器上，如果以后，nginx服务器不放在本机上了，放在其他机器上，那server_name 就填 那台机器的ip地址，比如 server_name 192.168.1.1
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
location / {
proxy_pass http://jt; 这里的路径填的是 http://upstream的名字
proxy_connect_timeout 600;
proxy_read_timeout 600;
}
}
4.启动3个tomcat服务器，启动nginx服务器，
当在地址栏输入 http://localhost 访问nginx服务器时，nginx服务会把这个请求负载到tomcat集群里的某台上
Nginx-权重分配
Nginx—配置说明
一个完整的配置（时间单位：s)
1.user www-data; #1.2配置项 配置用户和pid，一般是系统自建好的，不用动
2.pid /var/run/nginx.pid;
3.worker_processes 8; #配置worker进程的数量，这个数量一般是根据cpu的核数来确定，99%的场景下，都和cpu的核数相等。这么配的好处:进程间切换所造成的CPU资源耗费
4.worker_rlimit_nofile 100000; #指定nginx 每个worker进程所能打开的最大文件数量
5.events {
6.worker_connections 100000; #指定每个worker进程处理最大的http请求数量上限
7.multi_accept on;
8.use epoll; #use epoll,指定nginx的事件驱动模型，这里指定的是linux下的epoll函数，epoll是linux处理高并发的利器。nginx有一个专门的模块 ngx_epoll_moudle。如果是unix操作系统的话，那就用 use kqueue。
9.}
10.http {
11.server_tokens off; #关闭nginx的版本号，有利于安全性
12.sendfile on; #sendfile 是Nginx特有文件传输系统，这个系统能够高效的把硬盘里的文件读出来然后进行网络传输
13.tcp_nopush on;
14.tcp_nodelay on; #告诉nginx 别用缓存存数据。
15.access_log off; #关闭进程日志，避免磁盘频繁的I/O读写，能够提高效率
16.error_log /var/log/nginx/error.log crit; #当发生错误是，错误日志的存放的目录
17.keepalive_timeout 10; #长连接的操作超时时间，避免长连接长时间不操作占用资源的问题
18.client_header_timeout 10; #18,19设置用户请求头和响应头的超时间
19.client_body_timeout 10;
20.reset_timedout_connection on;
21.send_timeout 10;
22.limit_conn_zone $binary_remote_addr zone=addr:5m;
23.limit_conn addr 100; #指定每个ip能连接的最大地址数量
24.include /etc/nginx/mime.types;
25.default_type text/html; #指定默认的文件类型
26.charset UTF-8; #指定字符集
27.gzip on; #启用gzip压缩
28.gzip_disable "msie6"; #指定浏览器关闭gzip压缩，这样能够提高服务的健壮性，msie6指的是IE6浏览器
29.gzip_proxied any; #指定压缩所有的数据类型
30.gzip_min_length 1000（字节）; #指定满足压缩的最小字节，如果不满1000b，就不压缩
31.gzip_comp_level 6; #代表压缩的权重，数据从1~9，数字越大，数据的压缩比重越大，压缩后的数据量越小，但是同时用的时间也更多，所以配置的时候，一般采取中间值，5,6比较合适。
32.gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript; #指定压缩支持的格式
33.open_file_cache max=100000 inactive=20s; #指定缓存里数据文件数量的上限，inactive=20s存活的时间
34.open_file_cache_valid 30s; #nginx会每隔30s去检查缓存
35.open_file_cache_min_uses 2;
36.open_file_cache_errors on;
37.include /etc/nginx/conf.d/*.conf;
38.include /etc/nginx/sites-enabled/*;
39.}