webstorm java 高亮写好前端之后怎么与后台java连接

做网站前台和后台是怎么对接的?
作者:用户
浏览:3374 次
做网站前台和后台是怎么对接的?想学做网站,但是不知道网站的一整套流程是怎样的?有知道的朋友可以给点建议光知道流程毫无用处,编程是脑力劳动,不是装配电视机。不是按照说明书操作完每个动作程序就出来了。要不
做网站前台和后台是怎么对接的?
想学做网站,但是不知道网站的一整套流程是怎样的?有知道的朋友可以给点建议
光知道流程毫无用处,编程是脑力劳动,不是装配电视机。不是按照说明书操作完每个动作程序就出来了。
要不然富士康完全转型做软件去了,多赚钱。
即便你看清楚程序员每次鼠标和键盘操作,以及每个屏幕显示,你背下来你也成不了程序员。
程序员的工作我说了,就是学习、思考、创造,这个“流程”你能看见么?
解决方案二:
通常来说,不论为BS还是CS结构,都分为后台和前台。
拿目前常见的BS来说,前台说简单点就是HTML,即用IE即可以打开的部分;后台就是使用人员看不到的东西,语言如JAVA,.NET等。
前台与后台的连接,一般都有一些比较通用的设计 ,如JAVA的SSH三层架构。
如根据学号查询成绩。
1 首先编写一个的网页,里面要设计一个可以输入学号的文本框,用来接收用户填写的学号;
并添加一个区域用来显示结果。
2 在后台编写可接收前台请求的程序,如action或servlet
3 在网页中设计好提交到后台的请求路径,及提交的参数(如上面的学号);
4 在后台编写业务逻辑服务代码,并调用数据库进行查询,并将结果返回给页面;
5 在页面预留位置,将结果展示出来。
解决方案三:
设置数据库表;
写后台代码, 主要是连接到数据库之类的操作
设计前端的网页
写业务逻辑代码, 也算是后台吧, 主要连接前端和数据库的中间作用
【云栖快讯】《阿里巴巴Java开发手册》(详尽版)已经上线!您的Java学好了吗?如果没有,那就赶紧加入学习吧!&&
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率
40+云计算产品,6个月免费体验
稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一
云服务器9.9元/月,大学必备没有更多推荐了,
加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!微信小程序」的开发框架体验起来,还不错——自带了UI框架。但是问题是他的IDE,表现起来相当的糟糕——其实主要是因为,我当时买WebStorm License买了好多年。所以,我觉得他的IDE真不如我这个付费好用。
如果我们放任下去,未来的Web世界令人堪忧。
好了,废话说完了:
真实世界下的MINA三基本元素
「微信小程序」的背后运行的是一个名为MINA框架。在之前的几篇文章里,我们介绍得差不多了。现在让我们来作介绍pipeline:
Transform wxml和wxss
当我们修改完WXML、WXSS的时候,我们需要重新编译项目才能在浏览器上看到效果。这时候后台就会执行一些transform动作:
wcc来转换wxml为一个genrateFun,执行这个方法将会得到一个virtual dom
wxss就会转换wxss为css——这一点有待商榷。
Transform js文件
对于js文件来说,则是一个拼装的过程,如下是我们的app.js文件:
App({ onLaunch: function () { } })
它在转换后会变成:
define("app.js", function(require, module)/*兼容babel*/,location,document,navigator,self,localStorage,history,C App({ onLaunch: function () { } }) }); require("app.js");
我假装你已经知道这是什么了,反正我也不想、也不会解释了~~。同理于:
define("pages/index/index.js", function(require, module)/*兼容babel*/,location,document,navigator,self,localStorage,history,C Page({ data: { text: initData } }); require("pages/index/index.js");
至于它是如何replace或者apend到html中,我就不作解释了。
MINA如何运行?
为了运行一个Page,我们需要有一个virtual dom,即用wcc转换后的函数,如:
/*v0.7cc_{}*/ var $gwxc var $gaic={} $gwx=function(path,global){ function _(a,b) function _n(tag){$gwxc++;if($gwxc&={});return ,children:[]}} function _s(scope,env,key) function _wl(tname) function _ai(i,p,e,me)} function _grp(p,e,me)p=mepart.join( / );}if(me[0]== . &&p[0]== / )p= . +p;if(e[p])if(e[p+ .wxml ])return p+ .} //以下省略好多字。
然后在我们的html中加一个script,如
document.dispatchEvent(new CustomEvent("generateFuncReady", { detail: { generateFunc: $gwx( index.wxml ) } }))
就会凑发这个事件了。我简单的拆分了WXWebview.js得到了几个功能组件:
define.js,这里就是定义AMD模块化的地方
exparser.js,用于转换WXML标签到HTML标签
exparser-behvaior.js,定义不同标签的一些行为
mobile.js,应该是一个事件库,好像我并不关心。
page.js,核心代码,即Page、App的定义所在。
report.js,你所说的一切都能够用作为你的呈堂证供。
virtual_dom.js,一个virtual dom实现结合wcc使用,里面应该还有component.css,也可能是叫weui
wa-wx.js,定义微信各种API以及WebView和Native的地方,和下面的WX有冲突。
wx.js,同上,但是略有不同。
wxJSBridge.js,Weixin JS Bridge
于是,我就用上面的组件来定义不同的位置好了。当我们触发自定义的事件时,将由virtual_dom.js来接管这次Render:
document.addEventListener("generateFuncReady", function (e) { var generateFunc = e.detail.generateF wx.onAppDataChange && generateFunc && wx.onAppDataChange(function (e) { var i = generateFunc((0, d.getData)()); if (i.tag = "body", e.options && e.options.firstRender){ e.ext && ("undefined" != typeof e.ext.webviewId && (window.__webviewId__ = e.ext.webviewId), "undefined" != typeof e.ext.downloadDomain && (window.__downloadDomain__ = e.ext.downloadDomain)), v = f(i, !0), b = v.render(), b.replaceDocumentElement(document.body), setTimeout(function () { wx.publishPageEvent(p, {}), r("firstRenderTime", n, Date.now()), wx.initReady && wx.initReady( }, 0); } else { var o = f(i, !1), a = v.diff(o); a.apply(b), v = o, document.dispatchEvent(new CustomEvent("pageReRender", {})); } }) })
因此,这里就是负责DOM初始化的地方了,这里得到的Dom结果是这样的:
add line remove line
而我们写的wxml是这样的:
{} add line remove line
很明显view会被转换为wx-view,text会被转换为wx-text等等,以此类推。这个转换是在virtual dom.js中调用的,调用的方法就是exparser。
遗憾的是我现在困在 data初始化上面了~~,这里面有两套不同的事件系统,有一些困扰。其中有一个是:WeixinJSBridge、还有一个是app engine中的事件系统,两个好像不能互调。。。
使用WebStorm开发
在浏览器上运行之前,我们需要简单的mock一些方法,如:
然后把 中的一些内容变成,如:
__wxConfig = { "debug": true, "pages": ["index"], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "projectConfig": { }, "appserviceConfig": { }, "appname": "fdfafafafafafafa", "appid": "touristappid", "apphash": {}, "isTourist": true, "userInfo": {} }
如这里我们的appname是——我家在福建。
然后在我们的html中引入各个js文件,啦啦。
我们还需要一个自动化的glup脚本来watch wxml和wxss的修改,然后编译,如:
exec( ./vendor/wcc -d
+ inputPath +
+ outputFileName, function(err, stdout, stderr) { console.log(stdout); console.log(stderr); });
说了这么多,你还不如去看代码好了:
文章转载自网络,作者观点不代表本网站立场,如需处理请联系客服
java学习吧其它文章
时间总是这样的无情,不会因为任何人的任何请求而停留。它消无声息的甩袖而去,留下一片湿润的废墟;在你敲了10行代码的一分钟里,它自若神闲的转身溜走,留下一个success的标记。这一年,继续忍受着异地恋带来的孤独和珍惜,并且可以预见,2017依然承受着身体的孤独和精
Javaweb开发学习路线及Java三大框架分享?Java web开发是什么?Java web开发,是用Java技术来解决相关web互联网领域的技术总和。web包括:web服务器和web客户端两部分。Java在客户端的应用有java applet,不过使用得很少,Java在服务器端的应用非常的丰富,比如Servlet,
最近一直在重新学习java的基础,也写了一系列的博客(重新认识java系列)。很荣幸得到了许多同学的反馈。其中有许多人是初学者,来问我一些问题,也有一些是已经有过一定的基础,看了我的博客,也有了一些新的认知,来和我讨论。当然,大部分人都是在问我怎么学习,自己
当你想系统的学习某个领域的时候,如果有一张知识框架图就能让你的学习变得简单,不仅清清楚楚的看清所有知识点 、知识点之间的逻辑关系,而且还能帮你安排好学习节奏和进程。今天小编给你们提供了多个JAVA的知识图谱,希望对你的学习能有所帮助。1. Java学习路线图2. J
最近,部分读者一直希望我给大家推荐点必读书籍,以及程序员每个阶段的学习建议。今天,先给大家推荐1.0版本,后面再不断完善程序员必读书籍2.0版本。希望,你早日成为牛逼的程序员。程序员进阶之路上图是完整的程序员屌丝逆袭之路。市面上,大部分人对程序员有很多误解
摘要: 没有java人愿意自己一辈子就满足于掌握了一些代码实现的技巧,别人告诉你要实现什么,你就用代码堆砌来实现别人的要求!你必须学会从整个项目的角度去思考!你必须学会假如你是项目经理,你该如何思考!你必须学会假如你是架构师,你该如何思考! Java就是用来做
前言Java 语言已有20年左右的历史,但从市场上的招聘现状看,Java 程序员依然有着其他语言不可取代的竞争优势。对于很多朋友来说,Java 是迈入编程行业的“第一课”。但是很多自学的朋友没有很系统的学习,这里哪里吸收一些知识,盲目的学习,也不知道自己学的怎么样了?
微信支付痛点对于大多数同学来说,要开发微信支付可不简单。附上微信支付官方文档网页链接从文档上可以看出,你需要解决很多问题,我就随便挑几个吧。xml与对象的互转, 微信使用xml格式而不使用json通信, 也确实有点奇葩签名,千万不要以为只是MD5一下,要是你自己开发,
学习JAVA的时候有很多基础问题都是模棱两可的,下面有JAVA的久个JAVA基础知识经典问答!希望能给在Java学习中的你带来帮助!1面向对象的特点抽象:抽象是或略一个主题中与当前目标的无关的因素,一边充分考虑有关的内容。抽象并不能解决目标中所有的问题,只能选择其中的
packagecom.imooc.importjava.sql.Cimportjava.sql.DriverMimportjava.sql.ResultSimportjava.sql.SQLEimportjava.sql.SpublicclassDbUtil{privatestaticfinalStringURL=“jdbc:mysql://127.0.01:3306/t1?useUnicode...
java的程序员开发中最常用的100个类大合集,你用过几个?在Java开发中,我们会使用到各种不同的库。在本文中,将给大家分享从从一万个开源的Java项目中提取出的前100个最常用的Java类,这些类有来自于Java的标准库,也有第三方库。每个类在同一个项目中只计数一次,下面
大学毕业本专业不好找工作,想转行学什么能找到高薪工作?在众多新生依然沉浸在全新的大学生活中的时候,众多告别校园的师兄师姐却已然奔波在找工作的道路上,在连续几年的“就业难”大环境下,众多学子毕业后会突然发现自己所学的专业,要么工作不好做,要么工资特别低,
Java是一种简单的,跨平台的,面向对象的,分布式的,解释的,健壮的安全的,结构的中立的,可移植的,性能很优异的多线程的,动态的语言。java编程学习方法有哪些呢?一.初接触软件技术,先挑技术门槛低的技能方向入手。如果你完全是个外行,只懂得电脑的一般操作和OFFIC
今天我们来认识一下StringBufferStringBufferStringBuffer类概述线程安全的可变字符序列。一个类似于 String 的字符串缓冲区,但不能修改。虽然在任意时间点上它都包含某种特定的字符序列,但通过某些方法调用可以改变该序列的长度和内容。从 JDK 5 开始,为该类补充了一
内部类概念1)什么是内部类将类写在其他类的内部,可以写在其他类的成员位置和局部位置,这时写在其他类内部的类就称为内部类。其他类也称为外部类。2)什么时候使用内部类在描述事物时,若一个事物内部还包含其他可能包含的事物,比如在描述汽车时,汽车中还包含这发动
Java就是用来做项目的!Java的主要应用领域就是企业级的项目开发!要想从事企业级的项目开发,你必须掌握如下要点:1、掌握项目开发的基本步骤2、具备极强的面向对象的分析与设计技巧3、掌握用例驱动、以架构为核心的主流开发方法没有人愿意自己一辈子就满足于掌握了一些
在了解object类之前,先来看一下Java的API,Java 的API(API: Application(应用) Programming(程序) Interface(接口))Java API就是JDK中提供给我们使用的类,这些类将底层的代码实现封装了起来,我们不需要关心这些类是如何实现的,只需要知道这些类如何使用即可。在JD
代码块概述在Java中,使用{}括起来的代码被称为代码块。根据声明方式、位置的不同可分为:局部代码块、构造代码块、静态代码块以及同步代码块。局部代码块局部代码块是定义在方法或语句中特点:1)以”{}”划定的代码区域,此时只需要关注作用域的不同即可2)方法和类都
在Java里面呢,Java又分为J2ME,J2SE,J2EE,所以Java并不是单机版的,只是面向对象语言,如果是安排Java体系呢,可以这样去学习。第一部分:我刚开始呢是在学习一些前端知识:html,里面包括有html标签,表单标签还有css,这是一些web应用开发的基础,这个是要学习的;
Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,具有卓越的通用性、高效性、平台移植性和安全性。Java编程语言的风格十分接近 C++ 语言。继承了 C++ 语言面向对象技术的核心,Java舍弃了 C++ 语言中容易引起错误的指針,改以引用取代,同时卸载原 C++ 与原
java学习吧没有更多推荐了,
加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!}

我要回帖

更多关于 webstorm java 高亮 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信