JSP_4.20_课堂笔记

Posted 2023-04-22 宁姑娘的小跟班 ღゝ◡╹)ノ♡

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JSP_4.20_课堂笔记相关的知识，希望对你有一定的参考价值。

上课讲的顺序大概是这样

第一步天气的网页需要一个前端 后端，但是后端我们并没有可以得到的数据，就去数据平台拿到一个API接口(意思就是去网站上拿到一个传送过来的后端数据比如上游戏，前端就是游戏软件（王者荣耀），但是只有前端游戏是不能玩的，必须有实时传送的后端数据发送上来才能玩。所以后端数据就是直接去https://tianqiapi.com/注册一个账号，然后拿到 "https://v0.yiketianqi.com/free/week?appid=83487365&appsecret=OtWHp55p&city="
这样的一个接口,这样后端的数据就搞定了。
第二步前端与后端的连接，我们依旧依靠ajax这个数据传递中枢来发送这个数据，第一步就是引入jQuery库,作用就是利用这个库可以简化JavaScript的代码，快速做出具有交互性和动态性的网页。引入之后继续写代码（每行代码都有注释仔细看）
可以跳过style标签内容
主要看body标签里的内容

整合之后的天气查询网站jsp页面如下

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!--定义页面编码格式为UTF-8-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天气预报</title>
<!--引入jQuery库-->
<script src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
body 
background-image: url("images/1.jpg");
background-repeat: no-repeat;
background-size: cover;

/设置整个天气展示容器的样式/
#container
width: 800x; /* 设置div块的宽度 /
height: 300px; / 设置div块的高度 /
background-color: rgba(255,255,255, 0.5); / 设置透明黑色背景 /
border-radius: 15px; / 设置圆角 */
margin-top: 50px;


		/*设置每个天气展示div的样式*/
		#container div
			float:left;
			width:14.2%
			
		
		h1
			font-size:14px
		
		h2
			font-size:10px
		
		/*设置输入框样式*/
		input
			  position: absolute; /* 设置绝对定位 */
			  left: 50%; /* 设置左侧偏移量为50% */
			  text-align: center;
			  transform: translate(-80%, -110%); /* 将输入框水平和垂直方向上移动到中心位置 */
			  width: 200px; /* 设置输入框宽度 */
			  height: 30px; /* 设置输入框高度 */
			  border: none; /* 取消边框 */
			  border-radius: 13px; /* 设置圆角 */
			  background-color: #f2f2f2; /* 设置背景颜色 */
		
		/*设置查询按钮样式*/
		button
			  position: absolute; /* 设置绝对定位 */
			  left: 60%; /* 设置左侧偏移量为50% */
			  transform: translate(-50%, -110%); /* 将输入框水平和垂直方向上移动到中心位置 */
			  width: 70px; /* 设置输入框宽度 */
			  height: 30px; /* 设置输入框高度 */
			  border: none; /* 取消边框 */
			  border-radius: 13px; /* 设置圆角 */
			  background-color: #47a0fc;
			  font-size: 4px;
			  margin-left:50px;
		
	</style>
</head>
<body>
	<!--输入城市名称的输入框-->
	<input type="text" placeholder="请输入城市（不能带市和区）" id="city">
	
	<!--查询按钮-->
	<button onclick="fun()">查询</button>
	
	<!--天气展示容器-->
	<div id="container">
		
	</div>
	
	<!--Ajax请求天气数据并展示-->
	<script type="text/javascript">
		function fun()
			//1、获取输入框的城市名
			var city = $("#city")[0].value;
			//2、通过ajax请求后端 获取天气  后端是由第三方提供的
			$.ajax(
                                url:"https://v0.yiketianqi.com/free/week？appid=83487365&appsecret=OtWHp55p&city="+city,
				type:"get",
				dataType:"json",
				success:function(res)
//清空天气展示容器
$("#container")[0].innerHTML="";
console.log(res);
var data = res.data;
for(var i=0;i<data.length;i++)
	//创建展示天气的div
	var div = document.createElement("div");
	//创建展示日期的h1标签 

        //`document.createElement` 这个是个方法，创建内容的方法
	var h1 = document.createElement("h1");

        h1.innerText=data[i].date;
        //将获取到的天气数据中的日期赋值给h1标签的innerText属性，从而将日期展示在页面上。其中，data[i].date表示获取到的天气数据中的日期信息。
						
	div.appendChild(h1);
	//将创建的h1标签添加到展示天气的div中，从而将日期展示在页面上。其中，div表示创建的展示天气的div，h1表示创建的展示日期的h1标签。通过调用appendChild()方法，将h1标签添加到div中。

	//（以下的5个数据引入与1同理 cv工程师即可）创建展示天气情况的h2标签 
	var h2 = document.createElement("h2");
	h2.innerText=data[i].wea;
	div.appendChild(h2);
						
	//创建展示天气情况图片的img标签
	var img = document.createElement("img");
	img.src="images/"+data[i].wea_img+".png";
	div.appendChild(img);
						
	//创建展示最低气温的h2标签
	var h3 = document.createElement("h2");
	h3.innerText="最低气温"+data[i].tem_day+"℃";
	div.appendChild(h3);
						
	//创建展示最高气温的h2标签
	var h4 = document.createElement("h2");
	h4.innerText="最低气温"+data[i].tem_night+"℃";
	div.appendChild(h4);
						
	//创建展示风向的h2标签
	var h5 = document.createElement("h2");
	h5.innerText=data[i].win;
	div.appendChild(h5);
						
	//创建展示风力等级的h2标签
	var h6 = document.createElement("h2");
	h6.innerText="风级"+data[i].win_speed;
	div.appendChild(h6);
						
	//将展示天气的div添加到天气展示容器中
	$("#container")[0].appendChild(div);
					
				
				
			)
			
		
	</script>
	
</body>
</html>

笔记之_Java的jsp页面常用

json格式转换：
日期格式化
        JsonConfig  config=new JsonConfig();
        config.registerJsonValueProcessor(Date.class, new JsonDate());
JSONObject  json=JSONObject.fromObject(pojo,config);
    json对象
        JSONObject  json=JSONObject.fromObject(pojo);
    json数组、集合：
        JSONArray arr=JSONArray.fromObject(object);
输入框不可编辑：
方法1: onfocus=this.blur() 当鼠标放不上就离开焦点
<input type="text" name="input1" value="中国" onfocus=this.blur()>
方法2:readonly
<input type="text" name="input1" value="中国" readonly>
<input type="text" name="input1" value="中国" readonly="true">
方法3: disabled
<input type="text" name="input1" value="中国" disabled="true">
A标签禁止跳转，执行javascript的方法
        href="javascript:document.getElementById(‘fm’).submit() " 
数据库备注：
select table_name from user_tables; //当前用户拥有的表      
select table_name from all_tables; //所有用户的表 
select table_name from dba_tables; //包括系统表
select table_name from dba_tables where owner=‘用户名‘
comment on column TableName.ColumnName is ‘备注名’;//为列添加备注
comment on table TableName is ‘备注名‘;//为表添加备注
select * from user_tab_comments//获取表的备注
select * from user_col_comments//获取列的备注
alter table student rename column classessId to classId  //修改列名
创建临时表数据：
create table 临时表名 as insert into 临时表名 select * from 表名 where id=1;commit;
数据库视图权限：grant create view to baiyun
备份表数据： create table 备份表表名  as select * from 表名
还原表数据：insert into 备份表表名  select * from 表名
创建视图：create or replace view  视图名  as 
Create     or    replace    view     sss    as    select c.classId,c.className,c.marjorId,m.marjorName from student t,marjor m,classes c where  c.marjorId=m.marjorId







元素不显示：
Display: 设置元素显示或隐藏，隐藏不占据空间位置
none不显示；
block 以块级方式显示；
inline 以行级方式显示；
inline-block行块级显示，可以调整宽高，前后不换行
visibility：visible显示，hidden不显示，隐藏时占据空间位置
      hidden：直接写就行，在xhtml中赋值为hidden
伪类样式：出现顺序固定，可以省略，只能出现在内部和外部，不能出现在行内
    a:link{ }默认
    a:hover{ }悬浮
    a:active{ }点击时
    a:visited{ }点击后
    书写顺序：L、V、H、A
    其他标签：默认用div、悬浮用div:
弹出消息框的方式
输入：
prompt(弹框的消息,输入框的默认值)
返回用户输入在输入框中的内容
返回的是字符串类型，转型要用到parseInt()、parseDouble()
输出：
alert(弹框的消息信息)； 无返回值  
confirm(弹框的消息信息)；返回boolean值
禁用提交按钮：
    禁用：document.getElementById(“sub”).setAttribute(“disabled”,”disabled”);
    启用：document.getElementById(“sub”).removeAttribute(“disabled”);
    被禁用的按钮即不可用又不可点击
日期格式转换：
Java中利用Object方式为日期赋值
将字符串类型转为java的日期类型，然后转换为sql的日期类型
new java.sql.Date(DateFormat.getDateInstance().parse(joinDate).getTime()))
util.Dtae是sql.Date的父类
util.Dtae转为sql.Date：
new Date(da.getTime());
将字符串转为Java的Date类型：
    DateFormat.getDateInstance().parse(String)
new SimpleDateFormat("yyyy-MM-dd").parse(time);
将日期转换为字符串
new SimpleDateFormat("yyyy-MM-dd").format(date);
Java中取得当前项目的根目录：
TestPath.class.getResoure(“/template.html”).getPath();
TestPath.class.getResoure(“/template.html”).getFile();

json常用：
根据class取得多个对象，并取得他们的值：
    $(‘.mycount‘).each(function(){ arr.push(parseInt($(this).val())); });
标签显示内容设值：
    .text(value);
    .html(value);
表单value设值：
    .val(value);
移除一行数据：
    $(this).parents(‘tr‘).remove();
复选框是否被选中
    .is(‘:checked‘)
复选框设值，是否被选中
    .attr(‘checked‘,’true’);
    .removeAttr("checked");
循环遍历
$.each(数组，事件(下标，对象));
$.each(对象，事件(键，值));
$.each(数组对象，事件(下标，对象));
DOM节点操作：
在选择器的里面的最后面添加标签内容
 选择器.append(“标签内容”);   
  <p>Hello</p>
 $(“p”).append(“<h1>你好</h1>”);  
 结果：  <p>Hello <h1>你好</h1> </p>
在选择器的里面的最前面添加 标签内容
选择器.prepend(“内容”)  
<p>Hello</p>
 $(“p”).prepend(“<h1>你好</h1>”);  
 结果：  <p><h1>你好</h1>Hello  </p>
把选择器元素全部删除
 选择器.remove();                
 <p>Hello, <span>Person</span> <a href="#">and person</a></p>
 $(“p”).remove();
把选择器元素里面的内容删除
选择器.empty();                
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
 $(“p”).empty();  -->  <p></p>
复选框：
取得值  
    $("input[type=‘checkbox‘]").prop("checked");
设定值
   $("input[type=‘checkbox‘]").prop("checked",true/false);

Jquery 使用ajax最完整写法
   $.ajax({
       type:”get/post”,
       url:”请求地址”,
       data:{“userName”: “wy” ,  “password”:”111”}  //post用的
       async:true/false,      是否异步
       cache:true/false,      是否缓存页面,false url?r=Math.random()
       dataType:”text/html/script/xml/json/jsonp”,  返回类型
       success:function( 变量名 ){
              解析
       },error:function(e){
            //出错操作
       }
   });

Jquery 使用ajax简洁写法，方便更多人用，精简
  $.get(url ,{参数名:值 ,参数名:值 },function(变量名){
          解析
 });

  $.post(url ,{参数名:值 ,参数名:值 },function(变量名){
          解析
 });
读取jdbc.properties中的变量值：
        Properties prop = new Properties();
prop.load(BaseDao.class.getResourceAsStream("/jdbc.properties"));
DRIVER = prop.getProperty("jdbc.driver");
URL = prop.getProperty("jdbc.url");
USERNAME = prop.getProperty("jdbc.username");
PASSWORD = prop.getProperty("jdbc.password");
Bom对象内容：
History：代表浏览器的访问历史， window.history.go(); 
    Go()：0 代表刷新本页；1 去下一页；-1 返回上一页
    Back()：返回前一个页面
    Forword()：前进到历史进入过的下一个页面
Location：代表浏览器的浏览地址 url ，window.location.href=’连接的地址’
    Href()：跳转到一个页面
    Reload()：重新载入当前页面，刷新
Document：是用于查找和动态控制页面中标签元素的模型
    Referrer：返回前一个跳转页面的url
    url：返回当前文档的url



实例化对象方法：
    New student();
    Student.class.newInstance();
    Class.forName(“com.wize.studnet”).newInstance();
get提交乱码问题：
1把servlet请求的参数取出来，转换成为ISO-8859-1，然后再转换成UTF-8
     String n=new String(name.getBytes("ISO-8859-1"), "UTF-8"); 
2修改 tomcat/conf/server.xml 中的  <Connector>
<Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8" />
3自定义filter对get请求的参数进行转码(先以iso-8895-1进行解码,然后再以utf-8进行编码)
Jsp页面日期格式：
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<fmt:formatDate value=‘${cost.CStardate}‘ pattern=‘yyyy-MM-dd‘ />
jsp页面取参数：
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
页面转发：
request.getRequestDispatcher("index.jsp").forward(request,response);
重定向传参：
response.sendRedirect("index.jsp")?id=<%=d.getDeptId()%>&name=<%= d.getDeptName()%>
MyBaties的多表连接查询返回对象：
<resultMap type="com.wisezone.entity.Classes" id="classesType">
        <!-- 主键 -->
        <id property="classesId" column="classesid" />
        <result property="classesName" column="classesName" />
        <result property="startTime" column="startTime" />
        <result property="endTime" column="endTime" />
        <result property="numberCount" column="numberCount" />
        <!-- 多对一 -->
        <association property="major" javaType="com.wisezone.entity.Major">
            <id property="majorId" column="majorId" />
            <result property="majorName" column="majorName" />
        </association>
</resultMap>
使用：
    <select id="findById" parameterType="int" resultMap="classesType">





Oracle数据库利用myBaties框架，查询分页时<符号用&lt;
方法一：
&lt;<小于号                                           
&gt; >大于号
&amp;&和
&apos;’单引号
&quot;"双引号
方法二：
用<![CDATA[ ]]>进行说明
<![CDATA[ when min(starttime)<=‘12:00‘ and max(endtime)<=‘12:00‘]]>  
MyBaties单独用时重要使用部分：
SqlSessionFactory  sessionFactory=null;
InputStream in=MyBtaisUtil.class.getResourceAsStream("/mybatis-config.xml");
sessionFactory=new SqlSessionFactoryBuilder().build(in);
SqlSession session = MyBtaisUtil.openSession();
AssessmentMapper mapper = session.getMapper(AssessmentMapper.class);    
session.commit();
session.rollback();
复选框状态保持：
<select id="marjorId" name="marjorId" class="form-control">
    <option value="0">请选择</option>
        <c:forEach items="${marjorArr}" var="s">                                       
            <option 
                <c:if test="${s.marjorId==param.marjorId}">selected</c:if>
                    value="${s.marjorId}">${s.marjorName}</option>                  
        </c:forEach>                    
</select>
页面选择标签：
<c:choose>
    <c:when test="${s.sex==0 }">男</c:when>
    <c:when test="${s.sex==1 }">女</c:when>
</c:choose>
javascript特别函数：
    eval(“String”)  //执行字符串
document.write(eval("2+2"))  //输出4









Spring MVC注入：
@DateTimeFormat(pattern="yyyy-MM-dd")  //实体类日期属性前
@Service  //业务实现层逻辑层
@Controller  // servlet注入标志
@Scope(value = "prototype")  //每次都要实例化对象
@RequestMapping(value = "/admin/classes")  //虚拟路径映射
@Autowired//自动注入，放在servlet属性前
@Resource(name = "classesServiceImpl")  //自动注入值、
@ResponseBody  //输出JSON对象标志
@PathVariable  //将url传过来的参数，取出来赋值到后面的变量，在方法的()中
        
        @WebServlet(value=” /admin/classes”)  //html5的web虚拟路径映射
文件上传关键字：
<form  enctype="multipart/form-data">
    <input type="file" name="attach" id="attach"  />
</form>
MultipartFile attach  //方法的()中
attach.getInputStream() ;  //获得输入流
<!-- 文件上传解析器 -->
<!-- 文件上传解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.
commons.CommonsMultipartResolver">
     <!-- 设置上传文件最大尺寸，单位为B  5MB-->
    <property name="maxUploadSize" value="5242880" />
</bean>
如果传过来的值为空，判断：
<c:if test="${empty s.portrait }"></c:if>  //为空
<c:if test="${not empty s.portrait }"></c:if>  //不为空
数据库回滚：
        throw new  RuntimeException("批量上传学生信息失败的");
js中取出页面request中的参数：
1)
var a = ‘<%=request.getAttribute("aaa");%>‘ ;
2)
<input type="hidden" value="<%=request.getAttribute("aaa");%>" id="aaa"/>
        var a = document.getElementById(‘aaa‘).value ;
    3)
        <input type="hidden" value="${student.name}" id="stuName"/>
        var stuName = $(‘stuName‘).value ;// prototype.js新功能,简写.




hibernate注入：
    实体类
(1)这个表示一个实体类，Table表示对应数据库中的表名。
@Entity
@Table(name="t_emp")
(2)这个表示主键自动增长
mysql数据库
@Id
@GeneratedValue
oracle数据库
@Id
@SequenceGenerator(name = "FLINKSEQ", sequenceName = "flink_seq", initialValue = 1, allocationSize = 1)
@GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "FLINKSEQ")
(3)这个表示关联对象以及关联的字段名字
@ManyToOne
@JoinColumn(name="dept_id") //子表实体类映射关系

@OneToMany(mappedBy="flinkType") //主表实体类映射关系
(4)和数据库中字段不一样的，要通过这个属性写清楚。
@Column(name="emai")
(5)表示时间字段
@Temporal(TemporalType.TIMESTAMP)
和@Temporal(TemporalType.DATE)
    Dao.impl包中：
        @Repository实体类数据访问层实现，放在类上
    Service.impl包中：
        @Service实体类业务逻辑层实现，放在类上
@Resource(name="flinkTypeDaoImpl")属性注入值放在setter方法上
    Controller包中：
@Controller 是servlet标志，放在类上
@Scope(value="prototype") 每次实例化，放在类上
@Resource(name="flinkTypeServiceImpl")赋值，属性的setter方法上
    测试类：放测试类上
@ContextConfiguration(locations="classpath:applicationContext.xml")
@RunWith(value=SpringJUnit4ClassRunner.class)

struts传参：
getter方法
ActionContext.getContext().getContextMap().put("arrLinks", arrLinks);
struts页面取值：
#r.id
id


利用反射取得泛型的类：
public abstract class CommonDaoImpl<T,PK extends Serializable> implements CommonDao<T, PK>{
    @Autowired
    private SessionFactory sessionFactory;
    @Autowired
    protected CommonSearchDao commonSearchDao;
    private Class<T> entity;
    public CommonDaoImpl(){  //取得T的实体类
        Type type=this.getClass().getGenericSuperclass();
        if( type instanceof ParameterizedType){
            Type[] te=((ParameterizedType)type).getActualTypeArguments();
            entity=(Class<T>) te[0];
        }
    }
    @Override
    public T findById(PK primaryKey) {
        Object obj=sessionFactory.getCurrentSession().get(entity, primaryKey);
        return (T)obj;
    }
}

jsp页面代码的提取：
    对于一段的连续的页面代码会被重复用到，将js和css分别提取到单独的jsp文件
在原页面通过<jsp:include page="common/common_js.jsp"></jsp:include>引用