• Stars
    star
    216
  • Rank 183,179 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React 服务端渲染(SSR),react + redux + koa2 + sequelize + mysql全栈项目(Full Stack)

React 服务端渲染

使用

1、启动前端工程:

前端开发目录为:client/

npm i
npm start
// 浏览器打开 http://localhost:8000/

2、启动服务端:

客户端开发及部署在根目录

npm i pm2 -g
npm i
npm start
// 浏览器打开 http://localhost:3000/

3、启动 Mysql:

  • 先搭建 mysql 环境:官网下载mysql
  • 安装一个 mysql 的可视化工具,我选择的是:Navicat Premium

启动mysql后,打开 mysql 可视化工具 Navicat Premium,

  • 连接数据库,账号密码在 server/config/db.json
  • 建表,本仓库提供了一份数据可以将 mysql/user.sql 直接导入

Done!

数据库如何操作?

建立连接 Sequelize会在初始化时设置一个连接池,这样你应该为每个数据库创建一个实例:

var sequelize = new Sequelize('database', 'username', 'password', {
  host: 'localhost',
  dialect: 'mysql'|'mariadb'|'sqlite'|'postgres'|'mssql',
  pool: {
    max: 5,
    min: 0,
    idle: 10000
  },

  // 仅 SQLite 适用
  storage: 'path/to/database.sqlite'
});

// 或者可以简单的使用一个连接 uri
var sequelize = new Sequelize('postgres://user:[email protected]:5432/dbname');

查看服务器日志

pm2 log

项目结构

├── client 前端目录
|
├── mysql 数据库(第一次使用可以直接导入到本地)
|
├── public 服务器静态资源
|
└── server 后端目录
    ├── auth 权限验证 存放用户验证部分
    ├── config 数据库 配置文件 Sequelize(可以对多种数据库进行操作)
    ├── controllers 后端控制层 C 层的代码存放目录
    ├── models 操作 数据库 代码逻辑
    ├── routes 后端路由
    └── view 后端页面

ps:

  • server/models Model相当于数据库中表,有时它也会被称为“模型”或“工厂”。Model不能通过构造函数创建,而只能通过sequlize.define方法来定义或通过sequlize.import导入。通过define定义一个Model,就相当于定义了一种模型与数据表之间的映射关系,通过模型可以实现对表记录的增、删、改、查等操作。

License

MIT

More Repositories

1

my-vue3-template

My starter template for Vue3, Best practices!
Vue
543
star
2

react-redux-tutorial

Starter template for React v17, Redux, CSS Modules, React-Router 4
JavaScript
344
star
3

Vue2-SPA

Vue2, Vue-router, Webpack, ES6, SPA(含语法检测/单元测试)
JavaScript
20
star
4

babel-plugin-function-try-catch

Based on ast, a babel plugin that automatically adds try/catch to functions.(基于ast,为函数自动添加 try/catch 的 babel 插件)
JavaScript
16
star
5

Angular2-SPA

angular2、angularjs、route、typeScript
TypeScript
8
star
6

eslint-plugin-syntax-ban

An eslint plugin for ban some JS syntax.(一个可以禁用一些 JS 语法的 eslint 插件。支持继续拓展~)
JavaScript
8
star
7

VUE-RequireJS-Gulp

vue.js + requirejs + gulp 多页
JavaScript
7
star
8

create-react-library

Create your own UI component library based on React.
JavaScript
6
star
9

piano

Build piano with Quarkc and Gluang
TypeScript
5
star
10

awesome-react

Unfinished yet, to be continue! 待续,还没搞完哦。有点乱,还没整好。。
JavaScript
5
star
11

xreact-file-upload

File upload with React For mobile.
JavaScript
4
star
12

AngularJs-SPA

商户端后台前端架构
JavaScript
3
star
13

vue-spa-router-gulp

基于gulp打包的vue单页
JavaScript
2
star
14

React-Redux-SPA2

微信端react+redux+auth待完善...
JavaScript
2
star
15

open-in-github-icon

Open the current project in github.com
TypeScript
1
star
16

Redux-Tutorial-Example

Redux-Tutorial-Example
JavaScript
1
star
17

dark-light-element

A Theme Page DEMO, based on web components, powered by Quarkc.
JavaScript
1
star