前端+后端+数据简单demo介绍

本文以代码为例，简要介绍了前端+后端+数据的沟通全流程。

首先我们明确知道前端+后端+数据的分工分别是什么？

前端：创建网页布局、样式和交互行为。通过监听用户的交互向后端发起相应的请求，并完成交互。前端关注页面设计及用户体验等。

后端：负责监听前端的请求，根据前端的请求，并与数据库进行交互、执行业务逻辑和处理服务器上的其他任务。后端的目标是确保系统的安全性、稳定性和性能。

数据：数据部门负责维护数据库中的数据，他们一般通过爬虫，从互联网爬取数据并进行提取分析，清洗数据，然后将处理好的数据再存入数据库中。

我们按照以下流程去了解：

数据库

启动mysql server

通过运行docker中的mysql容器，从而启动数据库服务

docker start mysql

启动后端项目关联需要访问的mysql的数据库表

  cd server
  sh start.sh

1. 运行 start.sh，从而关联需要被访问的mysql数据库表。 其中：
   • DB_NAME：需要访问的数据库名称。
   • DB_USER：访问docker的用户名。
   • DB_USER_PASS：访问docker的密码。
   • DB_HOST：数据库所在主机地址，这里设置为 "127.0.0.1"，即本地主机。
   • DB_PORT：数据库端口号，这里设置为 "3306"，MySQL 默认端口号。

DB_NAME=shopping DB_USER=root DB_USER_PASS=root DB_HOST=127.0.0.1 DB_PORT=3306 pm2 start index.js --name ivweb.io

后端

启动后端应用

后端如何做好前端和数据的桥梁呢？

1. 前端发起请求

2. 后端监听到前端发起的请求，并调用该请求路径对应的方法

    /**
    * 商品列表: /goods?page=1&per_page=10
    * {GET}
    */
    router.get('/goods', goods.list);
   

3. 调用具体的controller方法,controller层主要是处理业务逻辑

    /**
    * 文章列表查询
    * @param {*} ctx
    * @param {*} next
    */
   
    class GoodsController {
   
            static async list(ctx, next) {
                    const page = parseInt(ctx.query['page']);
                    const pageSize = parseInt(ctx.query['per_page']);
                    let ret;
   
                    try {
                            ret = ctx.ok(await GoodsService.list(page, pageSize));
                    } catch (ex) {
                            ret = ctx.ok({
                                    errCode: ex.original && ex.original.errno || -10000,
                                    errMsg: ex.original && ex.original.code || "unknown error!"
                            });
                    }
   
                    ctx.body = ret;
                    await next;
            }
    }
    // goods对象
    export default {
            list: GoodsController.list,
            ...
    };
   

4. controller层处理好业务逻辑后，向数据库表发起实际请求，本层级负责编写获取数据的规则；如升降序规则、获取哪些字段等描述

    class GoodsService {
            /**
            * 文章列表
            * @param {*} page
            * @param {*} pageSize
            */
            static async list(page, pageSize) {
   
                    return new Promise((resolve, reject) => {
                            Goods.findAll({
                                    offset: (page - 1 ) * pageSize,
                                    limit: pageSize,
                                    order: [
                                            ['createDate', 'DESC']
                                    ],
                                    include: [
                                            {
                                                    model: Category,
                                                    attributes: ['id', 'name']
                                            },
                                            {
                                                    model: User,
                                                    attributes: ['username', 'avatar']
                                            }
                                    ]
                            }).then((result) => {
                                    resolve(result);
                            }).catch((err) => {
                                    reject(err);
                            });
                    });
            }
    }
   

5. 数据库表中的字段和model形成字典，进行封装

   
   'use strict';
   import Sequelize from 'sequelize';
   import sequelize from '../lib/sequelize';
   import User from './user';
   import Category from './category';
   import Like from './like';
   
   const Goods = sequelize.define('t_goods', {
           id: {
                   type: Sequelize.INTEGER,
                   field: "id",
                   primaryKey: true
           },
   
           cid: {
                   type: Sequelize.INTEGER,
                   field: "cid"
           },
   
           uid: {
                   type: Sequelize.INTEGER,
                   field: "uid"
           },
   
           createDate: {
                   type: Sequelize.DATE,
                   field: "create_date"
           },
   }, { createdAt: 'create_date', updatedAt: 'update_date' });
   
   // Category和User同样是和数据库表的一一映射关系
   Goods.belongsTo(Category, {foreignKey: 'cid'});
   Goods.belongsTo(User, {foreignKey: 'uid'});
   
   export default Goods;
   

前端

发起请求并获取数据，将数据展示到页面中，如有用户交互行为对数据进行修改，前端则向后端发起请求，等数据完成修改后再刷新页面展示。