同步操作将从 放羊娃/CefSharpVue 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
使用vue来创建界面,用winform来显示界面,使用C#实现后台逻辑开发。当前项目已搭建框架开发结构。 在vue创建的界面通过CefSharp的chrome核心来呈现界面,使其通过简单的js调用,来访问后端数据,后端通过反射,统一接管处理请求,实现业务,只需要简单的添加类和类的特性即可进行后端方法逻辑的访问。 通过修改vue的打包生产相关的js,使其支持实时动态查看vue的元素更改(如果需要刷新页面,可以通过F12调出chrome的开发者工具,在工具上使用F5进行页面刷新)。
示例1:使用当前框架开发图片管理 文章:使用当前框架开发图片管理
软件架构说明 使用winform创建基础窗口,在基础窗口上使用chrom浏览器展现html页面,通过vue来编写页面,目前将vue集成到winform项目中,在vue项目中通过调用js方法,在winform中通过类来实现业务逻辑。
CefSharpVue/ui/vue
下使用 npm install
命令来安装常用的类库(推荐);或者也可在当前目录下使用vue2.x的脚手架和webpack创建vue项目,但需使用当前项目/WInform_Vue/ui/vue/build
文件夹,该文件是对相关js的修改,使其支持winform使用Debug
或者Release
Debug
或者Release
模式对应vue不同的生产运行策略。Debug
模式下的操作# cd ../项目名称/ui/vue
> cd ./WInform_Vue/ui/vue
# 首次使用 ,需要执行 npm install命令进行安装相关依赖
> npm install
> npm run dev
注
:这种模式下将 vue 项目启动起来后,可以进行动态修改页面,实时进行查看效果,且在终端存在vs的状态下,不需要再次启动,后续只需要启动winform项目即可。目前已内置F12
启动devTools
控制台;如需刷新页面,可先调出devTools ,之后F5
,刷新页面。
Release
模式下的操作# cd ../项目名称/ui/vue
> cd ./WInform_Vue/ui/vue
> npm run build
注
:在这种模式下每次启动项目,都需要手动执行npm run build
打包命令,这种模式适合发布使用,不适合开发使用。
1.1. 切换到vue目录
打开到 ./CefSharpVue/ui/vue
1.2. 在index.vue
页面中添加如下代码
<template>
<div class="w h-vh box-b">
<div>请求测试</div>
<h1 class="t-l p-l10">
参数为普通字段 string key
</h1>
<el-card class="box-b">
<button @click="method1">
调用/login/login
</button>
结果:
<span class="c-s">
{{dataResult1}}
</span>
</el-card>
<!-- -->
<h1 class="t-l p-l10">
完整的参数调用,请克隆项目,查看运行示例
</h1>
</div>
</template>
<script>
export default {
data() {
return {
//参数一
data1: {
phone: '18888888888',
password: '123456'
},
dataResult1: null,
}
},
watch: {
},
methods: {
method1() {
this.$api.login(this.data1).then(res => {
this.dataResult1 = res;
});
},
},
created() {}
}
</script>
<style>
</style>
1.3. 在 API/api-method.js
中添加如下代码
//// ------------------------------
///rquest(path,param,methodType) 方法的三个参数
// path: `请求路径`;它由两部分组成【请求类的注解和请求方法的注解】
// param: `请求参数`;【可为空】
// methodType: `请求类型`【可为空,为空时默认值为:GET】;目的是为了 无缝切换使用http请求模式,当后台服务进行更改时,可以只需要切换 构建的request方法的js文件即可
////-----------------------------
const api = {
//后台使用2个字段接收参数
login: function(data) {
return request('/login/login', data, 'POST');
},
//后台使用 实体类 接收参数
userInfo:function(data){
return request('/login/userInfo', data, 'POST');
},
//后台使用 多个 实体类 接收参数
userExpansionEntity:function(data){
return request('/login/userExpansionEntity', data, 'POST');
},
//后台使用 实体类 和 List<实体类> 接收参数
userExpansionEntityList:function(data){
return request('/login/userExpansionEntityList', data, 'POST');
},
//后台使用 List<实体类> 接收参数
userInfoList:function(data){
return request('/login/userInfoList', data, 'GET');
},
//后台使用 List<string> 接收参数
strList:function(data){
return request('/login/strList', data, 'GET');
},
//其他代码
}
2.1. 添加controller
目录,将请求方法归纳到一个文件夹
2.1.1 在controller
目录下,创建TestController.cs
类
using System;
using System.Collections.Generic;
using CefSharpVue.core.attribute;
using CefSharpVue.core.util.response;
using CefSharpVue.entity;
namespace CefSharpVue.Project.Controllers
{
[Controller]
[RequestMapping("/login")]
public class TestController
{
/// <summary>
/// 测试指定参数赋值
/// </summary>
/// <returns></returns>
[RequestMapping("/login", MethodType.POST)]
public BaseResponse<Object> GetLogin(string phone, string password)
{
if (phone == "18888888888" && password == "1234567890")
{
Dictionary<string, string> useInfo = new Dictionary<string, string> {
{"phone","18888888888"},{"nickName","超级管理员"},{"sex","1"}
};
return new BaseResponse<Object>("登录成功!", useInfo);
}
return new BaseResponse<Object>(StatusCode.Fail, "用户名或密码错误!",new object[] { phone,password });
}
/// <summary>
/// 测试接受参数自动赋值包装成对象
/// </summary>
/// <param name="userInfoEntity"></param>
/// <returns></returns>
[RequestMapping("/userInfo", MethodType.POST)]
public BaseResponse<Object> GetUserInfo(UserInfoEntity userInfoEntity)
{
return new BaseResponse<Object>(userInfoEntity);
}
/// <summary>
/// 测试接受参数自动赋值包装成对象
/// </summary>
/// <returns></returns>
[RequestMapping("/userExpansionEntity", MethodType.POST)]
public BaseResponse<Object> GetUserExpansionEntity(UserInfoEntity userInfo,UserExpansionEntity userExpanis)
{
return new BaseResponse<Object>(new object[] { userInfo, userExpanis });
}
/// <summary>
/// 测试接受参数自动赋值包装成对象
/// </summary>
/// <returns></returns>
[RequestMapping("/userExpansionEntityList", MethodType.POST)]
public BaseResponse<Object> GetuserExpansionEntityList(List<UserInfoEntity> userInfo, UserExpansionEntity userExpanis)
{
return new BaseResponse<Object>(new object[] { userInfo, userExpanis });
}
/// <summary>
/// 测试接受参数自动赋值包装成对象集合
/// </summary>
/// <param name="userInfoEntity"></param>
/// <returns></returns>
[RequestMapping("/userInfoList", MethodType.GET)]
public BaseResponse<Object> GetUserInfoList(List<UserInfoEntity> userInfoEntityList)
{
return new BaseResponse<Object>(userInfoEntityList);
}
/// <summary>
/// 测试接受参数自动赋值包装成对象集合
/// </summary>
/// <param name="userInfoEntity"></param>
/// <returns></returns>
[RequestMapping("/strList", MethodType.GET)]
public BaseResponse<Object> GetStrListt(List<string> list)
{
return new BaseResponse<Object>(list);
}
}
}
2.2. 添加entity
目录,将请求方法归纳到一个文件夹
2.2.1 在entity
目录下,创建UserExpansionEntity.cs
类
namespace CefSharpVue.Entitys
{
public class UserExpansionEntity
{
public string NickName { get; set; }
public string MobilePhone { get; set; }
public string Job { get; set; }
public int IsMarriage { get; set; }
public int QQ { get; set; }
public int WeiXin { get; set; }
}
}
2.2.2 在entity
目录下,创建UserInfoEntity.cs
类
namespace CefSharpVue.Entitys
{
public class UserInfoEntity
{
public string NickName { get; set; }
public string Phone { get; set; }
public string Password { get; set; }
public int Sex { get; set; }
public int Age { get; set; }
}
}
注
为了更好的使用反射接管相关请求和执行方法,我们做了如下约定xxxController
xxxEntity
[Controller]
特性和[RequestMapping("/login")]
特性 [RequestMapping("/login", MethodType.POST)]
特性 methodType为空时默认为MethodType.GET
{
"phone":"123456",
"password":"123456",
"sex":"1",
...
//实体类的其他属性
}
{
"userInfo":{
"phone":"123456",
"password":"123456",
"sex":"1",
//...
//实体类的其他属性
},
"addName":"张三",
"userExpanis": {
"isMarriage": 0,
"job": "IT",
"mobilePhone": "0931-000000",
"nickName": "张三分",
"QQ": "1427xxxxx", //上文的实体类定义的类型为int ,因此这里是会赋值失败;最终值为0
"weiXin": "xxxxxxx" //上文的实体类定义的类型为int,因此这里是会赋值失败;最终值为0
},
//...
//其他参数
}
List<T>
T 为实体类时,仅支持如下表达 {
"userInfoEntityList": [{
"phone": "1555555555",
"password": "123456",
"sex": 2,
"age": "20"
}, {
"phone": "16666666666",
"password": "123456",
"sex": 1,
"age": "10"
}, {
"phone": "18888888888",
"password": "123456",
"sex": 3,
"age": "30"
}, {
"phone": "1777777777",
"password": "123456",
"sex": 4,
"age": "50"
}]
}
List<T>
T 为常见类型 string, int ,float, double 等等 时,支持如下json表达 [1,3,4,5,6,7,8] //泛型T 为 int
["20","21","22","26","28"] //泛型T 为 string, int ,float,double等; 核心逻辑会尝试继续类型转化,当前数组值可以进行转化成 int、float、double等
你可以通过参与项目一起改进
你可以通过赞赏或捐助,进行项目的发展
加入一起开发 (个人QQ:1427953302)
加入参与文档翻译(中译英)
加入参与改进计划
加入制定更多的支持规则和功能
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。