node搭建web服务器步骤
1.首先创建一个项目文件夹
1)新建一个项目文件夹demo,进入后按住shift键,然后点击鼠标右键,选择点击在此处打开PowerShell窗口,打开命令行窗口
2)在窗口中输入命令 npm init 来初始化项目,这个过程中会问一些问题,可以直接一直按回车,最后问yes or no 的时候回答yes即可,demo文件夹中如果生成了一个package.json,证明初始化成功了
2.用npm安装express
1)在命令行窗口中输入命令 npm install express 按回车,安装express
2)安装完以后,你会看到项目目录中多了一个node_modules文件夹
3.创建index.js文件并编写服务器端代码
在demo文件夹中创建一个index.js文件,写入如下代码并保存
//引入express模块
const express = require('express');
//创建Web服务器
const app = express();
// 处理静态资源
app.use(express.static('public'))
// 启动监听
app.listen(3000, function(){
console.log('running123...');
})
4.启动服务器后再浏览器中查看
1)在命令行窗口中输入命令 node index.js 按回车来启动服务器,若启动成功,则会显示“running123…”。
请先完成1-4步,第5步讲ajax怎么写
5.创建ajax.html文件并编写客户端代码
1)在demo文件夹下创建一个public文件夹,里面用来存放文件
2)在public文件夹里创建一个HTML文件 ajax.html
3)编写html文件代码并保存
4)打开浏览器输入http://localhost:3000/ajax.html 回车
执行代码弹出内容则表示成功
然后是封装写好的Ajax 可以直接用
function ajax (options) {
// 存储的是默认值
var defaults = {
type: 'get',
url: '',
data: {},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function () {},
error: function () {}
};
// 使用options对象中的属性覆盖defaults对象中的属性
Object.assign(defaults, options);
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 拼接请求参数的变量
var params = '';
// 循环用户传递进来的对象格式参数
for (var attr in defaults.data) {
// 将参数转换为字符串格式
params += attr + '=' + defaults.data[attr] + '&';
}
// 将参数最后面的&截取掉
// 将截取的结果重新赋值给params变量
params = params.substr(0, params.length - 1);
// 判断请求方式
if (defaults.type == 'get') {
defaults.url = defaults.url + '?' + params;
}
// 配置ajax对象
xhr.open(defaults.type, defaults.url);
// 如果请求方式为post
if (defaults.type == 'post') {
// 用户希望的向服务器端传递的请求参数的类型
var contentType = defaults.header['Content-Type']
// 设置请求参数格式的类型
xhr.setRequestHeader('Content-Type', contentType);
// 判断用户希望的请求参数格式的类型
// 如果类型为json
if (contentType == 'application/json') {
// 向服务器端传递json数据格式的参数
xhr.send(JSON.stringify(defaults.data))
}else {
// 向服务器端传递普通类型的请求参数
xhr.send(params);
}
}else {
// 发送请求
xhr.send();
}
// 监听xhr对象下面的onload事件
// 当xhr对象接收完响应数据后触发
xhr.onload = function () {
// xhr.getResponseHeader()
// 获取响应头中的数据
var contentType = xhr.getResponseHeader('Content-Type');
// 服务器端返回的数据
var responseText = xhr.responseText;
// 如果响应类型中包含applicaition/json
if (contentType.includes('application/json')) {
// 将json字符串转换为json对象
responseText = JSON.parse(responseText)
}
// 当http状态码等于200的时候
if (xhr.status == 200) {
// 请求成功 调用处理成功情况的函数
defaults.success(responseText, xhr);
}else {
// 请求失败 调用处理失败情况的函数
defaults.error(responseText, xhr);
}
}
}
然后在index.js引入
const chinReagion= require('china-region');
china-region要在cmd里面引用
指令是
npm install china-region
在node_modules里面查看有没有
最后是代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="template-web.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/template_js/0.8.0/template.js"></script> -->
</head>
<body>
<select class="form-control" id="province">