Date: 2020-4-23
以前很少写文章,从今天开始我要挑战一下自己,连续输出100篇技术类文章。这100篇文章我尽量以实战案例为主。
如果你觉得本文还不错,记得关注或者给个 star,你们的赞和 star 是我编写更多更精彩文章的动力!
GitHub 地址
本文重点内容
- 从 0 到 1 集成 node + mysql + ejs 用户管理系统
- 上手 sequelize 不使用sql操作数据库
- 熟悉 MVC 开发模式
成品演示
- 在线地址
关键技术点
- 1.1 数据库操作
- 1.2 MVC 模式是什么?
1.1 数据库操作
// 使用 sequelize 代理数据库操作
const { Sequelize, Model, DataTypes } = require('sequelize');
const config = require('./config')
// 配置数据库连接
const sequelise = new Sequelize(
dbName,
username, password,
{
host: host,
dialect: 'mysql', // 配置方言
})
class User extends Model {}
// 创建表
User.init({
username: DataTypes.STRING,
birthday: DataTypes.DATE
}, { sequelize, modelName: 'user' });
sequelize.sync() // 生成数据表
.then(() => User.create({ // 插入数据
username: 'janedoe',
birthday: new Date(1980, 6, 20)
}))
.then(jane => {
console.log(jane.toJSON());
});
1.2 MVC模式是什么?
MVC即Model、View、Controller即模型、视图、控制器
Module - 对象和业务逻辑
View - 用户界面
Controller - 用来调度 View 和 Model
开始撸代码
第一步 初始化目录
先来初始化下目录结构:
$ mkdir demo_001 && cd demo_001
$ npm init -y
$ npm i -s nodemon better-npm-run
$ npm i -s koa koa-views @koa/router koa-bodyparser
$ npm i -s ejs sequelize mysql2
各个库的版本号为:
@koa/router: 9.0.0, better-npm-run: 0.1.1,ejs: 3.0.2,koa: 2.11.0,koa-views:6.2.1,sequelize:5.21.6,koa-bodyparser:4.3.0,koa-static:5.0.0,mysql2:2.1.0,nodemon:2.0.3
添加 npm scripts 到 package.json:
"scripts": {
"start": "npm run dev",
"dev": "better-npm-run dev",
"prd": "better-npm-run prd"
},
"betterScripts": {
"dev": {
"command": "nodemon app.js",
"env": {
"NODE_ENV": "development"
}
},
"prd": {
"env": {
"NODE_ENV": "production"
},
"command": "pm2 start app.js -n demo_001"
}
},
第二步 实现 view 层
新建 app.js
// app.js 代码
const Koa = require('koa');
const views = require('koa-views');
const path = require('path');
const bodyparser = require('koa-bodyparser');
const app = new Koa();
app.keys = ['my keys'];
app.use(bodyparser());
app.use(views(path.join(__dirname, './views'), { extension: 'ejs' }));
app.listen(3000, () => {
console.log('server is running', new Date());
});
让代码跑起来,之后修改代码不用频繁的重启服务。因为开发环境是用 nodemon 托管的
$ npm start
新建 views 目录结构
demo_001
├── router
│ └── index.js
├── views
│ ├── index.ejs
│ ├── header.ejs
│ ├── create.ejs
│ └── edit.ejs
└── app.json
└── package.json
view 层核心代码:
node + mysql 实现增删改查
<% include('./header.ejs') %>
<%= title %>
实现增删改查
添加用户
username
pwd
phone
age
gender
操作
<% for (const user of users) { %>
<%= user.username %>
<%= user.pwd %>
<%= user.phone %>
<%= user.age %>
<%= user.gender %>
修改
删除
<% } %>
<% include('./header.ejs') %>
<%= title %> 返回首页