HTML+CSS实训——Day11——进一步学习NodeJS

最新推荐文章于 2024-07-25 11:52:08 发布

Sol-itude

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量63

点赞数 1

分类专栏：前端实训课文章标签： html css 学习

本文链接：https://blog.csdn.net/qq_42887663/article/details/131085709

版权

前端实训课专栏收录该内容

15 篇文章 0 订阅

订阅专栏

前言

昨天就一个下午学了学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>