13518219792
虽然不想打击你,但是用js无法实现你要求的功能,而且如果没有基础想学习起来代价比较大
成都创新互联电话联系：13518219792，为您提供成都网站建设网页设计及定制高端网站建设服务，成都创新互联网页制作领域十多年，包括塑料袋等多个领域拥有丰富的网站设计经验，选择成都创新互联，为企业保驾护航。
js只是产生一些浏览器的效果,如果要保存数据还需要用到数据库,以及服务器端语言
推荐学习网站w3school,推荐书籍:忘了.....搜下php 圣经 书名大概叫php与mysql编程什么的
Hi，
bootstrap是基于css的框架，没有什么功能性的东西，但是外观好看。
jQueryEasyUI是基于jQuery的，有很多开发好的组件和配套的功能（ajax..etc..）。
但是EasyUI有很多已知的bug，还是比较恶心的，文档也不全。
我推荐你使用KendoUI， 他有一版是免费的，你可以去gitHub上找一下。用他做后台是最好的。
如果真的想用bootstrap，你可以考虑使用bootstrap + angularJS
是不是这种效果，这个是多个组件共同的效果，单个组件的话是没有现成的
主要用了jquery.layout.js，jquery ui里的tab , accordion
开发一个管理系统
管理系统得有页面吧，页面我该怎么开发呢？
于是你百度：前端入门，然后你就知道了，原来我使用 html js css就可以写一个页面出来了。假设你坚持到了这一步，你发现用js写这些东西好麻烦啊，特别冗长，关键是原生的JavaScript还有各种浏览器兼容性的问题，你写出来的东西在chrome上能用，在ie上就展示的不正常了。
于是乎你又百度：js框架。浏览器告诉你js的框架有很多：JQuery，React，Vue，假设挑选了Jquery来做你的项目，你会发现，额 是比之前爽多了，毕竟框架会集成好很多方便的功能，你觉得你的效率在提高。
现在你坚持到了第四步，但是你又发现了新的问题，虽然相比之前JQuery操作起来是简单了许多，不过还是要我主动操作dom对象，有没有办法：我只关心我当前页面所用的数据是啥玩意就行了，改了数据之后，跟数据绑定的页面元素能够自动改变呢？这样我不就不用自己操作dom了吗？
哦，对了，我之前搜索js框架的时候还有Vue和React，这都是啥玩意，于是乎，
你百度：Vue入门。
好了，你开始使用Vue来写你的前端页面了，相比之前效率又高了很多，使用Vue的过程中，你可能接触到越来越多的概念，前端的模块啊，打包啊等等。
你也许觉得写前端真他妈好玩，于是乎你关闭了这篇文章，去搜索：前端学习路线图。。。。
PS：我现在很难受，我是来跟你们一起学习java的终于到后端了：现在你已经会写页面了，可是管理系统的数据我怎么展示在页面上呢，总不能写死在页面上吧。
要是能有个地方存这个管理系统的数据，并且我的页面可以从那个地方拿就好了。
存数据的地方肯定就是叫数据库啦，于是你百度：数据库入门，书上告诉你数据库有好多种：sql server、mysql、oracle、db2 ..... 但是无论是哪一种都要先学习一下SQL，不管了，程序员就是爱学习，学呗你现在学会了sql了，你按照网上的说明安装了mysql数据库，知道了怎么用sql操作数据库里面的数据，真是个天才。
但是没用啊，我给别人用的是系统哎，我不能跟他说，你过来，我给你用sql展示一下数据库里面有哪些数据吧。既然是个的管理系统，的增删改查肯定都得放在后端来做吧，毕竟前端只是做页面样子和交互，后端才是处理数据的，对的增删改查就是对数据库的增删改查呗。
哦，我记得之前java书上看到JDBC可以操作数据库，把这块知识点捡起来，试着写一段程序操作一下吧。
好厉害，你竟然已经学会了java操作数据库，现在哪怕不打开数据库，不借助数据库的各种客户端你也能通过你的java代码查到库里面的内容了。但是还有个问题，我前端页面怎么跟后端打交道呢？换句话说，我前端页面写的花里胡哨的，可是该怎么告诉后端程序：你给我展示一下数据库里面有哪些书？
数据库里面有没有一个叫java从入门到放弃的书？于是你百度：js前后端交互你发现了Ajax，js中的这种技术可以请求后端的接口，拿到数据。然后用数据做相应的展示、交互之类的。并且你也知道了json，他几乎成了前后端交互事实上的数据标准。
于是乎，你通过简单的百度之后，知道了该怎么向后端发起请求（当然了 也许在前5步的时候，你已经知道了怎么向后端发送请求，并且你有各种不同的姿势来发，什么原生的js啊，vue啊，react啊，jquery啊。各种姿势都不在话下）页面写好了，也知道在页面上怎么向后端发送指令了，现在就差后端接口了。
我刚刚写的java操作数据库，花里胡哨的，但是没用啊，我要先接收到前端发给我的指令，我再开始查询，或是各种管理吧。前端都没说话呢，你一顿操作，不是个沙雕吗？好吧，那我的java怎么能接收前端发给我的指令呢？你百度：java http接口。于是你知道了 servlet ，tomcat。原来我只要写一个servlet，接着将其放到tomcat中执行，就能对外提供一个接口了呀。
天哪，我的servlet成功接收到了前端请求，根据前端的各种命令，后端开始尽职尽责的执行各种java指令，返回json数据给前端。完美啊，我做完了，关闭这篇文章，打 游戏 去了。。。
等等，首先那个jdbc操作的是在是太麻烦了吧，open connection 各种try catch 。上面不是有个mybatis说是可以简化jdbc操作吗，怎么玩的？
百度一下：mybatis入门嗯，mybatis确实太香了。优雅的orm映射、灵活的sql编写。都让你觉得使用原生jdbc操作起来真是太费劲了。不对，我觉得用servlet也有点麻烦，每次建立一个servelt之后，还要在web.xml配置，而且写起来也不优雅，json数据都是各种拼装起来的，真麻烦。
是时候学习一下spring了，大家都说spring是java程序员必学的，他到底好在哪呢，我的程序能不能用一下spring？让我百度一下spring入门。果然spring确实方便，有了spring，我再也不用new对象了，我想要的，她都懂我，给我提前准备好了之后，我直接拿就行了。并且啊，她还会贴心的把依赖关系给我搞好。没错，这就是Spring核心的容器和DI功能。
你发现，spring家族竟然还有个东西：spring mvc，他是一个MVC框架，大家都在用，你也尝试了一下。十分钟后你觉得：我再也不会用servlet去写了，用springMVC写效率提升十倍不止。爱好学习的你在项目中用了spring，springMVC，mybatis。额，这tm的不就是SSM三大框架吗。嗯，不错，可以出去装 了同学啊，你这个管理系统怎么那么慢啊，
我查了一本书 ：java从入门到放弃，每次查询都要好几秒，程序太烂了吧。你很难受，你的程序被大家吐槽了，要是我能快一点就好了？加个缓存吧，大家都说redis很好，性能高，支持事务，还能持久化。你一顿操作，在项目中集成了redis。班上的同学都很满意，见到你就说，同学，你现在好快啊，每次都不到3秒。用户体验哗哗的提升。
你很满足，很自豪。学校新进了一本书，刘慈欣的《三体》，大家都很喜欢看，一听到书籍上架的消息都去用你的系统。结果由于人数太多，你的系统没有抗住，挂掉了。。。不行，有点丢人。加机器吧，我要是能有十台机器，每台上面都部署我的程序，并且这十台都提供给用户服务。那么自然每台的压力就小很多了。
但是该怎么做呢，总不能告诉他们说：一班的同学你们使用135的这台机器，二班的同学你们使用136的这台机器吧。要是大家都有统一的入口，但是通过该入口，请求会自动分配到这10台机器上就好了。于是你搜索一下：负载均衡。你发现了nginx还有h5负载均衡器等各种软件或是硬件实现的负载均衡（当然nginx不止这个功能）。加一台nginx吧，毕竟不要钱。
所以，是时候使用mq了，当书上架的时候，将书的信息放到消息队列中，消息消费者一监听到消息，立马就去发送通知。
怎么样，这样做是不是逻辑上也解耦了，代码写着也不累了。你闲着蛋疼，往系统里面新增了各种各样的功能：当用户预约的书到了的时候，发送提醒。一些淘汰的书籍你还给加上了公益拍卖的功能，用户只要竞拍，就可以获取到这个书籍，为公益做贡献。真是个商业奇才。
你越写越多，想法犹如泉水一样连绵不绝，然后你发现了一个问题，系统实在是功能太多了，你随便改一下东西可能都影响到别的功能，启动一次动不动五六分钟，关键是有一些新的小伙伴加入你的时候，每个模块的功能他都要了解，否则一不小心就像拍仓鼠一样，一个bug改了，又冒出来一个。拆分吧，装个逼。拆成微服务。用户一个服务，的管理一个服务，拍卖一个服务，短信一个服务。每个服务由不同的人来负责，大家都对自己的业务比较熟悉，项目小而精致。但是拆分会面临更多难题。。。
这不需要用jquery，用css就可以满足。给你做了个例子。
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
meta name="viewport" content="width=device-width, initial-scale=1.0"
titleDocument/title
style
html,body,.box{
margin:0;
padding:0;
height:100%;
overflow:hidden;
font-size:14px;
color:#333333;
}
.box{
display:flex;
flex-direction: column;
box-sizing: border-box;
}
.top{
height:60px;
background:#999999;
color:#ffffff;
}
.left,.right{
width:200px;
background:#AAAAAA;
}
.center{
flex:1;
}
.content{
flex:1;
background:#fafafa;
display:flex;
flex-direction: row;
height:0;
}
.bottom{
height:40px;
background:#666666;
color:#ffffff;
}
.top,.bottom,.left,.right,.center{
align-items: center;
justify-content: center;
display:flex;
}
/style
/head
body
div class="box"
div class="top"top/div
div class="content"
div class="left"left/div
div class="center"center/div
div class="right"right/div
/div
div class="bottom"bottom/div
/div
/body
/html
