【前端JSP思考】JSP中#{},${}和%{}的区别

JSP中#{},${}和%{}的区别：

#{}

#{}：对语句进行预编译，此语句解析的是占位符?，可以防止SQL注入， 比如打印出来的语句 select * from table where id=?，预编译之后会变成select * from table where id = "1 or 1 = 1"。给注入信息加上了引号，并将其中可能存在的特殊字符进行了转义处理，替换掉了，所以可以防止注入。

类比：Java中的PreparedStatement

预编译：预编译又称预处理，是整个编译过程最先做的工作，即程序执行前的一些预处理工作。

例如，C语言的宏定义#define pi 3.14，就是在编译前把对应的变量替换掉了。

我们这里的SQL预编译，PreparedStatement不是将参数简单拼凑成SQL，而是做了一些预处理，将参数转换为String，两端加单引号，将参数内的一些特殊字符（换行，单双引号，斜杠等）做转义处理，这样就很大限度的避免了SQL注入。

Statement：${}

如 对于查询语句：select * from user where name='+ name +'

输入：张三' or 1 = '1

Statement，单纯拼接，不防止注入：select * from user where name = '张三' or 1 = '1'

---

PreparedStatement：#{}

对于查询语句：select * from user where name=?

PreparedStatement，预编译SQL，对参数进行转义，防止注入，select * from user where name = '张三' or 1 = '1'

这样可以防止注入，导致我们sql语句的结构被改变。

${}

${}：则是不能防止SQL注入打印出来的语句 select * from table where id=2 实实在在的参数拼接而成，可能会被注入select * from table where id = 1 or 1 = 1。

类比：Java中的Statement

%{}

%{}：用在ognl表达式中是保证'{' 和 '}'之间的内容是OGNL表达式取值方式的

ognl表达式 即 对象导航图语言，用点来代替getset方法的调用，如配置文件properties中的. 。

如setName 我们可以使用.name

相当于oc中的点方法

@{}

在Thymeleaf中又引入了一个新的表达式符号@{}，@{}代表获取上下文，也可以理解为获取当前项目的根目录。

Jsp 的老方法${pageContext.request.contextPath} = Thymeleaf 的新方式 @{}

如下实例

老式jsp:

<div style="border: solid 1px">
    <form enctype="multipart/form-data" method="post" th:action= "${pageContext.request.contextPath}/uploadDownload/testuploadimg">
                图片<input type="file" name="file"/>
                <input type="submit" value="上传"/>
     </form>
</div>

新的thymeleaf:

<div style="border: solid 1px">
    <form enctype="multipart/form-data" method="post" th:action= "@{/uploadDownload/testuploadimg}">
                图片<input type="file" name="file"/>
                <input type="submit" value="上传"/>
     </form>
</div>

{{}}

在vue中又引入了一个新的表达式符号{{}}，{{}}用于输出对象属性和函数返回值，与${}用法类似，只不过{{}}是用于输出vue对象的属性和返回值

var vm = new Vue({
      /*  el:用于绑定属性的元素 */
      el:"#app",  //
      //data 用于定义属性，
      data:{
            msg:"hello world!!",
            age: 30,
            firstName : "liu234",
            lastName : "luw3111i",
            fullName : "luwei 6"
      },
      /* 用于定义的函数，可以通过 return 来返回函数值。*/
      methods : {
            getFullName : function(){
            //this指vm实例
                  return this.firstName + "" + this.lastName
            }
      }
})