十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
虽然不想打击你,但是用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