allan2coder / React Ssr
Licence: mit
React 服务端渲染(SSR),react + redux + koa2 + sequelize + mysql全栈项目(Full Stack)
Stars: ✭ 205
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Ssr
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
Ghchat
📱A chat application for GitHub. React + PWA + Node(koa2) + Typescripts + Mysql + Socket.io
Stars: ✭ 791 (+285.85%)
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
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
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].