第一节初识MVC实现计算器
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab filetype=css: */
/*!
* Base CSS for pdf2htmlEX
* Copyright 2012,2013 Lu Wang
* https://github.com/coolwanglu/pdf2htmlEX/blob/master/share/LICENSE
*/
/* Part 1: Web Page Layout: Free to modify, except for a few of them which are required by pdf2htmlEX.js, see the comments */
#sidebar { /* Sidebar */
position:absolute;
top:0;
left:0;
bottom:0;
width:250px;
padding:0;
margin:0px;
overflow:auto;
}
#page-container { /* PDF container */
position:absolute; /* required for calulating relative positions of pages in pdf2htmlEX.js */
top:0;
left:0px;
margin:0;
padding:0;
border:0; /* required for lazy page loading in pdf2htmlEX.js (page visibility test) */
}
@media screen {
/* for sidebar */
#sidebar.opened + #page-container { left:250px; }
#page-container {
/* `bottom‘ and `right‘ are required for lazy page loading in pdf2htmlEX.js (page visibility test)
* alternatively you may set width and height
*/
bottom:0;
right:0;
overflow:auto;
}
.loading-indicator {
display:none;
}
.loading-indicator.active {
display:block;
position:absolute;
width:64px;
height:64px;
top:50%;
left:50%;
margin-top:-32px;
margin-left:-32px;
}
.loading-indicator img {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}
}
@media print {
@page { margin:0; }
html { margin:0; }
body {
margin:0;
-webkit-print-color-adjust:exact; /* enable printing background images for WebKit */
}
#sidebar { display:none; }
#page-container {
width:auto;
height:auto;
overflow:visible;
background-color:transparent;
}
.d { display:none; }
}
/* Part 2: Page Elements: Modify with caution
* The followings are base classes, some of which are meant to be override by PDF specific classes
* So do not increase the specificity (e.g. ".classname" -> "#page-container .classname")
*/
.pf { /* page */
position:relative;
background-color:white;
overflow: hidden;
margin:0;
border:0; /* required by pdf2htmlEX.js for page visibility test */
}
.pc { /* content of a page */
position:absolute;
border:0;
padding:0;
margin:0;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
display:block;
/* set transform-origin for scaling */
transform-origin:0% 0%;
-ms-transform-origin:0% 0%;
-webkit-transform-origin:0% 0%;
}
.pc.opened { /* used by pdf2htmlEX.js, to show/hide pages */
display:block;
}
.bf { /* images that occupies the whole page */
position:absolute;
border:0;
margin:0;
top:0;
bottom:0;
width:100%;
height:100%;
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
}
.bi { /* images that cover only a part of the page */
position:absolute;
border:0;
margin:0;
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
}
@media print {
.pf {
margin:0;
box-shadow:none;
page-break-after:always;
page-break-inside:avoid;
}
@-moz-document url-prefix() {
/* fix page truncation for FireFox */
.pf {
overflow:visible;
border:1px solid #FFFFFF;
}
.pc {overflow:visible;}
}
}
.c { /* clip box */
position:absolute;
border:0;
padding:0;
margin:0;
overflow:hidden;
display:block;
}
.t { /* text line */
position:absolute;
white-space:pre;
font-size:1px;
transform-origin:0% 100%;
-ms-transform-origin:0% 100%;
-webkit-transform-origin:0% 100%;
unicode-bidi:bidi-override;/* For rtl lanauges, e.g. Hebrew, we don‘t want the default Unicode behaviour */
-moz-font-feature-settings:"liga" 0;/* We don‘t want Firefox to recognize ligatures */
}
span { /* text blocks within a line */
position:relative;
vertical-align: baseline;
/* _ for spaces may need display:inline, which will override this */
display:inline-block;
unicode-bidi:bidi-override; /* For rtl lanauges, e.g. Hebrew, we don‘t want the default Unicode behaviour */
}
._ { /* text shift */
color:transparent;
z-index:-1;
}
/* selection background should not be opaque, for fallback mode */
::selection{
background: rgba(127,255,255,0.4);
}
::-moz-selection{
background: rgba(127,255,255,0.4);
}
.pi { /* info for Javascript */
display:none;
}
.l { /* annotation links */
}
/* transparent color - WebKit */
.d { /* css drawing */
position:absolute;
transform-origin:0% 100%;
-ms-transform-origin:0% 100%;
-webkit-transform-origin:0% 100%;
}
/* Base CSS END */
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab filetype=css: */
/*!
* Fancy styles for pdf2htmlEX
* Copyright 2012,2013 Lu Wang
* https://github.com/coolwanglu/pdf2htmlEX/blob/master/share/LICENSE
*/
@keyframes fadein { from { opacity:0;} to { opacity:1;} }
@-webkit-keyframes fadein { from { opacity:0;} to { opacity:1;} }
@keyframes swing {
0% { transform: rotate(0deg); }
10% { transform: rotate(0deg); }
90% { transform: rotate(720deg); }
100%{ transform: rotate(720deg); }
}
@-webkit-keyframes swing {
0% { -webkit-transform: rotate(0deg); }
10% { -webkit-transform: rotate(0deg); }
90% { -webkit-transform: rotate(720deg); }
100%{ -webkit-transform: rotate(720deg); }
}
@media screen {
#sidebar {
background-color:#2f3236;
/* modified from http://philbit.com/svgpatterns/#crossstripes */
background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjNDAzYzNmIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDBMNCA0Wk00IDBMMCA0WiIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiMxZTI5MmQiPjwvcGF0aD4KPC9zdmc+");
}
#outline {
font-family:Georgia,Times,"Times New Roman",serif;
font-size:13px;
margin:2em 1em;
}
#outline ul {
padding:0;
}
#outline li {
list-style-type:none;
margin:1em 0;
}
#outline li > ul {
margin-left: 1em;
}
#outline a,
#outline a:visited,
#outline a:hover,
#outline a:active {
line-height:1.2;
color:#e8e8e8;
text-overflow:ellipsis;
white-space:nowrap;
text-decoration:none;
display:block;
overflow:hidden;
outline:0;
}
#outline a:hover {
color:rgb(0,204,255);
}
#page-container {
background-color:#9e9e9e;
/* http://philbit.com/svgpatterns/#thinstripes */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjOWU5ZTllIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9IiM4ODgiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4=");
-webkit-transition:left 500ms;
transition:left 500ms;
}
.pf {
margin: 13px auto;
box-shadow: 1px 1px 3px 1px #333;
/* Needed by IE to make box-shadow works * https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow */
border-collapse: separate;
}
.pc.opened { /* used by pdf2htmlEX.js, to show/hide pages */
-webkit-animation: fadein 100ms;
animation: fadein 100ms;
}
.loading-indicator.active {
/*
* use 0.01s instead of 0s,
* since YUI Compressor will change 0s to 0,
* which is not recognized by Firefox
*/
-webkit-animation: swing 1.5s ease-in-out 0.01s infinite alternate none;
animation: swing 1.5s ease-in-out 0.01s infinite alternate none;
}
}
/* Fancy CSS END */
.ff0{font-family:sans-serif;visibility:hidden;}
@font-face{font-family:ff1;src:url("e1af90a7-2ee6-426f-9630-f1e130569f39_files/f1.woff")format("woff");}.ff1{font-family:ff1;line-height:0.925781;font-style:normal;font-weight:normal;visibility:visible;}
@font-face{font-family:ff2;src:url("e1af90a7-2ee6-426f-9630-f1e130569f39_files/f2.woff")format("woff");}.ff2{font-family:ff2;line-height:0.694336;font-style:normal;font-weight:normal;visibility:visible;}
@font-face{font-family:ff3;src:url("e1af90a7-2ee6-426f-9630-f1e130569f39_files/f3.woff")format("woff");}.ff3{font-family:ff3;line-height:0.895996;font-style:normal;font-weight:normal;visibility:visible;}
@font-face{font-family:ff4;src:url("e1af90a7-2ee6-426f-9630-f1e130569f39_files/f4.woff")format("woff");}.ff4{font-family:ff4;line-height:0.866699;font-style:normal;font-weight:normal;visibility:visible;}
@font-face{font-family:ff5;src:url("e1af90a7-2ee6-426f-9630-f1e130569f39_files/f5.woff")format("woff");}.ff5{font-family:ff5;line-height:0.895996;font-style:normal;font-weight:normal;visibility:visible;}
.m0{transform:matrix(0.300000,0.000000,0.000000,0.300000,0,0);-ms-transform:matrix(0.300000,0.000000,0.000000,0.300000,0,0);-webkit-transform:matrix(0.300000,0.000000,0.000000,0.300000,0,0);}
.v0{vertical-align:0.000000px;}
.ls3{letter-spacing:-3.200000px;}
.ls0{letter-spacing:0.000000px;}
.ls2{letter-spacing:11.400000px;}
.ls1{letter-spacing:17.520000px;}
.sc_{text-shadow:none;}
.sc1{text-shadow:-0.015em 0 transparent,0 0.015em transparent,0.015em 0 transparent,0 -0.015em transparent;}
.sc0{text-shadow:-0.015em 0 rgb(0,0,0),0 0.015em rgb(0,0,0),0.015em 0 rgb(0,0,0),0 -0.015em rgb(0,0,0);}
@media screen and (-webkit-min-device-pixel-ratio:0){
.sc_{-webkit-text-stroke:0px transparent;}
.sc1{-webkit-text-stroke:0.015em transparent;text-shadow:none;}
.sc0{-webkit-text-stroke:0.015em rgb(0,0,0);text-shadow:none;}
}
.ws0{word-spacing:0.000000px;}
._6{display:inline;margin-left:-5.798400px;}
._7{display:inline;margin-left:-4.380800px;}
._3{display:inline;margin-left:-1.784000px;}
._0{display:inline-block;width:1.800000px;}
._5{display:inline-block;width:8.100000px;}
._4{display:inline-block;width:11.217600px;}
._2{display:inline-block;width:13.264000px;}
._1{display:inline-block;width:17.752000px;}
.fc3{color:rgb(63,95,191);}
.fc2{color:rgb(63,127,127);}
.fc1{color:rgb(0,128,128);}
.fc0{color:rgb(0,0,0);}
.fs2{font-size:32.000000px;}
.fs3{font-size:36.800000px;}
.fs1{font-size:41.600000px;}
.fs0{font-size:64.000000px;}
.fs4{font-size:80.000000px;}
.y40{bottom:-10.560000px;}
.y20{bottom:2.892000px;}
.y2b{bottom:6.756000px;}
.y22{bottom:8.136000px;}
.y1d{bottom:9.636000px;}
.y41{bottom:10.109880px;}
.y3b{bottom:12.936000px;}
.y39{bottom:14.892000px;}
.y1f{bottom:21.612000px;}
.y2a{bottom:24.996000px;}
.y34{bottom:27.336000px;}
.y1c{bottom:28.356000px;}
.y29{bottom:43.716000px;}
.y33{bottom:45.600000px;}
.y37{bottom:46.056000px;}
.y0{bottom:47.400000px;}
.y28{bottom:61.956000px;}
.y3f{bottom:63.876000px;}
.y1b{bottom:65.796000px;}
.y27{bottom:80.712000px;}
.y32{bottom:83.532000px;}
.y1a{bottom:84.552000px;}
.y26{bottom:99.432000px;}
.y36{bottom:102.240000px;}
.y19{bottom:103.272000px;}
.y25{bottom:118.140000px;}
.y18{bottom:121.980000px;}
.y35{bottom:125.364000px;}
.y24{bottom:136.896000px;}
.y31{bottom:139.716000px;}
.y17{bottom:140.736000px;}
.y30{bottom:157.956000px;}
.y38{bottom:175.764000px;}
.y2f{bottom:177.192000px;}
.y3e{bottom:236.724000px;}
.y3d{bottom:291.024000px;}
.y16{bottom:360.624000px;}
.y23{bottom:364.464000px;}
.y21{bottom:380.844000px;}
.y2d{bottom:389.004000px;}
.y1e{bottom:449.484000px;}
.y2c{bottom:460.056000px;}
.y15{bottom:517.200000px;}
.y3a{bottom:528.744000px;}
.y14{bottom:535.920000px;}
.y13{bottom:554.676000px;}
.y3c{bottom:562.824000px;}
.y12{bottom:573.396000px;}
.y11{bottom:592.104000px;}
.y10{bottom:610.824000px;}
.yf{bottom:629.580000px;}
.y2e{bottom:632.004000px;}
.ye{bottom:648.300000px;}
.yd{bottom:667.020000px;}
.yc{bottom:685.764000px;}
.yb{bottom:704.496000px;}
.ya{bottom:723.204000px;}
.y9{bottom:741.960000px;}
.y8{bottom:760.680000px;}
.y7{bottom:779.400000px;}
.y6{bottom:798.156000px;}
.y5{bottom:816.864000px;}
.y4{bottom:835.596000px;}
.y3{bottom:854.304000px;}
.y2{bottom:873.060000px;}
.y1{bottom:898.500000px;}
.hb{height:21.703125px;}
.h7{height:23.016000px;}
.h11{height:23.040000px;}
.h9{height:24.468000px;}
.hc{height:26.375000px;}
.h13{height:26.414062px;}
.h3{height:29.859375px;}
.h10{height:30.331250px;}
.h5{height:34.287500px;}
.h6{height:35.040000px;}
.he{height:36.960000px;}
.h14{height:39.810120px;}
.h2{height:52.750000px;}
.h15{height:54.648438px;}
.hf{height:60.030000px;}
.h12{height:77.340000px;}
.hd{height:137.316000px;}
.h8{height:151.296000px;}
.h4{height:158.496000px;}
.ha{height:189.180000px;}
.h1{height:778.800000px;}
.h0{height:1010.400000px;}
.we{width:72.990000px;}
.w6{width:74.910000px;}
.w7{width:92.196000px;}
.w4{width:107.076000px;}
.w3{width:119.100000px;}
.wa{width:133.500000px;}
.w2{width:175.320000px;}
.w5{width:196.956000px;}
.wc{width:211.800000px;}
.wd{width:231.030000px;}
.w9{width:237.744000px;}
.wb{width:253.080000px;}
.w8{width:396.240000px;}
.w1{width:700.800000px;}
.w0{width:714.240000px;}
.x0{left:9.600000px;}
.xd{left:18.720000px;}
.x9{left:26.400000px;}
.x7{left:28.824000px;}
.x6{left:33.624000px;}
.x13{left:40.824000px;}
.xb{left:98.460000px;}
.x2{left:108.060000px;}
.x11{left:118.620000px;}
.x4{left:124.416000px;}
.x5{left:150.816000px;}
.x8{left:157.560000px;}
.x1{left:195.000000px;}
.x10{left:259.380000px;}
.x3{left:309.804000px;}
.xf{left:311.256000px;}
.x12{left:314.136000px;}
.x16{left:337.200000px;}
.xa{left:369.840000px;}
.xc{left:430.860000px;}
.xe{left:434.700000px;}
.x15{left:498.576000px;}
.x14{left:561.516000px;}
@media print{
.v0{vertical-align:0.000000pt;}
.ls3{letter-spacing:-3.555556pt;}
.ls0{letter-spacing:0.000000pt;}
.ls2{letter-spacing:12.666667pt;}
.ls1{letter-spacing:19.466667pt;}
.ws0{word-spacing:0.000000pt;}
._6{display:inline;margin-left:-6.442667pt;}
._7{display:inline;margin-left:-4.867556pt;}
._3{display:inline;margin-left:-1.982222pt;}
._0{display:inline-block;width:2.000000pt;}
._5{display:inline-block;width:9.000000pt;}
._4{display:inline-block;width:12.464000pt;}
._2{display:inline-block;width:14.737778pt;}
._1{display:inline-block;width:19.724444pt;}
.fs2{font-size:35.555556pt;}
.fs3{font-size:40.888889pt;}
.fs1{font-size:46.222222pt;}
.fs0{font-size:71.111111pt;}
.fs4{font-size:88.888889pt;}
.y40{bottom:-11.733333pt;}
.y20{bottom:3.213333pt;}
.y2b{bottom:7.506667pt;}
.y22{bottom:9.040000pt;}
.y1d{bottom:10.706667pt;}
.y41{bottom:11.233200pt;}
.y3b{bottom:14.373333pt;}
.y39{bottom:16.546667pt;}
.y1f{bottom:24.013333pt;}
.y2a{bottom:27.773333pt;}
.y34{bottom:30.373333pt;}
.y1c{bottom:31.506667pt;}
.y29{bottom:48.573333pt;}
.y33{bottom:50.666667pt;}
.y37{bottom:51.173333pt;}
.y0{bottom:52.666667pt;}
.y28{bottom:68.840000pt;}
.y3f{bottom:70.973333pt;}
.y1b{bottom:73.106667pt;}
.y27{bottom:89.680000pt;}
.y32{bottom:92.813333pt;}
.y1a{bottom:93.946667pt;}
.y26{bottom:110.480000pt;}
.y36{bottom:113.600000pt;}
.y19{bottom:114.746667pt;}
.y25{bottom:131.266667pt;}
.y18{bottom:135.533333pt;}
.y35{bottom:139.293333pt;}
.y24{bottom:152.106667pt;}
.y31{bottom:155.240000pt;}
.y17{bottom:156.373333pt;}
.y30{bottom:175.506667pt;}
.y38{bottom:195.293333pt;}
.y2f{bottom:196.880000pt;}
.y3e{bottom:263.026667pt;}
.y3d{bottom:323.360000pt;}
.y16{bottom:400.693333pt;}
.y23{bottom:404.960000pt;}
.y21{bottom:423.160000pt;}
.y2d{bottom:432.226667pt;}
.y1e{bottom:499.426667pt;}
.y2c{bottom:511.173333pt;}
.y15{bottom:574.666667pt;}
.y3a{bottom:587.493333pt;}
.y14{bottom:595.466667pt;}
.y13{bottom:616.306667pt;}
.y3c{bottom:625.360000pt;}
.y12{bottom:637.106667pt;}
.y11{bottom:657.893333pt;}
.y10{bottom:678.693333pt;}
.yf{bottom:699.533333pt;}
.y2e{bottom:702.226667pt;}
.ye{bottom:720.333333pt;}
.yd{bottom:741.133333pt;}
.yc{bottom:761.960000pt;}
.yb{bottom:782.773333pt;}
.ya{bottom:803.560000pt;}
.y9{bottom:824.400000pt;}
.y8{bottom:845.200000pt;}
.y7{bottom:866.000000pt;}
.y6{bottom:886.840000pt;}
.y5{bottom:907.626667pt;}
.y4{bottom:928.440000pt;}
.y3{bottom:949.226667pt;}
.y2{bottom:970.066667pt;}
.y1{bottom:998.333333pt;}
.hb{height:24.114583pt;}
.h7{height:25.573333pt;}
.h11{height:25.600000pt;}
.h9{height:27.186667pt;}
.hc{height:29.305556pt;}
.h13{height:29.348958pt;}
.h3{height:33.177083pt;}
.h10{height:33.701389pt;}
.h5{height:38.097222pt;}
.h6{height:38.933333pt;}
.he{height:41.066667pt;}
.h14{height:44.233467pt;}
.h2{height:58.611111pt;}
.h15{height:60.720486pt;}
.hf{height:66.700000pt;}
.h12{height:85.933333pt;}
.hd{height:152.573333pt;}
.h8{height:168.106667pt;}
.h4{height:176.106667pt;}
.ha{height:210.200000pt;}
.h1{height:865.333333pt;}
.h0{height:1122.666667pt;}
.we{width:81.100000pt;}
.w6{width:83.233333pt;}
.w7{width:102.440000pt;}
.w4{width:118.973333pt;}
.w3{width:132.333333pt;}
.wa{width:148.333333pt;}
.w2{width:194.800000pt;}
.w5{width:218.840000pt;}
.wc{width:235.333333pt;}
.wd{width:256.700000pt;}
.w9{width:264.160000pt;}
.wb{width:281.200000pt;}
.w8{width:440.266667pt;}
.w1{width:778.666667pt;}
.w0{width:793.600000pt;}
.x0{left:10.666667pt;}
.xd{left:20.800000pt;}
.x9{left:29.333333pt;}
.x7{left:32.026667pt;}
.x6{left:37.360000pt;}
.x13{left:45.360000pt;}
.xb{left:109.400000pt;}
.x2{left:120.066667pt;}
.x11{left:131.800000pt;}
.x4{left:138.240000pt;}
.x5{left:167.573333pt;}
.x8{left:175.066667pt;}
.x1{left:216.666667pt;}
.x10{left:288.200000pt;}
.x3{left:344.226667pt;}
.xf{left:345.840000pt;}
.x12{left:349.040000pt;}
.x16{left:374.666667pt;}
.xa{left:410.933333pt;}
.xc{left:478.733333pt;}
.xe{left:483.000000pt;}
.x15{left:553.973333pt;}
.x14{left:623.906667pt;}
}
第一节 初识 MVC 实现计算器
Web.xml
控制器 Controller
Controller
（Servlet）
AddAction
视图 View
add.jsp
add_result.jsp
<servlet>
<!-- 使用自定义的控制器 -->
<servlet-name>Controller</servlet-name>
<servlet-class>com.nuan.framework.Controller</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Controller</servlet-name>
<!-- 请求匹配类型 -->
<url-pattern>*.action</url-pattern>
</servlet-mapping>
模型 Model
Calculator
action=”add.action”
初始化 actionMap
根据 path 选择 action
处理 get/post 请求，得到目标 jsp 页面跳转
里面放的是加减乘除等相关业务逻辑方法
获得页面输入
调用业务逻辑方法，获得返回值，将结果保存
在 request 中，以便在页面中得到
返回将要转发到的页面路径
MVC
