扩展：使用 Vue.js 和 Express 共建一个简单的 CRUD 应用

引言

本文扩展自译文，去掉了重量级框架 laravel 部分，后端 express框架，选用sequelize创建，操作数据表 。采用轻量级 sqlite数据库，mockjs生成数据工厂，整个项目基于 vue-cli 构建前端资源，实现零配置。全流程详述后端构建，源码见底。

环境搭建

• Vue CLI v3.9.2

npm install -g @vue/cli
npm vue create vue-curd
...(选项配置)

cd vue-curd
npm install

自定义配置参见 cli.vuejs指引.

结构目录

使用 Expess 后端开始本教程，来完成 CRUD 操作

• 设置数据库,生成表，填充数据
• 编写一个 RESTful API 的路由，定义CRUD方法
• 整个项目主目录 框架如下

├─backend
│      factory.js
│      model.js
│      routes.js
│      seed.js
│      sqlite.db
├─dist
│  │  favicon.ico
│  │  index.html
│  ├─css
│  ├─images
│  │      green.png
│  │      red.png
│  └─js
│          app.e0e74366.js
│          app.e0e74366.js.map
│─node_modules
├─public
│  │  favicon.ico
│  │  index.html
│  └─images
│          green.png
│          red.png
└─src
    │  App.vue
    │  main.js
    ├─assets
    │  │  logo.png
    │  └─images
    │          green.png
    │          red.png
    └─components
            Crud.vue
  server.js

数据模型

• Cruds 表有两个属性：名称和颜色，设置为 text 类型
• Sequelize nodejs 中的 orm库,可定义结构，关联关系操作，面向对象操作
  • 增删改查 create,destroy,update,findAll, bulkCreate批量创建
  • 表名默认为模型名的复数, sync 方法创建表结构,默认生成主键创建及更新时间字段
• 下面展示了模型定义 backend/model.js

var Curd = sequelize.define('curd',{
    name: DataTypes.TEXT,
    color: DataTypes.TEXT,
})

数据工厂

• mockjs 语法规范
  • 数据模板 'name|rule': value
    • 生成规则可选, 常用规则 min-max, count,+step
    • 属性值含有@占位符,指定初始值和类型
  • 数据占位符
    • 格式 @占位符(参数 [, 参数]) 或 @占位符
    • 占位符引用 Mock.Random 中的方法, 可优先引用 数据模板 中的属性
• 用 mockjs 构建 cruds 表假数据
• backend/factory.js

 // cruds表模型数据
  function (num) {
      num = num | 1
      let tpl = {
          name: '@first',
          'color|1': ['red', 'green'],
          createdAt: '@date("yyyy-MM-dd")',
          updatedAt() {
              var ctime = (new Date(this.createdAt)).getTime()
              var rtime = Mock.Random.integer(ctime, Date.now() + 8 * 3600 * 1000)
              return (new Date(rtime)).toJSON().substr(0, 10);
          }
      }
      return Mock.mock({
          [`curds|${num}`]: [tpl]
      }).curds
  } 

• 上述 mockjs生成5条对象记录，随机产生英文名，颜色，格式化时间

  [
      {
          "name": "Charles",
          "color": "green",
          "createdAt": "1975-11-18",
          "updatedAt": "1991-01-22"
      },
      {
          "name": "Laura",
      ...
  ]

数据填充

• bulkCreate 对象数组批量添加,下示为建表插入数据
• backend/seed.js

  var Crud = require('./model')
  var factory = require('./factory')
  // 先建表迁移后填充假数据
  Crud.sync({ force: true }).then(() => {
      Crud.bulkCreate(factory(3)).then(() => {
          return Crud.findAll();
      }).then(cruds => {
          console.log(cruds)
      })
  })

Express后端

• 在项目目录下新建 server.js, 代码比较简单

var path = require('path')
var express = require('express')
var bodyParser = require('body-parser')
var serveStatic = require('serve-static')
var cruds = require('./backend/routes')

var app = express()

app.use(bodyParser.json());
app.use(serveStatic('dist'))
app.use('/api/cruds', cruds)

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, 'dist', 'index.html'))
})

app.listen(80, function(){
    console.log('app listening 80')
})

• 以/api/cruds/:id 修改端点为例， 如下所示 backend/routes.js

router.put('/:id', function update(req, res) {
    Crud.findByPk(req.params.id).then(
        crud => {
            Crud.update({ color: req.body.color}, {
                where: {
                    id: crud.id
                }
            }).then(id => {
                res.status(200).json(id)
            })
        }
    )
})

Vue.js 应用

• 静态文件路径是在 public 下，该文件夹下的index.html 是 vue-cli构建的默认模板
• 前端组件内容参考 教程：使用 Vue.js 和 Laravel 共建一个简单的 CRUD 应用

使用

• 进入项目目录执行 npm run build ，生成前端资源 dist 文件夹
• 生成 cruds 表结构, 并默认填充3条假数据， 进入后端目录backend,执行 node seed.js
• 进入项目目录执行 node server.js , 访问 localhost 即可实现 如下效果

源码

参见vue-express分支

本作品采用《CC 协议》，转载必须注明作者和本文链接