Layui和ssmController交互

本文详细介绍如何在HTML中利用layui框架实现动态表格加载,包括JS配置、跨域设置、Controller编写及数据返回格式,适合初学者快速上手。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、html中写

<table id="workList" class="layui-hide" lay-filter="workList"></table>

二、在js中写

function workList(){
	layui.use(['table','element'], function(){
		  var table = layui.table
		  ,form = layui.form;
		  var element = layui.element;
		  
		  //第一个实例
		  table.render({
		    elem: '#workList'
		    ,height: 312
		    ,url: 'http://localhost:8080/UserInfo/selectByVillage.do' //数据接口
		    ,page: true //开启分页
			,method: 'post'
			,where:{village:'wang'}
		    ,cols: [[ //表头
		      {field: 'name', title: '用户名'}
		      ,{field: 'telephone', title: '联系电话'}
		      ,{field: 'politicsStatus', title: '政治面貌'}
		      ,{field: 'officialRank', title:'职别'}
			  ,{field: 'currentJob', title: '现任职务'}
		    ]]
		  });
		});
}

elem对应于html中id为worklist的table标签

url是将要访问的接口,由于是跨域,要在html的头上加上一段

<meta http-equiv="Access-Control-Allow-Origin" content="*" />

where字段的作用旨在传递参数,当前意思为访问接口时带一个名叫village的参数,值为“wang”,访问方法是post
cols字段,直接将里面的field值对应于Controller返回的集合中,每一个对象的各个参数即可,layui会自动对号并输出,不需要你遍历,如果需要分页就用上面的page参数。

三、在controller中写

@Controller
@RequestMapping("UserInfo")
public class UserInfoController {
	@Autowired
    UserInfoService userInfoService;
    public String selectByVillage(HttpServletResponse response, @RequestParam("village") String village){
        response.setHeader("Access-Control-Allow-Origin","*");
        System.out.println(village);
        List<UserInfo> userInfos = (List<UserInfo>) userInfoService.selectUserInfoByVillage(village);
        int count = userInfos.size();
        Map<String,Object> map=new HashMap<String, Object>();
        map.put("code", 0);
        map.put("msg", "");
        map.put("count", count);
        map.put("data", userInfos);
        String res = JSON.toJSONString(map);
        return res;
    }
}

第一句response.setHeader(“Access-Control-Allow-Origin”,"*");,还是为了解决跨域的问题。
用到map的原因,是人家layui的开发者文档说了在这里插入图片描述
格式就是这样,这是文档连接,layui文档

本来照着网上的样例是直接传map的,但是我真的技术不行,捣鼓一天了也不能传map,一直显示没有转换器,最后只能选择在Controller里就将其转换成JSON格式,往前端传字符串,这是返回到前端的json数据。

{"code":0,"count":1,"data":[{"community":"nan","currentJob":"stu","gender":true,"idno":"370","name":"jinx","officialRank":"bronze","politicsStatus":"stu","telephone":"111","town":"yunshan","userid":"1","village":"wang"}],"msg":""}

四、最后的show

在cols字段里,想展示data的那些值都行,我只展示了我需要展示的几个。
在这里插入图片描述
感谢各个群里的大佬,感谢身边的朋友,感谢大哥,感谢老师。

layui是一个轻量级的前端UI库,它简化了HTML、CSSJavaScript的开发,而SSM(Spring + Struts + MyBatis)是一种常用的企业级Java Web开发架构。结合layuiSSM进行用户注册,你可以按照以下步骤操作: 1. **项目结构**:在SSM项目中创建一个专门用于处理用户注册的模块,比如`user`模块,通常会包含控制器(Controller)、模型(Model)服务层(Service)。 2. **页面设计**:使用layui构建用户注册界面,包括输入框(username、password等)、验证码提交按钮。HTML结构简单明了,利用layui提供的样式组件。 ```html <!-- user/register.html --> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名..."> </div> <!-- ... 其他字段 ... --> <button class="layui-btn layui-btn-primary" lay-submit lay-filter="register">立即注册</button> </form> ``` 3. **控制器编写**:在对应的Controller类中,接收前端提交的数据,然后通过Service进行业务逻辑处理,如数据校验、保存到数据库等。 ```java // UserController.java @PostMapping("/register") public Result<?> register(@RequestBody UserRegisterForm form) { userService.register(form); return Result.ok(); } ``` 4. **Service实现**:在UserService中,调用MyBatis的增删改查方法来完成数据库的操作,并可能需要调用Validator进行预验证。 5. **数据交互**:通过Spring的依赖注入将Service注入到Controller,然后在Controller调用Service的方法。同时,可以使用Spring MVC的`@ModelAttribute`注解绑定前端表单数据。 6. **后端验证**:除了前端验证外,后端也有必要对数据进行完整性安全性的检查,例如密码加密存储、防止SQL注入等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值