五、nodejs存储图片

nodejs存储图片

// 静态托管和数据库创建

创建数据库

新建Public进行静态托管

新建个img的文件夹

在index.js里

// 托管静态

app.use('/public', express.static('./Public'))//托管静态资源
/**
 * 1.引入一个express框架
 * 2.在加载所有服务模块前，要先连接数据库
 * 安装body-parser中间件解析JSON数据
 */
const express = require('express');
const app = express();
const DataBase = require('./Dao/index');
const bodyParser = require('body-parser');
app.use(bodyParser.json());
DataBase.connect();//连接数据库
/**
 * 3.中间件,使用Service的接口 发送网络请求
 */
/**配置公共请求响应头 */
app.all('*', (req, res, next) => {
  // console.log('请求进来了');
  res.header("Access-Control-Allow-Origin", "*");//允许跨域域名
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');//允许跨域的header类型
  res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");//允许跨域的请求方式
  next();
})
app.use('/public', express.static('./Public'))//托管静态资源
app.use('/api/Code', require('./Service/Code'))
app.use('/api/Class', require('./Service/class_form'))
app.use('/api/Login', require('./Service/login'))
app.use('/api/User', require('./Service/user'))
app.use('/api/hot', require('./Service/hotData'))
app.use('/api/home', require('./Service/home'))
app.use('/api/text', require('./Service/textData'))
app.use('/api/course', require('./Service/courseAPI'))
/**
 * 4.规定服务的端口号
 */
app.listen(3000, () => {
  console.log('server is running at http://localhost:3000');
})

把图片存到我

Public里的imgs/course/里

访问一下可以获取到图片（这样图片就做了静态托管）

插入数据库数据

写接口连接数据库

const sql = `SELECT * FROM course_kp`
const express = require('express')
const router = express.Router()
const Dao = require('../Dao/index');
router.get('/homeData', (req, res) => {
    const sql = `SELECT * FROM course_kp`
    Dao.db.query(sql, (err, result) => {
        if (err) {
            res.send({
                code: 500,
                msg: '服务器错误'
            })
        }
        // console.log(result, 'course')
        res.send({
            code: 200,
            data: {
                small_sort: [
                    {
                        name: "实训中心",
                        icon: "icon-shoujihao",
                        path: 'practical',
                    },
                    {
                        name: "在线评测",
                        icon: "icon-pingce-copy",
                        path: 'text',
                    },
                    {
                        name: "在线考试",
                        icon: "icon-kaoshi",
                        path: 'exam',
                    },
                    {
                        name: "课程中心",
                        icon: "icon-kecheng1",
                        path: 'course',
                    },

                ],
                centent_nav_list: [
                    {
                        tab: "资源中心",
                        data: [
                            {
                                pic: "https://www.gulixueyuan.com/files/course/2021/09-28/091707333afc734597.png",
                                title: "云原生实战",
                                people: "人数：2888",
                                price: "20",
                                label: ["课程新颖", "很棒"],
                                path: 'specific_1',
                            },
                            {
                                pic: "https://sem.g3img.com/site/50028574/image/c2_20190820143554_78564.jpg",
                                title: "大数据课程",
                                people: "人数：2888",
                                price: "20",
                                label: ["老师好", "课程很新"],
                            },
                            {
                                pic: "https://7n.w3cschool.cn/attachments/image/201910/big_67708_1378947.jpg?t=1571292388",
                                title: "微信小程序微课",
                                people: "人数：2888",
                                price: "20",
                                label: ["课程新", "很棒很棒"],
                            },
                            {
                                pic: "https://img0.baidu.com/it/u=1884887629,675990136&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
                                title: "鸿蒙App实战",
                                people: "人数：2888",
                                price: "20",
                                label: ["老师好", "课程很新"],
                            },
                        ],
                    },
                    {
                        tab: "绩效排名",
                        data: [
                            {
                                pic: "https://7n.w3cschool.cn/attachments/image/201910/big_67708_1378947.jpg?t=1571292388",
                                title: "微信小程序微课",
                                people: "人数：2888",
                                price: "20",
                                label: ["课程新", "很棒很棒"],
                            },
                        ],
                    },
                    {
                        tab: "教师点评",
                        data: [
                            {
                                pic: "https://7n.w3cschool.cn/attachments/image/201910/big_67708_1378947.jpg?t=1571292388",
                                title: "微信小程序微课",
                                people: "人数：2888",
                                price: "20",
                                label: ["课程新", "很棒很棒"],
                            },
                            {
                                pic: "https://img0.baidu.com/it/u=1884887629,675990136&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
                                title: "鸿蒙App实战",
                                people: "人数：2888",
                                price: "20",
                                label: ["老师好", "课程很新"],
                            },
                        ],
                    },
                    {
                        tab: "实时新闻",
                        data: [
                            {
                                pic: "https://7n.w3cschool.cn/attachments/image/201910/big_67708_1378947.jpg?t=1571292388",
                                title: "微信小程序微课",
                                people: "人数：2888",
                                price: "20",
                                label: ["课程新", "很棒很棒"],
                            },
                            {
                                pic: "https://img0.baidu.com/it/u=1884887629,675990136&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
                                title: "鸿蒙App实战",
                                people: "2888",
                                price: "20",
                                label: ["老师好", "课程很新"],
                            },
                            {
                                pic: "https://www.gulixueyuan.com/files/course/2021/09-28/091707333afc734597.png",
                                title: "云原生实战",
                                people: "2888",
                                price: "20",
                                label: ["课程新颖", "很棒"],
                            },
                        ],
                    },
                ],
                pic_list: [
                    {
                        pic: "https://ts1.cn.mm.bing.net/th/id/R-C.7cdcec9d832b10299997262226439d30?rik=4NYwnD4xkiVxLw&riu=http%3a%2f%2fwww.tolc.com.cn%2ffiles%2fattach%2fimages%2fcontent%2f20210225%2f16142645984866.jpg&ehk=25LMvyqTd1YKGRBSVpbxn%2fU1ZlanTZLnmHhdjqoX5OI%3d&risl=&pid=ImgRaw&r=0",

                    },

                ],
                course_list: result
            },

        })
    })

})
module.exports = router

在项目中渲染

time格式转化封装

export const convertUnixTimestampToDateString = {
    formateDateYYMMDDHHMMSS: (timestamp, offsetHours = 8) => {
        // 创建一个Date对象，此时是UTC时间  
        const date = new Date(timestamp);

        // 获取UTC时间的年、月、日、时、分、秒  
        const utcYear = date.getUTCFullYear();
        const utcMonth = String(date.getUTCMonth() + 1).padStart(2, '0');
        const utcDay = String(date.getUTCDate()).padStart(2, '0');
        const utcHours = date.getUTCHours();

        // 应用时区偏移  
        const localHours = (utcHours + offsetHours) % 24; // 转换为24小时制  
        const localMinutes = date.getUTCMinutes();
        const localSeconds = date.getUTCSeconds();

        // 如果偏移后的小时数小于0，则需要从日期中减去一天并相应调整小时数  
        if (localHours < 0) {
            date.setUTCDate(date.getUTCDate() - 1);
            localHours += 24;
        }

        // 拼接成字符串  
        const formattedDate = `${utcYear}-${utcMonth}-${utcDay} ${localHours.toString().padStart(2, '0')}:${localMinutes.toString().padStart(2, '0')}:${localSeconds.toString().padStart(2, '0')}`;
        return formattedDate;
    }
}

js引用

//引用
import Footer from "../../components/Footer.vue";
import banner from "./components/Banner.vue";
import { reactive, toRefs, ref } from "vue";
import NavList from "./components/NavList.vue";
import axios from "axios";
import { onMounted } from "vue";
import { getApiHomeData } from "../../api/api";
import { useRouter } from "vue-router";
import { convertUnixTimestampToDateString } from "../../utils/time";


const BASEURL = "http://127.0.0.1:3000";
    const router = useRouter();
    // 获取数据
    let data = reactive({
      big_sort: [],
      small_sort: [],
      centent_nav_list: [],
      pic_list: [],
      course_list: [],
      serPicker: false,
      serColumns: [],
    });

    const active = ref(0);
    const getHomeData = async () => {
      // 获取封装的数据
      let res = await getApiHomeData();
      data.big_sort = res.data.big_sort;
      data.small_sort = res.data.small_sort;
      data.centent_nav_list = res.data.centent_nav_list;
      data.pic_list = res.data.pic_list;
      data.course_list = res.data.course_list;
      data.serColumns = data.course_list.map((item) => {
        return item.name;
      });
    };

div使用

<div class="content_hao_image" @click="course_router(item,index)">
        <img :src="BASEURL + item.pic" alt="" />
          <div class="text_top">
            {{ item.title }}
            <p>{{ item.decription }}</p>
            <div class="content_button">好课推存</div>
            <p class="p_2">
          {{
            convertUnixTimestampToDateString.formateDateYYMMDDHHMMSS(
            item.time
                  )
                }}
              </p>
            </div>
          </div>

找到vant的选择器

Vant 3 - Lightweight Mobile UI Components built on Vue

<van-popup v-model:show="showPicker" position="bottom">
  <van-picker
    :columns="columns"
    @confirm="onConfirm"
    @cancel="showPicker = false"
  />
</van-popup>
  const BASEURL = "http://127.0.0.1:3000";
    const router = useRouter();
    // 获取数据
    let data = reactive({
      big_sort: [],
      small_sort: [],
      centent_nav_list: [],
      pic_list: [],
      course_list: [],
      serPicker: false,
      serColumns: [],
    });

    const active = ref(0);
    const getHomeData = async () => {
      // 获取封装的数据
      let res = await getApiHomeData();
      data.big_sort = res.data.big_sort;
      data.small_sort = res.data.small_sort;
      data.centent_nav_list = res.data.centent_nav_list;
      data.pic_list = res.data.pic_list;
      data.course_list = res.data.course_list;
      data.serColumns = data.course_list.map((item) => {
        return item.name;
      });
    };
const onserConfirm = (current, index) => {
      console.log(current, data.course_list[index]);
      switch (data.course_list[index].name) {
        case "python课程":
          router.push("/specific_1");
          break;
        case "java课程":
          router.push("/specific_2");
          break;
        case "mysql课程":
          router.push("/specific_3");
          break;
        default:
          break;
      }
    };

如图

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/681556.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

AST 在前端开发中的应用与实践：从代码分析到自动化转换

AST 在前端开发中的应用与实践：从代码分析到自动化转换

抽象语法树&#xff08;AST&#xff0c;Abstract Syntax Tree&#xff09;在前端开发中有着广泛的应用。它是编译器和工具链的核心组件&#xff0c;使得代码分析、转换、优化等操作成为可能。在前端开发中&#xff0c;AST 主要用于代码编译和转译、代码优化、代码分析、代码格式…
阅读更多...
vue对图片进行裁剪

vue对图片进行裁剪

安装依赖&#xff1a; npm install cropperjs -save <template><div class"bigBox"><h3>预览</h3><!-- 裁剪按钮--><el-button click"sureSava">裁剪</el-button><el-button click"confirm">确…
阅读更多...
元宇宙3D品牌营销虚拟场景提升客户对企业的黏性

元宇宙3D品牌营销虚拟场景提升客户对企业的黏性

在这个充满创意与想象的3D元宇宙时代&#xff0c;我们为您推出了全新的3D元宇宙场景在线制作编辑平台&#xff0c;让您轻松构建专属的虚拟展厅&#xff0c;展现无限可能。 3D元宇宙场景在线制作编辑平台允许您快速完成空间设计&#xff0c;根据您的个性化需求&#xff0c;自由设…
阅读更多...
1.1 QT随手简记（一）

1.1 QT随手简记（一）

QT学习篇1 1. QT简介 Qt是一个跨平台的库&#xff0c;它提供了丰富的功能&#xff0c;用于开发GUI应用程序、桌面应用程序、移动应用程序和嵌入式应用程序。Qt由Qt公司维护&#xff0c;是一个开源项目&#xff0c;支持多种操作系统&#xff0c;包括Windows、Linux、Mac OS等。…
阅读更多...
Django路由与会话深度探索：静态、动态路由分发，以及Cookie与Session的奥秘

Django路由与会话深度探索：静态、动态路由分发，以及Cookie与Session的奥秘

系列文章目录 Django入门全攻略&#xff1a;从零搭建你的第一个Web项目Django ORM入门指南&#xff1a;从概念到实践&#xff0c;掌握模型创建、迁移与视图操作Django ORM实战&#xff1a;模型字段与元选项配置&#xff0c;以及链式过滤与QF查询详解Django ORM深度游&#xff…
阅读更多...
clickhouse（十五、存储优化实践）

clickhouse（十五、存储优化实践）

文章目录 背景问题定位优化方式排序键设计写入顺序压缩算法 DoubleDeltaLowCardinality避免使用Nullable 总结 背景 clickhouse集群容量告警&#xff0c;项目中某些表占据大量的存储空间&#xff0c;借此机会对ck的存储优化进行实践学习&#xff0c;并通过多种方式测试验证优化…
阅读更多...
元宇宙NFG交易市场：减少出入金的税和消泡沫

元宇宙NFG交易市场：减少出入金的税和消泡沫

在元宇宙的宏伟画卷中&#xff0c;NFG&#xff08;非同质化商品&#xff09;以其独特魅力逐渐崭露头角&#xff0c;成为连接现实世界与数字世界的桥梁。NFG不仅仅是一种商品&#xff0c;更是一种创新的商业模式&#xff0c;为资金的流动与税收优惠带来了新的可能。 首先&#…
阅读更多...
QT error: allocation of incomplete type ‘Ui::Server‘

QT error: allocation of incomplete type ‘Ui::Server‘

目录 前言 报错内容&#xff1a; 过程解析&#xff1a; 原因分析&#xff1a; daisy.skye的博客 QT合集http://t.csdnimg.cn/wEVbu 前言 最近又开始需要做上位机了&#xff0c;要知道qt上位机对我来说已经3年没有接触了&#xff0c;最开始接触还是毕业时工作中的简单学习和…
阅读更多...
【预计IEEE出版】第四届电子信息工程与计算机技术国际学术会议（EIECT 2024）

【预计IEEE出版】第四届电子信息工程与计算机技术国际学术会议（EIECT 2024）

第四届电子信息工程与计算机技术国际学术会议&#xff08;EIECT 2024&#xff09; 2024 4th International Conference on Electronic Information Engineering and Computer Technology 2024年11月15-17日 | 中国 深圳 #往届均已成功见刊、EI检索;先投稿&#xff0c;先送审…
阅读更多...
CSS学习|css三种导入方式、基本选择器、层次选择器、结构伪类选择器、属性选择器、字体样式、文本样式

CSS学习|css三种导入方式、基本选择器、层次选择器、结构伪类选择器、属性选择器、字体样式、文本样式

第一个css程序 css程序都是在style标签中书写 打开该网页&#xff0c;可以看到h1标签中的我是标题被渲染成了红色 可以在同级目录下创建一个css目录&#xff0c;专门存放css文件&#xff0c;可以和html分开编写 然后在html页面中&#xff0c;利用link标签以及css文件地址&…
阅读更多...
【AI大模型】基于Langchain和Openai借口实现英文翻译中文应用

【AI大模型】基于Langchain和Openai借口实现英文翻译中文应用

&#x1f680; 作者 &#xff1a;“大数据小禅” &#x1f680; 文章简介 &#xff1a;本专栏后续将持续更新大模型相关文章&#xff0c;从开发到微调到应用&#xff0c;需要下载好的模型包可私。 &#x1f680; 欢迎小伙伴们 点赞&#x1f44d;、收藏⭐、留言&#x1f4ac; 目…
阅读更多...
C++ primer例子1实现

C++ primer例子1实现

问题 代码 Sales_item.h #include<iostream> #include<string> class Sales_item {public:Sales_item(){};Sales_item(std::string insid, int num, double price);friend std::istream& operator>>(std::istream& is, Sales_item& item);frie…
阅读更多...
LeetCode-43. 字符串相乘【数学 字符串 模拟】

LeetCode-43. 字符串相乘【数学 字符串 模拟】

LeetCode-43. 字符串相乘【数学 字符串 模拟】 题目描述&#xff1a;解题思路一&#xff1a;模拟乘法&#xff0c;两个数中每一位数相乘的时候乘上他们各自的进制数&#xff0c;之后求和。循环时&#xff0c;分别记录各自的进制数背诵版&#xff1a;解题思路三&#xff1a;0 题…
阅读更多...
课程标准包括哪些内容

课程标准包括哪些内容

在教育的广阔天地中&#xff0c;课程标准如同一座灯塔&#xff0c;照亮了教师们的教学之路。那么&#xff0c;这座灯塔究竟照亮了哪些关键领域呢&#xff1f; 课程标准为我们指明了教学目标。这些目标是教学活动的航标&#xff0c;指引我们如何根据学生的认知水平和学习需求&a…
阅读更多...
防火墙是什么？探讨部署Web防火墙的必要性

防火墙是什么？探讨部署Web防火墙的必要性

如今&#xff0c;多云环境、API安全功能扩展、合作伙伴集成即时可用、可用性和可视化增强以及提高自动化程度已经成为基本要求。伴随企业应用架构的迁移&#xff0c;在用户端&#xff0c;需要在部署环境不断扩展但人员技能有限的情况下&#xff0c;保护数量日益增长的应用安全。…
阅读更多...
如何在springboot项目中使用Mybatisplus

如何在springboot项目中使用Mybatisplus

文章目录 1.mybatisplus的作用2.mybatisplus使用流程2.1pom.xml文件中增加依赖&#xff08;点击右上角蓝色按钮下载依赖&#xff09;2.2navicat新建数据库&#xff0c;增加application.properties数据库配置2.3 启动类添加注解&#xff0c;增加mapper包操作数据库2.5添加实体类…
阅读更多...
如何通过PHP语言实现远程控制多路照明

如何通过PHP语言实现远程控制多路照明

如何通过PHP语言实现远程控制多路照明呢&#xff1f; 本文描述了使用PHP语言调用HTTP接口&#xff0c;实现控制多路照明&#xff0c;通过多路控制器&#xff0c;可独立远程控制多路照明。 可选用产品&#xff1a;可根据实际场景需求&#xff0c;选择对应的规格 序号设备名称厂…
阅读更多...
springboot 图形验证码 前后端分离解决方案 easy-captcha

springboot 图形验证码 前后端分离解决方案 easy-captcha

easy-captcha介绍 easy-captcha&#xff0c;提供了Java图形验证码&#xff0c;支持gif、中文、算术等类型&#xff0c;可用于Java Web、JavaSE等项目&#xff0c;是个很好用的工具库&#xff0c;文档比较完备。 用法 添加maven依赖 <!--图形验证码--><dependency&g…
阅读更多...
像图一样交流：为大语言模型编码图

像图一样交流：为大语言模型编码图

译者 | 高永祺 单位 | 东北大学自然语言处理实验室 原文链接&#xff1a;https://blog.research.google/2024/03/talk-like-graph-encoding-graphs-for.html 1.作者介绍 Bahare Fatemi&#xff0c;谷歌蒙特利尔研究部门的研究科学家&#xff0c;专门从事图表示学习和自然语言…
阅读更多...
YOLO-Worldv2两分钟快速部署

YOLO-Worldv2两分钟快速部署

本次部署使用的框架基于ultralytics&#xff0c; 并且已经集成最新版本的YOLOv8框架&#xff1a; 一键环境配置 pip install ultralytics基础使用 训练 from ultralytics import YOLOWorld model YOLOWorld(yolov8x-worldv2.pt) results model.train(datacoco8.yaml, epo…
阅读更多...
最新文章

Copyright @ 2022~2023