综合实践二超市管理系统遇到的问题总结

1.后端

1.安装fastify框架脚手架

2.配置路由

3.添加路由前缀以便于前端的proxy代理解决跨域问题 

 4.安装mysql支持的插件

 在插件里建立db.js

'use strict'

const fp = require('fastify-plugin')
module.exports = fp(async function (fastify, opts) {
    fastify.register(require('@fastify/mysql'), {
        promise: true, // 开启promise支持
        host: 'localhost', // 主机 如果是本地数据库，就写localhost，否则 可以写具体ip地址或者外网域名
        port: 3306, // 端口号
        user: 'root', // 连接数据所使用的的用户名
        password: '123456789', // 一定要改成 你的数据库密码
        database: 'zonghe', // 你要连接的数据库名称
    })
})

注意开启promiss支持方便写接口文档使用async

 5.安装swagger插件写接口文档

生态->Swagger

 

'use strict';
const fp = require('fastify-plugin');

module.exports = fp(async function (fastify, opts) {
  fastify.register(require('@fastify/swagger'), {
    routePrefix: '/api/v1/docs', // 接口文档的访问地址
    swagger: {
      info: {
        title: '超市管理系统接口文档',
        description: '基于Fastify框架开发超市管理系统的后台接口项目',
        version: '1.0.0',
      },
      host: 'localhost:3000', // 接口访问地址的主机部分
      schemes: ['http'], // 指定协议
      consumes: ['application/json'],
      produces: ['application/json'],
      // 鉴权定义
      securityDefinitions: {
        apiKey: {
          type: 'apiKey',
          name: 'Authorization',
          in: 'header',
        },
      },
      // 开启鉴权
      security: [
        {
          apiKey: [],
        },
      ],
    },
    uiConfig: {
      deepLinking: false,
    },
    exposeRoute: true,
  });
});

 6.正式路由代码

'use strict'
const responseData = require('../response');
const { Goodstag } = require('../utils/constant');
module.exports = async function (fastify, opts) {
    //查询所有商品
    ///swiper的数据库返回赋值不好使！！！！///没配置swiper
    fastify.get(
        '/goods/all',
        {
            schema: {
                description: '获取所有的商品信息列表',
                tags: [Goodstag],
                summary: '获取所有商品',
                response: responseData,
            },
        },
        // function (req, reply) {
        //     fastify.mysql.query(
        //         'SELECT * FROM goods',
        //         function onResult(err, result) {
        //             reply.send(err || result)
        //         }
        //     )
        // }
        //注意开启promiss支持
        async (request, reply) => {
            let sql = 'select * from goods;';
            try {
                let [res] = await fastify.mysql.query(sql);
                console.log(res);
                return {
                    code: 200,
                    msg: '查询成功',
                    data: res,
                };
            } catch (error) {
                console.log(error);
                return {
                    code: 1,
                    msg: '网络中断，请稍后重试。',
                };
            }
        }
    );
    //新增商品
    fastify.post(
        '/goods/insert',
        {
            schema: {
                tags: [Goodstag],
                description: '将请求体body中传递过来的用户数据，存储到数据库中',
                summary: '新增商品',
                body: {
                    type: 'object',
                    required: ['name'],
                    properties: {
                        name: { type: 'string', default: '默认' },
                        price: { type: 'string', default: '' },
                        data: { type: 'string', default: '' },
                    },
                },
                response: responseData,
            },
        },
        async (request, reply) => {
            let {
                name,
                price = '',
                data = '',
            } = request.body;

            let sql =
                'insert into goods(name, price, data) values(?, ?, ?);';
            try {
                //! query方法的返回值 为 数组，第一个元素是查询结果（类型也是数据），第二个元素是 查询的元数据
                let [res] = await fastify.mysql.query(sql, [
                    name,
                    price,
                    data,
                ]);

                if (res.affectedRows === 1) {
                    return {
                        code: 200,
                        msg: '新增成功',
                    };
                } else {
                    return {
                        code: 1,
                        msg: '网络中断，请稍后重试。',
                    };
                }
            } catch (error) {
                console.log(error);
                return {
                    code: 1,
                    msg: '网络中断，请稍后重试。',
                };
            }
        }
    );
    //通过id查询
    fastify.get(
        '/goods/detail',
        {
            schema: {
                description:
                    '通过querystring传递id值，通过该id值获取指定商品的详细信息数据',
                tags: [Goodstag],
                summary: '根据id获取用户详情',
                // 指定查询参数的类型定义
                querystring: {
                    type: 'object',
                    required: ['id'],
                    properties: {
                        id: {
                            type: 'number',
                            default: 1,
                        },
                    },
                },
                response: responseData,
            },
        },
        async function (request, reply) {
            //TODO 1 获取路由参数id
            let id = request.query.id;
            //TODO 2 构建查询的sql语句
            let sql = 'select * from goods where id = ?';
            //TODO 3 执行query，查询结果
            //! 注意：数据库的查询操作 极易出现异常
            try {
                //! query方法的返回值 为 数组，第一个元素是查询结果（类型也是数据），第二个元素是 查询的元数据
                let [res] = await fastify.mysql.query(sql, [id]);

                return {
                    code: 200,
                    msg: '数据查询成功',
                    data: res[0], // 将数组第一个元素 就是该查询用户的详情，赋值给data属性
                };
            } catch (error) {
                console.log(error);
                return {
                    code: 1,
                    msg: '网络中断，请稍后重试。',
                };
            }
        }
    );
    //通过id删除
    fastify.delete(
        '/goods/delete',
        {
            schema: {
                description:
                    '通过querystring传递id值，通过该id值删除指定商品的详细信息数据',
                tags: [Goodstag],
                summary: '根据id获取用户删除商品',
                // 指定删除参数的类型定义
                querystring: {
                    type: 'object',
                    required: ['id'],
                    properties: {
                        id: {
                            type: 'number',
                            default: 1,
                        },
                    },
                },
                response: responseData,
            },
        },
        async function (request, reply) {
            //TODO 1 获取路由参数id
            let id = request.query.id;
            //TODO 2 构建查询的sql语句
            let sql = 'delete from goods where id = ?';
            //TODO 3 执行query，查询结果
            //! 注意：数据库的查询操作 极易出现异常
            try {
                //! query方法的返回值 为 数组，第一个元素是查询结果（类型也是数据），第二个元素是 查询的元数据
                let [res] = await fastify.mysql.query(sql, [id]);

                return {
                    code: 200,
                    msg: '数据删除成功',
                    data: res[0], // 将数组第一个元素 就是该查询用户的详情，赋值给data属性
                };
            } catch (error) {
                console.log(error);
                return {
                    code: 1,
                    msg: '网络中断，请稍后重试。',
                };
            }
        }
    );
    //通过ID修改商品
    fastify.post(
        '/goods/update',
        {
            schema: {
                tags: [Goodstag],
                description: '将请求体body中传递过来的用户数据，存储到数据库中',
                summary: '修改商品',
                querystring: {
                    type: 'object',
                    required: ['id'],
                    properties: {
                        id: {
                            type: 'number',
                            default: 1,
                        },
                    },
                },
                body: {
                    type: 'object',
                    required: ['name'],
                    properties: {
                        name: { type: 'string', default: '默认' },
                        price: { type: 'string', default: '' },
                        data: { type: 'string', default: '' },
                    },
                },
                response: responseData,
            },
        },
        async (request, reply) => {
            let {
                name,
                price = '',
                data = '',
            } = request.body;
            let id = request.query.id;
            let sql =
                'update goods set name=?,price=?,data=? where id = ?;'
            try {
                //! query方法的返回值 为 数组，第一个元素是查询结果（类型也是数据），第二个元素是 查询的元数据
                let [res] = await fastify.mysql.query(sql, [
                    name,
                    price,
                    data,
                    id,
                ]);

                if (res.affectedRows === 1) {
                    return {
                        code: 200,
                        msg: '修改成功',
                    };
                } else {
                    return {
                        code: 1,
                        msg: '网络中断，请稍后重试。',
                    };
                }
            } catch (error) {
                console.log(error);
                return {
                    code: 1,
                    msg: '网络中断，请稍后重试。',
                };
            }
        }
    );
}

 登录

'use strict'
const responseData = require('../response');
const { Logintag } = require('../utils/constant');
module.exports = async function (fastify, opts) {
    //新增商品
    fastify.post(
        '/login',
        {
            schema: {
                tags: [Logintag],
                description: '将请求体body中传递过来的用户数据，存储到数据库中',
                summary: '新增商品',
                body: {
                    type: 'object',
                    required: ['username'],
                    properties: {
                        username: { type: 'string', default: 'wangxiu' },
                        password: { type: 'string', default: '' },
                    },
                },
                response: responseData,
            },
        },
        async (request, reply) => {
            let {
                username,
                password,
            } = request.body;

            let sql =
                'select * from users where username = ?;';
            try {
                //! query方法的返回值 为 数组，第一个元素是查询结果（类型也是数据），第二个元素是 查询的元数据
                let [res] = await fastify.mysql.query(sql, [
                    username,
                    password,
                ]);
                if (res[0].password == password) {
                    return {
                        code: 200,
                        msg: '数据查询成功',
                        data: [], // 将数组第一个元素 就是该查询用户的详情，赋值给data属性
                    };
                }
                else {
                    return {
                        code: 400,
                        msg: '密码输入错误',
                        data: [], // 将数组第一个元素 就是该查询用户的详情，赋值给data属性
                    };
                }
            } catch (error) {
                console.log(error);
                return {
                    code: 1,
                    msg: '网络中断，请稍后重试。',
                };
            }
        }
    );
}

前端

1.装element ui 和axios 去官方文档 vue ui 有时不好使

2.注意element ui 的菜单，开启路由，则可以跳转 

注意axios配置 

注意配置跨域