【案例实战】NodeJS+Vue3+MySQL实现列表查询功能

news2024/10/7 20:28:43

这篇文章，给大家带来一个列表查询的功能，从前端到后端的一个综合案例实战。

采用vue3作为前端开发，nodejs作为后端开发。

首先我们先来看一下完成的页面效果。点击分页，可以切换到上一页、下一页。搜索框可以进行模糊查询。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

后端项目开发

好的，那么看完项目的演示，我们先来开发一下后端的逻辑。

后端需要开发的功能那个很简单，就是一个列表分页查询的接口。当然也可以用java语言去开发，我们这里就直接用nodejs作为一个后端语言去开发列表分页查询的接口。

1.创建一个后端的项目

（1）初始化项目

npm init -y

（2）下载express框架，对于express其实就是创建http服务的一款框架

cnpm i express@4.17.3 -S

（3）安装解析接收参数的中间件

cnpm i body-parser@1.19.2 -S

（4）下载跨域cors配置

cnpm i cors@2.8.5 -S

（5）创建app.js

/**
 * 统一入口
 */

//引入express，配置app
const express = require("express");
const app = express();

//配置post请求的参数解析
const bodyParser = require("body-parser");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

//配置跨域设置
const cors = require("cors");
app.use(cors());

//错误中间件配置
app.use((err, req, res, next) => {
  console.log(err);
  res.send({ code: 500, msg: err.message, data: null });
});

//启动8090端口监听的服务
app.listen(8090, () => {
  console.log("server run in http://127.0.0.1:8090");
});

控制台输入node app.js,正常运行

mac@bogon product_server % node app.js 
server run in http://127.0.0.1:8090

2.配置数据库

（1）linux部署mysql数据库

我们采用docker部署，大家可以在网上找一片博文去部署一下，这里就不再过多的去写部署步骤了。

docker run -p 3306:3306 --name mysql \
-v /usr/local/docker/mysql/conf:/etc/mysql \
-v /usr/local/docker/mysql/logs:/var/log/mysql \
-v /usr/local/docker/mysql/data:/var/lib/mysql \
-e MYSQL_ROOT_PASSWORD=123456 \
-d mysql:5.7

部署完成之后，采用可视化工具连接。

在这里插入图片描述

创建video表，脚本给大家提供好。

CREATE TABLE `video` (
  `id` int unsigned NOT NULL AUTO_INCREMENT COMMENT '课程id',
  `title` varchar(524) DEFAULT NULL COMMENT '视频标题',
  `course_img` varchar(524) DEFAULT NULL COMMENT '封面图',
  `price` varchar(11) DEFAULT NULL COMMENT '价格,分',
  `point` double(11,2) DEFAULT '8.70' COMMENT '默认8.7，最高10分',
  `level` varchar(50) CHARACTER SET utf8mb3 COLLATE utf8_general_ci DEFAULT NULL COMMENT '课程分类',
  `del` int DEFAULT '0' COMMENT '是否删除',
  `learn_num` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=19 DEFAULT CHARSET=utf8mb3;

INSERT INTO test.video
(id, title, course_img, price, `point`, `level`, del, learn_num)
VALUES(1, 'MCA高级架构师', 'https://oss-cdn.mashibing.com/default/2ac035f1b09412a514833d72bd23629b.png', '109', 9.8, '高级', 0, '8372');
INSERT INTO test.video
(id, title, course_img, price, `point`, `level`, del, learn_num)
VALUES(4, 'Java后端工程师', 'https://oss-cdn.mashibing.com/default/ff0dbc7d6077b9656e3f68f8775d80de.png', '39', 9.2, '高级', 0, '2389');
INSERT INTO test.video
(id, title, course_img, price, `point`, `level`, del, learn_num)
VALUES(5, 'Python全系列大师课', 'https://oss-cdn.mashibing.com/default/e1b96583ce902f8475d50fccd00583f3.png', '49', 9.4, '高级', 0, '1231');
INSERT INTO test.video
(id, title, course_img, price, `point`, `level`, del, learn_num)
VALUES(6, 'AIoT智能物联网 ', 'https://oss-cdn.mashibing.com/default/fdf4171e34e95446c1faaab9780a6a3c.png', '29', 9.2, '高级', 0, '12331');
INSERT INTO test.video
(id, title, course_img, price, `point`, `level`, del, learn_num)
VALUES(7, 'AI人工智能算法班', 'https://oss-cdn.mashibing.com/default/b1519e27e526abce071077a46155debe.png', '29', 9.4, '高级', 0, '43123');
INSERT INTO test.video
(id, title, course_img, price, `point`, `level`, del, learn_num)
VALUES(8, 'Python全栈工程师', 'https://ksimage-cdn.mashibing.com/ee30a77db459480ab9e9dbca4110abb7.png', '3699', 9.9, '高级', 0, '3241');
INSERT INTO test.video
(id, title, course_img, price, `point`, `level`, del, learn_num)
VALUES(9, '网络安全大师课', 'https://oss-cdn.mashibing.com/default/4839c97b8638ef5d01d55ee945f73346.png', '1699', 9.9, '高级', 0, '2371');
INSERT INTO test.video
(id, title, course_img, price, `point`, `level`, del, learn_num)
VALUES(10, 'Web前端架构师', 'https://oss-cdn.mashibing.com/default/56d51db7d4e728b4bdd826871b31fcdd.png', '129', 9.9, '高级', 0, '43983');
INSERT INTO test.video
(id, title, course_img, price, `point`, `level`, del, learn_num)
VALUES(11, '大数据架构师', 'https://oss-cdn.mashibing.com/default/89c03f0a7d557932b2c916896f840ac0.png', '158', 9.9, '高级', 0, '8372');
INSERT INTO test.video
(id, title, course_img, price, `point`, `level`, del, learn_num)
VALUES(12, '嵌入式物联网工程师', 'https://oss-cdn.mashibing.com/default/8a0d860ae085d665cba6500037a42660.png', '189', 9.9, '高级', 0, '3874');
INSERT INTO test.video
(id, title, course_img, price, `point`, `level`, del, learn_num)
VALUES(13, '云原生架构师', 'https://oss-cdn.mashibing.com/default/0b611f56605230afa78e36d3fc28d7fe.png', '98', 9.9, '高级', 0, '2321');
INSERT INTO test.video
(id, title, course_img, price, `point`, `level`, del, learn_num)
VALUES(14, 'AI人工智能零基础入门班 ', 'https://oss-cdn.mashibing.com/default/93684399167651b31ed02224cdbc6f8a.jpg', '89', 9.9, '高级', 0, '32431');
INSERT INTO test.video
(id, title, course_img, price, `point`, `level`, del, learn_num)
VALUES(15, '游戏后端架构师', 'https://ksimage-cdn.mashibing.com/c6726d23750140fa9fb917172462e427.png', '99', 9.9, '高级', 0, '23543');
INSERT INTO test.video
(id, title, course_img, price, `point`, `level`, del, learn_num)
VALUES(16, 'C++ 软件开发工程师', 'https://oss-cdn.mashibing.com/default/f2fd73a74fa6465e3feaf41bb756457a.png', '1699', 9.9, '高级', 0, '12332');
INSERT INTO test.video
(id, title, course_img, price, `point`, `level`, del, learn_num)
VALUES(17, '数据分析全岗位实战班', 'https://oss-cdn.mashibing.com/default/440538433aa74ede1fbfe2945ec060c7.jpg', '68', 9.9, '高级', 0, '12343');
INSERT INTO test.video
(id, title, course_img, price, `point`, `level`, del, learn_num)
VALUES(18, '大厂算法特训班 ', 'https://oss-cdn.mashibing.com/default/412befe796fed3a83d695185001944fb.jpg', '79', 9.2, '高级', 0, '2341');

（3）下载mysql的依赖

cnpm i mysql@2.18.1 -S

（4）配置数据库连接

//引入mysql配置
const mysql = require('mysql');
//创建db实例
const db = mysql.createPool({
  host: '192.168.140.134',
  user: 'root',
  password: '123456',
  database: 'test',
});
//导出
module.exports = db;

3.编写课程查询接口

（1）创建course_controller.js

//引入db配置
const db = require("../config/db_config");

exports.page = (req, res) => {
  //获取前端的参数
  let { title, page, size } = req.query;
  page = (page - 1) * size;

  if (title.length == 0) {
    title = "";
  } else {
    title = `and title like '%${title}%'`;
  }
  //查询课程列表sql
  const pageSql = `select * from video where del=0 ${title} order by id limit ${page},${size}`;
  //查询课程总数的sql
  const totalSql = `select count(*) as total from video where del=0 ${title}`;

  db.query(pageSql, (err, pageData) => {
    if (err) {
      throw new Error(err.message);
    }
    db.query(totalSql, (err, count) => {
      if (err) {
        throw new Error(err.message);
      }
      res.send({
        code: 200,
        msg: "",
        data: {
          data: pageData,
          total: count[0].total,
          pages:0
        },
      });
    });
  });
};

（2）创建router下的course.js

const express = require('express');
const router = express.Router();
const course_controller = require("../controller/course_controller");
//查询视频列表
router.get("/api/v1/page", course_controller.page);
//导出路由
module.exports = router;

（3）app.js配置路由

//配置路由
const productRouter = require("./router/course.js");
app.use("/course", productRouter);

整体的目录结构：

在这里插入图片描述

（4）访问接口测试

http://127.0.0.1:8090/course/api/v1/page?page=1&size=10&title

在这里插入图片描述

前端项目开发

前端采用vue3+elementUI开发。

1.前端项目搭建

（1）安装脚手架vue/cli

npm install -g @vue/cli@5.0.4

（2）下载elementUI组件

cnpm install element-plus@2.1.11 -S
cnpm install -D unplugin-vue-components@0 unplugin-auto-import@0

（3）安装less预处理器

cnpm i less@4.1.2 less-loader@7 -S

（4）搭建前端项目

vue create product_web

（5）配置vue.config.js

const { defineConfig } = require('@vue/cli-service');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, //关闭ESlint校验
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
});

（6）编写公共样式

html,
body {
  padding: 0;
  margin: 0;
  background-color: #f5f5f5;
}
html,
body,
#app {
  height: 100%;
}

input {
  border: none;
  outline: none;
}
button {
  border: none;
  outline: none;
}
a {
  text-decoration: none;
  color: #333;
}
li {
  list-style-type: none;
}

（7）安装路由插件

cnpm i vue-router@4.0.14 -S

（8）element-plus图标自动引入配置，公共样式引入，以及路由引入

import { createApp } from 'vue'
import App from './App.vue'
import './common/base.css';
import * as elementIcons from '@element-plus/icons-vue';
import router from './router/index';

const app = createApp(App);
for (let iconName in elementIcons) {
  app.component(iconName, elementIcons[iconName]);
}
app.use(router).mount('#app');

（9）创建路由文件

import { createRouter, createWebHashHistory } from "vue-router";

//路由配置
const router = createRouter({
  history: createWebHashHistory(), //选择hash路由
  routes: [
    {
      path: "/",
      redirect: "/home",
    },
    {
      path: "/home",
      component: () => import("../views/Home"),
    }
  ],
});
export default router;

（10）创建views文件夹，创建Home.vue文件

在这里插入图片描述

先保证项目不报错。

2.编写列表页面

（1）首先编写Home.vue文件,这里涉及接口的调用下面我们在编写这个接口的请求

<template>
  <div class="main">
    <el-form>
      <el-form-item>
        <el-input v-model.trim="inputValue" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-button type="primary" @click="handleClick">查询</el-button>
    </el-form>
    <Table :list="data.list" />
    <Pagination :currentChange="currentChange"></Pagination>
  </div>
</template>
<script setup>
import Table from "./components/Table.vue";
import Pagination from "./components/Pagination.vue";
import { reactive, ref,onMounted } from "vue";
import { getCourse } from "../api/index";
/**
 * 初始化的数据
 */
const data = reactive({
  list: [],
  page: 1, //默认展示第一页
  total: 5, //课程总数
});

//onMounted首次加载调用一次接口
onMounted(() => {
  getCourseData();
});

/**
 * 课程列表数据获取和课程类目切换逻辑
 */
const getCourseData = async (query) => {
  const title = query?.title || "";
  const page = query?.page || 1;
  const size = query?.size || 5;
  const res = await getCourse({ title, page, size });
  //筛选符合分类的课程
  data.list = res?.data.data.data;
  data.total = res?.data.data.total;
};

/**
 * 分页的逻辑
 */
const currentChange = (val) => {
  if (val === "pre") {
    if (data.page > 1) {
      data.page--;
    } else {
      ElMessage({
        message: "已经是第一页了！！！",
        type: "warning",
        showClose: true,
      });
    }
  }
  if (val === "next") {
    if (data.page < Math.ceil(data.total / 5)) {
      data.page++;
    } else {
      ElMessage({
        message: "已经是最后一页了！！！",
        type: "warning",
        showClose: true,
      });
    }
  }

  //请求课程的接口
  getCourseData({ title: data.title, page: data.page });
};

/**
 * 搜索框的逻辑
 */
const inputValue = ref("");

//搜索的按钮
const handleClick = () => {
  getCourseData({ title: inputValue.value });
  ElMessage({
    message: "查询成功",
    type: "success",
  });
};
</script>
<style lang="less" scoped>
.el-form {
  display: flex;
}

.main {
  background-color: #fff;
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  .input-with-select {
    width: 400px;
    margin-bottom: 40px;
  }
}

:deep(.el-table__header-wrapper) {
  position: fixed;
  z-index: 20;
}

:deep(.el-table__inner-wrapper) {
  overflow: hidden;
}

:deep(.el-table__body-wrapper) {
  margin-top: 40px;
}

:deep(.el-input__inner) {
  width: 300px;
  margin-right: 10px;
}

:deep(.warning-row) {
  --el-table-tr-bg-color: var(--el-color-warning-light-9) !important;
  height: 140px !important;
}

.table {
  height: 80vh;
  width: 98vw;
  overflow: hidden;
  overflow-y: scroll;
  text-align: center;
}

.table::-webkit-scrollbar {
  display: none;
}
</style>

这里面有两个组件需要创建一下

Pagination.vue

<template>
  <div class="pagination">
    <div class="pre" @click="currentChange('pre')">上一页</div>
    <div class="next" @click="currentChange('next')">下一页</div>
  </div>
</template>
<script setup>
import { defineProps } from 'vue';
const { currentChange } = defineProps(['currentChange'])
</script>
<style lang='less' scoped>
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  color: #fff;

  .pre {
    background-color: #409eff;
    margin-right: 10px;
    padding: 5px;
    cursor:pointer;
  }

  .next {
    padding: 5px;
    background-color: #409eff;
    cursor:pointer;
  }
}
</style>

Table.vue

<template>
    <div class="table">
      <el-table :data="list">
        <el-table-column prop="course_img" label="图片">
          <template #default="scope">
            <img :src="scope.row.course_img" class="courseImg-img">
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题">
        </el-table-column>
        <el-table-column prop="price" label="价格">
        </el-table-column>
        <el-table-column prop="point" label="评分">
        </el-table-column>
        <el-table-column prop="level" label="级别">
        </el-table-column>
        <el-table-column prop="learn_num" label="学习人数">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary">
              编辑
            </el-button>
            <el-popconfirm title="确定要删除该课程吗?">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  <script setup>
  import { defineProps } from 'vue';
  const { list } = defineProps(['list'])
  
  </script>
  <style lang='less' scoped>
  .courseImg-img {
    width: 150px;
    height: 100px;
  }
  </style>

3.创建接口请求

（1）创建request.js

import axios from 'axios';
/**
 * 创建axios实例
 */
const ENV = process.env.NODE_ENV;
const host =
  ENV === 'development' ? 'http://127.0.0.1:8090' : 'http://192.168.140.134:8090';
const service = axios.create({
  baseURL: host,
  timeout: '3000',
});

/**
 * 封装请求函数
 */
const request = (options) => {
  if (options.method === 'get') {
    options.params = options.data;
  }
  return service(options);
};

export default request;

（2）创建api中index.js

import request from '../utils/request';

/**
 * 课程列表数据接口
 */
export const getCourse = (data) => {
  return request({ method: 'get', url: '/course/api/v1/page', data });
};

4.启动项目

npm run serve

在这里插入图片描述

当问页面

在这里插入图片描述

Ok,完成。源代码博主放在主页的资源上了，需要的可以下载哦，记得给博主三连啊！

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

17.基干模型Swin-Transformer解读

17.基干模型Swin-Transformer解读

文章目录 SWin-Transformer解读1.基础介绍关于Shifted Window based Self-Attention相对位置偏置网络整体结构和层级特征欢迎访问个人网络日志🌹🌹知行空间🌹🌹 SWin-Transformer解读 1.基础介绍 Swin-Transformer是2021年03月微软亚洲研究院提交的论文中提出的，比V…
阅读更多...
【Linux】常见指令以及具体其使用场景

【Linux】常见指令以及具体其使用场景

君兮_的个人主页 即使走的再远&#xff0c;也勿忘启程时的初心 C/C 游戏开发 Hello,米娜桑们&#xff0c;这里是君兮_&#xff0c;随着博主的学习&#xff0c;博主掌握的技能也越来越多&#xff0c;今天又根据最近的学习开设一个新的专栏——Linux&#xff0c;相信Linux操作系…
阅读更多...
毛发渲染方案实现

毛发渲染方案实现

一、毛发材质概述 以前毛发只能用离线来做 现在实时毛发逐渐可能。长毛渲染和短毛渲染采用的是不同的方案。 二、长毛类制作分析 各向异性 kajiya算法 # 三、短毛类制作分析 四、制作心得及技巧
阅读更多...
Ansible中的playbook

Ansible中的playbook

目录 一、playbook简介 二、playbook的语法 三、playbook的核心组件 四、playbook的执行命令 五、vim 设定技巧 六、基本示例 一、playbook简介 1、playbook与ad-hoc相比&#xff0c;是一种完全不同的运用。 2、playbook是一种简单的配置管理系统与多机器部署系统的基础…
阅读更多...
阿里云Apsara云栖大会2023

阿里云Apsara云栖大会2023

文章目录 2023/10/312023/11/012023/11/02彩蛋1&#xff1a;神州十六号彩蛋2&#xff1a;emm… 计算&#xff0c;为了无法计算的价值。 2023/10/31 合规性评审 2023/11/01 暂未开始 2023/11/02 暂未开始 彩蛋1&#xff1a;神州十六号 彩蛋2&#xff1a;emm…
阅读更多...
Linux系统jdkTomcatMySQL安装以及J2EE后端接口部署

Linux系统jdkTomcatMySQL安装以及J2EE后端接口部署

目录 一、jdk&Tomcat安装 1.1 上传安装包到服务器 1.2 解压对应工具包 1.3 配置环境变量并测试jdk安装 1.4 启动tomcat 1.5 防火墙设置 1.5.1 开启/关闭防火墙以及防火墙状态查看 1.5.2 开放防火墙端口 二、MySQL安装 2.1 卸载mariadb 2.2 在线下载MySQL安装包(…
阅读更多...
全方位 Linux 性能调优经验总结

全方位 Linux 性能调优经验总结

Part1Linux性能优化 1性能优化 性能指标 高并发和响应快对应着性能优化的两个核心指标&#xff1a;吞吐和延时 图片来自: www.ctq6.cn 应用负载角度&#xff1a;直接影响了产品终端的用户体验系统资源角度&#xff1a;资源使用率、饱和度等 性能问题的本质就是系统资源已经…
阅读更多...
AI：46-基于深度学习的垃圾邮件识别

AI：46-基于深度学习的垃圾邮件识别

🚀 本文选自专栏：AI领域专栏 从基础到实践，深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家，通过案例和项目实践，掌握核心概念和实用技能。每篇案例都包含代码实例，详细讲解供大家学习。 📌📌📌本专栏包含以下学习方向： 机器学习、深度学…
阅读更多...
libpcap获取数据包

libpcap获取数据包

一、用户空间 以Linux以及TPACKET_V3为例。 调用pcap_dispatch获取数据包&#xff0c;然后回调用户传递的数据包处理函数。 read_op实际调用的是pcap_read_linux_mmap_v3 // pcap.c int pcap_dispatch(pcap_t *p, int cnt, pcap_handler callback, u_char *user) {return (p-…
阅读更多...
2023年【R1快开门式压力容器操作】考试题及R1快开门式压力容器操作模拟考试

2023年【R1快开门式压力容器操作】考试题及R1快开门式压力容器操作模拟考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 R1快开门式压力容器操作考试题是安全生产模拟考试一点通生成的&#xff0c;R1快开门式压力容器操作证模拟考试题库是根据R1快开门式压力容器操作最新版教材汇编出R1快开门式压力容器操作仿真模拟考试。2023年【R1快开…
阅读更多...
什么是AUTOSAR ComStack，AUTOSAR架构中，CAN通信堆栈CAN Communication Stack介绍

什么是AUTOSAR ComStack，AUTOSAR架构中，CAN通信堆栈CAN Communication Stack介绍

AUTOSAR&#xff08;Automotive Open System Architecture&#xff09;ComStack指的是AUTOSAR架构中的通信堆栈。在AUTOSAR体系结构中&#xff0c;ComStack是指用于不同软件组件&#xff08;如应用软件、基础软件等&#xff09;之间进行通信的一组协议和服务。 在AUTOSAR架构中…
阅读更多...
对于SOCKET套接字问题的若干认识

对于SOCKET套接字问题的若干认识

1. 首先大家应该知道Socket 编程吧 Socket套接字 分为 应用层套接字 数据链路层套接字&#xff08;也就是原始socket&#xff09; 1.流套接字(SOCK_STREAM) 流套接字用于提供面向连接、可靠的数据传输服务。该服务将保证数据能够实现无差错、无重复送&#xff0c;并按顺序接…
阅读更多...
精通Nginx（02）-Nginx安装

精通Nginx（02）-Nginx安装

本文主要讲述Nginx在Linux下的yum安装方式。 Yum安装一般用root模式。 安装方式 在Linux下&#xff0c;Nginx安装有源码编译安装和yum(不同OS可能命令名字不一样)直接安装两种方式。两种方式优缺点如下&#xff1a; 源码编译安装 优点&#xff1a;灵活性高定制性强&#xff…
阅读更多...
【Spring MVC】传递参数

【Spring MVC】传递参数

前言&#xff1a; 访问不同路径就是在发送不同的请求&#xff0c;在发送请求时&#xff0c;可能会带有一些参数&#xff0c;所以Spring的请求主要是为了学习如何传递参数到后端以及后端如何接收。 在SpringMVC中使用RequestMapping来实现路由映射&#xff0c;也就是浏览器连接…
阅读更多...
5G物联网关相较有线网关有哪些独特优势

5G物联网关相较有线网关有哪些独特优势

5G为产业物联网应用带来了质的飞跃&#xff0c;5G技术实现更高速率、更低延迟和更大带宽&#xff0c;使得物联网能够接入更多数量的设备&#xff0c;实现更稳定、高效的连接和数据传输&#xff0c;在提高生产效率的同时&#xff0c;也进一步促进了物联网的应用发展和升级。 针对…
阅读更多...
预约上门洗衣店洗鞋店管理软件；

预约上门洗衣店洗鞋店管理软件；

洗衣店洗鞋店管理软件&#xff1b; 软件操作简单&#xff0c;专业管理进货、库存、销售、会员、利润统计和导购员提成。前台扫描销售和会员打折&#xff0c;会员充值消费&#xff0c;支持扫码支付&#xff0c;结账自动打印小票。手机可以查询库存和营业情况&#xff01; 干洗店…
阅读更多...
PHP连接SQLServer echo输出中文汉字显示乱码解决方法

PHP连接SQLServer echo输出中文汉字显示乱码解决方法

1、查询结果有中文会显示乱码。 解决方法一&#xff08;较简单&#xff0c;建议使用&#xff09;&#xff1a; 在php文件最开头写上&#xff1a; header(Content-type: text/html; charsetUTF8); // UTF8不行改成GBK试试&#xff0c;与你保存的格式匹配 <?php header(&q…
阅读更多...
RecyclerView自定义LayoutManager从0到1实践

RecyclerView自定义LayoutManager从0到1实践

此前大部分涉及到 RecyclerView 页面的 LayoutManager基本上用系统提供的 LinearLayoutManager 、GridLayoutManager 就能解决&#xff0c;但在一些特殊场景上还是需要我们自定义 LayoutManager。之前基本上没有自己写过&#xff0c;在网上看各种源码各种文章&#xff0c;刚开始…
阅读更多...
[MySQL]索引

[MySQL]索引

目录 概念解释 作用/优点 缺点 适用场景 索引的创建,删除与查看 系统对索引的自动创建 索引建立的时机 索引存储的数据结构 选择B树的原因 B树的原理 查询流程 优点 B树 与B树的区别 优点 概念解释 索引就像是一本字典的目录,我们可以根据目录快速定位到我们想…
阅读更多...
Java架构师前沿技术

Java架构师前沿技术

目录 1 导学2 信息物理系统2.1CPS的体系架构2.2 CPS的技术体系3 人工智能4 机器人5 边缘计算6 数字李生体7 云计算7.1 云计算的部署模式8 大数据想学习架构师构建流程请跳转：Java架构师系统架构设计 1 导学 2 信息物理系统 信息物理系统(CPS)是控制系统、嵌入式系统的扩展与…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023