做网站需要的图片去哪找,网络营销和推广做什么,附近装修公司电话和地址,网站建设公司教程随着web技术越来越成熟#xff0c;就连QQ的windows客户端都用web技术来开发#xff0c;所以在未来#xff0c;web技术来开发windows桌面软件也会越来越多#xff0c;所以在此发展驱动之下#xff0c;将最近流程的python与web技术相结合#xff0c;使用vue3和element-plus…随着web技术越来越成熟就连QQ的windows客户端都用web技术来开发所以在未来web技术来开发windows桌面软件也会越来越多所以在此发展驱动之下将最近流程的python与web技术相结合使用vue3和element-plus、vue-router、saas(CSS扩展语言)来开发桌面管理系统也是一个不错的选择。最主要的是两者技术门槛比较低而且开发效率也很快同时也可以做出漂亮的界面。
一、技术背景
python版本号为3.7你也可以换成高版本同样支持
vue3版本为3.4.29
element-plus版本号element-plus
vue-router版本号为4.4.0
sass1.53.0
操作系统为windows10
二、先看效果 三、web关键代码-登陆页面
templatediv classlogin-containerh1用户登录/h1form classlogin-formdiv classform-grouplabel用户名/labelinput typetext //divdiv classform-grouplabel密码/labelinput typepassword //divbutton typesubmit clicklogin登录/button/form/div
/templatescript setup
import {onMounted, getCurrentInstance,ref,computed} from vue;
import {useStore} from vuex;
const {proxy} getCurrentInstance();
const login async (){window.pywebview.api.login(,)
}
/script
style langscss scoped
.login-container {max-width: 400px;margin: 0 auto;padding: 50px 20px;box-sizing: border-box;text-align: center;
}
.login-form {width: 80%;margin: 0 auto;
}
.form-group {margin-bottom: 20px;text-align: left;
}
label {display: inline-block;width: 100px;
}
/style
四、web关键代码-首页
templateel-table :datatableData stylewidth: 100%el-table-column propdate labelDate width180 /el-table-column propname labelName width180 /el-table-column propaddress labelAddress //el-table
/templatescript setupimport {onMounted, getCurrentInstance,ref,computed} from vue;import {useStore} from vuex;const {proxy} getCurrentInstance();const tableData [{date: 2016-05-03,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-02,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-04,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-01,name: Tom,address: No. 189, Grove St, Los Angeles,},]
/script
style langscss scoped/style
五、pywebview关键代码
import webviewfrom controller.IndexController import IndexControllerclass Api():def destroy(self):window.destroy()def minimize(self):window.minimize()def login(self, username, password):print(username, , password)main IndexController(username)main.start()self.destroy()if __name__ __main__:api Api()# js_api 获得 api 实例window webview.create_window(登录, http://localhost:3004/#/login, js_apiapi, resizableFalse, width450, framelessFalse, shadowTrue, height 670, background_color#E4FBF0)webview.start()# webview.start(debugTrue)六、拿到代码执行如下命令
1、前端(必须先安装nodejs百度自行先安装)进入到pywebview-desktop-app\web目录执行如下命令下载依赖
npm install
2、运行前端在目录pywebview-desktop-app\web下执行如下命令
npm run dev
3、启动python客户端在pywebview-desktop-app\controller目录运行LoginController.py文件
七、效果图如下 下载地址链接https://pan.baidu.com/s/1TH_UQx7sblW6O_6K6ZPqlA?pwdthfk 提取码thfk
