koa+mysql實現增刪改查-全棧之路
Date: 2020-4-23
以前很少寫文章，從今天開始我要挑戰一下自己，連續輸出100篇技術類文章。這100篇文章我儘量以實戰案例為主。
如果你覺得本文還不錯，記得關注或者給個 star，你們的贊和 star 是我編寫更多更精彩文章的動力！
本文重點內容
- 從 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 層核心程式碼：
<!-- views/header.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>node + mysql 實現增刪改查</title>
</head>
<body>
<!-- views/index.ejs -->
<% include('./header.ejs') %>
<h1>
<%= title %>
<small>實現增刪改查</small>
</h1>
<a href="/user/create">新增使用者</a>
<style>
table{
border-color: #ccc;
}
table td, th{
background: #fff;
}
</style>
<table cellspacing="1" cellpadding="15" bgcolor="#000" >
<thead>
<tr>
<th>username</th>
<th>pwd</th>
<th>phone</th>
<th>age</th>
<th>gender</th>
<th>操作</th>
</tr>
</thead>
<% for (const user of users) { %>
<tr>
<td><%= user.username %></td>
<td><%= user.pwd %></td>
<td><%= user.phone %></td>
<td><%= user.age %></td>
<td><%= user.gender %></td>
<td>
<a href="/user/edit?id=<%= user.id %>">修改</a>
<a href="/user/del/<%= user.id %>">刪除</a>
</td>
</tr>
<% } %>
</table>
</body>
</html>
<!-- views/create.ejs -->
<% include('./header.ejs') %>
<style>
label{
width: 80px;
display: inline-block;
text-align: right;
padding-right: 10px;
}
</style>
<h1>
<%= title %> <small><a href="/">返回首頁</a></small>
</h1>
<form action="/user/create" method="POST" >
<fieldset>
<label>username</label>
<input value="" name="username" />
</fieldset>
<fieldset>
<label>pwd</label>
<input value="" name="pwd" />
</fieldset>
<fieldset>
<label>phone</label>
<input value="" name="phone" />
</fieldset>
<fieldset>
<label>age</label>
<input value="" name="age" />
</fieldset>
<fieldset>
<label>gender</label>
<input value="" name="gender" />
</fieldset>
<fieldset>
<button type="submit">Submit</button>
</fieldset>
</form>
</body>
</html>
<!-- views/edit.ejs -->
<% include('./header.ejs') %>
<style>
label{
width: 80px;
display: inline-block;
text-align: right;
padding-right: 10px;
}
</style>
<h1>
<%= title %> <small><a href="/">返回首頁</a></small>
</h1>
<form action="/user/edit" method="POST" >
<input value="<%= user.id %>" name="id" type="hidden" />
<fieldset>
<label>username</label>
<input value="<%= user.username %>" name="username" />
</fieldset>
<fieldset>
<label>pwd</label>
<input value="<%= user.pwd %>" name="pwd" />
</fieldset>
<fieldset>
<label>phone</label>
<input value="<%= user.phone %>" name="phone" />
</fieldset>
<fieldset>
<label>age</label>
<input value="<%= user.age %>" name="age" />
</fieldset>
<fieldset>
<label>gender</label>
<input value="<%= user.gender %>" name="gender" />
</fieldset>
<fieldset>
<button type="submit">Submit</button>
</fieldset>
</form>
</body>
</html>
路由部分核心程式碼：
const Router = require('@koa/router');
const router = new Router()
// 首頁，查詢所有使用者
router.get('/', async ctx => {
let users = []
console.log('查詢所有使用者')
await ctx.render('index', { title: 'node + mysql ', users });
});
// 增加
router.get('/user/create', async ctx => {
await ctx.render('create', { title: '新增使用者', method: 'add' })
})
router.post('/user/create', async ctx => {
console.log('新增使用者：',ctx.request)
ctx.redirect('/')
})
// 修改
router.get('/user/edit', async ctx => {
const codition = { id: ctx.query.id }
console.log('查詢要修改的使用者',codition)
await ctx.render('edit', { title: '修改使用者', method: 'edit', user: {} })
})
router.get('/user/edit', async ctx => {
console.log('要修改的使用者：', ctx.request)
ctx.redirect('/')
})
// 刪除
router.get('/user/del/:id', async ctx => {
console.log('刪除使用者id，', ctx.params.id)
ctx.redirect('/')
})
module.exports = router;
目前為止所有的路由已經準備好了，需要掛載到 koa 例項上
// 修改 app.js
// 引入路由部分
const indexRouter = require('./router/index')
// 掛載到 koa 例項
app.use(indexRouter.routes(), indexRouter.allowedMethods());
到這一步我們已經把頁面做好了
開啟瀏覽器輸入
到此為止，頁面已經可以訪問了
第三步 實現 module 層
新建 module 目錄結構
demo_001
├── config
│ ├── dev.js
│ ├── prd.js
│ └── index.js
├── modules
│ └── user.js
├── router
├── views
├── db.js
├── app.json
└── package.json
我們先要配置資料庫連線：
// config/index.js
if (process.env.NODE_ENV === 'production') {
module.exports = require('./prd')
} else {
module.exports = require('./dev')
}
dev 和 prd 分別對應不同環境的資料庫連線。這裡都寫成你自己的資料庫地址即可
// config/prd.js, config/dev.js
module.exports = {
db: {
// host
host: '127.0.0.1',
// 資料庫名
dbName: 'xxxx',
// 使用者名稱
username: 'xxxx',
// 密碼
password: 'xxxx'
}
}
連線資料庫 db.js
// db.js
const Sequelize = require('sequelize');
const config = require('./config')
const { dbName, username, password, host } = config.db;
const sequelise = new Sequelize(
dbName,
username, password,
{
host: host,
dialect: 'mysql',
// 配置連線池
pool: {
max: 5,
min: 0,
acquire: 30000,
idle: 10000
}
})
sequelise
.authenticate()
.then(() => {
console.log('資料庫連線成功')
})
.catch(err => {
throw new Error('資料庫連線失敗', err)
})
module.exports = sequelise
建立 module
// modules/user.js
const Sequelize = require('sequelize')
const sequelize = require('../db');
const User = sequelize.define('user', {
username: { type: Sequelize.STRING },
pwd: { type: Sequelize.STRING, },
phone: { type: Sequelize.STRING, },
age: { type: Sequelize.STRING, },
gender: { type: Sequelize.INTEGER, },
});
module.exports.add = async (data) => await User.create(data)
module.exports.del = async (id) => await User.destroy({ where: { id } })
module.exports.update = async (data) => {
let newUser = {...data}
delete newUser['id']
return await User.update({ ...newUser }, {
where: { id: data.id }
})
}
module.exports.find = async (condition) => {
if (Object.keys(condition).length) {
return await User.findAll({ where: { ...condition } })
} else {
return await User.findAll();
}
}
第四步 控制層排程
現在要通 修改 過路由，把檢視和 module 結合起來。
// router/index.js
// 引入
const UserMudule = require('../modules/user')
// 修改路由：增加
router.post('/user/create', async (ctx) => {
const {
username, pwd, phone, age, gender
} = ctx.request.body
await UserMudule.add({
username, pwd, phone, age, gender
})
ctx.redirect('/')
})
// 修改路由：首頁，查詢所有使用者
router.get('/', async ctx => {
let users = await UserMudule.find(ctx.query)
await ctx.render('index', { title: 'node + mysql ', users });
});
此時已經實現了增加和查詢，你可以測試一下這部分功能。
接下來實現修改和刪除的程式碼
// router/index.js
// 修改路由：delete
router.get('/user/del/:id', async ctx => {
await UserMudule.del(ctx.params.id)
ctx.redirect('/')
})
// 修改路由：update
router.get('/user/edit', async ctx => {
const codition = { id: ctx.query.id }
// 修改前先查詢出 User 物件
let user = await UserMudule.find(codition)
await ctx.render('edit', { title: '修改使用者', method: 'edit', user: user[0] })
})
// 修改路由：update
router.post('/user/edit', async ctx => {
const {
username, pwd, phone, age, gender, id
} = ctx.request.body
// 接受引數，執行修改
await UserMudule.update({
id, username, pwd, phone, age, gender
})
ctx.redirect('/')
})
來，測試一下！
總結
到此你已經掌握了簡單的 nodejs 伺服器開發，下一篇文章我繼續帶你一步步的上線一個 nodejs 專案
所以，如果你看完真覺得不錯，那就給個 star 吧！你的贊和 star 是我編寫更多精彩文章的動力
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/810/viewspace-2825394/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- express+mongodb+vue實現增刪改查-全棧之路ExpressMongoDBVue全棧
- express+mongodb+vue實現增刪改查-全棧之路2.0ExpressMongoDBVue全棧
- 運用layui實現增刪改查UI
- js實現表格的增刪改查JS
- Go實現對MySQL的增刪改查GoMySql
- 單連結串列實現增刪改查
- 封裝模組實現商品增刪改查封裝
- FMDB | 實現資料的增刪改查
- 看Zepto如何實現增刪改查DOM
- 增刪改查
- Java實現簡單的增刪改查操作Java
- Node.js+Express+Mysql 實現增刪改查Node.jsExpressMySql
- jQuery實現購物車的增刪改查jQuery
- Mybatis-plus實現簡單增刪改查MyBatis
- indexedDB 增刪改查Index
- SQL增刪改查SQL
- mysql增刪改查MySql
- Mongoose查增改刪Go
- FMDB增刪改查
- mysql增查刪改MySql
- webpack4+express+mongodb+vue 實現增刪改查WebExpressMongoDBVue
- 第一個mybatis程式，實現增刪改查CRUDMyBatis
- Entity Framework使用DBContext實現增刪改查示例FrameworkContext
- mybatis實現MySQL資料庫的增刪改查MyBatisMySql資料庫
- JDBC連線mysql-8.0實現增刪改查JDBCMySql
- MongoDB——簡單增、刪、改、查實踐MongoDB
- 使用express+mongoose對mongodb實現增刪改查操作ExpressMongoDB
- Node+Vue實現對資料的增刪改查Vue
- python 連線mongodb實現增刪改查例項PythonMongoDB
- 關於ToDolist 的增刪改查 用jQuery來實現jQuery
- 使用Mongoose類庫實現簡單的增刪改查Go
- 用jsp實現資料庫的增刪改查JS資料庫
- layui的增刪改查UI
- sql指令，增，刪，查，改SQL
- EFCore之增刪改查
- 列表的增刪改查
- 字典的增刪改查
- redist的增刪改查Redis