Koa商城项目-商城模块(前端)

项目地址

koa_system: 🔥🔥🔥Koa2 + React商城项目前端-React + Antd前端-Vue2 + Element-plus后端-Koa2 + Sequelizehttps://gitee.com/ah-ah-bao/koa_system

欢迎大家点击查看,方便的话点一个star~ 

项目结构

Vue2Admin和Vue3Admin版本的后台还没有对接口，但是整体的框架已经启动；

uniClient和vue的一样都没有进行开发，但是整体框架已经启动；

目前正在开发ReactAdmin的版本：React + typescript + antd；

后台使用的是：Koa + Mysql + Sequelize；

值得注意的是，该项目只需要本地安装mysql ，但是不需要导入sql文件，运行modal即可。

页面效果

和上一个文章的代码几乎相似,主要的学习还是组件之间的传参和类型的校验.接下来带来该模块的主要知识:

Table中的render函数

export const GoodsColumnsList: () => Promise<TableProps<GoodsData>['columns']> = async () => {
    return [
        {
            title: '商品描述',
            dataIndex: 'goodsdesc',
            key: 'goodsdesc',
            align: 'center',
            onCell: () => {
                return {
                    style: {
                        maxWidth: 200,
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                        cursor: 'pointer',
                    },
                };
            },
            render: (sql) => (
                <Tooltip placement="topLeft" title={sql}>
                    {sql}
                </Tooltip>
            ),
        },
    ]
}

主要作用是用来做表格中的省略效果

效果图

common中的公共方法(...持续开发)

// 获取token
export const getToken = () => {
  return localStorage.getItem("token");
};

// 获取时间
export const getTimeChartData = (data: number) => {
  const date = new Date(data);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
};

// 退出登录移除方法
export const removeUserInfo = () => {
  localStorage.removeItem("token");
  localStorage.removeItem("userInfo");
  localStorage.removeItem("role");
};

// 设置API地址
export const API_URL = "http://localhost:3000/api";