javaWeb学习心得

Oct_TwentyFour

于 2021-01-04 22:46:13 发布

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：随手记录的小知识点 java-初识文章标签： java javaweb

本文链接：https://blog.csdn.net/haobo__/article/details/112199032

随手记录的小知识点同时被 2 个专栏收录

26 篇文章

订阅专栏

java-初识

10 篇文章

订阅专栏

文章目录

记录本人学javaWeb类型遇到的小问题，方便以后查阅

1. 下拉框默认值

//下拉框 ----这样式的～～
<select name="usePosition"  id="ii">
                    <option value="行政助理">行政助理</option>
                    <option value="程序员">程序员</option>
                    <option value="项目组长">项目组长</option>
                    <option value="项目经理">项目经理</option>
 </select>
//script 的jquery是这样式的～～
<script>
    $(function () {
        var a="${xiu.usePosition}"
    	$("#ii").find("option[value='"+a+"']").attr("selected",true);
</script>

2. 双选框【二选一】

//最常见的性别选框  是这样式的～～
 <input type="radio" name="sex"  checked value="男" /> 男
 <input type="radio" name="sex"   <c:if test="${xiu.useSex=='女'}"> checked </c:if> value="女" />女

3. jQuery导入

<head>
//在线导入
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
//本地导入
<script type="text/javascript" src="本地jquery地址/jquery文件名.js"></script>
</head>

4.数据传递的几种方式

1.  window.location.href=" " //缺点：页面不会刷新，没有返回数据，get
2. 	form 表单  action=" “  method="post/get"   //表单提交用
3. <script> 
  $.ajax({ //整个页面不会刷新  只是局部刷新  贼好用
            url:" ",
            type:"post",
            dataType:'json',
            data: "键1=值1&键2=值2.。。。",
            success:function () {
           
            }
        })
        </script>
4.	$.post(		"地址",  //其实就是ajax的简写
				 { "键1": "值1".。。 },
         		 function(data){成功后会返回数据 }, 
         		"数据格式");

5.获取Input框内的值

<input type="text" id="qq" >
$("#qq").val()

6.获取下拉框的值

<select name="aa" id="aa">
                        <option value="">请选择</option>
                        <option value="行政助理">行政助理</option>
                        <option value="程序员">程序员</option>
                        <option value="项目组长">项目组长</option>
                        <option value="项目经理">项目经理</option>
 </select>
<script>
$("#aa").find("option:selected").val()
</script>

7 mySql的模糊查询

1. SELECT * from 表名 where locate(?,数据列名) 后面可以跟  and....  并且只要数据中有符合的就会查到
2. SELECT * from 表名 where 数据列名 like("%",?,"%") 要是中文  请在前后添加 %

8 jsp动态引入本地图片，不会裂开（类型以jpg、png结尾的图片）

在jsp里面，通过 img 标签地址的方式动态引入图片时，会发现图片裂开了。
通过流对象的方式，将图片转换成字节流给写到需要的位置，就可以完全解决这个问题。

为了方便，我定义了一个ImageServlet的流对象转换的工具类。

@WebServlet("/ImageServlet")
public class ImageServlet extends HttpServlet {
    @Override
    public void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
        String imageName = req.getParameter("imageName");//我的传递参数，就是图片的名字。
        showImage(req,res,imageName);
    }
    private void showImage(HttpServletRequest req, HttpServletResponse res , String fileName) throws IOException {
        File file = new File("E:\\UP\\" + fileName);//我上传的图片的本地文件夹，保存着我的图片。会从这里面去读取图片。
        FileInputStream fis = new FileInputStream(file);
        ServletOutputStream outputStream = res.getOutputStream();
        byte [] bs = new byte[1024*1024] ;
        int i = -1 ;
        while ((i = fis.read(bs)) != -1){
            outputStream.write(bs);
            outputStream.flush();
        }
        outputStream.close();
        fis.close();
    }

}

9. layui 获取table的多选，单选，还是全选

在这里插入图片描述
这是我的script

   table.on('checkbox(demo)', function(obj){
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
            console.log(table.checkStatus('queryList').data);// 获取表格中选中行的数据
            
   //下面都是我自己的需要获取的数据==================省略就好        
            checked=[];//清空数组
            if((table.checkStatus('queryList').data).length==0){
            }else {
                for (var i=0;i<(table.checkStatus('queryList').data).length;i++){
                    checked.push((table.checkStatus('queryList').data)[i].id);
                }
            }
            console.log("sss"+checked)
        });

10.layui table表格的数据重载【搜索功能】

我的script

  var $ = layui.$, active = {
            reload: function(data){
            /* 表示获取到搜索框的值 */
                var demoReload = $('#demoReload');
                console.log(demoReload.val())
                //执行重载 ---【testReload】就是我的  table.render里面的id的值 
                table.reload('testReload', {
                    page: { 
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                    //写要传第参数 --我这里会传id到后台
                            "name": demoReload.val()
                    }
                }, 'data');
            }
        };
        /* 当点击搜索按钮时，会触动下面的方法 固定写法，直接c/v   */
        $('.demoTable .layui-btn').on('click', function(){
        if($('#param1').val()==""){
                layer.msg("亲，输入框没有内容噢！！");
            }else {
            	var type = $(this).data('type');
            	active[type] ? active[type].call(this) : '';
            }
        });

我的后台代码

这个方法会接收我前台传过来的值，默认情况下 id==null,当点击搜索的时候，id才不为空，可以在这个方法里做判断，当id为空时，执行普通的分页语句，当id不为空时，执行模糊查询，然后统一返回

 @RequestMapping("UserPage")
    public @ResponseBody  String a2(String page,String limit,String name){
		。。。
		//前面语句省略=========后面是转成json的语句。 list就是数据的List集合
	   		int count=list.size();
            JSONArray json = JSONArray.fromObject(list);
            String js = json.toString();
            String jso = "{\"code\":0,\"msg\":\"\",\"count\":"+count+",\"data\":"+js+"}";
            return jso;
}

11. layui数据表格表格重置功能

//重置
        $("#reset").on("click",function () {
            $('#param1').val("");//清空输入框的内容
            $('.demoTable .search').trigger("click");//动态点击搜索按钮
        })