node.js express 搭建简单后台服务

1. 创建项目

$ mkdir myExpress  // 命令行中创建项目文件夹
$ cd myExpress     // 进入项目文件夹中

2. 使用npm 初始化项目

$ npm init

3. 下载安装express

$ cnpm install express --save

4. 新建app.js文件-- Hello World!

const express = require('express')  //引入express
const app = express()  // 执行express
const port = 3000  // 监听的端口号


// 计划监听来自前端的HTTP请求，如果请求地址是/a则自动调用第二个参数的函数体
app.get("/a",(request,response)=>{
	// 接收到来自前端的请求name参数，并赋值到name变量中
	let name = request.query.name;
    // 监听到请求就会打印下面的内容
	console.log("接收到来自前端的请求")
	// 向前端返回一段内容
	response.send(`${name},success!!!!`)
})

app.get('/', (req, res) => {
    res.send('Hello World!')
  })

// port为监听的端口号，后面是一个回调；
app.listen(port, () => { 
  console.log(`Example app listening at http://localhost:${port}`)
})

5. 启动服务，监听3000端口

$ node app.js
Example app listening at http://localhost:3000 // 控制台打印的内容，可以直接访问这个地址

6. 前端vue中使用

// vue.config.js中配置prexy反向代理
devServer: {
    open: true,
    port: 8080,
    host: '127.0.0.1',
    // 跨域
    proxy: {
        '/api': {
            target: 'http://localhost:3000/',
            changeOrigin: true,
            pathRewrite: {
                '^/api': '/'
            }
        },
    }
}
// 页面中调用
methods: {
    getDatalist(){
        axios.get('/api/a').then(res=>{
            console.log(res)
        })
    }
},

• 模拟后端增删改查全部代码

const express = require('express')
const app = express()
const port = 3000
let dataList = [
    {
        name: 'jp',
        age: 18,
        sex: '1',
        city: 'xi,an',
        id: 1,
    },
    {
        name: '豆豆',
        age: 20,
        sex: '1',
        city: '华山',
        id: 2,
    },
    {
        name: '小明',
        age: 22,
        sex: '0',
        city: '宝鸡',
        id: 3,
    },
    {
        name: 'dh',
        age: 30,
        sex: '0',
        city: '兰州',
        id: 4,
    },
    {
        name: 'express',
        age: 30,
        sex: '1',
        city: 'xi,an',
        id: 5,
    },
]
// 获取列表
app.get("/getList", (request, response) => {
    // 接收到来自前端的请求name参数，并赋值到name变量中
    // let name = request.query.name;
    // 监听到请求就会打印下面的内容
    console.log("获取列表请求")
    // 向前端返回一段内容
    response.send({ code: 200, status: 'success', data: { total: dataList.length, list: dataList } })
})

// 添加
app.get("/addItem", (request, response) => {
    let req = request.query;
    console.log("添加请求", req)
    let id = 1
    if (dataList.length > 0) {
        id = dataList[dataList.length - 1].id++
    }
    let obj = {
        ...req,
        id
    }
    dataList.push(obj)
    response.send({ code: 200, status: 'success', msg: '添加成功' })
})

// 删除
app.get("/deleteItem", (request, response) => {
    let req = request.query;
    console.log("删除请求", req)
    dataList = dataList.filter(item => item.id != req.id)
    // 向前端返回一段内容
    response.send({ code: 200, status: 'success', msg: '删除成功' })
})

// 修改
app.get("/edit", (request, response) => {
    let req = request.query;
    console.log("修改请求", req)
    dataList.forEach((item,index)=>{
        if(item.id == req.id){
            console.log('ok')
            dataList[index] = {...req}
        }
    })
    // 向前端返回一段内容
    console.log(dataList)
    response.send({ code: 200, status: 'success', msg: '修改成功' })
})

// port为监听的端口号，后面是一个回调；
app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})