‘壹’ web前端常用的框架有哪些
现在比较常用的主流框架有Vue、React、Angular。
Angular
Angular原名angularJS诞生于2009年,之前我们都是用jquery开发,自从angular的出现让我们有了新的选择,它最大的特点是把后端的一些开发模式移植到前端来实现,如MVC、依赖注入等,创新式的双向数据绑定不知简化了我们多少代码,让我们为之疯狂,特别是表单处理方面,从此名声大噪。
好的框架一般会有两个结果,一个继续不断更新迭代,避免被拍死在沙滩上,一个是被一些大公司收购焕发第二春,angular属于后者被google所收购,且从2.0后改名angular并使用微软的typescript作为开发语言,目前最新版本8.0,照说傍上google与微软这两条大船,前途应该不可限量才对,然而造化弄人,现在angular的市场份额已经被React这个后起之秀和Vue这颗新星远远地甩到脑后。
React
React,facebook出品,正式版推出是在2013年,比angular晚了4年,但得益于其创新式的VirtualDOM,性能上碾压angularJS,一经推出,火的一塌糊涂。 特点很多,VirtualDOM、JSX、Diff算法等,支持ES6语法,采用函数式编程,门槛稍高,但也更灵活,能让开发具有更多可能性。
Vue
Vue作为最后推出的框架(2014年),借鉴了前辈angular和react的特点(如VirtualDOM、双向数据绑定、diff算法、响应式属性、组件化开发等)并做了相关优化,使其使用起来更加方便,更容易上手,比较少适合初学者。网上有很多人说Vue不适合做大型项目,纯属扯淡,Vue在这方面已经优化得很好,当然,大量的响应式属性(监听属性)也许会用一定的性能损耗,但在硬件、网络大力发展的今天,这些细微的性能差异几乎感觉不到。
‘贰’ 如何用Node去写一个Web应用框架
第一步,用node输出一个hello world
varhttp=require('http');
http.createServer(function(req,res){
varurlPares=url.parse(req.url);
varquery=querystring.parse(urlPares.query);
res.end('helloworld');
}).listen(80);
大部分的node教程在这里会告诉你,我们很容易的建立的一个服务器。但是在实际使我们通常使用的是express.(f**k,难道Node必须要用express吗?自己实现一个Web应用框架真的很难吗?)其实并不是。
那么既然打算自己写我们首先要知道我们要做哪些事情。 1.路由或者智能路由 2.静态文件输出 3.session/cookie 4.模版渲染 5.数据库处理 6.文件上传
第二步,路由
路由好高大上的名字,它是干啥的?url对应具体方法就是它该做的事情。 那么我们为什么不让url对应xxx文件的xx方法。 例如:/user/login能不能自动对应到user.js的login方法上。实现起来很难么?其实只需要几句代码
varfs=require("fs");
mole.exports=function(req,res){
varquery=req.query;
varurlPares=req.urlPares;
varpathname=urlPares.pathname;
vararr=pathname.split("/");
req.arr=arr;
//start这段代码处理默认行为。可以先忽略
if(arr.length==0||arr.length==1){
arr=["","index","index"];
}elseif(arr.length==2){
arr.push("index");
}
if(arr[1]==""){
arr[1]="index";
}
if(arr[2]==""){
arr[2]="index";
}
//end这段代码处理默认行为。可以先忽略
if(fs.existsSync(APP_PATH+'/controller/'+arr[1]+'.js')){
varcontroller=require('./controller/'+arr[1]);
if(controller[arr[2]]){
controller[arr[2]](req,res);
}else{
res.writeHead(404,{'Content-Type':'text/plain'});
res.end("你访问的控制器不存在指定方法");
}
}else{
res.writeHead(404,{'Content-Type':'text/plain'});
res.end("你访问的路径不存在");
}
}
通过fs判断文件是否存在。然后去require它就行了。APP_PATH是个全局变量表示程序入口的路径。
第三步,静态文件输出
静态文件输出我们需要一个库MIME
varurl=require("url");
varfs=require("fs");
varmime=require('mime');
/**
*[[检测是否为静态资源]]
*@param{Object}req[[Description]]
*@param{[[Type]]}res[[Description]]
*@returns{bool}[[Description]]
*/
mole.exports=function(req,res){
//正则表达式检测文件后缀
varurl_resource_reg=/.*.(html|htm|gif|jpg|jpeg|bmp|webp|htc|swf|png|ico|txt|js|css)/;
if(!url_resource_reg.test(req.url)){
returnfalse;
}
varurlPares=url.parse(req.url);
varpathname=urlPares.pathname;
varfileUrl=APP_PATH+"/static"+pathname;
if(fs.existsSync(fileUrl)){
varcontentType=mime.lookup(fileUrl);
res.setHeader('Content-Type',contentType||"text/plain");
varfileStream=fs.createReadStream(fileUrl);
fileStream.pipe(res);
fileStream.on('end',function(){
res.end();
});
returntrue;
}else{
returnfalse;
}
}
第四步,session/cookie
这里稍微有点。但是代码量也不多
varsessions={};
varsessionKey='session_key';
varEXPIRES=30*60*1000;
functionrandString(size){
varresult='';
varallChar='';
size=size||1;
while(size--){
result+=allChar.charAt(rand(0,allChar.length-1));
}
returnresult;
}
vargenerate=function(){
varsession={};
session.id=Date.now()+randString(12);
session.cookies={
expire:Date.now()+EXPIRES
}
sessions[session.id]=session;
returnsession;
}
varparseCookie=function(cookie){
varcookies={};
if(!cookie){
returncookies;
}
varlist=cookie.split(";");
for(vari=0;i<list.length;i++){
varpair=list[i].split("=");
cookies[pair[0].trim()]=pair[1];
}
returncookies;
}
varserializeCookies=function(cookies){
vararr=[];
for(varkeyincookies){
arr.push(serialize(key,cookies[key]));
}
returnarr;
}
varserialize=function(name,value,option){
varpairs=[name+'='+encodeURI(value)];
//设置cookie默认共用"/"路径
option=option||{
path:"/"
};
if(option.maxAge)pairs.push('Max-Age='+option.maxAge);
if(option.domain)pairs.push('Domain='+option.domain);
if(option.path)pairs.push('Path='+option.path);
if(option.expires)pairs.push('Expires='+option.expires);
if(option.httpOnly)pairs.push('HttpOnly');
if(option.secure)pairs.push('Secure');
returnpairs.join(';');
}
mole.exports=function(req,res){
req.cookies=parseCookie(req.headers.cookie);
varid=req.cookies[sessionKey];
if(!id){
req.session=generate();
}else{
varsession=sessions[id];
if(session){
if(session.cookies.expire>Date.now()){
session.cookies.expire=Date.now()+EXPIRES;
req.session=session;
}else{
deletesessions[id];
req.session=generate();
}
}else{
req.session=generate();
}
}
for(varkeyinsessions){
if(sessions[key].cookies.expire<Date.now()){
deletesessions[key];
}
}
varwriteHead=res.writeHead;
res.writeHead=function(){
deletereq.cookies[ham_sessionKey];
varsessionStr=serialize(ham_sessionKey,req.session.id);
res.setHeader('Set-Cookie',serializeCookies(req.cookies).concat(sessionStr));
returnwriteHead.apply(res,arguments);
}
}
第五步,模版渲染
这是最简单的。
第六步,数据库处理
这里可以是用一些ORM框架。
第七步,文件上传,post
第八步,就是你把上面的代码组织起来。
‘叁’ 英语翻译:Web用户界面介绍
Web User Interface
Introction
Run Web browser on your computer, type in the address field: https://<system IP address, then press ENTER for opening the login page of the Polycom ® RSS™ 4000 system. Log into the system with your username and password. The default administrator account is "admin" (both for username and password).
The Web user interface is basically made up of the following 4 parts:
·Menu bar: offer all figuration available function group, the manu will stir to the detailed functional figuration page.
·Page control group: provide operations for Web page control
- Show login info and set font
- Quit Web figuration page
- Lock Web figuration page. The page will be locked on clicking this button, and password is needed for further operations.
·Navigation/Operation bar: Offer interlinked functional page link. Available items for operation will be demonstrated on this page.
·List/Figuration field: Show item list, detailed parameters or figuring item.
Web page has prepared different login pages for users of different ranks and identities. An administrator will see the following page on a successful login:
Fig. 1-1 Illustration of Polycom ® RSS™ 4000 Web page
‘肆’ 如何安装配置TAM的WEB管理工具
首先安装was60。
之后安装wpm,并且使用pdjrtecfg 和amwpmcfg进行配置蚂粗
安装前提:
1. 以Administrators组用户登录。
2. 启动registry server和policy server。 (in normal mode).
3. 安装IBM Java Runtime 1.4.2 SR2 provided with Tivoli Access Manager is installed. For instructions, see page 322.
a.执行闷李镇命令windowsJDKibm-java-2-sdk-142.exe
b.设定PATH环境变量扰做:
set PATH=install_dir;%PATH%
例如:set PATH=C:IBMJava142jrebin;%PATH%
c. 设置JAVA_HOME:
set JAVA_HOME=c: IBMJava142jre
d. Add the GSKit bin and lib directories to the PATH variable. For example:
Install IBM Global Security Kit (GSKit), if not already installed.
在windowsGSKit 路径下运行setup PolicyDirector命令
set PATH=C:IBMgsk7bin;%PATH%
set PATH=C:IBMgsk7lib;%PATH%
7. Install IBM WebSphere Application Server Refresh Pack. For instructions, see page 337.
8. Insert the IBM Tivoli Access Manager Base for Windows CD.
9. Install the Tivoli Access Manager packages. To do so, run the setup.exe file located in the following directory: windowsPolicyDirectorDisk ImagesDisk1
选择以下组件:
v Access Manager License
v Access Manager Runtime for Java
v Access Manager Web Portal Manager
Configure the Access Manager Runtime for Java component for use within the Java Runtime Environment installed with WebSphere.
To do so, follow these steps:
a. Stop the WebSphere Application Server and the IBM HTTP Server
.
d. Optional: You can use the IBM WebSphere setupCmdLine script to reset environment variables, including the location of the Java Runtime Environment, before configuring Access Manager Runtime for Java and Web Portal Manager.
1) Run the which java command from the command line to show the default PATH settings being used. For example, the command shows that Java is currently being run from the /usr/bin/java directory.
2) To update the PATH environment variable and reset the JAVA_HOME variable, edit the setupCmdLine.bat file and change the environment variable as needed.
3) Enter: C:Program FilesIBM|.bat Set the JAVA_HOME variable to the Java Runtime Environment that has been configured for Access Manager Runtime for Java. The JAVA_HOME variable should be set to the top directory. C:Program
(还执行了之前设path的操作)
b. Change to the install_dirsbin directory (for example, C:Program FilesTivoliPolicy Directorsbin), and enter the following command: pdjrtecfg -action config -interactive
c. Select the Full configuration type and click Next. For descriptions of the configuration options, click Help.
e. Specify the Java Runtime Environment that was installed with IBM WebSphere Application Server. For example: C:Program jre Click Next to continue.
有的时候会有这样的错误:
说明之前安装过一次,可以先unconfig:
pdjrtecfg –action unconfig -java_home C:IBMJava142jre
f. Specify the policy server host name, port, and domain. Click OK to start configuration.
g. When configuration has completed successfully, click OK to exit the configuration utility. For more information about this utility, see “pdjrtecfg” on page 578.
12. Configure the Access Manager Web Portal Manager package.
To do so, follow these steps:
a. Change to the install_dirsbin directory (for example, C:Program FilesTivoliPolicy Directorsbin), and enter the following command: amwpmcfg -action config -interactive Specify the necessary configuration parameters, such as IBM WebSphere Application Server installation path, the policy server host name and port number, and the Tivoli Access Manager administrator ID and password.
set PATH=C:;%PATH%
set PATH=C:;%PATH%
启动application server
amwpmcfg –action config -interactive
-Make sure that PD.properties is in
c:.
b. When configuration has completed successfully, click OK to exit the configuration utility.
13. Restart the IBM WebSphere Application Server and IBM HTTP Server. For example, select Start → Settings → Control Panel → Administrative Tools and then double-click the Services icon to restart these servers.
Note: If you installed a registry server that does not use IBM HTTP Server and you are installing Web Portal Manager on the same system, ensure that the Web server ports are different. To change the IBM HTTP Server default port, edit the C:Program FilesIBMHTTPServerconfhttpd.conf file, change default port 80 to 8080 as shown, and then restart the IBM HTTP Server. # Port: The port the standalone listens to. Port 8080
14. To access the Web Portal Manager interface, enter the following address in your Web browser: http://hostname:port/pdadmin where hostname is the host name of the system and port where IBM WebSphere Application Server is running the IBM HTTP Server, and port is the port number being used, such as 80. For example: http://wpm14.example.com:80/pdadmin This step completes the setup of a Web Portal Manager system. To set up another
访问路径:http://localhost:9080/pdadmin (端口不是80)