安装
去node官网下载LTS，长期支持版本，傻瓜式安装
打开命令行
node -v
如果能出现版本号，即安装成功
如果不出现，再安装一次，可以考虑选择repair
备注：win7用户，需要自行配置环境变量
配置淘宝镜像
npm get registry
如果出现的网址，不是https://registry.npmmirror.com/
则需要改成淘宝镜像地址，命令如下：
npm set registry https://registry.npmmirror.com/
新建项目
新建一个空文件夹，命名为英文即可
cd 文件夹名 ##切换目录
npm init -y ##初始化
npm install jquery --save ##安装一个jQuery包，并且记录在package.json文件里dependencies字段里
##or 简写成
npm i jquery
npm uninstall jquery --save ##卸载jQuery包，并且删除dependencies里的jQuery字段
##or 简写成
npm uni jquery
入门Ajax
什么是Ajax？
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步 Javascript和XML”。
第一步、
新建一个文件夹，命名为英文即可 （在这里我命名的是login-register）
在里面新建一个JS文件 （在这里我建了一个server.js）
第二步、
找到terminal控制台
先通过cd ..\切换至新建文件夹下
然后通过md views 回车 （通过md 新建文件夹名字 来新建文件夹）
这样就在login-register文件夹下新建了一个名为views的文件夹（当然也可以通过在login-register文件夹右键新建一个文件夹，两者一样）
第三步、
在控制台里面npm init -y
通过npm i express express-art-template来安装express和express-art-template两个包
此时的package.json应该是这样的
此时的文件夹是这样的
第四步、
在sever.js中导入express模块
## node中使用cmd,也叫commonJs模块方式,用require导入
const express=require('express') // require('express') 导入express模块
const app = express()
app.engine('html',require('express-art-template'))
特别插入========
前端数据交互技术：form表单提交和Ajax
form表单提交有：get、post
get和post是页面覆盖，从一个页面跳转到另一个页面
Ajax则是实现页面的局部变化，让用户拥有更好的体验
get的特点：
1、要求浏览器发送请求时，请求参数数量不能超过4k
2、要求浏览器发送请求时，必须在浏览器地址栏上将请求参数信息显示出来 （安全性差）
3、要求浏览器发送请求时，必须将请求参数信息保存在http请求协议包中的请求头
4、要求浏览器在接受到服务器返回的资源文件内容后，必须将资源文件内容保存在浏览器的缓存中
post的特点：
1、要求浏览器发送请求时，可以携带任意数量的请求参数
2、要求浏览器发送请求时，必须在浏览器地址栏上隐藏请求参数信息
3、要求浏览器发送请求时，必须将请求参数信息保存在http请求协议包中的请求体
4、禁止浏览器将服务器返回资源文件内容进行保存
=========================================================================================================
第五步、
在views文件夹下新建两个html文件
两个html样式分别为
登录界面：
注册界面：
登录界面代码：
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="email"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
display: block;
width: 100%;
padding: 10px;
background-color: #4caf50;
color: #ffffff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.text-center {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Login</h1>
<form action="/login_onsumbit" method="get">
<div class="form-group">
<label for="email">Username:</label>
<input type="email" id="email" name="email" required><!--//required第一要求必填，第二要求格式正确，否则不可submit（提交）-->
<p id="emailTip"></p>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><!--//required第一要求必填，第二要求格式正确，否则不可submit（提交）-->
</div>
<div class="text-center">
<button type="submit">Login</button>
</div>
</form>
</div>
</body>
</html>
注册界面：
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="email"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
display: block;
width: 100%;
padding: 10px;
background-color: #4caf50;
color: #ffffff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.text-center {
text-align: center;
}
.form-group>p{
color: red;
}
</style>
</head>
<body>
<div class="container">
<h1>Register</h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required> <!--//required第一要求必填，第二要求格式正确，否则不可submit（提交）-->
<p id="emailTip"></p>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><!--//required第一要求必填，第二要求格式正确，否则不可submit（提交）-->
<p id="passwordTip"></p>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="passwordAgain" name="passwordAgain" required><!--//required第一要求必填，第二要求格式正确，否则不可submit（提交）-->
</div>
<div class="text-center">
<button type="submit">Register</button>
</div>
</form>
</div>
</body>
</html>
第六步、
在server.js内添加以下代码
app.get('/login.html',(req,res)=>{
res.render('login.html')
})
## 注意：下面代码内容一定要要放到最后，切记！切记！切记！
app.listen(8888,()=>{
console.log('listen on port 8888')
})
| 代码 | 作用 |
|---|---|
| app.get | http发出get请求 |
| ‘/login.html’ | URL |
| req | 浏览器发送给服务器的信息 |
| res | 服务器发送给用户的反馈信息 |
| res.render(‘login.html’) | 服务器响应http请求通过res.render去向模板中渲染数据，并将视图发送给客户端 |
| res.send(‘123456789123456789123456789’) | 服务器响应http请求通过res.send直接将信息（这里是字符串）发送给客户端 |
| app.listen | 该方法会返回一个http.Server对象 |
| 8888 | 端口号 (数字范围须在0~65535) |
第七步、
在控制台输入node server.js -----save
控制台会输出listen on port 8888 这时便是启动成功了！
去浏览器输入：localhost:8888/login.html
第八步、
1、在HTML写入内嵌式JavaScript
2、定义函数
document.getElementsByTagName('form')[0].onsubmit=()=>{
const xhr=new XMLHttpRequest() //设置XMLHttpRequest对象
xhr.open('GET',`/login_onsubmit`,true) //通过get请求方式 URL 异步
xhr.onreadystatechange=()=>{
if (xhr.readyState===4&&xhr.status===200){
if (xhr.responseText){ // 如果后端给前端的是true（不是这些：“”，''，0,undefined，null，false，NaN便是true)则执行下面
console.log(xhr.responseText) //输出后端发送给浏览器的信息
}
}
}
xhr.send()
}
3、在html的form中内容应为如下
<form action="/login_onsumbit" method="get"> <!--""内的内容需要与JavaScript内的URL和server.js中一致 -->
<input type="email" id="email" name="email" required> <!--required第一要求必填，第二要求格式正确，否则不可submit（提交）-->
<input type="password" id="password" name="password" required><!--//required第一要求必填，第二要求格式正确，否则不可submit（提交）-->
4、 在server.js中要写入如下内容
##登录界面（需要在浏览器输入：localhost:8888/login.html 回车即可跳转）
app.get('/login.html',(req,res)=>{
res.render('login.html')
})
##注册界面（需要在浏览器输入：localhost:8888/register.html 回车即可跳转）
app.get('/register.html',(req,res)=>{ <!--""内的内容需要与JavaScript内的URL中一致 -->
res.render('register.html')
})
##在输入框内输入相应的邮箱和密码（现在可以随便输入）点击login按钮从登录界面跳转到注册界面
app.get('/login_onsumbit',(req,res)=>{ <!--""内的内容需要与JavaScript内的URL中一致 -->
res.render('register.html')
console.log('已经跳转到注册页面')
})
第九步、添加登录界面的账号格式验证与账号正确验证
1、设置变量和正则
const email=document.getElementById('email')
const emaiilTip=document.getElementById('emailTip')
const reg=/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ ##定义验证邮箱的正则
2、定义函数
email.onchange=()=>{
if(reg.test(email.value)){ ##如果用户输入的邮箱格式正确则执行下面
const xhr=new XMLHttpRequest() ##设置XMLHttpRequest对象
const params=`/test_loginemail?email=${email.value}` ## 定义（URL和发送email.value给后端）为一个确定值
xhr.open('get',params,true)
xhr.onreadystatechange=()=>{
if (xhr.readyState===4&&xhr.status===200){
console.log(xhr.responseText)
if (xhr.responseText){
emailTip.innerHTML=xhr.responseText ##将后端发送回来的
}
}
}
xhr.send()
emaiilTip.innerHTML=''
return true
}else {
emaiilTip.innerHTML='邮箱格式错误'
return false
}
}
3、
在server.js中加入以下内容
app.get('/test_loginemail',(req,res)=>{
if(req.query.email==='123456789@qq.com'){ ##如果前端传来用户输入的数据为123456789@qq.com则表示不会显示什么，如果不是则会显示该账户未注册
res.send('')
}else {
return res.send('该账户未注册')
}
})
第十步、添加注册界面的一些验证(和前面登录界面异曲同工)
一、添加邮箱格式验证 和 账号是否注册验证
1、设置变量和正则
const email=document.getElementById("email")
const emailTip=document.getElementById('emailTip')
2、定义事件函数
email.onchange=()=>{
const reg=/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ ##正则表达式
const str=email.value ##获取用户输入到email里面的字符串
if (reg.test(str)===true){ ##测试是否满足邮箱格式
const xhr=new XMLHttpRequest() ##设置XMLHttpRequest对象
const params=`/test_email?email=${email.value}` ## 定义（URL和发送email.value给后端）为一个确定值
xhr.open('get',params,true) ##通过URL并携带用户输入的信息以get方式传向后端 true为异步
xhr.onreadystatechange=()=>{
if (xhr.readyState===4&&xhr.status===200){
console.log(xhr.responseText)
if (xhr.responseText){
emailTip.innerHTML=xhr.responseText
}
}
}
xhr.send()
document.getElementById('emailTip').innerHTML=('')
return true
}else{
document.getElementById('emailTip').innerHTML=('邮箱格式错误')##给form表单中的p标签添加字符串
return false
}
}
3、
在server.js中添加以下内容
app.get('/test_email',(req,res)=>{
console.log(req.query)
if(req.query.email==='123456789@qq.com'){
res.send('账号已注册')
}else {
res.send(' ')
}
})
二、添加二次密码输入异同验证（此处与后端无关）
定义方法
document.getElementsByTagName('form')[0].onsubmit=()=>{ ##点击form表单调用箭头函数
const password=document.getElementById('password').value ##获取第一个密码输入框内的数据
const passwordAgain=document.getElementById('passwordAgain').value ##获取第二个输入框内的数据
if (password===passwordAgain){ ##如果第一个数据与第二个数据一致
return true ##运行
}
document.getElementById('passwordTip').innerHTML=('两次密码不一样')
return false
}
3792
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
