发表于: 2020-07-01 23:12:46

1 1635


学习HTML标签:

<a>:定义超链接,从一张页面链接到另外一张页面。

<b> :规定粗体文本。

<basefont>:定义基准字体。该标签可以为文档中的所有文本定义默认字体颜色、字体大小和字体系列

<big> 标签呈现大号字体效果。

<body> 定义文档的主体。包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)

<br> 可插入一个简单的换行符。

<button> 标签定义一个按钮。

<canvas> 标签定义图形,比如图表和其他图像。

caption 元素定义表格标题。

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

<table> 标签定义 HTML 表格。

编写几个页面

<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>
<% String path=request.getContextPath();
   String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>
   <base href="<%=basePath%>">
   <title>添加用户</title>
</head>
<body>
<h1>添加用户</h1>
<form action="" name="studentForm">

   姓名:<input type="text" name="name"><br>
   QQ:<input type="text" name="qq"><br>
   学习类型:<input type="text" name="learn_type"><br>
   入学时间:<input type="text" name="joinTime"><br>
   毕业院校:<input type="text" name="school"><br>
   愿望:<input type="text" name="wish"><br>
   师兄:<input type="text" name="instructor"><br>
   方式:<input type="text" name="knowFrom"><br>
   创建时间:<input type="text" name="createAt"><br>
   更新时间:<input type="text" name="updateAt"><br>
   <input type="button" value="添加" onclick="addStudent()"/>
</form>
<!--<script> 标签通常放置在一个 HTML 网页的头部标签 <head> 标签内,用于链接外部 JavaScript 文件的外部资源标签。-->
<script type="text/javascript">
   function addStudent() {
var form = document.forms[0];
       form.action = "<%=basePath%>student/addStudent";
       form.method = "post";
       form.submit;
   }
</script>
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>
<% String path=request.getContextPath();
   String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>
   <title>学生列表</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- 引入 Bootstrap -->
   <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<div class="container">
   <div class="row clearfix">
       <div class="col-md-12 column">
           <div class="page-header">
               <h1>
                   基于SSM框架的管理系统:简单实现增、删、改、查。
               </h1>
           </div>
       </div>
   </div>

   <div class="row clearfix">
       <div class="col-md-12 column">
           <div class="page-header">
               <h1>
                   <small>学生列表-显示所有学生</small>
               </h1>
           </div>
       </div>
   </div>
   <div class="row">
       <div class="col-md-4 column">
           <a class="btn btn-primary" href="<%=basePath%>/student/addStudent">新增</a>
       </div>
   </div>
   <div class="row clearfix">
       <div class="col-md-12 column">
           <table class="table table-hover table-striped">
               <thead>
               <tr>
                   <th>姓名</th>>
<th>QQ</th>
                   <th>学习类型</th>
                   <th>入学时间</th>
                   <th>毕业院校</th>
                   <th>愿望</th>
                   <th>师兄</th>
                   <th>方式</th>
                   <th>表格创建时间</th>
                   <th>表格更新时间</th>
               </tr>
               </thead>
               <tbody>
               <c:forEach items="#{pageInfo.list}" var="student">
<tr>
                       <td>#{student.name}</td>
                       <td>#{student.qq}</td>
                       <td>#{student.subject}</td>
                       <td>#{student.joinTime}</td>
                       <td>#{student.school}</td>
                       <td>#{student.wish}</td>
                       <td>#{student.instructor}</td>
                       <td>#{student.knowFrom}</td>
                       <td>#{student.createAt}</td>
                       <td>#{student.updateAt}</td>
                       <td>
                           <a href="<%=basePath%>/student/findStudent?id=#{student.id}">编辑</a>
                           <a href="<%=path%>/student/deleteStudent/id=#{student.id}" methods="post">删除</a>
                   </tr>
               </c:forEach>
</tbody>
           </table>
           <p>当前 ${pageInfo.pageNum },${pageInfo.pages }
               ,${pageInfo.total } 条记录</div></p>
       <a href="<c:url value="/student/findAllStudent?pageNo=${pageInfo.firstPage}"/>">${pageInfo.firstPage}</a>
       <a href="<c:url value="/student/findAllStudent?pageNo=${pageInfo.firstPage+1}"/>">${pageInfo.firstPage+1}</a>
       <c:if test="${pageInfo.hasPreviousPage }">
<a href="<c:url value="/student/findAllStudent?pageNo=${pageInfo.pageNum-1}"/>">上一页</a>
       </c:if>
<c:if test="${pageInfo.hasNextPage }">
<a href="<c:url value="/student/findAllStudent?pageNo=${pageInfo.pageNum+1}"/>">下一页</a>
       </c:if>
<a href="<c:url value="/student/findAllStudent?pageNo=${pageInfo.lastPage}"/>">${pageInfo.lastPage}</a>
       </table>
   </div>
</div>
</div>


使用Spring Rest 编写对应的Controller。

什么是restful?
RESTful架构,就是目前最流行的一种互联网软件架构。它结构清晰、符合标准、易于理解、扩展方便,所以正得到越来越多网站的采用。

rest(Representational State Transfer),即表现层状态转化。它省略了主语,"表现层"其实指的是"资源"(Resources)的"表现层"。

所谓"资源",就是网络上的一个实体,或者说是网络上的一个具体信息。它可以是一段文本、一张图片、一首歌曲、一种服务,总之就是一个具体的实在。你可以用一个URI(统一资源定位符)指向它,每种资源对应一个特定的URI。要获取这个资源,访问它的URI就可以,因此URI就成了每一个资源的地址或独一无二的识别符。

所谓"上网",就是与互联网上一系列的"资源"互动,调用它的URI。

访问一个网站,就代表了客户端和服务器的一个互动过程。在这个过程中,势必涉及到数据和状态的变化。

互联网通信协议HTTP协议,是一个无状态协议。这意味着,所有的状态都保存在服务器端。因此,如果客户端想要操作服务器,必须通过某种手段,让服务器端发生"状态转化"(State Transfer)。而这种转化是建立在表现层之上的,所以就是"表现层状态转化"。 

客户端用到的手段,只能是HTTP协议。具体来说,就是HTTP协议里面,四个表示操作方式的动词:GET、POST、PUT、DELETE。它们分别对应四种基本操作:GET用来获取资源,POST用来新建资源(也可以用于更新资源),PUT用来更新资源,DELETE用来删除资源。

综合上面的解释,我们总结一下什么是RESTful架构:

  (1)每一个URI代表一种资源;

  (2)客户端和服务器之间,传递这种资源的某种表现层;

  (3)客户端通过四个HTTP动词,对服务器端资源进行操作,实现"表现层状态转化"。

遇到的问题:前端页面东西太多了 学不过来 准备略过

明天计划  使用Spring Rest 编写对应的Controller


返回列表 返回列表
评论

    分享到