向全栈靠齐的前端分享

背景与思考

前端在很多后端开发人员中，总是觉得没啥技术含量。尤其是在老java眼中，深深感觉存在严重的鄙视链。然后就是自己的职业规划，也不想一直做前端敲代码。毕竟自己的付出不少，也想收获属于自己的成就感。然后自己的横向发展就成了必然。

后端技术首推Node

Node框架推荐Koa

学习推荐

我当初学习也是想看了一下官网，发现确实如介绍般的简单，但是对于入门者来说，有点简单的过分了。在此推荐阮一峰老师的网络日志（不是打广告，确实是我当初前端起步阶段的老师之一，受益匪浅）。

主要代码解析

项目结构

app.js源码

const Koa = require('koa');
const Router = require('koa-router');

// 跨域模块
var cors = require('koa2-cors');
//文件模块
const fs = require('fs');

const { historyApiFallback } = require('koa2-connect-history-api-fallback');
//静态文件加载
const serve = require('koa-static');
//路径管理
const path = require('path');

//koa-body对文件上传进行配置
const koaBody = require('koa-body')

//实例化koa
const app = new Koa();


app.use(historyApiFallback());


app.use(cors());
const router = new Router();
const bodyParser = require('koa-bodyparser');
const controller = require('./controller');

app.use(async (ctx, next) => {

  ctx.set("Access-Control-Allow-Origin", "*")
await next()

})

app.use(bodyParser());
// 处理跨域


app.use(controller());


app.use(koaBody({
multipart:true,
formidable:{
maxFileSize:50000*1024*1024, //设置上传文件大小最大限制，默认为2m，2000*1024*1024
keepExtensions: true // 保留文件拓展名

	}

}))


// 1.主页静态网页 把静态页统一放到public中管理
const main = serve(path.join(__dirname) + '/build');

//配置路由

app.use(router.routes()).use(router.allowedMethods());

const port = 5000;

app.use(main)


app.listen(port, () => {
console.log(`server started on ${port}`)

});

依赖包讲解

const Koa = require('koa');

这是引入koa框架，这是重中之重，只有引入了才能够在项目中使用。在项目中会通过new来实例化，比如代码中的const app = new Koa();。然后再定义一个监听的端口，app.listen()方法来进行监听。

const fs = require('fs');

这是koa自带的文件模块，如果你想对系统文件进行读取，修改。或者文件上传保存，都离不开整个fs模块，fs.readFile和fs.readFileSync。

const koaBody = require('koa-body')

Koa-body是基于Koa的中间件模型构建的，主要用于文件上传，以及在中间件中对请求体的解析。对请求体的解析中，我们主要使用koa-bodyparser，它可以将http请求中的数据，解析成我们需要的JavaScript对象。

const Router = require('koa-router');
```门口

Router模块就是路由，此路由和前端路由有差异，此路由可以理解为前端理解的api接口，只是叫法不一样而已。


```js
const { historyApiFallback } = require('koa2-connect-history-api-fallback');

koa2-connect-history-api-fallback是一个专门为 Koa2 框架设计的中间件，它的主要目的是在SPA应用中处理URL重定向，尤其是在用户直接输入或者通过后退按钮访问非根URL时。 这个中间件会将所有未匹配到特定路由的请求转发到默认HTML文件（通常是 index.html），确保SPA可以正常启动并处理路由。还记得当初自己终于完成了一整套的项目线上部署，可把自己开心坏了，但是同事在一次用着发现，刷新页面时，页面直接变成了404，你说吓不吓人。盘查一下发现自己在vue前端中的路由为何在后端中变成了一个get请求。

controller.js源码

const fs = require('fs')

// add url-route in /controllers:

function addMapping (router, mapping) {
for (var url in mapping) {
if (url.startsWith('GET ')) {
var path = url.substring(4)

      router.get(path, mapping[url])
// console.log(`register URL mapping: GET ${path}`);

    } else if (url.startsWith('POST ')) {
var path = url.substring(5)

      router.post(path, mapping[url])
// console.log(`register URL mapping: POST ${path}`);

    } else if (url.startsWith('PUT ')) {
var path = url.substring(4)

      router.put(path, mapping[url])
// console.log(`register URL mapping: PUT ${path}`);

    } else if (url.startsWith('DELETE ')) {
var path = url.substring(7)

      router.del(path, mapping[url])
// console.log(`register URL mapping: DELETE ${path}`);

    } else {
// console.log(`invalid URL: ${url}`);

    }

  }

}

function addControllers (router, dir) {

  fs.readdirSync(__dirname + '/' + dir)

    .filter(f => {
return f.endsWith('.js')

    })

    .forEach(f => {
// console.log(`process controller: ${f}...`);
let mapping = require(__dirname + '/' + dir + '/' + f)
addMapping(router, mapping)

    })

}

module.exports = function (dir) {
let controllers_dir = dir || 'controllers',

    router = require('koa-router')()
addControllers(router, controllers_dir)
return router.routes`()`

}

controller讲解

在这个controller中，我们主要做了一件事，那就是路由映射逻辑处理。

function addControllers()

这个方法用于自动加载指定目录下的js文件，它使用fs.readdirSync读取目录，然后通过filter和forEach方法来处理每个文件名，只选择以.js结尾的文件，并将这些文件的路由映射添加到router上

function addMapping()

这个函数用于将HTTP方法（如GET、POST、PUT、DELETE）和对应的URL路径映射到处理函数上。它遍历传入的mapping对象，根据URL的前缀（如GET 、POST 等）来确定使用哪个HTTP方法，并将路径和处理函数注册到router上。

controllers下路由POST方法

const jwt = require('jsonwebtoken')
module.exports = {
'POST /login': async (ctx, next) => {
var key = ctx.request.body
if (key.username && key.password) {
return new Promise(function (resolve, reject) {
var MongoClient = require('mongodb').MongoClient
var MG_URL = 'mongodb://***********/'
MongoClient.connect(
MG_URL,

          { useUnifiedTopology: true },
function (err, db) {
if (err) throw err
var dbo = db.db('website')

            dbo

              .collection('user')

              .find({ username: key.username, password: key.password })

              .toArray(function (err, result) {
if (result.length) {
const TOKEN = jwt.sign(

                    {
name: result[0].username

                    },
'MY_TOKEN',

                    { expiresIn: '24h' }

                  )
let data = {
username: result[0].username,
token: TOKEN

                  }

                  ctx.response.body = {
result: 1,
status: 200,
code: 200,
data: data

                  }

                } else {

                  ctx.response.body = {
result: 0,
status: 200,
code: 0,
msg: '该用户不存在'

                  }

                }

if (err) throw err
resolve(result)

                db.close()

              })

          }

        )

      })

    } else {

      ctx.response.body = {
result: 0,
status: 200,
code: 0,
msg: 'error'

      }

    }

  }

}

这是一个登录的login方法，用POST进行请求。在这个地方用了一下mongodb数据库存储。在api接口请求login方法时，获取请求中所携带的参数进行解析，并判断此用户以及密码是否在我们的数据库中，如果存在返回成功的提示以及相关数据，如果错误，则提示错误。当然如果还不会数据库的使用，可以去除数据库相关部分，直接用本地json数据，这个比较简单，就是fs读取本地json文件，然后返回给api接口。不在此做详细说明。

controllers下路由GET方法

module.exports = {
'GET /getNews': async (ctx, next) => {
return new Promise(function (resolve, reject) {
var MongoClient = require('mongodb').MongoClient
var MG_URL = 'mongodb://********'
MongoClient.connect(
MG_URL,

        { useUnifiedTopology: true },
function (err, db) {
if (err) throw err
var dbo = db.db('website')

          dbo

            .collection('news')

            .find({})

            .toArray(function (err, result) {
if (result.length) {

                ctx.response.body = {
result: 1,
status: 200,
code: 1,
data: result

                }

              } else {

                ctx.response.body = {
result: 0,
status: 200,
code: 0,
msg: '暂无数据'

                }

              }
if (err) throw err
resolve(result)

              db.close()

            })

        }

      )

    })

  }

}

这是一个获取新闻的getNews方法，用GET请求。主要用来查询数据库中的list的信息。DELETE，PUT等方法不在此处贴出更多源码。

数据库首推mondodb

学习推荐

为啥选择MongoDB数据库，相对来说操作还是比较简单，而且存储的数据类型都是对象的形式，前端可以轻松拿捏。在这里直接推荐菜鸟的mongodb教程，看名字就知道，这是一个适合菜鸟初步学习的地方。讲解也比较详细，学完上面的内容，用mongodb数据库进行基本的数据存储和操作已经没有问题了。

总结

通过以上的分享，其实对大多数前端来说，开启一个简单的后端服务和接口请求，已经可以开箱即用了。想要完整的学习代码，也可以私信我。虽然不是很完善，但麻雀虽小五脏俱全。

思考

在前端行业已经接7载。曾经害怕java的恐惧而转入前端行业，所有受到鄙视也是有一部分原因吧，毕竟自己曾经年少无知，害怕吃苦选择了一个稍微简单的前端就稀里糊涂的就业了，保命要紧。但是在后来又想改变这个鄙视链，自己就开始了nodejs的学习，python的学习，数据库MongoDB，MySQL，PostgreSQL。学不完，压根学不完。
后面再无尽的内卷中，有的做开发不是自己的路，也想做做管理，毕竟前端做到前端组长就已经是极限了，在公司以java为尊的环境下，想做更高的级别几乎不可能。毕竟自己算是耿直死宅，不善交际，讨不到大领导的喜爱。然后又开始了原型的学习，PMP项目管理证书的考取（进行中），也曾有单独出去做产品的想法，面试过一个，但是与自己的预期薪资相差太大，没去。