资讯专栏INFORMATION COLUMN

我的前后端架子搭建

mikyou / 1600人阅读

摘要:开发语言前端前端这里使用,打包工具是后端后端使用的语言依旧是熟悉的,使用搭建后端框架。

前言

作为一名前端开发者,了解一些后端语言,成为半个全栈工程师也是最基本的(23333),就本篇文章,给大家介绍一下我的前后端目录结构,不喜勿喷,也希望各位给我一些意见,哈哈哈。

开发语言 前端

前端这里使用react.js,打包工具是parcel

后端

后端使用的语言依旧是熟悉的node.js,使用express搭建后端框架。

数据库

数据库使用的是mongodb

目录结构

db 数据库有关文件

schemas 数据库的各个collection的映射

user.js 数据库的user collection的映射

... ... 其他collection的映射

connect.js 连接数据库

mongoose-db.js 导出可操作数据库的映射对象

tool

通用工具类(如发邮件等通用操作) ...

public 前端开发文件夹

dist 打包build生成的文件

public 存放入口文件- index.html、网站图标、生成pwa网站的manifest文件

index.html

xxx.ico

manifest.json

... 其他

src 源代码文件夹

actions 存放所有actions

index.js 导出所有actions

action_1.js 相关业务的action,名字随便取的~~

... ....

asset 存放所有静态文件

xxx.png

xxx.json

... ...

components 存放所有自定义通用组件

index.js 导出所有自定义通用组件

... ... 一系列自己写的通用组件

constants存放所有action type

index.js 导出所有action type

ActionTypes_1.js

... ...

container 存放主渲染、包含router等配置的js文件

app.js

index.scss

lib 存放所有通用类、http请求类、配置文件

index.js 导出需要的js文件

config.js 配置文件,例如开发模式下的后端接口url,cookie的有效时间等......

cookie.js 自定义cookie的增删改查操作类

userServer.js 有关用户业务的http请求类

...其他http请求类的封装

pages 所有页面

reducers 所有的reducer

index.js 导出一个包含所有reducer的rootReducer

reducer_1 名字在这里是举例...

... ...

main.js 入口js文件

.babelrc babel的配置文件

package.json

routes express的所有router

route_1.js

route_2.js

......

service 有关逻辑处理与数据库的交互

service_1.js

service_2.js

... ...

config.js 有关后端的配置文件,一般包含数据库连接地址,token认证的秘钥,token的有效时间,服务运行的端口号等......

index.js node.js 的入口文件

package.json

结语

node.js 的后端结构,主要还是采用mvc的模式,但是这里没有view层,routes即为Controllerschemas 即为Model层,service服务层(Service),希望能给一些不明白的同行带来一点灵感,如果有不合理的地方,也希望各位大神指点迷津,哈哈,ok,不说了。


附上项目地址:https://github.com/justwiner/...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/11902.html

相关文章

  • 搭建一个多页面的无依赖的工程化项目

    摘要:也就是说,我们需要做一个非单页应用的工程化项目。现在这个项目的静态资源是以文件哈希值来控制的。这个该怎么解决呢感谢,我们可以通过如下的配置来实现意思就是如果图片是在中引用的则不加哈希值,在文件中引入的则加上。 最近金拱门比较火,我们先戳开它的官网看看。 看完后,如果你老板要是让你做这么一个网站,一定要seo,一定要兼容IE,你会怎么去做呢? 用vue/react吧,单页应用满足不了se...

    go4it 评论0 收藏0
  • Web技术的前世今生(三)

    摘要:前言我是,如果你还不认识我,不妨先看看技术的前世今生一,以及技术的前世今生二前面我提过,我的大哥有一个叫的死党,这家伙有事没事经常上我们家串门。时间来到了年,在那前后发生了两件事让我印象深刻。传送门技术的前世今生一技术的前世今生二 前言:我是JavaScript,如果你还不认识我,不妨先看看《Web技术的前世今生(一)》,以及《Web技术的前世今生(二)》 前面我提过,我的大哥HTML...

    Wuv1Up 评论0 收藏0
  • 后台管控系统架子structure-admin,包含vue前端和thinkjs后端

    摘要:为此框架提供了模型功能,方便操作数据库。请求拦截统一处理所有的请求和响应的,通过配置为头部增加字段,其内容为,通过配置,当后端接口返回未授权,让用户重新登录。 之前写过一篇vue初始化项目,构建vuex的后台管理项目架子,这个structure-admin-web所拥有的功能 接下来,针对structure-admin-web的不足,进行了补充,开发了具有登陆的structure-ad...

    hosition 评论0 收藏0

发表评论

0条评论

mikyou

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<