Vue+Echarts 项目演练(中)后台数据接口的创建

news/2024/3/29 21:14:27/文章来源:https://blog.csdn.net/dafsq/article/details/130335243

全局引用Echarts与axios

后台接口创建express路由

api接口数据创建

全局引用Echartsaxios

        vue3.0的挂载方式:使用Provide/Inject依赖注入,将替代vue2中在原型链上挂载一些属性在app.vue中使用provider来给后代们提供数据

<script>
import { provide } from "vue"; //导入vue解构出Provider
import * as echarts from "echarts"; //引入echartsexport default {setup(){//启动方法//provider("名字","传递的内容")provide("echarts",echarts) }
}
</script>

         在主页面中使用接受函数

import {inject} from "vue"; //引入inject接受数据
export default {setup(){//启动方法//inject("名字")let $echarts = inject("echarts")console.log($echarts)//查看打印所有属性inject()},
}

         查看输出的$echarts的所有属性

        axios使用于上面相同方式

        axios的下载:npm install --save axios

         注入axios

<script>
import { provide } from "vue"; //导入vue解构出Provider
import * as echarts from "echarts"; //引入echarts
import * as axios from "axios";export default {setup(){//启动方法//provider("名字","传递的内容")provide("echarts",echarts) provide("axios",axios)}
}
</script>

         主页面定义变量接收

let $http = inject("axios")

        查看输出的$http的所有属性

 后台接口创建express路由

        创建目录server 在目录下创建index文件与router文件夹

         新建对应路由,在fouter文件夹下创建对应的四个路由文件

         安装express:npm install --save express

         对四个路由文件进行设置

const express = require("express"); //引用
const router = express.Router(); //实现路由并存放//设置路由
//router.get("路由地址",路由函数)
router.get("/data",(req,res) => { //req 请求,res 响应res.send({msg:"我是one的响应路由地址"})
}) //暴露
module.exports = router;

         在index.js文件中创建路由合并和http服务

const express = require("express"); //引用
const app = express(); //创建express对象//引用路由文件
let chart1 = require("./router/one.js");
let chart2 = require("./router/two.js");
let chart3 = require("./router/three.js");
let chart4 = require("./router/four.js");//使用路由:使用中间见来配置路由
app.use("/one",chart1)
app.use("/two",chart2)
app.use("/three",chart3)
app.use("/four",chart4)//监听端口
app.listen(3000) //端口号自己可以随便设置

         在命令提示符中测试:node index.js

        在端口页面中查看

 api接口数据创建

        在server目录下创建datas目录并放取4个json数据文件

 one.json:

{"chartData":[{"title":"冰箱","num":1827},{"title":"洗衣机","num":342},{"title":"电视机","num":541},{"title":"微波炉","num":1347},{"title":"烤箱","num":2431},{"title":"空调","num":876},{"title":"洗碗机","num":1578}]
}

two.json:

{"chartData":{"day":["星期1","星期2","星期3","星期4","星期5","星期6","星期7"],"num":{"Clothes":[140, 232, 101, 264, 90, 340, 250],"digit":[120, 282, 111, 234, 220, 340, 310],"Electrical":[320, 132, 201, 334, 190, 130, 220],"gear":[220, 402, 231, 134, 190, 230, 120],"Chemicals":[220, 302, 181, 234, 210, 290, 150]}}
}

three.json:

{"chartData":[{ "value": 567, "name":"服饰" },{ "value": 123, "name":"数码" },{ "value": 324, "name":"家电" },{ "value": 89, "name":"家居" },{ "value": 453, "name":"日化" },{ "value": 767, "name":"熟食" }]
}

four.json:

{"chartData":{"day":["星期1","星期2","星期3","星期4","星期5","星期6","星期7"],"num":{"Clothes":[320, 502, 401, 334, 390, 430, 720],"digit":[234, 564, 443, 234, 754, 430, 321],"Electrical":[220, 321, 335, 534, 390, 330, 310],"gear":[269, 212, 491, 368, 341, 330, 410],"Chemicals": [820, 832, 901, 934, 1290, 1330, 1320]}}
}

         对四处文件进行引用并且把数据返回给前台

const express = require("express"); //引用
const router = express.Router(); //实现路由并存放let oneData = require("../datas/one.json") //数据引用到前台
//设置路由
//router.get("路由地址",路由函数)
router.get("/data",(req,res) => { //req 请求,res 响应res.send({msg:"我是one的响应路由地址",chartData1:oneData})
}) //暴露
module.exports = router;

        重启端口服务 访问页面中查看

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

经典数据结构之2-3树

2-3树定义 2-3树&#xff0c;是最简单的B-树&#xff0c;其中2、3主要体现在每个非叶子节点都有2个或3个子节点&#xff0c;B-树即是平衡树&#xff0c;平衡树是为了解决不平衡树查询效率问题&#xff0c;常见的二叉平衡书有AVL树&#xff0c;它虽然提高了查询效率&#xff0c…

深入JVM了解Java对象实例化过程

文章目录 一、对象创建方式二、对象产生步骤1、判断对象是否已经加载、链接、初始化2、为对象分配内存空间3、处理并发问题3.1 TLAB 4、初始化零值5、完善对象内存布局的信息6、调用对象的实例化方法 <init>7、总结 三、对象的内存布局1、对象头1.1 运行时元数据&#xf…

详解树与二叉树的概念,结构,及实现(上篇)

目录 一&#xff0c; 树 1.2 树的相关概念 1.3 树的表示 1.4 树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; 二&#xff0c; 二叉树 2.1二叉树概念 三&#xff0c;特殊的二叉树 1. 满二叉树 2. 完全二叉树 3. 1 二叉树的性质 3. 2 二叉树的存储…

【速卖通】 AliExpress(速卖通)关键词搜索结果采集

采集场景 在AliExpress(速卖通) 首页中 http://www.aliexpress.com 中输入关键词&#xff0c;采集关键词搜索后得到的商品列表信息。 采集字段 关键词、标题、商品id、商品图片地址、商品详情链接、价格、免费退送货、星级、已出售数量、店铺名 采集结果 采集结果可导出为E…

Linux-初学者系列——篇幅7_文本编辑和处理命令

文本编辑和处理命令-目录 一、系统基本编辑命令安装vim软件工具包语法格式&#xff1a; 1、vim编辑命令模式01 普通模式02 编辑模式03 命令模式 2、编辑文件技巧01 批量删除多行指定信息02 批量增加多列指定信息03 编辑常见问题错误1&#xff1a;没有指定编辑信息错误2&#xf…

基于TensorRT的yolov5 实例分割部署

yolov5-7.0 github: https://github.com/ultralytics/yolov5/tree/master 1. 代码的使用 1.1 训练yolov5-seg模型 使用的yolov5-7.0的代码,github下载:https://github.com/ultralytics/yolov5/releases/tag/v7.0 训练指令 python segment/train.py --data coco128-seg.y…

centos7 查看服务器配置信息

1.linux查看版本当前操作系统发行信息 cat /etc/centos-release cat /etc/centos-release 2、查看内核版本uname -a或者cat /proc/version 3、查看CPU参数 1&#xff09;、查看 CPU 物理个数   grep physical id /proc/cpuinfo | sort -u | wc -l 2&#xff09;、查看 CPU …

SpringCloud:ElasticSearch之DSL查询文档

elasticsearch的查询依然是基于JSON风格的DSL来实现的。 1.1.DSL查询分类 Elasticsearch提供了基于JSON的DSL&#xff08;Domain Specific Language&#xff09;来定义查询。常见的查询类型包括&#xff1a; 查询所有&#xff1a;查询出所有数据&#xff0c;一般测试用。例如…

magento webapi 接口返回 json对象

前言 现在主流的项目开发都是前后端分离&#xff0c;数据通过json对象格式进行传输。但是magento框架&#xff0c;和传统PHP框架相比&#xff0c;区别很大。虽然也支持以RestApi的形式传输数据&#xff0c;但是要么格式并非是传统jsonObject要么就是需要大量的get、set方法。本…

关于xilinx使用PCIE实现FPGA的部分重配置实现(MCAP)

平台&#xff1a;vivado21018.3 芯片&#xff1a;xcku115-flva1517-2-i (active) 本文官方文档&#xff1a;Xilinx_Answer_64761_Ultrascale_Devices 本文驱动下载地址&#xff1a;64761 - Bitstream Loading across the PCI Express Link in UltraScale and UltraScale Dev…

JAVA——线程池

目录 一、线程池的概念 二、Java标准库中的线程池 三、ThreadPoolExecutor 类的参数 四、线程池的拒绝策略 五、模拟实现线程池 一、线程池的概念 线程池顾名思义就是集中存储线程的地方——联想一下水池。 线程池是一种多线程处理形式&#xff0c;处理过程中将任务添加到…

Ext4日志优化-iJournaling

背景 这几年随着SSD等高性能介质的普及&#xff0c;及其在大规模分布式存储系统上的应用。基于Append only的日志写入技术也应用得越来越多&#xff0c;这几天刚好有空&#xff0c;重读了Ext4文件系统的日志部分的内容&#xff0c;也正好看到一篇对Ext4日志技术进行优化的论文…

《编码——隐藏在计算机软硬件背后的语言》精炼——第11章(门)

“The only source of knowledge is experience.” - Albert Einstein 引言 编码是一种处理并表达信息的方式&#xff0c;它包括摩斯电码、盲文、二进制语言等等&#xff0c;当然作为计算机类的经典书籍&#xff0c;这本书简述了计算机中以二进制数为基础的编码方式&#xff0…

nginx简单介绍

文章目录 1. 下载并解压2. 80端口被占用&#xff0c;更改nginx默认的监听端口3. 访问nginx4. 在linux上安装nginx5. nginx常用命令6. nginx.conf 1. 下载并解压 官网下载 2. 80端口被占用&#xff0c;更改nginx默认的监听端口 更改conf/nginx.conf文件 3. 访问nginx ht…

【Linux】popen pclose接口介绍

本篇文章简单讲述了c语言接口popen/pclose的用法 1.函数作用 函数定义如下 #include <stdio.h>FILE *popen(const char *command, const char *type); int pclose(FILE *stream);1.1 popen popen函数会创建一个管道&#xff0c;fork后调用shell来打开进程。由于管道的…

射频封装技术:层压基板和无源器件集成

射频和无线产品领域可以使用非常广泛的封装载体技术&#xff0c;它们包括引线框架、层压基板、低温共烧陶瓷&#xff08;LTCC&#xff09;和硅底板载体&#xff08;Si Backplane&#xff09;。由于不断增加的功能对集成度有了更高要求&#xff0c;市场对系统级封装方法&#xf…

Qt 项目Mingw编译器转换为VS编译器时的错误及解决办法

错误 在mingw生成的项目&#xff0c;转换为VS编译器时通常会报些以下错误&#xff08;C4819警告&#xff0c;C2001错误&#xff0c;C2143错误&#xff09; 原因及解决方式 这一般是由于字符编码引起的&#xff0c;在源代码文件中包含了中文字符导致的。Qt Creator 生成的代码文…

iptables防火墙和Firewalld

引言 在 Internet 中&#xff0c;企业通过各种应用系统来为用户提供各种服务&#xff0c;如 Web 网站、电子邮件系统、FTP 服务器、数据库系统等&#xff0c;那么&#xff0c;如何来保护这些服务器&#xff0c;过滤企业不需要的访问甚至是恶意的入侵呢&#xff0c;接下来&#…

【Linux】生产者消费者模型——环形队列RingQueue(信号量)

文章目录 铺垫信号量信号量概念信号量PV操作信号量基本接口 环形队列的生产消费模型引入环形队列访问环形队列代码实现代码改造多生产者多消费者代码 总结 铺垫 之前写的代码是存在不足的地方的&#xff1a; 我们使用线程操作临界资源的时候要先去判断临界资源是否满足条件&am…

最新动态 | 大势智慧参加广东省应急测绘保障与安全生产演练

4月20日&#xff0c;2023年度广东省应急测绘保障与安全生产演练在台山市赤溪镇鱼塘湾举行。本次演练由广东自然资源厅主办&#xff0c;广东省国土资源测绘院、江门市自然资源局和台山市人民政府承办。在省市各指导单位与参演单位的多方协同与指挥下&#xff0c;应急测绘保障与安…