程序地带

在winform中使用Vue页面支持,自动化部署,精美窗口图片管理器



在winform中使用Vue页面支持,自动化部署,精美窗口图片管理器
效果图使用框架+++++++这开始以下是项目使用框架介绍,可以跳过+++++++1.下载码云上的代码框架,下载后使用vs打开项目,可以选择修改项目名称等信息。打开到imageList(这里的名称是修改后的名称 )/ui/vue目录选中上方的地址栏中输入cmd回车使用`npm install` 安装vue相关依赖使用visual studio2019 winform项目选中运行Debug(Debug模式适合开发,发布的使用Release模式)和X64(这里根据需要选中 x64或者x86)在vs中打开视图->终端,并将终端固定到右侧窗口
2.启动项目1. 在终端输入以下命令,启动vue2. 启动vs项目3.启动成功会出现一下示例内容点击调用按钮,查看示例通过以上操作,顺利的完成项目的初始环境确认。下面开始我们需要的业务
+++++++我是分割线 ,以上内容为框架使用介绍+++++++图片管理具体代码开始编写代码编写准备,我们准备使用瀑布流来显示图片,需要使用vue瀑布流插件
开始编写新建页面 home.vue修改router默认访问路径为 home.vue在home.vue中添加如下代码在api-method.js中添加如下代码
在Visual studio的当前项目创建以下类ImageListController.cs 文件内容ImageListEntity.cs 文件内容完成以上代码操作,启动vs即可查看效果


本项目以托管至码云 winform_vue开发示例图片管理器
效果图

效果图 在这里插入图片描述


使用框架
+++++++这开始以下是项目使用框架介绍,可以跳过+++++++
1.下载码云上的代码框架,

这个框架对通过CefSharp浏览器组件,对前端js请求做了统一接管处理 ,大大提高了开发效率。 传送门


下载后使用vs打开项目,可以选择修改项目名称等信息。

修改后的项目名称


打开到imageList(这里的名称是修改后的名称 )/ui/vue目录

打开到ImageList/ui/vue目录


选中上方的地址栏中输入cmd回车

在这里插入图片描述


使用npm install 安装vue相关依赖

npm install 安装相关依赖


使用visual studio2019 winform项目
选中运行Debug(Debug模式适合开发,发布的使用Release模式)和X64(这里根据需要选中 x64或者x86)

选中x64或x86


在vs中打开视图->终端,并将终端固定到右侧窗口

打开终端 终端固定到 右侧


2.启动项目
1. 在终端输入以下命令,启动vue
# cd ./项目名称/ui/vue
> cd ./imageList/ui/vue
> npm run dev

使用npm run dev 启动vue


2. 启动vs项目

在这里插入图片描述


3.启动成功会出现一下示例内容

在这里插入图片描述


点击调用按钮,查看示例

在这里插入图片描述


通过以上操作,顺利的完成项目的初始环境确认。下面开始我们需要的业务
+++++++我是分割线 ,以上内容为框架使用介绍+++++++
图片管理具体代码
开始编写代码
编写准备,我们准备使用瀑布流来显示图片,需要使用vue瀑布流插件

vue-waterfall-easy 在vue目录下,安装npm install vue-waterfall-easy --save-dev 安装瀑布流插件


开始编写
新建页面 home.vue

在这里插入图片描述


修改router默认访问路径为 home.vue

修改默认访问路径


在home.vue中添加如下代码

在这里插入图片描述


<template>
<div class="w-vw h-vh box-b">
<vue-waterfall-easy href-key="src" src-key="src" :max-cols="maxCols" :imgs-arr="imgsArr" @scrollReachBottom="getData"></vue-waterfall-easy>
</div>
</template>
<script>
import vueWaterfallEasy from 'vue-waterfall-easy'
export default {
name: 'home',
components: {
vueWaterfallEasy
},
data() {
return {
maxCols:8,
imgsArr:[],
}
},
watch: {
},
methods: {
getData() {
//这里没有参数
this.$api.getImageListData().then(res => {
if (res.code == 0) {
let data = res.data;
data.map(item => {
item.src = require("H:/WinForm/winform/壁纸/" + item.src);
return item;
})
this.imgsArr = data;
}
})
}
},
created() {
setTimeout(() => {
this.getData();
}, 200)
}
}
</script>
<style>
</style>
在api-method.js中添加如下代码

在这里插入图片描述


getImageListData: function () {//这里不需要参数
return request('/imageList/get', {}, 'GET');
},
在Visual studio的当前项目创建以下类

在这里插入图片描述


ImageListController.cs 文件内容
using ImageList.entity;
using System.Collections.Generic;
using System.IO;
using WInform_Vue.core.attribute;
using WInform_Vue.core.util.response;
namespace ImageList.controller
{
[Controller]
[RequestMapping("/imageList")]
public class ImageListController
{
//图片搜索目录 ,暂时固定路径
public const string SEARCH_PATH = @"H:WinFormwinform壁纸";
[RequestMapping("/get")]
public BaseResponse<object> GetList() {
List<ImageListEntity> imageLists = new List<ImageListEntity>();
DirectoryInfo root = new DirectoryInfo(SEARCH_PATH);
FileInfo[] files = root.GetFiles();
foreach (FileInfo file in files) {
ImageListEntity imageListEntity = new ImageListEntity();
imageListEntity.Id = imageLists.Count+"";
imageListEntity.src = file.Name;
imageLists.Add(imageListEntity);
}
return new BaseResponse<object>(imageLists);
}
}
}
ImageListEntity.cs 文件内容
namespace ImageList.entity
{
public class ImageListEntity
{
public string Id { get; set; }
public string src { get; set; }
public string href { get; set; }
}
}
完成以上代码操作,启动vs即可查看效果

在这里插入图片描述


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_28254093/article/details/112689368

随机推荐

JVM底层之类加载

一.klass模型klass模型类的继承结构普通的Java类在JVM中对应的是instanceKlass类的实例2.1InstanceMirrorKlass:用于表示java.lang....

xuehw. 阅读(195)

Nginx的安裝与部署

请解释一下什么是Nginx?Nginx是一个web服务器和反向代理服务器,用于HITP、HITPS、SMTP、POP3和IMAP协议。Nginx的安装随便启动一个nginx实例ÿ...

weixin_44961111 阅读(788)

二叉树练习记录

 7-1 交换二叉树中每个结点的左孩子和右孩子 (20分)以二叉链表作为二叉树的存储结构,交换二叉树中每个结点的左孩子和右孩子。输入格式:输入二叉树的先序序列。提示:一棵二...

重剑DS 阅读(983)

linux curl get请求_SSRF(服务器请求伪造)

大家好我是早上渗透工程师、晚上健身教练、凌晨工厂保安的铁人三项打工仔。1、漏洞原理        SSRF(Server-SideRequestForgery,服务器请求伪造)是一种由攻击者构造请求,...

weixin_39641103 阅读(872)

go语言通道插入0_Go 语言通道

51Reboot运维开发Golang课程K8S课程Python自动化进阶课程Python基础实战课程运维前端课程课程试听预约请扫码>>>一两种并发模型多线程共享内存,以...

蓉蓉蓉蓉 阅读(905)