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

最新推荐文章于 2025-08-12 18:13:22 发布

野槐

最新推荐文章于 2025-08-12 18:13:22 发布

阅读量761

点赞数 18

CC 4.0 BY-SA版权

文章标签： node.js

本文链接：https://blog.csdn.net/qq_44930306/article/details/149273659

一、产品模块(products表)

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

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

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

前言：

前端项目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-popover
        title="检索结果"
        placement="bottom"
        width="50%"
        :visible="popVisible"
      >
        <template #reference>
          <el-input
            v-model="searhText"
            placeholder="请输入新闻关键字"
            :prefix-icon="Search"
            type="search"
            size="large"
            @input="popVisible = true"
            @blur="popVisible = false"
        /></template>
        <div v-if="newsListFilter.length">
          <div
            v-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-pane
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :name="item.value"
      >
        <el-row :gutter="20">
          <el-col :span="18">
            <div
              v-for="data in tabnews[item.value]"
              :key="data.id"
              style="padding: 10px"
            >
              <el-card
                :body-style="{ padding: '0px' }"
                shadow="hover"
                @click="handleClick(data.id)"
              >
                <div
                  class="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-item
                v-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，在页面销毁时取消监听。