拼多多网站的类型,wordpress 模块开发,电商erp,郑州公共住宅建设投资有限公司网站前言 在前两篇博客中#xff0c;后台已经搭建完毕#xff0c;现在需要设计一下前端页面 webapp下的项目结构图 创建ftl文件夹#xff0c;导入css和js 因为我们在后台的视图解析器中#xff0c;设置了页面解析器#xff0c;跳转路径为/ftl/*.ftl#xff0c;所以需要ftl文件…前言 在前两篇博客中后台已经搭建完毕现在需要设计一下前端页面 webapp下的项目结构图 创建ftl文件夹导入css和js 因为我们在后台的视图解析器中设置了页面解析器跳转路径为/ftl/*.ftl所以需要ftl文件夹以便识别。 css和js的资源我会上传。 list.ftl
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet href/ftl/css/bootstrap.min.csslink relstylesheet href/ftl/css/laypage.cssscript src/ftl/js/vue/vue.min.js/scriptscript src/ftl/js/jquery/jquery.min.js/scriptscript src/ftl/js/laypage/laypage.js charsetutf-8/scriptscript src/ftl/js/layer/layer.js charsetutf-8/script
/head
body
div idapp classcontainerform classform-inline bg-warning roleform查询条件div classform-grouplabel classsr-only forusername用户名称/labelinput typetext classform-control idusername placeholder用户名称/divdiv classform-grouplabel classsr-only foruserage用户年龄/labelinput typetext classform-control iduserage placeholder用户年龄/divbutton typebutton idfindUser classbtn bg-primary 查询用户/buttonbutton typebutton idaddUserBtn classbtn btn-danger增加用户/button/formdiv classtable-responsivetable classtabletheadtr classsuccesstd用户/tdtd年龄/tdtd操作/td/tr/theadtbodytr classactive v-for(item,index) in resulttd{{item.name}}/tdtd{{item.age}}/tdtda href# clickeditEvent(item.id)修改/aa href# clickdelEvent(item.id)删除/a/td/tr/tbodytrtd colspan3div idpagenav/div/td/tr/table/div
/divscriptvar app new Vue({el: #app,data: {result: []}});//查询用户数据var getUserPageList function (curr) {$.ajax({type: post,dataType: json,url: /user/getPage.do,data: {pageNum: curr || 1,pageSize: 5,name: $(#username).val(),age:$(#userage).val()},success: function (msg) {app.result msg.page;//分页效果laypage({cont: pagenav,pages: msg.totalPage,skin: #DB7093,first: 第一页,last: 最后一页,curr: curr || 1,jump: function (obj, first) {if (!first) {//点击跳页触发函数本身,并床底当前页的页码getUserPageList(obj.curr);}}});}});}getUserPageList();$(#findUser).click(function () {getUserPageList();});$(#addUserBtn).click(function (){layer.open({type: 2,title: 增加用户,fix: false,maxmin: true,shadeClose: true,area: [1100px, 600px],content: /ftl/add.html,end: function () {getUserPageList();}});});var editEvent function (id) {layer.open({type: 2,title: 编辑用户,fix: false,maxmin: true,shadeClose: true,area: [1100px, 600px],content: /user/editPage.do?id id,end: function () {getUserPageList();}});}var delEvent function (uid) {layer.confirm(确认删除吗?,{btn: [残忍删除, 容我想想]},function () {$.ajax({type: get,dataType: json,url: /user/delUser.do,data: {id: uid},success: function () {getUserPageList();layer.msg(删除成功, {icon: 6})}})},function () {});}
/script
/body
/html
edit.ftl
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet href/ftl/css/bootstrap.min.cssscript src/ftl/js/jquery/jquery.min.js/scriptscript src/ftl/js/jquery.validation/1.14.0/jquery.validate.min.js/scriptscript src/ftl/js/jquery.validation/1.14.0/messages_zh.min.js/scriptstyleinput.error {border: 1px solid red;}/style
/head
body
div classcontainerform idaddUserFormbr/div classform-grouplabel forusername用户名称/labelinput typetext classform-control idusername nameusername value${data.name}placeholder输入名称/divdiv classform-grouplabel foruserage用户年龄/labelinput typetext classform-control iduserage nameuserage value${data.age} placeholder输入年龄/divdiv classform-groupbutton typebutton idsaveBtn classbtn btn-success修改/buttonbutton typebutton idcancelBtn classbtn btn-default取消/button/div/form
/divscriptvar updateUser function () {if (!check().form()) {return;}$.ajax({type: post,dataType: json,url: /user/updateUser.do,data: {id:${data.id},name: $(#username).val(),age: $(#userage).val()},success: function (msg) {console.log(msg------ msg)$(#cancelBtn).click();}/*,error: function (XmlHttpRequest, textStatus, errorThrown) {console.log(textStatus textStatus);}*/})}$(#saveBtn).click(function () {updateUser();})$(#cancelBtn).click(function () {var index parent.layer.getFrameIndex(window.name);parent.getUserPageList();parent.layer.close(index);});function check() {return $(#addUserForm).validate({rules: {username: {required: true},userage: {required: true}},message: {username: {required: },userage: {required: }}});}/script
/body
/html
add.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefcss/bootstrap.min.cssscript srcjs/jquery/jquery.min.js/scriptscript srcjs/jquery.validation/1.14.0/jquery.validate.min.js/scriptscript srcjs/jquery.validation/1.14.0/messages_zh.min.js/scriptstyleinput.error {border: 1px solid red;}/style
/head
body
div classcontainerform idaddUserFormbr/div classform-grouplabel forusername用户名称/labelinput typetext classform-control idusername nameusername placeholder输入名称/divdiv classform-grouplabel foruserage用户年龄/labelinput typetext classform-control iduserage nameuserage placeholder输入年龄/divdiv classform-groupbutton typebutton idsaveBtn classbtn btn-success提交/buttonbutton typebutton idcancelBtn classbtn btn-default取消/button/div/form
/divscriptvar addUser function () {if (!check().form()) {return;}$.ajax({type: post,dataType: json,url: /user/add.do,data: {name: $(#username).val(),age: $(#userage).val()},success: function (msg) {console.log(msg------ msg)$(#cancelBtn).click();}/*,error: function (XmlHttpRequest, textStatus, errorThrown) {console.log(textStatus textStatus);}*/})}$(#saveBtn).click(function () {addUser();})$(#cancelBtn).click(function () {var index parent.layer.getFrameIndex(window.name);parent.getUserPageList();parent.layer.close(index);});function check() {return $(#addUserForm).validate({rules: {username: {required: true},userage: {required: true}},message: {username: {required: },userage: {required: }}});}/script
/body
/html 大部分都是套用了组件我们需要关注的仅仅是ajax传入后台数据的参数名和参数类型以及页面显示后台数据的参数名和参数值。
