Posted on |

Web Application introduction.

  • Webservice:
    • service is a program can reveive different requests from different client and return correct result.
  • Web application:
    • Server : webservice
    • Client : UI in browser
    • 说白了 web application是给你提供了一个UI界面的webserver

upload successful

  • Client use internet to send request and get response from server.

  • Server side : provide web service(提供service的一端)

  • Client side : provide UI （提供UI界面的一端）

  • 3 protocal:

    • IP protocal: make sure request is sending to right machine.(你的机器在互联网中的地址，咱们在互联网通信的时候都用IP地址来通信)
    • TCP protocal: make sure request is sending to right process.
      (为什么要有TCP协议呢， 为了数据能正确的传到目的地，保证请求能正确的发到服务器端)
    • HTTP protocal: make sure request can be parsed correctly. (保证交换的双方能听懂对面在说什么， 甭管是请求还是返回，请求都满足一定的格式)
    • 总结一下
      • 发送请求想找门牌号，IP协议，保证请求能发到正确的服务器，TCPIP协议，找到服务器了，该怎么交流，彼此读懂彼此，HTTP协议。

  • HTTP请求

    • 发送请求的格式：Json

Posted on |

Model-View-Controller Architecture

  • Design goal : Identify which application component are model, view, or controller.
  • 关系图

upload successful

  • MVC Implementation:
    • Keep the implementation of the three objects types separate.
    • Each type of object does not depend on how the other types are implement.(说白了互不影响)
  • Model Object
    • Represent the persistent information maintained by your application.
    • The information can be kept in a database.
  • View Object
    • View objects represent.
      • Input components of a webpage.
    • Users interact with at least one view object.
    • View object collects information from users in a form that the model and controller objects can use.
  • Controller Object
    • coordinate the model and view object.
    • can be implemented by routing
    • represent application control flows

Route

  • A route is a mapping from an incoming HTTP request to athe appropriate controller code.(说白了就是找路，发来一个http请求，然后route是用来找应该发到哪个controller里)
  • A URI(Uniform Resource Identifier) identifies a resource your application provides.
    • The most common form of URI is a URL

HTTP request

  • Most widely used http method is GET, POST, PUT and DELETE

Form data

  • A user can input data into an HTML form displayed on a client-side web browser.
  • Ways to send form data:
    • Get method.
      • Appended to the target URL
      • Good for small amounts of data
    • Post method
      • sent via environment variables
      • Good for large amounts of data.

upload successful

Posted on | In |

Client and Server WebApplication:

upload successful

  • HTML sepecifies a web pages’s:
    • Content
    • Strusure
    • Semantics
  • HTML should no longer specify fomatting. Formatting tags and attributes are deprecated

  • HTML Page Template

    <!DOCTYPE html>
<html lang = "en-US">
<head>
      <meta charset = "UTF-8">
      <title>page title</title>
</head>
<body>
    body of page
</body>
</html>

  • Heading and Paragraphs

    <body>
      <h1> chapter 1 </h1>
      <h2> chapter 1.1 </h2>

    <p>
        I dont like 287 class
    </p>

    <p>
        So far OK?
    </p>
 </body>

upload successful

  • Order and Unordered List && Nested List

    <!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Lists</title>
</head>

<body>
    <h1>Unordered list</h1>

    <ul>
        <li>California</li>
        <li>New York</li>
        <li>Texas</li>
    </ul>

    <h1>Ordered list</h1>

    <ol>
        <li>CS 146</li>
        <li>CS 151</li>
        <li>CS 152</li>
        <li>CS 153</li>
        <li>CS 160</li>
        <li>CS 174</li>
    </ol>

    <!-- Ignore the following anchor tag for now. -->
    <a name="nested"></a>

    <h1>Nested list</h1>

    <ol>
        <li>
            <h2>California</h2>

            <ul>
                <li>San Francisco</li>
                <li>San Jose</li>
                <li>Los Angeles</li>
            </ul>            
        </li>
        <li>
            <h2>New York</h2>

            <ol>
                <li>New York City</li>
                <li>Albany</li>
            </ol>
        </li>
        <li>
            <h2>Texas</h2>

            <ul>
                <li>Dallas</li>
                <li>El Paso</li>
            </ul>
        </li>        
    </ol>
</body>
</html>

    Unordered list




    • California

    • New York

    • Texas



    Ordered list




    1. CS 146

    2. CS 151

    3. CS 152

    4. CS 153

    5. CS 160

    6. CS 174






    Nested list





    1. California




      • San Francisco

      • San Jose

      • Los Angeles




    2. New York




      1. New York City

      2. Albany




    3. Texas




      • Dallas

      • El Paso




  • Simple Table, Table with Borders and Table with colspan and rowspan

    <h3>Spanning rows and columns</h3>

<table border="1">
    <caption>States</caption>
    <tr>
        <th>State</th>
        <th>Capital</th>
        <th>Population</th>
    </tr>
    <tr>
        <td>California</td>
        <td colspan="3">The Golden State</td>
    </tr>
    <tr>
        <td>New York</td>
        <td>Albany</td>
        <td rowspan="2">Too many!</td>
    </tr>
    <tr>
        <td>Texas</td>
        <td>Austin</td>
    </tr>
</table>

    Spanning rows and columns





















    States
    State Capital Population
    California The Golden State
    New York Albany Too many!
    Texas Austin

    • Links to Pages

       <body>
    <h1>Links to Pages</h1>

    <p>
        An absolute link to the
        <a href="http://localhost/basics/paragraphs.html">
            Paragraphs and Headings
        </a> page has the complete URL:
        <strong>http://localhost/examples/paragraphs.html</strong>
    </p>

    <p>
        A relative link to the <a href="tables.html">Tables</a> page
        has a URL that is relative to the directory of the current page:
        <strong>tables.html</strong>
    </p>

    <h1>Links to Anchor Tags</h1>

    <p>
        A link to the the <a href="#lorem">lorem</a> anchor tag
        on this page uses the location <strong>#lorem</strong>. Place the
        anchor tag before the line you want to jump to.
    </p>

    <p>
        You can also jump to the <a href="lists.html#nested">nested</a>
        anchor tag on the Lists page using the location
        <strong>lists.html#nested</strong>
    </p>

    <a name="lorem"></a>
    <h1>Lorem ipsum</h1>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
</body>

      Links to Pages




      An absolute link to the

      Paragraphs and Headings
       page has the complete URL:
      http://localhost/examples/paragraphs.html




      A relative link to the Tables page
      has a URL that is relative to the directory of the current page:
      tables.html



      Links to Anchor Tags




      A link to the the lorem anchor tag
      on this page uses the location #lorem. Place the
      anchor tag before the line you want to jump to.




      You can also jump to the nested
      anchor tag on the Lists page using the location
      lists.html#nested




      Lorem ipsum




      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo consequat.


Posted on |

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment