Egg.js试水 - 文章增删改查【前后端分离】-阿里云开发者社区

上一篇文章讲的是后端渲染的项目 - Egg.js 试水 - 天气预报。但是没有引入数据库。这次的试水项目是文章的增删改查，将数据库引进，并且实现前后端分离。

项目的github地址是egg-demo/article-project。

下面直接进入正题~🙆‍

项目结构

article-project
├── client
├── service
└── README.md
复制代码

因为是前后端分离的项目，那么我们就以文件夹client存放客户端，以文件夹service存放服务端。README.md是项目说明文件。

客户端初始化

为了快速演示，我们使用vue-cli脚手架帮我们生成项目，并引入了vue-ant-design。

项目初始化

推荐使用yarn进行包管理。

$ npm install -g @vue/cli
# 或者
$ yarn global add @vue/cli
复制代码

然后新建一个项目。

$ vue create client
复制代码

接着我们进入项目并启动。

$ cd client
$ npm run serve
# 或者
$ yarn run serve
复制代码

此时，我们访问浏览器地址http://localhost:8080/，就会看到欢迎页面。

最后我们引入ant-design-vue。

$ npm install ant-design-vue
# 或
$ yarn add ant-design-vue
复制代码

在这里，我们全局引入ant-design-vue的组件。实际开发中，按需引入比较友好，特别是只是使用了该UI框架部分功能组件的时候。

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)
Vue.config.productionTip = false;
new Vue({
  render: h => h(App),
}).$mount('#app');
复制代码

当然，在此项目中，还牵涉到几种npm包，之后只写yarn或者npm命令行操作。

路由设置

路由的跳转需要vue-router的协助。

# 路由
$ yarn add vue-router
# 进度条
$ yarn add nprogress
复制代码

这里只用到登录页，首页，文章列表页面和文章的新增/编辑页面。所以我的路由配置如下：

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/views/index'
import { UserLayout, BlankLayout } from '@/components/layouts'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
const whiteList = ['login'] // no redirect whitelist
import { getStore } from "@/utils/storage"
Vue.use(Router)
const router = new Router({
  routes: [
    {
        path: '/',
        name: 'index',
        redirect: '/dashboard/workplace',
        component: Index,
        children: [
          {
            path: 'dashboard/workplace',
            name: 'dashboard',
            component: () => import('@/views/dashboard')
          },
          {
            path: 'article/list',
            name: 'article_list',
            component: () => import('@/views/article/list')
          },
          {
            path: 'article/info',
            name: 'article_info',
            component: () => import('@/views/article/info')
          }
        ]
    },
    {
      path: '/user',
      component: UserLayout,
      redirect: '/user/login',
      // hidden: true,
      children: [
        {
          path: 'login',
          name: 'login',
          component: () => import(/* webpackChunkName: "user" */ '@/views/user/login')
        }
      ]
    },
    {
      path: '/exception',
      component: BlankLayout,
      redirect: '/exception/404',
      children: [
        {
          path: '404',
          name: '404',
          component: () => import(/* webpackChunkName: "user" */ '@/views/exception/404')
        }
      ]
    },
    {
      path: '*',
      component: () => import(/* webpackChunkName: "user" */ '@/views/exception/404')
    }
  ],
  // base: process.env.BASE_URL,
  scrollBehavior: () => ({ y: 0 }),
})
router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar
  if(getStore('token', false)) { // 有token
    if(to.name === 'index' || to.path === '/index' || to.path === '/') {
      next({ path: '/dashboard/workplace'})
      NProgress.done()
      return false
    }
    next()
  } else {
    if(to.path !== '/user/login') {
      (new Vue()).$notification['error']({
        message: '验证失效，请重新登录！'
      })
    }
    if(whiteList.includes(to.name)) {
      // 在免登录白名单，直接进入
      next()
    } else {
      next({
        path: '/user/login',
        query: {
          redirect: to.fullPath
        }
      })
      NProgress.done()
    }
  }
  next()
})
router.afterEach(route => {
  NProgress.done()
})
export default router
复制代码

接口请求设置

接口请求使用了axios，我们来集成下。

# axios
$ yarn add axios
复制代码

我们即将要代理的后端服务的地址是127.0.0.1:7001，所以我们的配置如下：

// vue.config.js
...
  devServer: {
    host: '0.0.0.0',
    port: '9008',
    https: false,
    hotOnly: false,
    proxy: { // 配置跨域
      '/api': {
        //要访问的跨域的api的域名
        target: 'http://127.0.0.1:7001/',
        ws: true,
        changOrigin: true
      },
    },
  },
...
复制代码

我们封装下请求🙂

// src/utils/request.js
import Vue from 'vue'
import axios from 'axios'
import store from '@/store'
import notification from 'ant-design-vue/es/notification'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { notice } from './notice';
const err = (error) => {
  if (error.response) {}
  return Promise.reject(error)
}
function loginTimeOut () {
  notification.error({ message: '登录信息失效', description: '请重新登录' })
  store.dispatch('user/logout').then(() => {
    setTimeout(() => {
      window.location.reload()
    }, 1500)
  })
}
// 创建 auth axios 实例
const auth = axios.create({
  headers: {
    'Content-Type': 'application/json;charset=UTF-8',
    'X-Requested-With': 'XMLHttpRequest'
  },
  baseURL: '/', // api base_url
  timeout: 10000 // 请求超时时间 10秒钟
})
// request interceptor
auth.interceptors.request.use(config => {
  const token = Vue.ls.get(ACCESS_TOKEN)
  if (token) {
    config.headers[ 'Authorization' ] = 'JWT '+ token // 让每个请求携带自定义 token 请根据实际情况自行修改
  }
  return config
}, err)
// response interceptor
auth.interceptors.response.use(
  response => {
    if (response.code === 10140) {
      loginTimeOut()
    } else {
      return response.data
    }
  }, 
  error => { // 错误处理
    console.log(error.response, 'come here')
    if(error.response && error.response.status === 403) {
      notice({
          title: '未授权，你没有访问权限，请联系管理员！',
      }, 'notice', 'error', 5)
      return
    }
    notice({
        title: (error.response && error.response.data && error.response.data.msg) || (error.response && `${error.response.status} - ${error.response.statusText}`),
    }, 'notice', 'error', 5)
  }
)
export {
  auth
}
复制代码

样式预处理器

当然，为了更好的管理你的页面样式，建议还是添加一种CSS预处理器。这里我选择了less预处理器。

# less 和 less-loader
$ yarn add less --dev
$ yarn add less-loader --dev
复制代码

仅仅是安装还不行，我们来配置下。

// vue.config.js
...
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          blue: '#3a82f8',
          'text-color': '#333'
        },
        javascriptEnabled: true
      }
    }
  },
...
复制代码

布局文章页面

文章列表页的骨架：

<!--src/views/article/list.vue-->
<template>
  <div class="article-list">
    <a-table
      style="border: none;" 
      bordered
      :loading="loading"
      :rowKey="row => row.id"
      :columns="columns" 
      :data-source="data"
      :pagination="pagination" 
      @change="change"/> 
  </div>
</template>
复制代码

文章编辑/新增页的骨架：

<!--src/views/article/info.vue-->
<template>
  <div class="article-info">
    <a-spin :spinning="loading">
      <a-row style="display: flex; justify-content: flex-end; margin-bottom: 20px;">
        <a-button type="primary" @click="$router.go(-1)">返回</a-button>
      </a-row>
      <a-form :form="form" v-bind="formItemLayout">
        <a-form-item
          label="标题">
          <a-input 
            placeholder="请输入标题"
            v-decorator="[
              'title',
              {rules: [{ required: true, message: '请输入标题'}]}
            ]"/>
        </a-form-item>
        <a-form-item
          label="分组">
          <a-select
            showSearch
            v-decorator="[
              'group',
              {rules: [{ required: true, message: '请选择分组'}]}
            ]"
            placeholder="请选择分组">
            <a-select-option value="分组1">分组1</a-select-option>
            <a-select-option value="分组2">分组2</a-select-option>
            <a-select-option value="分组3">分组3</a-select-option>
            <a-select-option value="分组4">分组4</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="作者">
          <a-input 
            placeholder="请输入作者"
            v-decorator="[
              'author',
              {rules: [{ required: true, message: '请输入作者'}]}
            ]"/>
        </a-form-item>
        <a-form-item
          label="内容">
          <a-textarea 
            :autosize="{ minRows: 10, maxRows: 12 }"
            placeholder="请输入文章内容"
            v-decorator="[
              'content',
              {rules: [{ required: true, message: '请输入文章内容'}]}
            ]"/>
        </a-form-item>
      </a-form>
      <a-row style="margin-top: 20px; display: flex; justify-content: space-around;">
        <a-button @click="$router.go(-1)">取消</a-button>
        <a-button type="primary" icon="upload" @click="submit">提交</a-button>
      </a-row>
    </a-spin>
  </div>
</template>
复制代码

前端的项目有了雏形，下面搭建下服务端的项目。

服务端初始化

这里直接使用eggjs框架来实现服务端。你可以考虑使用typescript方式的来初始化项目，但是我们这里直接使用javascript而不是它的超级typescript来初始化项目。

初始化项目

$ mkdir service
$ cd service
$ npm init egg --type=simple
$ npm i
复制代码

启动项目:

$ npm run dev
复制代码

在浏览器中打开localhost:7001地址，我们就可以看到eggjs的欢迎页面。当然，我们这里基本上不会涉及到浏览器页面，因为我们开发的是api接口。更多的是使用postman工具进行调试。

引入数据库

这里使用的数据库是mysql，但是我们不是直接使它，而是安装封装过的mysql2和egg-sequelize。

在 Node.js 社区中，sequelize 是一个广泛使用的 ORM 框架，它支持 MySQL、PostgreSQL、SQLite 和 MSSQL 等多个数据源。它会辅助我们将定义好的 Model 对象加载到 app 和 ctx 上。

# 安装mysql
$ yarn add mysql2
# 安装sequelize
$ yarn add egg-sequelize
复制代码

当然，我们需要一个数据库进行连接，那就得安装一个数据库，如果你使用的是mac os的话，你可以通过下面的方法进行安装：

brew install mysql
brew services start mysql
复制代码

window系统的话，可以考虑下载相关的安装包执行就行了，这里不展开说了。

数据库安装好后，我们管理数据库，可以通过控制台命令行进行控制，也可以通过图形化工具进行控制。我们推荐后者，我们下载了一个Navicat Premiun的工具。

Navicat Premiun 是一款数据库管理工具。

当然还可以下载phpstudy进行辅助开发。

连接数据库

配置数据库的基本信息，前提是我们已经创建好了这个数据库。假设我们创建了一个名为article的数据库，用户是reng，密码是123456。那么，我们就可以像下面这样连接。

// config/config.default.js
...
  config.sequelize = {
    dialect: 'mysql',
    host: '127.0.0.1',
    port: 3306,
    database: 'article',
    username: 'reng',
    password: '123456',
    operatorsAliases: false
  };
...
复制代码

当然，这是通过包egg-sequelize处理的，我们也要将其引入，告诉eggjs去使用这个插件。

// config/plugin.js
...
  sequelize: {
    enable: true,
    package: 'egg-sequelize',
  },
...
复制代码

创建数据库表

你可以直接通过控制台命令行执行mysql语句创建。但是，我们直接使用迁移操作完成。

在项目中，我们希望将所有的数据库Migrations相关的内容都放在database目录下面，所以我们在根目录下新建一个.sequelizerc配置文件：

// .sequelizerc
'use strict';
const path = require('path');
module.exports = {
  config: path.join(__dirname, 'database/config.json'),
  'migrations-path': path.join(__dirname, 'database/migrations'),
  'seeders-path': path.join(__dirname, 'database/seeders'),
  'models-path': path.join(__dirname, 'app/model'),
};
复制代码

初始化Migrations配置文件和目录。

npx sequelize init:config
npx sequelize init:migrations
复制代码

更加详细内容，可见eggjs sequelize章节。

我们按照官网上的操作初始化了文章列表的数据库表articles。对应的model内容如下:

// app/model/article.js
'use strict';
module.exports = app => {
  const { STRING, INTEGER, DATE, NOW, TEXT } = app.Sequelize;
  const Article = app.model.define('articles', {
    id: {type: INTEGER, primaryKey: true, autoIncrement: true},//记录id
    title: {type: STRING(255)},// 标题
    group: {type: STRING(255)}, // 分组
    author: {type: STRING(255)},// 作者  
    content: {type: TEXT}, // 内容
    created_at: {type: DATE, defaultValue: NOW},// 创建时间
    updated_at: {type: DATE, defaultValue: NOW}// 更新时间
  }, {
    freezeTableName: true // 不自动将表名添加复数
  });
  return Article;
};
复制代码

API的CRUD

上面服务端的工作，已经帮我们做好编写接口的准备了。那么，下面结合数据库，我们来实现下文章增删改查的操作。

我们使用的是MVC的架构，那么我们的现有代码逻辑自然会这样流向：

app/router.js 获取文章路由到 -> app/controller/article.js中对应的方法 -> 到app/service/article.js中的方法。那么，我们就主要展示在controller层和service层做的事情吧。毕竟router层没啥好讲的。

获取文章列表

[get] /api/get-article-list

// app/controller/article.js
...
  async getList() {
    const { ctx } = this
    const { page, page_size } = ctx.request.query
    let lists = await ctx.service.article.findArticle({ page, page_size })
    ctx.returnBody(200, '获取文章列表成功！', {
      count: lists && lists.count || 0,
      results: lists && lists.rows || []
    }, '00000')
  }
...
复制代码

// app/service/article.js
...
  async findArticle(obj) {
    const { ctx } = this
    return await ctx.model.Article.findAndCountAll({
      order: [['created_at', 'ASC']],
      offset: (parseInt(obj.page) - 1) * parseInt(obj.page_size), 
      limit: parseInt(obj.page_size)
    })
  }
...
复制代码

获取文章详情

[get] /api/get-article

// app/controller/article.js
...
  async getItem() {
    const { ctx } = this
    const { id } = ctx.request.query
    let articleDetail = await ctx.service.article.getArticle(id)
    if(!articleDetail) {
      ctx.returnBody(400, '不存在此条数据！', {}, '00001')
      return
    }
    ctx.returnBody(200, '获取文章成功！', articleDetail, '00000')
  }
...
复制代码

// app/service/article.js
...
  async getArticle(id) {
    const { ctx } = this
    return await ctx.model.Article.findOne({
      where: {
        id
      }
    })
  }
...
复制代码

添加文章

[post] /api/post-article

// app/controller/article.js
...
  async postItem() {
    const { ctx } = this
    const { author, title, content, group } = ctx.request.body
    // 新文章
    let newArticle = { author, title, content, group }
    let article = await ctx.service.article.addArticle(newArticle)
    if(!article) {
      ctx.returnBody(400, '网络错误，请稍后再试！', {}, '00001')
      return
    }
    ctx.returnBody(200, '新建文章成功!', article, '00000')
  }
...
复制代码

// app/service/article.js
...
  async addArticle(data) {
    const { ctx } = this
    return await ctx.model.Article.create(data)
  }
...
复制代码

编辑文章

[put] /api/put-article

// app/controller/article.js
...
  async putItem() {
    const { ctx } = this
    const { id } = ctx.request.query
    const { author, title, content, group } = ctx.request.body
    // 存在文章
    let editArticle = { author, title, content, group }
    let article = await ctx.service.article.editArticle(id, editArticle)
    if(!article) {
      ctx.returnBody(400, '网络错误，请稍后再试！', {}, '00001')
      return
    }
    ctx.returnBody(200, '编辑文章成功!', article, '00000')
  }
...
复制代码

// app/service/article.js
...
  async editArticle(id, data) {
    const { ctx } = this
    return await ctx.model.Article.update(data, {
      where: {
        id
      }
    })
  }
...
复制代码

删除文章

[delete] /api/delete-article

// app/controller/article.js
...
  async deleteItem() {
    const { ctx } = this
    const { id } =  ctx.request.query
    let articleDetail = await ctx.service.article.deleteArticle(id)
    if(!articleDetail) {
      ctx.returnBody(400, '不存在此条数据！', {}, '00001')
      return
    }
    ctx.returnBody(200, '删除文章成功！', articleDetail, '00000')
  }
...
复制代码

// app/service/article.js
...
  async deleteArticle(id) {
    const { ctx } = this
    return await ctx.model.Article.destroy({
      where: {
        id
      }
    })
  }
...
复制代码

在完成接口的编写后，你可以通过postman 应用去验证下是否返回的数据。

前端对接接口

接下来就得切回来client文件夹进行操作了。我们在上面已经简单封装了请求方法。这里来编写文章CRUD的请求方法，我们为了方便调用，将其统一挂载在Vue实例下。

// src/api/index.js
import article from './article'
const api = {
  article
}
export default api
export const ApiPlugin = {}
ApiPlugin.install = function (Vue, options) {
  Vue.prototype.api = api // 挂载api在原型上
}
复制代码

获取文章列表

// src/api/article.js
...
  export function getList(params) {
    return auth({
      url: '/api/get-article-list',
      method: 'get',
      params
    })
  }
...
复制代码

// src/views/article/list.vue
...
  getList() {
    let vm = this
    vm.loading = true
    vm.api.article.getList({
      page: vm.pagination.current,
      page_size: vm.pagination.pageSize
    }).then(res => {
      if(res.code === '00000'){
        vm.pagination.total = res.data && res.data.count || 0
        vm.data = res.data && res.data.results || []
      } else {
        vm.$message.warning(res.msg || '获取文章列表失败')
      }
    }).finally(() => {
      vm.loading = false
    })
  }
...
复制代码

获取文章详情

// src/api/article.js
...
  export function getItem(params) {
    return auth({
      url: '/api/get-article',
      method: 'get',
      params
    })
  }
...
复制代码

// src/views/article/info.vue
...
  getDetail(id) {
    let vm = this
    vm.loading = true
    vm.api.article.getItem({ id }).then(res => {
      if(res.code === '00000') {
        // 数据回填
        vm.form.setFieldsValue({
          title: res.data && res.data.title || undefined,
          author: res.data && res.data.author || undefined,
          content: res.data && res.data.content || undefined,
          group: res.data && res.data.group || undefined,
        })
      } else {
        vm.$message.warning(res.msg || '获取文章详情失败！')
      }
    }).finally(() => {
      vm.loading = false
    })
  },
...
复制代码

添加文章

// src/api/article.js
...
  export function postItem(data) {
    return auth({
      url: '/api/post-article',
      method: 'post',
      data
    })
  }
...
复制代码

// src/views/article/info.vue
...
  submit() {
    let vm = this
    vm.loading = true
    vm.form.validateFields((err, values) => {
      if(err){
        vm.loading = false
        return
      }
      let data = {
        title: values.title,
        group: values.group,
        author: values.author,
        content: values.content
      }
      vm.api.article.postItem(data).then(res => {
        if(res.code === '00000') {
          vm.$message.success(res.msg || '新增成功！')
          vm.$router.push({
            path: '/article/list'
          })
        } else {
          vm.$message.warning(res.msg || '新增失败！')
        }
      }).finally(() => {
        vm.loading = false
      })
    })
  },
...
复制代码

编辑文章

// src/api/article.js
...
  export function putItem(params, data) {
    return auth({
      url: '/api/put-article',
      method: 'put',
      params,
      data
    })
  }
...
复制代码

// src/views/article/info.vue
...
  submit() {
    let vm = this
    vm.loading = true
    vm.form.validateFields((err, values) => {
      if(err){
        vm.loading = false
        return
      }
      let data = {
        title: values.title,
        group: values.group,
        author: values.author,
        content: values.content
      }
      vm.api.article.putItem({id: vm.$route.query.id}, data).then(res => {
        if(res.code === '00000') {
          vm.$message.success(res.msg || '新增成功！')
          vm.$router.push({
            path: '/article/list'
          })
        } else {
          vm.$message.warning(res.msg || '新增失败！')
        }
      }).finally(() => {
        vm.loading = false
      })
    })
  }
...
复制代码

删除文章

// src/api/article.js
...
  export function deleteItem(params) {
    return auth({
      url: '/api/delete-article',
      method: 'delete',
      params
    })
  }
...
复制代码

// src/views/article/list.vue
...
  delete(text, record, index) {
    let vm = this
    vm.$confirm({
      title: `确定删除【${record.title}】`,
      content: '',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        vm.api.article.deleteItem({ id: record.id }).then(res => {
          if(res.code === '00000') {
            vm.$message.success(res.msg || '删除成功！')
            vm.handlerSearch()
          } else {
            vm.$message.warning(res.msg || '删除失败！')
          }
        })
      },
      onCancel() {},
    })
  }
...
复制代码

效果图

在egg-demo/article-project/client/前端项目中，页面包含了登录页面，欢迎页面和文章页面。

欢迎页面忽略不计

登录页

文章列表

文章编辑

后话

至此，整个项目已经完成。代码仓库为egg-demo/article-project/，感兴趣可以进行扩展学习。

Egg.js试水 - 文章增删改查【前后端分离】

项目结构

客户端初始化

项目初始化

路由设置

接口请求设置

样式预处理器

布局文章页面

服务端初始化

初始化项目

引入数据库

连接数据库

创建数据库表

API的CRUD

获取文章列表

获取文章详情

添加文章

编辑文章

删除文章

前端对接接口

获取文章列表

获取文章详情

添加文章

编辑文章

删除文章

效果图

登录页

文章列表

文章编辑

后话

热门文章

最新文章

相关课程

相关电子书

相关实验场景