All Projects → allan2coder → React Ssr

allan2coder / React Ssr

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Ssr

Eaglet
最简單直接的 Koa2 的脚手架
Stars: ✭ 118 (-42.44%)
Mutual labels:  mysql, koa2, pm2
Next Blog
基于react(ssr)服务端框架next.js和antd-design搭建的个人博客
Stars: ✭ 214 (+4.39%)
Mutual labels:  mysql, koa2, ssr
Vue Qq
🎨 Vue family bucket with socket.io and express/koa2 , create a web version of mobile QQ, supporting real-time group chat, real-time private chat, special care, shielding chat, smart IP geographic location, real-time display temperature and other QQ core functions
Stars: ✭ 861 (+320%)
Mutual labels:  mysql, koa2
Smarthome
💡 智能电器管理综合系统
Stars: ✭ 33 (-83.9%)
Mutual labels:  koa2, pm2
One Sys
聚合koa2+pm2+vue-cli+element+axios的前后端一体开发脚手架
Stars: ✭ 102 (-50.24%)
Mutual labels:  koa2, pm2
Ghchat
📱A chat application for GitHub. React + PWA + Node(koa2) + Typescripts + Mysql + Socket.io
Stars: ✭ 791 (+285.85%)
Mutual labels:  mysql, koa2
Cykspace Node
博客后台服务~~ 👉👉 http://www.cykspace.com
Stars: ✭ 23 (-88.78%)
Mutual labels:  mysql, koa2
Nodejs Koa Blog
基于 Node.js Koa2 实战开发的一套完整的博客项目网站
Stars: ✭ 1,162 (+466.83%)
Mutual labels:  mysql, koa2
Web Performance Monitoring System
A complete performance monitoring system.
Stars: ✭ 436 (+112.68%)
Mutual labels:  mysql, koa2
Light Push
轻量级推送服务和实时在线监控平台,同时用于开发即时通信系统,基于node的socket.io,支持web、android、ios客户端,支持移动端离线推送,可进行分布式部署
Stars: ✭ 128 (-37.56%)
Mutual labels:  koa2, pm2
Koa2 Blog
第一个web项目,仿照cnode,欢迎新建账号试用
Stars: ✭ 141 (-31.22%)
Mutual labels:  mysql, koa2
Vue Koa Demo
🔰A simple full stack demo(CSR & SSR & Docker Support) written by Vue2 & Koa2(Koa1 verson also completed)
Stars: ✭ 730 (+256.1%)
Mutual labels:  mysql, koa2
Vue Chat
📲 A web chat application. Vue + node(koa2) + Mysql + socket.io
Stars: ✭ 617 (+200.98%)
Mutual labels:  koa2, pm2
Koa2 Blog
node+koa2+mysql
Stars: ✭ 856 (+317.56%)
Mutual labels:  mysql, koa2
React Blog
react hooks + koa2 + sequelize + mysql 构建的个人博客。具备评论、通知、上传文章等等功能
Stars: ✭ 530 (+158.54%)
Mutual labels:  mysql, koa2
Node Server Project
基于 node.js + express 技术栈,采用MVC结构设计、JWT + RESTful API、PM2服务监控的Node服务器端项目框架.
Stars: ✭ 47 (-77.07%)
Mutual labels:  mysql, pm2
Crate
👕 👖 📦 A sample web and mobile application built with Node, Express, React, React Native, Redux and GraphQL. Very basic replica of stitchfix.com / krate.in (allows users to get monthly subscription of trendy clothes and accessories).
Stars: ✭ 2,281 (+1012.68%)
Mutual labels:  mysql, ssr
Vue2 blog
使用vue2.x + vue-cli +vue-router+ vuex + axios + mysql + express + pm2 + webpack+nginx构建的具有登录,注册,留言,用户发帖,用户评论等功能的SPA Blog。注意,注意,注意,后端API全部自己手写,很适合刚学习vue以及express的小伙伴学习,喜欢请Star鼓励一下我,谢谢!项目预览:
Stars: ✭ 417 (+103.41%)
Mutual labels:  mysql, pm2
Koa Rest Api Boilerplate
💯 Boilerplate for Node.js Koa RESTful API application with Docker, Swagger, Jest, CodeCov and CircleCI
Stars: ✭ 420 (+104.88%)
Mutual labels:  koa2, pm2
Don Blog Backmanage
Don's blog的后台管理系统,基于Vue.js + Node.js + Koa.js + MySQL + Redis + WebSocket。
Stars: ✭ 112 (-45.37%)
Mutual labels:  mysql, koa2

React 服务端渲染

使用

1、启动前端工程:

前端开发目录为:clent/

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].