vue3+node.js+mysql写接口(二)

目录

一、产品模块(products表)

1.1、添加产品(/adminapi/product/add)

1.2、产品列表(/adminapi/product/list)

1.3、编辑产品(/adminapi/product/update)

1.4、首页产品联动

二、前台模块

2.1、路由配置

2.2、NavBar组件

2.3、新闻搜索

2.4、新闻选项卡

2.5、新闻详情

2.6、产品与服务

三、总结

前言：

前端项目git地址：Enterprise Product Management System: 企业产品管理系统：web端展示、后台进行添加信息，前端用的vue3+vuex。

后端项目git地址：Enterprise Product Management System Backend: 企业产品管理系统：后端项目，用的node +mysql

查看git记录："第一版"是只有后台管理+admin/web分离的接口，"第二版"是将前台页面和后台管理系统放在一起了，根据自己需要进行下载与切换。目前是"第二版"。

一、产品模块(products表)

1.1、添加产品(/adminapi/product/add)

后端先创建一个products表

-- 创建products表
CREATE TABLE IF NOT EXISTS products (id INT AUTO_INCREMENT PRIMARY KEY,-- 1、传统自增int主键title VARCHAR(50) NOT NULL UNIQUE,introduction TEXT,detail TEXT,cover VARCHAR(255),userId INT DEFAULT 1,created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,edit_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
-- 2、UUID作为主键
-- id CHAR(36) PRIMARY KEY DEFAULT (UUID())
-- 缺点：不连续，索引性能低于自增int
-- 3、时间戳作为主键
-- 4、带前缀的自增编号（如 NEWS0001、PROD0001）
-- 每个表直接会重复？-- 插入测试产品数据
INSERT INTO products (title, introduction, detail, cover,userId) VALUES
('标题1','简要描述1','详细描述1','/avatar/admin.jpg', 1),
('标题2','简要描述1','详细描述2','/avatar/editor.jpg', 2)

1.2、产品列表(/adminapi/product/list)

1.3、编辑产品(/adminapi/product/update)

前三个接口几乎可以照搬vue3+node.js+mysql写接口(一)_node.js mysql vue-CSDN博客，除了字段不一样。

1.4、首页产品联动

当添加产品成功后，首页就会产生相应的轮播图

<el-carousel:interval="4000"type="card"height="400px"v-if="loopList.length > 0"><el-carousel-item v-for="item in loopList" :key="item.id"><div:style="{backgroundImage: `url(http://localhost:3000${item.cover})`,backgroundSize: 'cover',height: '400px',}"><h3>{{ item.title }}</h3></div></el-carousel-item>
</el-carousel>
<style lang="scss" scoped>
.el-carousel__item h3 {color: white;opacity: 0.75;line-height: 200px;margin: 0;text-align: center;
}
.el-carousel__item:nth-child(2n) {background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {background-color: #d3dce6;
}
</style>

二、前台模块

这里介绍的是单独开发一个项目，而不是和后台管理放在一起的。

2.1、路由配置

import { createRouter, createWebHashHistory } from "vue-router";
import Home from "../views/Home.vue";
import News from "../views/News.vue";
import NewsDetails from "../views/NewsDetails";
import Product from "../views/Product.vue";
const routes = [{path: "/",name: "home",component: Home,},{path: "/news",name: "news",component: News,},{path: "/news-detail/:id",name: "NewsDetails",component: NewsDetails,},{path: "/product",name: "product",component: Product,},
];
const router = createRouter({history: createWebHashHistory(),routes,
});
export default router;

2.2、NavBar组件

<template><div class="navbar"><el-menu:default-active="route.fullPath"class="el-menu-demo"mode="horizontal"router><el-menu-item index="/">首页</el-menu-item><el-menu-item index="/news">新闻中心</el-menu-item><el-menu-item index="/product">产品与服务</el-menu-item><el-menu-item index="" @click="handleClick">登录</el-menu-item></el-menu><div class="right">企业门户管理系统</div></div>
</template>
<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
const handleClick = () => {window.location = "http://localhost:8081/";
};
</script>
<style lang="scss" scoped>
.navbar {position: sticky;top: 0px;z-index: 999;
}
.right {position: fixed;top: 0;right: 20px;width: 160px;height: 59px;line-height: 59px;text-align: center;
}
</style>

2.3、新闻搜索

    <div class="search-center"><el-popovertitle="检索结果"placement="bottom"width="50%":visible="popVisible"><template #reference><el-inputv-model="searhText"placeholder="请输入新闻关键字":prefix-icon="Search"type="search"size="large"@input="popVisible = true"@blur="popVisible = false"/></template><div v-if="newsListFilter.length"><divv-for="(data, index) in newsListFilter":key="data.id"class="search-item"@click="handleClick(data.id)">{{ index + 1 }} . {{ data.title }}</div></div><div v-else><el-empty description="暂无新闻" :image-size="50" /></div></el-popover></div>

// 根据搜索内容过滤
const newsListFilter = computed(() => {return newsList.value.filter((item) => {return item.title.includes(searhText.value);});
});

2.4、新闻选项卡

    <el-tabs v-model="whichTab" style="margin: 20px"><el-tab-panev-for="item in options":key="item.value":label="item.label":name="item.value"><el-row :gutter="20"><el-col :span="18"><divv-for="data in tabnews[item.value]":key="data.id"style="padding: 10px"><el-card:body-style="{ padding: '0px' }"shadow="hover"@click="handleClick(data.id)"><divclass="tab-image":style="{backgroundImage: `url(http://localhost:3000${data.cover})`,}"></div><div style="padding: 14px; float: left"><span>{{ data.title }}</span><div class="edit-time"><span>{{ formatTime.getTime(data.edit_time) }}</span></div></div></el-card></div></el-col><el-col :span="6"><el-timeline style="padding-top: 16px"><el-timeline-itemv-for="data in tabnews[item.value]":key="data.id":timestamp="formatTime.getTime(data.edit_time)">{{ data.title }}</el-timeline-item></el-timeline></el-col></el-row></el-tab-pane></el-tabs>

借助lodash组装数组，将其分为三类（后台创建时的三类选项）

import _ from "lodash";//npm i lodash
// 组装选项卡数据
// groupBy用法：https://www.lodashjs.com/docs/lodash.groupBy
const tabnews = computed(() =>_.groupBy(newsList.value, (item) => item.category)
);

2.5、新闻详情

点击右侧新闻，此时左侧内容更新：这里相当于自己跳转到自己，onMounted只会触发一次，需要监听路由变化的话，需要使用watchEffect

const stop = watchEffect(async () => {if (!route.params.id) return;const res = await axios.get(`/adminapi/news/list/${route.params.id}`);const res1 = await axios.get(`/adminapi/news/topList?limit=4`); //可以用vuex存储主页的;也可以由后端返回最新的前四个数据currentNews.value = res.data[0];topNews.value = res1.data;
});
// 页面销毁时取消监听
onBeforeUnmount(() => {stop();
});
const router = useRouter();
// 跳转详情
// 注意：这里相当于自己跳转到自己，onMounted只会触发一次，需要监听路由变化的话，需要使用watchEffect
const handleClick = (id) => {router.push(`/news-detail/${id}`);
};

2.6、产品与服务

其实就是将后端的数据返回，前端根据指定样式渲染即可

三、总结

后端：

post请求参数：用body接收；

get请求参数：接收URL路径中的参数用params接收、查询字符串参数用query接收

前端：

1、model属性：让表单的验证功能正常工作，再结合rules+prop

2、如果表单form是ref或者reactive对象，直接赋值，会改变原始数据tableData，需要深拷贝

3、文件上传时，前端拿到的是file文件【二进制】格式，传给后端时一般用FormData形式，此时需要改变消息头：multipart/form-data

4、当一个页面自己跳转到自己，onMounted只会触发一次，需要监听路由变化的话，需要使用watchEffect，在页面销毁时取消监听。