完成图片的静态资源托管

1.新建一个文件夹picservice

2.cd picservice:进入到文件夹中

3.npm init -y :初始化npm

4.初始化完成后，文件夹中会出现一个package.json文件

5.npm install express -S :安装express

6.安装完成后，可以看到出现文件夹node_modules文件夹，这是个依赖包

7.在文件夹picservice下创建一个router.js文件，文件内容：

 

const express = require('express')   //导入express

const app = express()  //实例化一个express

//静态资源托管
//use函数第一个参数为访问的url的地址，第二个参数为
//第二个参数，express.static()函数指定静态资源的路径，此处为文件夹public
app.use("/static",express.static('public'))

//使用listen()函数监听一个端口
//第一个参数为端口号，即此处监听3000端口
//第二个参数，使用一个函数打印输出日志
app.listen(3000,()=>{console.log("监听3000端口成功")})

 

8.在文件夹picservice下创建public文件夹，在public文件夹下放上图片如1.jpg

9.npm install -g nodemon  #安装nodemon

10.node router.js :启动router.js   或者 nodemon router.js  启动

11.看到打印“监听3000端口成功”，说明启动成功

12.在浏览器中访问：http://127.0.0.1:3000/static/1.jpg ，就可以访问静态资源1.jpg了

 

13.添加模拟数据，并使用get访问：
14.在文件夹picservice下创建一个tools.js文件，文件内容：

 

15.在router.js中调用tools.js并接收get请求：，代码如下（此处没有tools.js的完整代码，故此无法使用，可以看看就行）：

const express = require('express')   //导入express

const app = express()  //实例化一个express
const Tool = require('./tools')   //导入tools.js为Tool

//静态资源托管
//use函数第一个参数为访问的url的地址，第二个参数为
//第二个参数，express.static()函数指定静态资源的路径，此处为文件夹public
app.use("/static",express.static('manhua'))



//get请求 home?page=1&name=''
app.get("/home",function(req,res){
    //第一步 拿到page的值
    var params = req.query

    //解决跨域的请求,在请求头中 添加 Access-Control-Allow-Origin的值为*
    res.header('Access-Control-Allow-Origin','*')

    //拿到后台的数据，实际的开发是链接数据获取的
    var dataArr = Tool.arr
    //根据分页的参数，返回相对应的值
    let resArr = Tool.getTableData(Number(params.page),10,dataArr)
    //区分是否还有数据，如果resArr.status为true，则返回？后面的内容，否则返回：后面的内容，三元表达式
    resArr.status ? res.json(
        {
            status:200,
            data: resArr.data
        }
    ):res.json(
        {
            status:202,
            data:'没有数据了'
        }
    )
})


//使用listen()函数监听一个端口
//第一个参数为端口号，即此处监听3000端口
//第二个参数，使用一个函数打印输出日志
app.listen(3000,()=>{console.log("监听3000端口成功")})

 

 

 

16.