一、什么是node.js？
node.js是指javascript运行环境，也作为一个新兴的前端框架，后端语言；V8虚拟机；node.js利用modules模块区划分不同的功能。下面是具体的用法
var express = require('express')
// post请求方式会将参数放入到请求体当中
// 所以学要引入解析请求体的模块 body-parser
var bodyParser = require('body-parser')
var web = express()
web.use(express.static('public'))
// 设置对url进行编码，并且不允许url进行扩展
// 如果设置为false，那么参数只能为数组或者字符串
// 如果设置为True，那么参数为任意类型
web.use(bodyParser.urlencoded({extended:false}))
// 存储注册成功以后的账号密码
var account = ''
var psw =''
web.get('/regist', function(req, res){
var password = req.query.psw
var password2 = req.query.pswa;
var user = req.query.user;
if(user != account && password == password2)
{
account = user
psw = password
res.send('恭喜注册成功！账号是:'+ user +'密码是：' +password + '，请妥善保管' )
}
else{
res.send('注册失败，账号已经注册或者密码不一致')
}
console.log(password)
console.log(password2)
console.log(user)
})
web.post('/login',function(req,res){
name = req.body.user;
password = req.body.password;
if(name == account && password == psw){
res.send('恭喜你登录成功')
}
else{
res.send('登录失败，请检查账号密码')
}
})
web.listen('8080', function(){
console.log('服务器启动。。。')
})二、利用node.js写一个留言板的小项目
1.index.js里的内容
var express = require('express')
var bodyParser= require('body-parser')
var multer = require('multer')
var fs = require('fs')
var web = express()
var form = multer()
web.use(express.static('public'))
web.use(bodyParser.urlencoded({extended:false}))
web.post('/addNew',form.array(),function(req ,res){
// 判断是否存在指定文件夹
// 如果存在 则回调函数值为True
// 如果不存在 则回调函数值为False
fs.exists('data',function(isExists){
if(!isExists)
{
// make directory Synchrous
fs.mkdirSync('data')
}
// var name = req.body.name ;
// var job = req.body.job
// var card = req.body.card
// var code = req.body.code
// var tel = req.body.tel
// var time = req.body.currentTime
// var json ={
// name : name ,
// job : job ,
// card : card ,
// code : code ,
// tel : tel ,
// time : time
// }
var data = req.body
var infoString = JSON.stringify(data)
// 第二种方式
// fs.writeFile('data/info.txt',infoString,{flag:'a'},function(err)、
// 第三种方式
// fs.appendFile('data/info.txt',infoString,function(err)
fs.appendFile('data/info.txt',infoString+ ',\n',function(err){
if (err)
{
console.log('写入失败')
res.send('失败')
}
else {
console.log('写入成功')
res.send('成功')
}
})
})
})
web.get('/getInfo',function(req ,res){
fs.exists('data',function(isExists){
if(isExists)
{
fs.readFile('data/info.txt',function(err ,data){
if(err)
{
res.send('读取失败' + err)
}
else {
res.send(data)
}
})
}
})
})
web.listen('8080',function(req ,res){
console.log('服务器启动....................')
})
// 整体思路
// 1.index页面到new页面 Windows.location.href = 'new。html'
// 2.放置input标签 ，获取input标签 getElementsByName（）
// 后面补药追加.value 因为按照现在的代码，input输入框里面没有来的积极写入内容，程序就加载完毕
// 3.将数据发送到后台，xhr的form请求方式
// var form = new FormData()
// form.append()
// 4.后台接收到数据，“追加到本地文件里面” appendFile
// 同时注意拼接成json格式，在后面追加一个逗号
// 5.index页面进行数据请求，获取全部数据
// 6.后台接收到请求以后，读取本地文件 readfile，将读到的数据全部发送到前端，格式为
// 数据1，
// 数据2.
// 数据3，
// 数据的类型是字符串
// 7.前端接收数据，将数据格式改成标准格式的json格式的字符串
// 然后转化成json JSON.parse（）
// 再然后便利 获取每一条数据进行拼接
// 显示到界面上
2.index.html的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>留言板</title>
<style>
main{
width: 800px;
height: 260px;
/* border:1px solid red; */
position: relative;
margin: 0 auto;
}
h1{
width: 100%;
/* border: 1px solid black; */
margin-top: 0;
}
button{
background-color: yellow;
font-size: 20px;
}
form{
width: 800px;
height: 700px;
/* border: 2px solid green; */
}
</style>
</head>
<body>
<main>
<h1>欢迎来到我的留言板</h1>
<textarea name="text" id="" cols="30" rows="10"></textarea><br>
<button onclick="clickToAddInfo()">点击留言</button><br><br><br>
<script>
var name1 = document.getElementsByName('text')
var xhr = new XMLHttpRequest()
function clickToAddInfo(){
var time = new Date()
var currentTime = time.getFullYear() +'年'+(time.getMonth()+1) + '月'+time.getDate()+'日'+
(time.getHours()<10?'0' +time.getHours() : time.getHours())+':'+(time.getMinutes()<10?'0' +time.getMinutes():time.getMinutes())
+':' +(time.getSeconds()<10?'0'+time.getSeconds():time.getSeconds())
var xhr = new XMLHttpRequest()
var form = new FormData()
form.append('text',name1.value)
form.append('time',currentTime)
xhr.open('post', '/addNew')
xhr.send(form)
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
if(xhr.responseText == '成功')
{
console.log('++++++++')
}
else{
alert('留言失败')
}
}
}
}
var main = document.createElement('main')
main.style.width = ' 800px'
main.style.backgroundColor = 'green'
main.style.margin = '0 auto'
main.style.border = '1px solid blue'
main.style.margin = '100px auto'
document.body.appendChild(main)
main.innerText = ''
var xhr = new XMLHttpRequest()
xhr.open('get','/getInfo')
xhr.send()
xhr.onreadystatechange = function(){
if (xhr.readyState == 4)
{
var obj = xhr.responseText
var infoString = obj.substr(0,obj.length-2)
var allInfo = '[' + infoString + ']'
var jsonInfo = JSON.parse(allInfo)
console.log(jsonInfo)
var content = ''
main.innerText = allInfo
for(var index = 0 ; index < jsonInfo.length; index ++)
{
var info = allInfo[index]
console.log(info.des)
content += '留言内容：'+ info.data.text + '<br>'+ ingo.data.time
}
main.innerHTML = content
}
}
</script>
</main>
</body>
</html>
680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
