jquery后台模板,前台模板框架

求大神给个INADMIN – jQuery Admin Template后台管理模板

先查看你的phpinfo()这个函数的输出的内容，看看支持了oci8没；如果没，就再配置一下。配置环境变量，把Oracle所在目录的路径写入电脑环境变量中的PATh中去。如果支持了，就把Oracle客户端下的oci.dll、ocaocci10.dll、craocr10.dll和orannzsbb10.dll复制到apache的bin目录下，然后重启apache看下行不。我是这么解决的，不知道你的行不行。（自己手写的，也才接触Oracle两个星期，勿喷）

我们提供的服务有：网站设计制作、成都网站设计、微信公众号开发、网站优化、网站认证、榆阳ssl等。为上千多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的榆阳网站制作公司

jquery里是什么?

在页面中 是 freemarker模板引擎，是后台的模板语法，并不是jquery的写法和语法。

JQuery框架的主要内容

由于项目用的是SSH框架，又用到了Freemarker模板页面，数据库是Mysql5.0，主要内容如下所示：

1. 注册页面，用Freemarker所写，这里使用了JQuery的一个表单验证框架formvalidator：

对前台注册页面register.ftl进行表单验证，当符合基本验证规则后，再通过JQuery formvalidator Ajax将数据传到action中。

register.ftl：

html

head

meta http-equiv=Content-Type content=text/html; charset=utf-8 /

title会员注册/title

link href=${base}/forum/css/pass.css rel=stylesheet type=text/css

link href=${base}/css/validator.css rel=stylesheet type=text/css/

script type=text/javascript src=@s.url value='/js/showError.js'//script

script type=text/javascript src=@s.url value='/js/jquery-1.3.2.min.js'//script

script type=text/javascript src=${base}/js/formValidator.js charset=UTF-8/script

script type=text/javascript src=${base}/js/formValidatorRegex.js charset=UTF-8/script

!—下面的JS代码是，实时验证用户名或注册邮箱是否存在 --

script type=text/javascript

$(document).ready(function(){

$.formValidator.initConfig({formid:form1,onerror:function(msg){},onsuccess:function(){return true;}});

$(#username)

.formValidator({onshow:请输入用户名,onfocus:请您记住填写的用户名，以后登录时需要用到！,oncorrect:该用户名可以注 册})

.inputValidator({min:4,max:15,onerror:用户名长度不能小于4个字符})

.ajaxValidator({

type : get,

datatype: json,

data: username:+$(#username).val(),

url : ${base}/user/ajax/userCheck!checkUser.action,

success : function(data){if(data.userExist){return false;}else{return true;}},

buttons: $(#button),

error: function(){alert(服务器没有返回数据，可能服务器忙，请重试);},

onerror : 该用户名已经存在，请更换用户名,

onwait : 正在对用户名进行合法性校验，请稍候…

});

$(#email)

.formValidator({onshow:请输入邮箱,onfocus:邮箱6-100个字符,请正确输入,oncorrect:恭喜你,邮箱可以注册,forcevalid:true})

.inputValidator({min:6,max:100,onerror:你输入的邮箱长度非法,请确认})

.regexValidator({regexp:^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$,onerror:你输入的邮箱格式不正确})

.ajaxValidator({

type : get,

datatype: json,

data: email:+$(#email).val(),

url : ${base}/user/ajax/userCheck!checkUser.action,

success : function(data){if(data.emailExist){return false;}else{return true;}},

buttons: $(#button),

error: function(){alert(服务器没有返回数据，可能服务器忙，请重试);},

onerror : 该邮箱已经存在，请更换邮箱,

onwait : 正在对邮箱进行校验，请稍候…

});

});

/script

/head

body

div id=passmain

div class=passbottom

div class=pbleftb

h3 style=text-align:center;新用户注册/h3

p class=p2t带*号的项目为必选项, 请全部填写/p

ul class=p2ul

@s.form action=register method=POST theme=simple id=form1 name=form1

@s.token name=token/

li class=p2li

div class=p2left用户登录昵称span style=color:#FF0000;* /span/div

div class=p2right@s.textfield name=user.username id=username class=item_input size=30 maxlenght=20 required=true onblur=checkUser(); /

/div

div class=p2centerdiv id=usernameTip/

/div

/libr

li class=p2li

div class=p2left性别span style=color:#FF0000;* /span/div

div class=p2right@s.radio

name=user.gender

list={action.getText('user.gender.male'):action.getText(user.gender.male),action.getText('user.gender.female'):action.getText(user.gender.female)}

size=30//div

/libr

li class=p1t注意：邮箱必须是可以收到程序员之家激活码的。/li

li class=p1t用户注册后，需要激活，才可以使用！激活码只会发到您注册邮箱中。/li

li class=p2li

div class=p2leftEmail地址span style=color:#FF0000;* /span/div

div class=p2right@s.textfield name=user.email id=email class=item_input size=30 onblur=checkEmali(); required=true/

/div

div class=p2centerdiv id=emailTip/div/div

/libr

li class=p1t5-20位字母、数字或字符组合，首字母必须为字母。/li

li class=p1t为了您的帐户安全，强烈建议您的密码使用字符+数字+特殊字符方式，并且密码长度大于8位。/li

li class=p2li

div class=p2left密码span style=color:#FF0000;* /span/div

div class=p2right

@s.password name=user.password id=userPassword class=item_input size=30 maxlength=16 onblur=checkPassword(); required=true/

/div

div class=p2centerdiv id=divHintPassword style=display:none;/div

/div

/libr

li class=p2li

div class=p2left重复输入密码span style=color:#FF0000;* /span/div

div class=p2right@s.password name=verifyPassword id=verifyPassword class=item_input size=30 maxlength=16 onblur=validatePassword(); required=true//div

div class=p2center

div id=divHintverifyPassword style=display:none;/div

/div

/libr

br

li class=p2li

div class=p2left输入校验码span style=color:#FF0000;*/span /div

div class=p2right@s.textfield name=validationCode class=item_input size=10 required=true/

/div

/li

li class=p2li

div class=p2left校验码span style=color:#FF0000;*/span /div

div class=p2rightimg src=@s.url value='/vcode.jpg'/ align='absmiddle' border='0'//div

/li

li class=p1tinput name=提交 type=submit value=注册用户 /

/li

/ul

/div

/@s.form

/div

/div

/body

/html

2．后台Action类，UserAjaxAction.java:

基于Hibernate与数据库进行交互验证用户名和邮箱是否存在，同时返回的数据格式为JSon类型的。

package com.qiuyanluocheng.action;

import IO.IOException;

import com.googlecode.jsonplugin.annotations.JSON;

/**

*

* @author qiuyanluocheng

*

*/

public class UserAjaxAction extends BaseAction

{

/**

* BaseAction是自己封装的

*/

private static final long serialVersionUID = 1L;

private String username;// 用户名

private String email;// 邮箱

private boolean userExist;

private boolean emailExist;

// 表示返回的Json数据中不含此属性

@JSON(serialize=false)

public String getUsername()

{

return username;

}

public void setUsername(String username)

{

this.username = username;

}

public String getEmail()

{

return email;

}

public void setEmail(String email)

{

this.email = email;

}

public boolean isUserExist()

{

return userExist;

}

public void setUserExist(boolean userExist)

{

this.userExist = userExist;

}

public boolean isEmailExist()

{

return emailExist;

}

public void setEmailExist(boolean emailExist)

{

this.emailExist = emailExist;

}

// 检查用户是否存在

public String checkUser() throws IOException

{

if(username != null){

if(this.getUserService().isUsernameExist(username)){

// System.out.println(用户存在！！！！！+username);

userExist = true;

}else{

// System.out.println(用户不存在！！！！！+username);

userExist = false;

}

}

if(email != null){

if(this.getUserService().isEmailExist(email)){

// System.out.println(邮箱存在！！！！！+email);

emailExist = true;

}else{

// System.out.println(邮箱不存在！！！！！+email);

emailExist = false;

}

}

return ajax;

}

}

注意需要导入jsonplugin-0.34.jar包。

3. 配置文件struts.xml：

配置action，并且注意package要继承json-default包，且结果集类型为json。

?xml version=1.0 encoding=utf-8?

!DOCTYPE struts PUBLIC -//Apache Software Foundation//DTD Struts Configuration 2.0//EN dtds/struts-2.0.dtd

struts

package name=userAjax extends=json-default namespace=/user/ajax

action name=userCheck class=com.qiuyanluocheng.action.UserAjaxAction

!—返回结果类型必须为json --

result name=ajax type=json/result

/action

/package

/struts

jQuery框架中增加对输入框的验证，在设计页面表单时，常常因为需要写大量的验证信息，还要写复杂的正则表达式，现在这样一个验证框架可以解决这样的繁杂问题。这样jquery.validate.js就诞生了，jquery.validate.js是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，并且对国际化也有很好的支持 。

validate自带的默认验证

required: 必选字段,

remote: 请修正该字段,

email: 请输入正确格式的电子邮件,

url: 请输入合法的网址,

date: 请输入合法的日期,

dateISO: 请输入合法的日期 (ISO).,

number: 请输入合法的数字,

digits: 只能输入整数,

creditcard: 请输入合法的信用卡号,

equalTo: 请再次输入相同的值,

accept: 请输入拥有合法后缀名的字符串,

maxlength: jQuery.format(请输入一个长度最多是 {0} 的字符串),

minlength: jQuery.format(请输入一个长度最少是 {0} 的字符串),

rangelength: jQuery.format(请输入一个长度介于 {0} 和 {1} 之间的字符串),

range: jQuery.format(请输入一个介于 {0} 和 {1} 之间的值),

max: jQuery.format(请输入一个最大为 {0} 的值),

min: jQuery.format(请输入一个最小为 {0} 的值)

jquery-tmpl模板 在模板中输出html

你现在有两个选择

第一：把代码贴出来

第二：我给你发个demo，你自己看看，比着改！

jquery easyui怎么实现前后台数据的交互

要看你用easyui的哪个组件了，一般官网上都有，我拿一个很简单的例子来说：

使用datagrid

table class="easyui-datagrid" style="width:400px;height:250px"

data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true"

……

/table

这里的data-options里有url的参数，可以换为后台url地址，而后台只要返回一个符合要求的json格式的数据过来就可以了。这里的json格式可以看看官网里的要求格式。

还有一种方法是使用js来加载数据：

页面代码比较简单：table id="dg"/table

js代码这么写：

$('#dg').datagrid({

url:'datagrid_data.json',

columns:[[

{field:'code',title:'Code',width:100},

{field:'name',title:'Name',width:100},

{field:'price',title:'Price',width:100,align:'right'}

]]

});

在url里写好后台url的路径就可以了，后台同样是返回一个json给页面。

再者，你想要提交数据给后台？

那么我就说一般情况，就是使用按钮点击提交

可以用form表单提交, action指定后台确定的url，

要么你可以在js中，取得想要传递给后台的数据，写一个$.post或者$.ajax等方法去将数据传递给后台去处理。

这是ajax请求后台的模板：

$.ajax({

type: 'post',

url: 'url', // this is the url for backend java program

data: {'data_post': data_post}, // the data you want to post to backend.

success: function(result){

alert('success');

}

})

为什么一个jquery easy ui的模板在部署到java项目编译工具eclipse下就不能用了

你不需要保证，浏览器可以告诉你。

打开Chrome浏览器，F12唤出开发人员工具（这个比IE里的开发人员工具强百倍），点到Network下，确认一下有没有爆红的css请求吧。（然后再给我反馈，进行下一步推断~）