web前后端交互，nodejs
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元
web前后端交互
前后端交互可以采用混合式，比如：
<?php //首先在这里写好相关的调用代码 function OutputTitle(){ echo 'TestPage'; } function OutputContent(){ echo 'Hello!'; } //然后再下面调用相关函数就可以了 ?> <!DOCTYPE html> <html> <head> <title><?php OutputTitle(); ?></title> </head> <body> <span><?php OutputContent(); ?></span> </body> </html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图书信息显示</title>
<link rel="stylesheet" type="text/css" href="css/font.css">
</head>
<body topmargin="0" leftmargin="0" bottommargin="0">
<table width="703" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#EF5E0F" ><table width="703" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td height="25" colspan="5" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="187" height="25" bgcolor="#F39A40"><div align="center">书名</div></td>
<td width="173" bgcolor="#F39A40"><div align="center">作者</div></td>
<td width="101" bgcolor="#F39A40"><div align="center">价格</div></td>
<td width="131" bgcolor="#F39A40"><div align="center">出版社</div></td>
<td width="105" bgcolor="#F39A40"><div align="center">出版时间</div></td>
</tr>
<?php
$conn=mysql_connect("localhost","root","root");
mysql_select_db("db_book",$conn);
mysql_query("set names gb2312");
$sql=mysql_query("select * from db_book order by id desc",$conn);
$info=mysql_fetch_array($sql);
if($info==false)
{
echo "暂无图书信息！";
}
else
{
do
{
?>
<tr>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[bookname];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[author];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[price];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[bookpublic];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[pubtime];?></div></td>
</tr>
<?php
}while($info=mysql_fetch_array($sql));
}
?>
</table></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>smarty test1</title>
</head>
<body>
它的名字叫{$name}
</body>
</html>
require './libs/Smarty.class.php';
$smarty=new Smarty();
$name='刘二狗';
$smarty->assign( 'name' , $name );
$smarty->display('./test1.html');
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
页面端使用了jQuery进行控制，
后台使用nodejs作为操控语言，使用express执行网络操作
整个工程结构如下：
根目录--------------
|-package.json
|-test.js
|-public
|-main.html
|-add.htmlNodejs端，名字为test.js
// file name :test.js
var express = require('express');
var app = express();
var bodyParse = require('body-parser')
var cookieParser = require('cookie-parser') ;
app.use(cookieParser()) ;
app.use(bodyParse.urlencoded({extended:false})) ;
// 处理根目录的get请求
app.get('/',function(req,res){
res.sendfile('public/main.html') ;
console.log('main page is required ');
}) ;
// 处理/login的get请求
app.get('/add', function (req,res) {
res.sendfile('public/add.html') ;
console.log('add page is required ') ;
}) ;
// 处理/login的post请求
app.post('/login',function(req,res){
name=req.body.name ;
pwd=req.body.pwd ;
console.log(name+'--'+pwd) ;
res.status(200).send(name+'--'+pwd) ;
});
// 监听3000端口
var server=app.listen(3000) ;main.html的代码如下
<html>
<link rel="stylesheet" type="text/css" href="http://fonts.useso.com/css?family=Tangerine|Inconsolata|Droid+Sans">
<style>
div#test{
font-family: 'Tangerine',serif;
font-size: 48px;
}
p#link1{
font-family: 'Tangerine',serif;
}
</style>
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
</head>
<body>
<div id="test">
<h1>Main Page</h1>
</div>
<p>Register & Login</p>
<form action="test.jsp" method="post">
账号 :
<input type="text" id="name" />
<br/><br/>
密码 :
<input type="text" id="pwd" />
<br/><br/>
     
<div><a href="/add" id="add">EXTRA</a></div>
<input type="button" value="Submit" id="x">
</form>
</body>
<script type="text/javascript">
var after_login=function(data,status){
if (status=='success'){
alert(data+'--'+status) ;
}
else alert('login refused') ;
}
$(document).ready(function(){
$("#x").click(function(){
var name = $("#name").val() ;
var pwd = $("#pwd").val() ;
$.post('http://127.0.0.1:3000/login',
{
name : name ,
pwd : pwd
},
// function(data,status){
// alert(data+'--'+status) ;
// }
after_login
);
// $.get('add',function(data,status){
// document.write(data) ;
// }) ;
});
});
</script>
</html>
add.html的代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>嘿</title>
</head>
<body>
<h1>This is an additional web page</h1>
<p>just for test</p>
</body>
</html>启动项目：
cd 到项目目录，输入 node test.js，运行服务器
打开浏览器，输入127.0.0.1:3000，可得到如下页面
输入账号和密码，能得到弹出窗口，里面是服务器的返回值
点击EXTRA页面，能得到二级页面
web前后端交互，nodejs的更多相关文章
- nodejs实现前后端交互
本人nodejs入门级选手,站在巨人(文殊)的肩膀上学习了一些相关知识,有幸在项目中使用nodejs实现了前后端交互,因此,将整个交互过程记录下来,方便以后学习. 本文从宏观讲述nodejs实现前后端 ...
- 淘宝玉伯引发Web前后端研发模式讨论
淘宝玉伯是是前端基础类库 Arale 的创始人,Arale 基于 SeaJS 和 jQuery.不久前,淘宝玉伯在 Github 的 Arale 讨论页面上抛出了自己对于Web 前后端研发模式的思考. ...
- springboot+mybatis+thymeleaf项目搭建及前后端交互
前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...
- 如何简单区分Web前后端与MVC
MVC是开发所有软件所必须涉及的基本几个划分 M主要负责数据与模型,V主要负责显示C主要负责交互与业务所以不管是前端还是后端,都是有MVC的.MVC是一个对于软件简单的抽象,不管是M还是V,还是C都是 ...
- Servlet实现前后端交互的原理及过程解析
在日常调试项目时,总是利用tomcat去启动项目,并进行前后端联调,但对于前后端的请求响应的交互原理及过程并不是特别清晰. 为什么在前端发出相应请求,就能跳转到后端通过程序得到结果再响应到前端页面呢? ...
- ajax学习----json，前后端交互，ajax
json <script> var obj = {"name": "xiaopo","age": 18,"gender ...
- Python 利用三个简易模块熟悉前后端交互流程
准备工作 在学习Django之前,先动手撸一个简单的WEB框架来熟悉一下前后端交互的整体流程 本次用到的模块: 1.wsgiref,这是一个Python自带的模块,用于构建路由与视图 2.pymysq ...
- 三、vue前后端交互（轻松入门vue）
轻松入门vue系列 Vue前后端交互 六.Vue前后端交互 1. 前后端交互模式 2. Promise的相关概念和用法 Promise基本用法 then参数中的函数返回值 基于Promise处理多个A ...
- Node之简单的前后端交互
node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的. 这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学n ...
随机推荐
- 换装WIN10（windows）那点儿事，换装操作系统一文通，玩转安装操作系统
目录 1. 按 2. win10对电脑配置的要求 3. 原版镜像下载 4. 制作U盘系统盘 5. 硬盘分区调整 6. 设置开机时从U盘启动 7. 安装win10 8. 如何激活WIN10 9. 如何给 ...
- 一文带你看清HTTP所有概念
上一篇文章我们大致讲解了一下 HTTP 的基本特征和使用,大家反响很不错,那么本篇文章我们就来深究一下 HTTP 的特性.我们接着上篇文章没有说完的 HTTP 标头继续来介绍(此篇文章会介绍所有标头的 ...
- LeetCode 第三题--无重复字符的最长子串
1. 题目 2.题目分析与思路 3.思路 1. 题目 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc",所以其长度为 3 ...
- 头条一面竟然问我Maven？
maven package和maven install 有什么区别? 你常用的maven命令有哪些? <dependencyManagement> 是干什么的? 还有用过其它构建工具吗? ...
- 程序员你为什么这么累【三】：编码习惯之Controller规范
作者:晓风轻本文转载自:https://zhuanlan.zhihu.com/p/28717374 第一篇文章中,我贴了2段代码,第一个是原生态的,第2段是我指定了接口定义规范,使用AOP技术之后最终 ...
- java自定义注解学习(注解处理器)
如果没有用来读取注解的方法和工作,那么注解也就不会比注释更有用处了.使用注解的过程中,很重要的一部分就是创建于使用注解处理器.Java SE5扩展了反射机制的API,以帮助程序员快速的构造自定义注解处 ...
- 20200104模拟赛 问题A 图样
题目 分析: 老规矩,遇到期望要准备好随时投降... 大致想到了按位处理,然后分别下去搜索,再用组合数加加减减一下... 但是两个连通块之间连边的期望怎么算呢? 很好,投降... 下来看题解... 果 ...
- 20191212模拟赛 问题B
题目: 分析: 上来看到k=2,... SB杜教筛phi 有点感冒,这把养生一点... 于是写了55分走人了.. 下来一看挺简单的啊2333 不考虑gcd时,构造数列的方案为C(N+K-1,K) 考虑 ...
- PyCharm2019.3.2专业版激活
PyCharm2019.3.2专业版激活 Ryan 蚂蚁小黑 PyCharm 专业版激活 今天是除夕,在这阖家团圆的日子里,祝大家新春快乐,鼠年大吉,愿大家在新的一年里身体健康,万事如意! 新的一年 ...
- 异想家Eclipse的偏好配置
1.汉化 http://www.eclipse.org/babel/downloads.php 找到Babel Language Pack Zips,下面选自己版本点进去,找到如下类似的中文包: Ba ...