我家自动化

这个屌丝很懒，什么也没留下！

热门标签

前端进阶全栈入门级教程nodeJs博客开发(一）搭建环境与路由_const port = 8000 const serverhandle = require('..

作者：我家自动化 | 2024-03-17 22:21:38

踩

const port = 8000 const serverhandle = require('../app')

阅读本篇文章时候，需要前端有一定基础后，想要进阶全栈，或者了解后端工作方式阅读，能更好的提高，前后分离对接的理解，本篇只会，概况的带领操作一遍，后端开发。简单易懂。

文章目录

一、搭建开发环境

tips 以下注释 // 省略。。。。均为省略未修改部分

我们先创建文件夹nativBlog

然后使用 npm init -y 初始化一个项目
在这里插入图片描述

安装nodemon 自动重启node
```
npm i nodemon -D
1
```
安装cross-env 控制开发环境
```
npm i cross-env -D
1
```

按照下列创建并修改文件，搭建一个基础的nodeSever，并返回一定数据

文件结构

├─app.js
├─package.json
├─src
├─bin
|  └www.js
1
2
3
4
5

www.js

const http = require('http')

const PORT = 8000
const serverHandle = require('../app')

const server = http.createServer(serverHandle)
server.listen(PORT)
console.log('已开启 8000端口');

1
2
3
4
5
6
7
8
9

app.js

const serverHandle = (req,res)=>{
  // 设置返回格式 JSON
  res.setHeader('Content-type','application/json')
   //模拟一下假数据 
  const resData = {
    name:'admin',
    env:process.env.NODE_ENV
  }

  res.end(
    JSON.stringify(resData)
  )
}

module.exports = serverHandle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

添加启动命令

package.json

{
  "name": "native-blog",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "cross-env NODE_ENV=dev nodemon ./bin/www.js",
    "prd": "cross-env NODE_ENV=production nodemon ./bin/www.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "cross-env": "^7.0.3",
    "nodemon": "^2.0.7"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

运行一下

然后打开浏览器或者postman测试一下

npm run dev
1

在这里插入图片描述

二、搭建路由

路由和API的概念

API:

前端和后端、不同端(子系统)之间对接的一个术语

前端只需要知道 url(路由)是什么，传递方式和参数，不需要知道如何实现

路由:

API的一部分，

后端系统内部的一个定义，

，比如要实现一个api，需要定义一个router，controller db model等等

（一）搭建基础路由

以下为我们需要建立的接口

在这里插入图片描述

我们区分blog和user2个部分建立文件

├─src
|  ├─router //处理路由
|  |   ├─blog.js
|  |   └user.js
1
2
3
4

blog.js

const  handleBlogRouter = (req,res) =>{
console.log('method：',req.method);
console.log(' req.path:', req.path);

  // 获取博客列表
  if(req.method ==='GET'&&  req.path ==='/api/blog/list') {
    console.log('进入2');
    
    return {
      msg:'这是获取博客列表的接口'
    }
  }
  // 获取博客详情
  if(req.method === 'GET'&&  req.path ==='/api/blog/detail') {
    return {
      msg:'这是获取博客详情的接口'
    }
  }
  // 新建一篇博客
  if(req.method === 'POST'&&  req.path ==='/api/blog/new') {
    return {
      msg:'这是新建博客列表的接口'
    }
  }
  // 更新博客列表
  if(req.method === 'POST'&&  req.path ==='/api/blog/update') {
    return {
      msg:'这是更新博客列表的接口'
    }
  }
  // 删除博客列表
  if(req.method === 'GET'&&  req.path ==='/api/blog/del') {
    return {
      msg:'这是删除博客列表的接口'
    }
  }
}
module.exports = handleBlogRouter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

user.js

const handleUserRouter = (req,res)=>{
 
  // 登录
  if(req.method === 'POST' &&  req.path === '/api/user/login'){
    return {
      msg:'这是登录的接口'
    }
  }
}
module.exports = handleUserRouter
1
2
3
4
5
6
7
8
9
10

修改一下原本的app.js 来处理请求

const querystring = require('querystring') //引入原生模块解析get参数
const handleBlogRouter = require('./src/router/blog')
const handleUserRouter = require('./src/router/user')
const serverHandle = (req,res)=>{

    // 设置返回格式 JSON
    res.setHeader('Content-type','application/json')
  // 获取路径
    const url = req.url
    req.path = url.split('?')[0]
  // 解析query
    req.query = querystring.parse(url.split('?')[0])
    // 处理blog路由
    const blogData= handleBlogRouter(req,res)

    if(blogData){
      res.end(
        JSON.stringify(blogData)
      )
      return
    }

    // 处理user路由
    const userData= handleUserRouter(req,res)

    if(userData){
      res.end( 
        JSON.stringify(userData)
      )
      return
}
// 未命中路由返回404
res.writeHead(404,{"COntent-type":"text/plian"})
res.write("404 Not Found\n")
res.end()
}

module.exports = serverHandle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

通过上步，我们简单搭建了一套路由，然后用在psotman来测试一下

在这里插入图片描述

OK，没有问题，当然你需要每个接口都尝试一下

（二）创建controller 和model层

文件结构

├─src
|  ├─router //处理路由
|  |   ├─blog.js
|  |   └user.js
|  ├─model //建立数据模型
|  |   └resModel.js
|  ├─controller //处理业务逻辑
|  |     ├─blog.js
|  |     └user.js


1
2
3
4
5
6
7
8
9
10
11

分清楚一个事实，就要分清层级，router只管路由的处理，www.js只管创建sever，controller只管业务逻辑的处理

model 处理返回的数据结构

到这一步，还没连接数据库，但我们要假装模拟一下真实的数据返回

首先建立model

resModel.js

class BaseModel {
  constructor(data, message) {
      // 兼容判断是否传人2个参数
      if (typeof data === 'string') {
          this.message = data
          data = null
          message = null
      }
      if (data) {
          this.data = data
      }
      if (message) {
          this.message = message
      }
  }
}
 //成功的数据模型
class SuccessModel extends BaseModel {
  constructor(data, message) {
      super(data, message)
      this.errno = 0
  }
}

// 失败的数据模型
class ErrorModel extends BaseModel {
  constructor(data, message) {
      super(data, message)
      this.errno = -1
  }
}

module.exports = {
  SuccessModel,
  ErrorModel
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

其次建立controller层

先做个简单的假数据模拟、

blog.js

const getList = (author,keyword) =>{
	//模拟返回的数据，用promise模拟异步数据库操作
  const promise = new Promise((resolve,reject)=>{
    const data = [
      {
        id:1,
        title:"标题A",
        content:"内容A",
        createTime:1600410168761,
        author:"张三"
      },
      {
        id:2,
        title:"标题B",
        content:"内容B",
        createTime:1600410221493,
        author:"李四"
      }
    ]
    resolve(data)
  })
  return promise
}
module.exports = {
  getList
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

然后修改router下bolg.js的处理,修改一个接口来体验一下

blog.js

//导入controller
const {getList} = require('../controller/blog')
//导入model
const {SuccessModel,ErrorModel} = require('../model/resModel')
......省略未修改部分

// 获取博客列表
  if(req.method ==='GET'&&  req.path ==='/api/blog/list') {
    const author = "张三"
    const keyword = "标题A"
    
      const result = getList(author,keyword)
    return result.then(data =>{
        return new SuccessModel(data,'请求成功')
    })
  }
......省略未修改部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

app.js

...省略未修改部分

const serverHandle = (req,res)=>{
...省略未修改部分
            // 处理blog路由
        const blogResult= handleBlogRouter(req,res)
        if(blogResult){
          blogResult.then(blogData =>{
            if(blogData){
              res.end(
                JSON.stringify(blogData)
              )
            }
          })
          return
        }
        // // 处理user路由
        const userResult= handleUserRouter(req,res)
        if(userResult){
          userResult.then(userData=>{
            if(userData){
              res.end(
                JSON.stringify(userData)
              )
              return
            }
          })
        }
...省略未修改部分
}
module.exports = serverHandle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

修改完成后用postman来测试
在这里插入图片描述

测试成功，代表我们的模块规划没有问题

（三）处理post请求

前面都是用的get，对于post我们还没做任何处理，post是异步操作，所以我们需要用promise来处理一下

封装一个下面方法来处理post

// 处理post请求
const getPostData = (req) => {
  const promise = new Promise((resolve, reject) => {
    // 不是post，get请求
      if (req.method !== 'POST') {
          resolve({})
          return
      }
      // post请求处理， 如果返回的格式不是json 返回一个空
      if (req.headers['content-type'] !== 'application/json') {
          resolve({})
          return
      }
      let postData = ''
      //   post数据其实是数据流，所以我们需要监听拼接数据
      req.on('data', chunk => {
          postData += chunk.toString()
      })
      req.on('end', () => {
        // 没有数据返回一个空
          if (!postData) {
              resolve({})
              return
          }
          resolve(
              JSON.parse(postData)
          )
      })
  })
  return promise
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

然后app.js完整代码如下，在处理路由前，先通过封装的方法处理一下post请求

const querystring = require('querystring')
const handleBlogRouter = require('./src/router/blog')
const handleUserRouter = require('./src/router/user')

// 处理post请求
const getPostData = (req) => {
  const promise = new Promise((resolve, reject) => {
    // 不是post，get请求
      if (req.method !== 'POST') {
          resolve({})
          return
      }
      // post请求处理， 如果返回的格式不是json 返回一个空
      if (req.headers['content-type'] !== 'application/json') {
          resolve({})
          return
      }
      let postData = ''
      req.on('data', chunk => {
          postData += chunk.toString()
      })
      req.on('end', () => {
        // 没有数据返回一个空
          if (!postData) {
              resolve({})
              return
          }
          resolve(
              JSON.parse(postData)
          )
      })
  })
  return promise
}

const serverHandle = (req,res)=>{

    // 设置返回格式 JSON
    res.setHeader('Content-type','application/json')
  // 获取路径
    const url = req.url
    req.path = url.split('?')[0]
    // 解析query
    req.query = querystring.parse(url.split('?')[1])
    // 处理post请求
    getPostData(req).then(postData=>{
          req.body = postData
            // 处理blog路由
        const blogResult= handleBlogRouter(req,res)
        if(blogResult){
          blogResult.then(blogData =>{
            if(blogData){
              res.end(
                JSON.stringify(blogData)
              )
            }
          })
          return
        }

        // // 处理user路由
        const userResult= handleUserRouter(req,res)
        if(userResult){
          userResult.then(userData=>{
            if(userData){
              res.end(
                JSON.stringify(userData)
              )
            }
          })
              return
        }
    
    // 未命中路由返回404
    res.writeHead(404,{"COntent-type":"text/plian"})
    res.write("404 Not Found\n")
    res.end()
  })

   
}

module.exports = serverHandle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

之后修改一个post接口来测试一下

controller

blog.js

...省略
const newBlog = (blogData = {}) =>{
  // blogData 包含 title content
  // 添加成功返回添加id，
    //模拟处理完成后返回数据
  const promise = new Promise((resolve,reject)=>{
    const data = {
      id:3
    }
    resolve(data)
  })
  return promise
}
module.exports = {
    ...省略
  newBlog
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

router

blog.js

const {
  ...省略
  newBlog} = require('../controller/blog')
 ...省略

  // 新建一篇博客
  if(req.method === 'POST'&&  req.path ==='/api/blog/new') {
          const result = newBlog(req.body)
      return result.then(data =>{
        return new SuccessModel(data,'添加成功')
    })
  }
 ...省略
1
2
3
4
5
6
7
8
9
10
11
12
13

通过postman测试一下，

在这里插入图片描述

接下来完善并模拟所有的数据

controller

blog.js

const getList = (author,keyword) =>{
  const promise = new Promise((resolve,reject)=>{
    const data = [
      {
        id:1,
        title:"标题A",
        content:"内容A",
        createTime:1600410168761,
        author:"张三"
      },
      {
        id:2,
        title:"标题B",
        content:"内容B",
        createTime:1600410221493,
        author:"李四"
      }
    ]
    resolve(data)
  })
  return promise
}
const getDetail = (id) =>{
  const promise = new Promise((resolve,reject)=>{
    const data = [
      {
        id:2,
        title:"标题B",
        content:"内容B",
        createTime:1600410221493,
        author:"李四"
      }
    ]
    resolve(data)
  })
  return promise
}
const newBlog = (blogData = {}) =>{
  // blogData 包含 title content
  // 添加成功返回添加id，
  const promise = new Promise((resolve,reject)=>{
    const data = {
      id:3
    }
    resolve(data)
  })
  return promise

}

const updateBlog = (id,blogData = {}) =>{
 // id 就是要更新博客的 id
    // blogData 是一个博客对象，包含 title content 属性
    const promise = new Promise((resolve,reject)=>{
     
      resolve(true)
    })
    return promise
}
const delBlog = (id,author) =>{
  // id 删除博客的id
  const promise = new Promise((resolve,reject)=>{
     
    resolve(true)
  })
  return promise
}

module.exports = {
  getList,
  getDetail,
  updateBlog,
  newBlog,
  delBlog
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

user.js

const login = (username, password) =>{
   const promise = new Promise((resolve,reject)=>{
     
    resolve(false)
  })
  return promise
 }

 module.exports = {
   login
 }
1
2
3
4
5
6
7
8
9
10
11

router

blog.js

const {
  getList,
  getDetail,
  updateBlog,
  newBlog,
  delBlog} = require('../controller/blog')
const {SuccessModel,ErrorModel} = require('../model/resModel')
const  handleBlogRouter = (req,res) =>{
  const method = req.method
  const id = req.query.id


console.log('method：',req.method);
console.log(' req.path:', req.path);

  // 获取博客列表
  if(method ==='GET'&&  req.path ==='/api/blog/list') {
    const author = req.query.author
    const keyword =req.query.keyword
    
    const result = getList(author,keyword)
    return result.then(data =>{
        return new SuccessModel(data,'请求成功')
    })
  }
  // 获取博客详情
  if(method === 'GET'&&  req.path ==='/api/blog/detail') {
    const result = getDetail(id)
    return result.then(data =>{
      return new SuccessModel(data,'请求成功')
  })
}
  // 新建一篇博客
  if(method === 'POST'&&  req.path ==='/api/blog/new') {
      const result = newBlog(req.body)
      return result.then(data =>{
        return new SuccessModel(data,'添加成功')
    })
   
  }
  // 更新博客列表
  if(method === 'POST'&&  req.path ==='/api/blog/update') {

    const result = updateBlog(id,req.body)
      
    return result.then(data =>{
      if(data){
        return new SuccessModel('修改成功')
      } else {
        return new ErrorModel('修改失败')
      }
     
  })
    
  }
  // 删除博客列表
  if(method === 'GET'&&  req.path ==='/api/blog/del') {
    const author = req.query.author
    const result = delBlog(id,author)
    return result.then(data =>{
      if(data){
        return new SuccessModel('删除成功')
      } else {
        return new ErrorModel('删除失败')
      }
     
  })
  }
}
module.exports = handleBlogRouter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

user.js


const {login} = require('../controller/user')
const {SuccessModel,ErrorModel} = require('../model/resModel')


const handleUserRouter = (req,res)=>{
 
  // 登录
  if(req.method === 'POST' &&  req.path === '/api/user/login'){
 const {userName,passWord} = req.body
    const result = login(userName,passWord)
    return result.then(data =>{
      if(data){
        return new SuccessModel('登陆成功')
      } else {
        return new ErrorModel('登陆失败')
      }
  })
  }
}
module.exports = handleUserRouter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/258361

前端进阶全栈入门级教程nodeJs博客开发(一）搭建环境与路由_const port = 8000 const serverhandle = require('..

文章目录

一、搭建开发环境

二、搭建路由

路由和API的概念

（一） 搭建基础路由

（二）创建controller 和model层

（三）处理post请求

接下来完善并模拟所有的数据

（一）搭建基础路由