项目架构

整个项目架构：
1.前后端分离
2.http(s) : ajax
3.接口：

  • url
  • request（header，body）
  • type（get，post，put，patch，delete）
  • content-type（formdata，json）
    4.mock
  • http-proxy-middleware

一、前端
0.RMVC
1.UI框架（基于bootstrap、adminLTE）
2.jQuery
3.SEMRouter
4.Model
5.handlebars + art-template
6.webpack(前端工程化

二、后端
（一）技术层面
0.RMVC
1.Node.js + Express
2.R:Express 路由中间件
3.M: MongoDB + Mongoose
4.V: EJS
5.C: Express 业务中间件
（二）登录注册
1、cookie+session

  • cookie容易被钓鱼
  • 在服务器端存储数据
  • cookie存储数据有限

2.token（oAuth2）

  • 登录成功，记录用户登录状态，http无状态请求
  • 在后端生成token
    jsonwebtoken：
  • 对称
  • 非对称（自己生成公钥和私钥）
  • 通过header 将token传递给前端
  • 前端存储在localstrage里
  • 当需要鉴权的时候，前端将token在通过header传递给后端
  • 后端进行认证
    优点：

不需要后端存储数据
非对称加密，无法破解
缺点：
重放攻击

webpack + RMVC + handlenbars + sme-router

项目结构

MBS
    --\ be
    
    --\ fe
        --\ src
            --\ app.js
            --\ routes
            --\ model
            --\ views
                --\ index.html
            --\ controllers
            --\ assets
            --\ public
        --\ config
            --\webpack.config.js
        --\ 
--\ .gitignore
--\ package.json
--\ yarn.lock

webpack配置（前端）

创建工程化文件：
yarn init -y

安装webpack包：
yarn add webpack --dev 开发装一个
yarn global add webpack 全局装一个
yarn global add webpack-cli
yarn global add webpack-dev-server 或 __dev 启动服务

插件：plugins:
yarn add html-webpack-plugin -D
yarn add copy-webpack-plugin -D

loader : 解析文件用的
yarn add url-loader file-loader
yarn add string-loader -D
yarn add handlebars-loader -D
yarn add sass-loader node-sass -D
yarn add css-loader -D
yarn add style-loader -D

handlebars --- 模板引擎
yarn add handlebars --dev

路由：sme-router
yarn add sme-router

webpack配置文件（前端）

webpack.config.js

后端

数据库可视化
mongoDB --- robo3t

Last modification：February 7th, 2022 at 07:57 pm
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏