HTML+CSS实训——Day11——进一步学习NodeJS
前言
昨天就一个下午学了学NodeJs，不是很深入，今天全天还在学，Nodejs不是一个开发语言，实际上是一个开发环境，它提供了很多包，还可以开启本地端口。
Server.js
var express = require('express');
var cores = require('cors')
var carousels = require('./db/xz_index_carousel.json')
var products = require('./db/xz_index_product.json')
var app = express()
app.listen(3000)
app.use(cores())
app.get('/test01', (req, res) => {
res.send({
code: 200,
msg: 'hello world'
})
})
app.get('/carousels', (req, res) => {
res.send({
code: 200,
data: carousels
})
})
app.get('/products', (req, res) => {
res.send({
code: 200,
data: products
})
})
app.get('/productDetails', (req, res) => {
console.log(req.query)
var pid = req.query.pid
console.log(pid)
var product = products.find(function (item) {
return item.pid == pid
})
console.log(product)
res.send({
code: 200,
data: product
})
})
var laptops = require('./db/xz_laptop.json')
app.get('/laptops', (req, res) => {
var page = req.query.page
var pageSize = req.query.size
var start = (page - 1) * pageSize
var end = page * pageSize
var data = laptops.slice(start, end)
res.send({
code: 200,
data: data
})
})
我们在这个js中get了几个界面，再写其对应的html，可以在控制台看到html可以访问这些数据
04.html
<!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="./js/vue.js"></script>
</head>
<body>
<div id="app">
page: <input type="text" v-model="page"> <br>
size: <input type="text" v-model="size"> <br>
<button @click="getLaptops">获取</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
laptops: [],
page:1,
size:10
},
methods: {
getLaptops() {
var page = this.page
var size = this.size
fetch("http://127.0.0.1:3000/laptops?page="+page+"&size="+size)
.then(res => res.json())
.then(res => {
this.laptops = res.data
console.log(res.data)
})
}
},
mounted(){
this.getLaptops()
},
});
</script>
</body>
</html>
03.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="(p,i) of products" @click="getProductDetaiils(p.pid)">
序号:{{ p.pid }}=>
标题:{{ p.title}}=>
介绍:{{ p.details }}
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
products: []
},
methods: {
getProducts() {
fetch('http://127.0.0.1:3000/products')
.then(res => res.json())
.then(res => {
console.log(res)
this.products = res.data
})
},
getProductDetaiils(pid) {
fetch('http://127.0.0.1:3000/productDetails?pid=' + pid)
.then(res => res.json())
.then(res => {
console.log(res)
})
}
},
mounted(){
this.getProducts()
}
})
</script>
</body>
</html>
登陆界面
<!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="./js/vue.js"></script>
</head>
<body>
<div id="app">
uname: <input type="text" v-model="uname"> <br>
upwd: <input type="text" v-model="upwd"> <br>
<button @click="login()">登陆</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
uname: '',
upwd: ''
},
methods: {
login() {
console.log(this.uname, this.upwd)
var user = {
uname: this.uname,
upwd: this.upwd
}
// 发送post请求
// { method: 'POST', }
// 将参数转换为json格式
// body: JSON.stringify(user),
// 告诉服务器请求体的格式是json格式
// headers: { 'Content-Type': 'application/json' }
fetch('http://127.0.0.1:3000/login', {
method: 'POST',
body: JSON.stringify(user),
headers: {
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then(res => {
console.log(res)
})
}
},
})
</script>
</body>
</html>
用post请求，相对于get来说更安全
login.html
<!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="./js/vue.js"></script>
</head>
<body>
<div id="app">
uname: <input type="text" v-model="uname"> <br>
upwd: <input type="text" v-model="upwd"> <br>
<button @click="login()">登陆</button>
<h4>msg:{{ msg }}</h4>
<h4>{{ user.user_name }}</h4>
<h4>{{ user.uname }}</h4>
<h4>{{ user.email }}</h4>
<h4>{{ user.phone }}</h4>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
uname: '',
upwd: '',
msg:'',
user:{}
},
methods: {
login() {
console.log(this.uname, this.upwd)
var user = {
uname: this.uname,
upwd: this.upwd
}
// 发送post请求
// { method: 'POST', }
// 将参数转换为json格式
// body: JSON.stringify(user),
// 告诉服务器请求体的格式是json格式
// headers: { 'Content-Type': 'application/json' }
fetch('http://127.0.0.1:3000/login', {
method: 'POST',
body: JSON.stringify(user),
headers: {
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then(res => {
console.log(res)
if (res.code == 200) {
this.user = res.data
this.msg = res.msg
} else {
this.msg = res.msg
}
})
}
},
})
</script>
</body>
</html>
账号和密码都正确的情况下，会返回用户的信息
