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

news2024/12/16 5:05:11

        最近公司要求做一个大屏的程序用于展示公司的产品,我以前也没有相关的经验,最糟糕的是公司没有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 接着就可以在前端登录了,如下图:

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

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

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

相关文章

摆脱B端UI框架的桎梏,首先从布局开始

在 B 端开发中,UI 框架虽带来便利,但也可能形成桎梏。要摆脱这种束缚,首先从布局着手是个明智之举。传统的 B 端 UI 框架布局可能较为固定,缺乏灵活性。我们可以尝试创新的布局方式,如响应式设计,适应不同屏…

认识异常吧

在 Java 中,将程序执行过程中发生的不正常行为称为异常 。 异常的体系结构 1. Throwable : 是异常体系的顶层类,其派生出两个重要的子类 , Error(错误) 和 Exception(异常) 2. Error &…

Repo管理

文章目录 前言Repo介绍清单仓库清单仓库的组成 初始化Repo同步远程仓库Repo实际应用 前言 我们知道,Git是用来管理某一个仓库,那当一个项目用到了多个仓库时,怎么来同步管理这些仓库呢?这个时候就可以引入Repo管理。 Repo介绍 …

Spring Security6.3 自定义AuthorizationManager问题

项目环境: Springboot3.3.5, 对应的SpringFrameWork6.1,Security为6.3 问题:我想自定义AuthorizationManager接口实现类,在里面判断如果角色为amdin则放行请求; 在AdminAuthorizationManager类的check()方法中pass变量…

十二月第三周python

import tkinter as tk #安装图形窗口工具 import cv2 #处理视频工具 from tkinter import * #安装图形窗口工具 from PIL import Image, ImageTk#处理图形工具 roottk.Tk() #给工具起名字 root.title("子豪")#软件左上角名字 root.geometry("800x800500100&…

玉米叶病预测数据集,使用yolo,coco,voc格式人工标注,10046张原始图片,可识别叶枯病,普通锈病,灰叶斑病,健康的玉米叶

玉米叶病预测数据集,使用yolo,coco,voc格式人工标注,10046张原始图片,可识别叶枯病,普通锈病,灰叶斑病,健康的玉米叶 数据集分割 训练组87% 8790图片 有效集4% 419图片…

NAT网络地址转化技术

1.什么是NAT NAT技术是一种将自己内网的多个私有IP地址转换为一个公网IP进行访问互联网的一项技术,这个技术主要是用来解决IPv4地址不够的问题。 2.NAT技术的具体例子 如果我们用手机使用流量浏览一个网站,那么第一步手机会对这个域名进行DNS解析&#…

使用DuckDB 加载和清洗数据

DuckDB CLI是允许用户直接从命令行与DuckDB交互的工具。前文你看到了如何使用Python与DuckDB交互。但是,有时你只是想直接使用数据库—例如在创建新表、从不同数据源导入数据以及执行与数据库相关的任务时。在这种情况下,直接使用DuckDB CLI要有效得多。…

linux部署ansible自动化运维

ansible自动化运维 1,编写ansible的仓库(比赛已经安装,无需关注) 1、虚拟机右击---设置---添加---CD/DVD驱动器---完成---确定 2、将ansible.iso的光盘连接上(右下角呈绿色状态) 3、查看光盘挂载信息 df -h…

vue3-tp8-Element:对话框实现

效果 参考框架 Dialog 对话框 | Element Plus 具体实现 一、建立view页面 /src/views/TestView.vue 二、将路径写入路由 /src/router/index.js import { createRouter, createWebHistory } from vue-router import HomeView from ../views/HomeView.vueconst router create…

YOLOv11改进,YOLOv11添加DLKA-Attention可变形大核注意力,WACV2024 ,二次创新C3k2结构

摘要 作者引入了一种称为可变形大核注意力 (D-LKA Attention) 的新方法来增强医学图像分割。这种方法使用大型卷积内核有效地捕获体积上下文,避免了过多的计算需求。D-LKA Attention 还受益于可变形卷积,以适应不同的数据模式。 理论介绍 大核卷积(Large Kernel Convolu…

Python数据分析案例67——因子分析回归分析

背景 线性回归,主成分回归都做烂了,我之前的案例有很多这些模型,但是一直没写因子分析的回归案例,这个也是传统统计学流行的方法,在金融经济心理学等人文社科用得非常多。这个案例就演示一下python怎么做因子分析。 数…

FastAPI简介

FastAPI简介 一、FastAPI简介二、FastAPI安装2.1 使用pip安装FastAPI2.2 FastAPI的demo2.3 FastAPI的程序结构 三、装饰器请求方法四、用户请求4.1 路径参数4.1.1 单个路径参数4.1.2 多个路径参数4.1.3 固定路径和路径参数的冲突 4.2 查询参数4.3 默认参数4.4 可选参数 五、请求…

Django结合websocket实现分组的多人聊天

其他地方和上一篇大致相同,上一篇地址点击进入, 改动点1:在setting.py中最后再添加如下配置: # 多人聊天 CHANNEL_LAYERS {"default":{"BACKEND": "channels.layers.InMemoryChannelLayer"} }因此完整的se…

基础学习:(5)不同卷积:transposed convolution,deconvolution,dilated convolution

基础学习:(5)不同卷积 文章目录 基础学习:(5)不同卷积前言1 deconvlution transposed convolution2 对比2.1 Convolution animations2.2 Transposed convolution animations2.3 Dilated convolution 前言 …

Windows安装Jira

下载 Download Jira Data Center | Atlassian https://product-downloads.atlassian.com/software/jira/downloads/atlassian-jira-software-10.3.0-x64.exe 以管理员身份安装,否则弹出以下提醒 创建和配置MySQL数据库:参照 Connecting Jira applicat…

采用qL-MPC技术进行小型固定翼无人机的路径跟随控制

来自论文"Predictive Path-Following Control for Fixed-Wing UAVs Using the qLMPC Framework in the Presence of Wind Disturbances" 控制架构 采用的是 ULTRA-Extra无人机,相关参数如下: 这里用于guidance law的无人机运动学模型为&#…

计算机毕设-基于springboot的青少年心理健康教育网站的设计与实现(附源码+lw+ppt+开题报告)

博主介绍:✌多个项目实战经验、多个大型网购商城开发经验、在某机构指导学员上千名、专注于本行业领域✌ 技术范围:Java实战项目、Python实战项目、微信小程序/安卓实战项目、爬虫大数据实战项目、Nodejs实战项目、PHP实战项目、.NET实战项目、Golang实战…

28.在 Vue 3 中使用 OpenLayers 加载 MVT 格式矢量瓦片数据并显示图形

前言 随着前端开发技术的不断进步,越来越多的强大地图库被广泛应用于 Web 地图应用开发中。OpenLayers 是一个流行的开源 JavaScript 库,能够帮助开发者快速构建交互式地图应用。而 Vue 3 作为现代化的前端框架,已经成为开发者构建高效、响应…

Linux - MySQL迁移至一主一从

Linux - MySQL迁移至一主一从 迁移准备安装MySQL ibd文件迁移原服务器操作目标服务器操作 一主一从增量同步异常解决结尾 首先部分单独安装MySQL,请参考Linux - MySQL安装,迁移数据量比较大约400G左右且网络不通故使用文件迁移,需开启一段时间…