Bootstrap

五、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;
      }
    };

如图

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
第12章 Docker应用实战-Docker部署RabbitMq
分享一个程序猿的真实的爱情故事
Linux中的close函数
数据结构——二叉树的基本概念及顺序存储（堆）
vue elementyUI table ：点击一行时选中这一行对应的复选框
flutter 自定义键盘_Flutter 引擎架构
4 C 语言变量、printf 基本输出、scanf 基本输入、关键字、标识符及其命名规则
【Linux】基本指令1
数学建模算法笔记（2）——主成分分析
MySQL入门-1.mysql服务启动的基础命令
;