大屏开源项目go-view二次开发1----环境搭建(C#)

        最近公司要求做一个大屏的程序用于展示公司的产品,我以前也没有相关的经验,最糟糕的是公司没有UI设计的人员,领导就一句话要展示公司的产品,具体展示的内容细节也不知道,全凭借自己发挥。刚开始做时是用wpf做的,wpf调样式非常耗时耗力,做到半成品时给领导看,领导他瞄的说不好看,展示的内容也不行,后面拉了一个群,让其它产品经理提提意见,有一个产品经理不知从哪里找了一张样例图,有些内容可以借用,但有些又得自己想,让我照着这个样例做。我看了一下,他喵的内容和样式全换了,前面做的wpf全白做了。最后决定弃用wpf,改用做网页版的,最好是能拖拉拽控件的,后面谁再说不好看,直接丢给他设计。

        后面查阅资料,发现码云上找到了go-view这个开源项目,下载链接:go-view: 🏆GoView 是一个Vue3搭建的低代码数据可视化开发平台,将图表或页面元素封装为基础组件,无需编写代码即可完成业务需求。 它的技术栈为:Vue3 + TypeScript4 + Vite2 + NaiveUI + ECharts5 + Axios + Pinia2 + PlopJS

下载master-fetch-dev分支

个人建议还是下载我提供的资源张祥裕/分享的资源名称 - Gitee.com,和我的版本保持一致,里面已经包含go-view前端代码,C#后端代码以及node.js安装包(vue这玩意是真的坑,node的版本高了不行,低了也不行)、.net core安装包等,如下图:

.net 6的sdk安装包太大了,gitee不允许上传,需要到这里下载:

下载 .NET 6.0 (Linux、macOS 和 Windows)

本文测试环境:

win11

vscode(可选)

visudio studio 2022

测试步骤如下:

1  安装node-v20.18.1-x64.msi安装包,也可以从这里下载:

Node.js — Download Node.js®

2  cmd进入go-view目录

2.1  先设置npm源(如果以前设置过,那这一步是可选操作),要设置最新并可用的npm源哈,本文测试时,下面的源还是可以用的

npm config set registry https://registry.npmmirror.com

2.2  接着输入: npm i  安装所有的依赖包,运气好的话,可以一次就好,运气不好只能自己百度了

2.3  输入:npm run dev 运行,接着自动会打开浏览器, 看到以下输出,就代表成功了

2.4 当项目开发完成后,需要运行 npm run build进行构建输出,用我提供的go-view源码就不会报错,但如果是从gitee上下载的话,则会报如下错误:

node_modules/@types/lodash/common/object.d.ts:1026:46 - error TS1005: '?' expected

gitee上的issue已经给出了答案

dev 正常 , build 报错, 尝试了各种版本 · Issue #IAM5JV · dromara/go-view - Gitee.com

只需要把vite.config.ts配置文件中的es2015修改为es2020即可,如下图:

3  在.env配置文件中配置C#后端的api接口地址:

由于每次更换后端api的地址,都得npm run build重新构建,比较麻烦,所以我直接把前端和后端都部署在同一台机器上,并axios.ts增加了如下的代码,直接获取到本机的ip,再把后端的接口和端口及后缀拼接起来,如果你的C#和前端不是部署在同一台机器,下面的代码一定要去掉

4   C#后端部分

4.1 安装.net 6的sdk

4.2 使用vs2022打开GoViewServer.sln后端代码,生成即可,然后把go-view-server\GoViewServer.Web.Entry目录下的server.db复制到go-view-server\GoViewServer.Web.Entry\bin\Debug\net6.0目录下

4.3  把go-view-server\GoViewServer.Application\Configs目录下的配置文件APP.json中的ip地址修改为程序最终部署在那台机器上的ip地址,注意是ip地址(不是localhost),我在本机测试就填了localhost,如下图,因为前端使用的背景图需要用到这个ip地址来上传背景图,配置不对,则前端的背景图显示不正常

4.4 运行:go-view-server\GoViewServer.Web.Entry\bin\Debug\net6.0下的GoViewServer.Web.Entry.exe,没有报错即成功了,如下图:

5 接着就可以在前端登录了,如下图:

好了,本文的内容到此结束

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

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

相关文章

WHLUG丨deepin、华中科技大学开放原子开源俱乐部、 RustSBI 和清华大学开源操作系统训练营共话开源新生代成长之路

2024年11月30日下午,由 deepin(深度)社区联合华中科技大学开放原子开源俱乐部、 RustSBI 开源社区和清华大学开源操作系统训练营共同举办的WHLUG(武汉Linux用户组)线下沙龙在华中科技大学成功举办。 本次活动聚集了50余…

操作系统的基本认识

操作系统的感性认识 操作系统这个词可能或多或少听说过,比如windows, linux, macOS。这些其实都是工程师们经过实践后的具象化产物。而操作系统原理这六个字就是操作系统的抽象化,更准确的说,操作系统原理是很理论化的东西。举一个不是很恰当…

强化学习Q-learning及其在机器人路径规划系统中的应用研究,matlab代码

一、Q-learning 算法概述 Q-learning 是一种无模型的强化学习算法,它允许智能体(agent)在没有环境模型的情况下通过与环境的交互来学习最优策略。Q-learning的核心是学习一个动作价值函数(Q-function),该函…

微信小程序横屏页面跳转后,自定义navbar样式跑了?

文章目录 问题原因:解决方案: 今天刚遇到的问题,横屏的页面完成操作后跳转页面后,自定义的tabbar样式乱了,跑到最顶了,真机调试后发现navbar跑到手机状态栏了,它正常应该跟右边胶囊一行。 知道问…

分布式 Paxos算法 总结

前言 相关系列 《分布式 & 目录》《分布式 & Paxos算法 & 总结》《分布式 & Paxos算法 & 问题》 参考文献 《图解超难理解的 Paxos 算法(含伪代码)》《【超详细】分布式一致性协议 - Paxos》 Basic-Paxos 基础帕克索斯算法…

10.qml使用 shadereffect 实现高斯模糊

目录 高斯模糊sigma获取加权均值获取 高斯二维公式实现高斯一维公式实现使用总结 高斯模糊 高斯模糊应用领域我就不过多讲解,想了解自己去了解 高斯模糊有 一维公式 二维公式 当然我们图像是二维的 但是实际上二维公式用于计算那是消耗大量的算力的&#xff0c…

从 CephFS 到 JuiceFS:同程旅游亿级文件存储平台构建之路

随着公司业务的快速发展,同程旅行的非结构化的数据突破 10 亿,在 2022 年,同程首先完成了对象存储服务的建设。当时,分布式文件系统方面,同程使用的是 CephFS,随着数据量的持续增长,CephFS 的高…

相机测距原理

基础概念的回顾 焦距的定义 焦距是指透镜或镜头的光学中心(通常是透镜的几何中心)到其焦点的距离。 焦点是光线的交点,它指的是透镜或镜头聚焦所有入射光线后汇聚的位置。焦点的位置与透镜的曲率和光线的入射角度相关。就是说所有光线经过…

AOF和RDB【Redis持久化篇】

文章目录 1.什么是持久化?2.RDB3.AOF 1.什么是持久化? Redis是跑在内存里的,当程序重启或者服务器崩溃,数据就会丢失,如果业务场景希望重启之后数据还在,就需要持久化,即把数据保存到可永久保存…

2024-12-14 学习人工智能的Day35 卷积神经网络.阶段项目

卷积神经网络项目实现 关于项目实现的文档说明书,三个要素:数据、模型、训练 1、项目简介。 1.1 项目名称 ​ 基于CNN实现扑克牌花色的小颗粒度分类 1.2 项目简介 ​ 该项目旨在通过卷积神经网络(CNN)实现扑克的小颗粒度分类…

【鸿蒙实战开发】数据的下拉刷新与上拉加载

本章介绍 本章主要介绍 ArkUI 开发中最常用的场景下拉刷新, 上拉加载,在本章中介绍的内容在实际开发过程当中会高频的使用,所以同学们要牢记本章的内容。下面就让我们开始今天的讲解吧! List 组件 在 ArkUI 中List容器组件也可以实现数据滚动的效果&a…

MR30分布式 IO 模块:硅晶行业电池片导片机的智能 “心脏”

硅晶产业作为全球能源和电子领域的基石,其生产规模庞大且工艺复杂。从硅料的提纯、拉晶,到硅片的切割、电池片的制造,每一个环节都要求高精度与高稳定性。在电池片生产环节,导片机承担着硅片传输与定位的重要任务,其运…

MAC虚拟机上安装WDA环境

MAC虚拟机上安装WDA环境 一、MAC虚拟机切换root权限二、macOS上安装xcode若你的macOS系统可以在appstore下载安装若你安装的macOS系统版本太低,无法在appstore上安装xcode 三、macOS上安装WebDriverAgent四、使用xcode配置WDA安装到手机上高版本系统支持 一、MAC虚拟…

个人ffmpeg笔记(一)

环境安装 QT环境安装 运行qt…run安装 下载地址:https://download.qt.io/archive/qt/ 下载地址:https://download.qt.io/archive/qt/5.12/5.12.10/ sudo apt install --reinstall libxcb-xinerama0 解决xcb问题 Ubuntu16.04打开Qt显示/home/user/.co…

【网络】传输层协议UDP/TCP网络层IP数据链路层MACNAT详解

主页:醋溜马桶圈-CSDN博客 专栏:计算机网络原理_醋溜马桶圈的博客-CSDN博客 gitee:mnxcc (mnxcc) - Gitee.com 目录 1.传输层协议 UDP 1.1 传输层 1.2 端口号 1.3 UDP 协议 1.3.1 UDP 协议端格式 1.3.2 UDP 的特点 1.3.3 面向数据报 1…

WordPress插件 Download-block-plugin下载按钮图标美化

WordPress插件 Download-block-plugin下载按钮图标美化

分布式 漏桶算法 总结

前言 相关系列 《分布式 & 目录》《分布式 & 漏桶算法 & 总结》《分布式 & 漏桶算法 & 问题》 概述 简介 LBA Leaky Bucket Algorithm 漏桶算法是一种流行于网络通信领域的流量控制/频率限制算法。漏桶算法的核心原理是通过一个概念上的“漏桶”来…

04面向对象篇(D4_OOT(D1_OOT - 面向对象测试))

目录 一、 面向对象影响测试 1. 封装性影响测试 2. 继承性影响测试 3. 多态性影响测试 二、 面向对象测试模型 三、 面向对象分析测试 1. 对象测试 2. 结构测试 3. 主题测试 4. 属性和实例关联测试 5. 服务和消息关联测试 四、面向对象设计测试 1. 对认定类测试 …

群控系统服务端开发模式-应用开发-前端操作记录功能展示

一、创建操作记录展示视图 在根目录下src文件夹下views文件夹下permission文件夹下创建token文件夹&#xff0c;在token文件夹下&#xff0c;新建index.vue文件&#xff0c;代码如下&#xff1a; <template><div class"app-container"><div class&qu…

【AIGC】如何高效使用ChatGPT挖掘AI最大潜能?26个Prompt提问秘诀帮你提升300%效率的!

还记得第一次使用ChatGPT时&#xff0c;那种既兴奋又困惑的心情吗&#xff1f;我是从一个对AI一知半解的普通用户&#xff0c;逐步成长为现在的“ChatGPT大神”。这一过程并非一蹴而就&#xff0c;而是通过不断的探索和实践&#xff0c;掌握了一系列高效使用的技巧。今天&#…