跳到主要内容

项目框架搭建

项目 demo​

https://github.com/ChenShenhai/koa2-note/blob/master/demo/project/

框架设计​

https://github.com/ChenShenhai/koa2-note/blob/master/demo/project/

实现概要​

  • koa2 搭建服务
  • MySQL 作为数据库
    • mysql 5.7 版本
    • 储存普通数据
    • 存储 session 登录态数据
  • 渲染
    • 服务端渲染：ejs 作为服务端渲染的模板引擎
    • 前端渲染：用 webpack4 环境编译 react.js 动态渲染页面，使用 ant-design 框架

文件目录设计​

├── init # 数据库初始化目录
│   ├── index.js # 初始化入口文件
│   ├── sql/    # sql脚本文件目录
│   └── util/   # 工具操作目录
├── package.json
├── config.js # 配置文件
├── server  # 后端代码目录
│   ├── app.js # 后端服务入口文件
│   ├── codes/ # 提示语代码目录
│   ├── controllers/    # 操作层目录
│   ├── models/ # 数据模型model层目录
│   ├── routers/ # 路由目录
│   ├── services/   # 业务层目录
│   ├── utils/  # 工具类目录
│   └── views/  # 模板目录
└── static # 前端静态代码目录
    ├── build/   # webpack编译配置目录
    ├── output/  # 编译后前端代码目录&静态资源前端访问目录
    └── src/ # 前端源代码目录

分层设计​

└── server
    ├── controllers # 操作层 执行服务端模板渲染，json接口返回数据，页面跳转
    │   ├── admin.js
    │   ├── index.js
    │   ├── user-info.js
    │   └── work.js
    ├── models # 数据模型层 执行数据操作
    │   └── user-Info.js
    ├── routers # 路由层 控制路由
    │   ├── admin.js
    │   ├── api.js
    │   ├── error.js
    │   ├── home.js
    │   ├── index.js
    │   └── work.js
    ├── services # 业务层 实现数据层model到操作层controller的耦合封装
    │   └── user-info.js
    └── views # 服务端模板代码
        ├── admin.ejs
        ├── error.ejs
        ├── index.ejs
        └── work.ejs

数据库设计​

CREATE TABLE   IF NOT EXISTS  `user_info` (
  `id` int(11) NOT NULL AUTO_INCREMENT, # 用户ID
  `email` varchar(255) DEFAULT NULL,    # 邮箱地址
  `password` varchar(255) DEFAULT NULL, # 密码
  `name` varchar(255) DEFAULT NULL,     # 用户名
  `nick` varchar(255) DEFAULT NULL,     # 用户昵称
  `detail_info` longtext DEFAULT NULL,  # 详细信息
  `create_time` varchar(20) DEFAULT NULL,   # 创建时间
  `modified_time` varchar(20) DEFAULT NULL, # 修改时间
  `level` int(11) DEFAULT NULL, # 权限级别
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

# 插入默认信息
INSERT INTO `user_info` set name='admin001', email='admin001@example.com', password='123456';

路由设计​

https://github.com/ChenShenhai/koa2-note/blob/master/note/project/route.md

webpack4 环境搭建​

https://github.com/ChenShenhai/koa2-note/blob/master/note/project/webpack4.md

使用 react.js​

https://github.com/ChenShenhai/koa2-note/blob/master/note/project/react.md

登录注册功能实现​

https://github.com/ChenShenhai/koa2-note/blob/master/note/project/sign.md

session 登录态判断处理​

https://github.com/ChenShenhai/koa2-note/blob/master/note/project/session.md