heheda

heheda 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

heheda 关注了用户 · 6月21日

tomorrowwu @tomorrowwu

专注服务器开发,对区块链技术保持好奇心

关注 25

heheda 关注了用户 · 6月21日

ethannnli @ethannnli

关注 184

heheda 发布了文章 · 2018-12-12

react16 + typescript + webpack4 + mobx + antd的CMS项目

React

该项目主要使用的前端框架是react16,有用到新特性React.lazy,这样我们就不需要使用Loadable啦~。前端UI使用了蚂蚁金服的Antd,以及状态管理mobx,react-router4,axios异步请求库,目前项目可以线上正常运行。

该项目对标CMS的angular6+版cms-fe-angular6,只是换成了React技术栈,授权方式也换成了JWT模式(有大坑,但已解决...),接口也从标准的RESTful模式换成了GraphQL(这个非常值得推荐)。

后端对标koa2的ES6版cms-be变化也大,首先字段从下划线模式换成了单驼峰模式,其次也将ES6改成Typescript了,加入了mongodb日志记录,配合中间件使用,效果非常好。

主要技术栈

react16
react-router4
typescript
webpack4
mobx
antd
graphql
jwt

项目架构

截图:

clipboard.png

项目目录解析:

build // webpack打包配置目录
dist // 发布目标目录
src // 源码目录
    @types // typescript类型申明
    assets // sass、img等资源目录
    components // 公共组件
    constants // 常量配置
    models // ts模型,包含该interface或class
    pages // 项目功能页面(页面和store按功能分目录放一起,可灵活调整)
    routes // 路由
    stores // 根store存储
    utils // 辅助方法等
    index.tsx // 入口文件

目前实践总结

GraphQL模式,确实很爽,前端需要什么数据,在前端定义好数据模型的前提下,按照自己的需要去查询,得到预期的数据。

使用JWT模式替代传统Session-Cookie风险确实很大,因为服务端不保存任何信息,无法感知用户退出登录,目前我使用了Redis解决了该问题(感觉又回到了Session模式...)。

项目地址:https://github.com/xpioneer/r...

喜欢的话,欢迎star一下,也欢迎指正~~

查看原文

赞 9 收藏 5 评论 0

heheda 发布了文章 · 2018-11-13

koa2 + graphql + typescript + jwt + typeorm的nodejs项目

最近写了一个node项目,主要使用到的技术有:

koa2  // nodejs 框架
koa-router // koa路由
graphql // 查询api
typescript // 强类型语言
jwt // 授权
typeorm  // typescript的一个orm
mysql2  // 内容数据库
mongodb  // 日志存储数据库
redis  // 服务器缓存

项目结构:
图片描述

conf目录(配置项目录,包含db配置、服务启动端口配置、服务启动入口文件server.ts)
release目录(编译后目录)
src(项目主要源码目录)
    controllers(控制器)
    core(核心扩展)
    database(db连接)
    entities(mysql/mongodb的数据模型)
    middlewares(koa中间件)
    models(其他一些数据的模型)
    routes(路由)
    schema(graphql的schame)
    utils(辅助库目录)
    app.ts项目入口文件

该项目使用了koa的路由,可以同时支持普通RESTful和graphql两种类型api

目前授权使用jwt模式,为了登出,也是用了redis辅助保存用户会话信息(醉了...)

在graphql项目中,只需要后端定义好返回数据模型,前端按照自己需要的数据去查询接口,返回无冗余数据,非常简洁方便。

graphql定义及各种各样的好处就不多说了,直接看实战结果吧。

GraphQL示例

// 查询
{
  count
  articles{
    list{id,title}
    meta{page,page_size}
  }
}

// 结果
{
  "data": {
    "count": 3,
    "articles": {
      "list": [
        {
          "id": "594459f050bcc2abbbf5116ed301b002",
          "title": "Laravel 5.6 是继 5.5 之后 Laravel 官方发布002"
        },
        {
          "id": "594459f050bcc2abbbf5116ed301b003",
          "title": "Laravel 5.6 是继 5.5 之后 Laravel 官方发布003"
        },
        ...
      ],
      "meta": {
        "page": 1,
        "total": 24
      }
    }
  }
}

前端异步请求截图:

请求数据
clipboard.png

返回结果

clipboard.png

从结果看,返回的数据完全是按照自己的需要进行查询返回的

项目地址:https://github.com/xpioneer/k...

目前只是初版,还未完善整个工程项目,整体架构还需要调整,但可以跑通整个流程了!

欢迎star项目,也欢迎指正~~

查看原文

赞 3 收藏 3 评论 4

heheda 发布了文章 · 2018-10-12

webpack4 + angular6 + ng-zorro-antd的脚手架

项目已经上线很久了,差不多一年的时间了,使用自己开发的脚手架。

最开始是使用webpack3 + angular4 + ng-zorro-antd(刚发布版本:0.5.0-rc.2)开发的,为公司开发的一套cms。后来由于种种原因,没有继续使用。被我拿来当做自己的后台管理系统,用着感觉还不错(虽然antd升级变化较大,坑也大,当然也包括rxjs)。

angular的组件形式,路由使用,代码分割,组件二次发开等在项目中均有体现。

新升级的webpack4 + angular6 + ng-zorro-antd(1.4.0,刚刚瞄了一眼,好像又到1.6.0了...),项目的脚手架是自己写的,可能还有些不完善,继续优化中。

项目中还使用到了其他的一些技术:websocket,echarts图表,quill编辑器等。

图片描述

项目目录简介:

conf目录(打包配置)
dist目录(编译后的静态资源)
src目录为项目源码目录,下面分为:
    app(项目功能模块)
    assets(静态资源)
    components(公共组件)
    template(webpack打包html文件模板)
    uitls(项目插件及工具)
    app.ts(项目入口文件)
    index.ts(webpack打包入口文件)
    polyfills.ts(folyfill)
    vendor.ts(这里主要是angular6)

webpack中的配置:

ts文件的loader
    awesome-typescript-loader
    angular2-template-loader
    angular-router-loader

webpack4中变化较大的两个地方:

1. css代码提取的插件
MiniCssExtractPlugin(以前是ExtractTextWebpackPlugin)

2. js代码提取及切割插件
SplitChunksPlugin(以前是CommonsChunkPlugin)

详细情况请翻阅webpack官方文档:[webpack文档](https://webpack.js.org/plugins/)

从目前的情况来看,angular的相关资料还是比较少的,虽然已经比当初写这个项目的时候多了不少(遥想当时硬着头皮各种找资料...)。喜欢angular的人中,java开发者和国外的开发者感兴趣的比较多。

欢迎star项目,希望能给angular开发者一些帮助和理解,指出项目中的不足之处,感谢~

项目地址:https://github.com/xpioneer/c...

查看原文

赞 4 收藏 3 评论 0

认证与成就

  • 获得 16 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-10-11
个人主页被 257 人浏览