扩展:使用 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,findAllbulkCreate批量创建
    • 表名默认为模型名的复数, 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 应用

使用

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

源码

参见vue-express分支

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!