vue-vben-admin 与.net core 结合实例 【自学与教学 小白教程】---第1节

4 篇文章 1 订阅
订阅专栏

vue-vben-admin 与.net core 结合实例 这里计划使用.net core 作为后端 。

目标:打造一体化的 开箱即用  好看的 netcore一体化框架。

Vue Vben Admin For NetCore 取命 hcrain-vvadmin 我不是前端人员 但有时开发还是要写一些界面。

之前使用layui是时候 狠心升级下了。

只为了好看----------于是  小白教程来了。可以根据 git提交一步步来重现我的实现。

【后面会发布到在线 效果预览 http://www.hcrain.cn/   还没发布啊 我要将它改造成我自己想要的。要时间。这里占个坑而已。不回改文章了。

目录

第1节 登录页改造&国际化&登录使用真实netcore   API接口

1 vue-vben-admin 怎样运行的 我不说啦。看官方

2先删除登录页 其它登录项 LoginForm.vue

3修改登录页的文字

4修改全局配置----修改网点名称

5国际化 多语言

6登录接口

7登录成功了  但又跳回来了。因为其它的接口 也统一走了后端。但又没实现=-----怎么办?


第1节 登录页改造&国际化&登录使用真实netcore   API接口

  • 1 vue-vben-admin 怎样运行的 我不说啦。看官方
  • 2先删除登录页 其它登录项 LoginForm.vue

删除以下代码

  <!-- <ARow class="enter-x" :gutter="[16, 16]">
    <ACol :md="8" :xs="24">
      <Button block @click="setLoginState(LoginStateEnum.MOBILE)">
        {{ t('sys.login.mobileSignInFormTitle') }}
      </Button>
    </ACol>
    <ACol :md="8" :xs="24">
      <Button block @click="setLoginState(LoginStateEnum.QR_CODE)">
        {{ t('sys.login.qrSignInFormTitle') }}
      </Button>
    </ACol>
    <ACol :md="8" :xs="24">
      <Button block @click="setLoginState(LoginStateEnum.REGISTER)">
        {{ t('sys.login.registerButton') }}
      </Button>
    </ACol>
  </ARow>

  <Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider> -->

  <!-- <div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">
    <GithubFilled />
    <WechatFilled />
    <AlipayCircleFilled />
    <GoogleCircleFilled />
    <TwitterCircleFilled />
  </div> -->
  • 3修改登录页的文字

src/locales/lang/zh-CN/sys.json

  • 4修改全局配置----修改网点名称

.env

# spa-title
VITE_GLOB_APP_TITLE = 追雨潮

效果如下

  • 5国际化 多语言

参考官方

在  src/locales/lang/ 增加对应语言的文件即可

目前项目自带的语言只有 zh_CN 和 en 两种

如果需要新增,按以下操作即可

  1. 在  src/locales/lang/ 下新增相应的语言目录及语言文件并引入 引入 ant-design-vue 和 moment 对应的语言包
  2. 在  types/config.d.ts 内加上预览类型定义
  3. 在  src/settings/localeSetting.ts 修改语言配置

对于小白来说  这里有点坑。因为不了解“引入 ant-design-vue 和 moment 对应的语言包

A要使用系统的预有语言【我不明白啊,不要问】

B使用一样的名称

具体可以参考我的git提交:增加繁体支持-国际化

效果如下

6登录接口

1.netcore  实现登录接口【我们前期不说 后台。后面章节再说明】

  使用jwt 返回token  ,接口使用token验证

2 具体参考提交“走通单一登录  但其它接口也走了。怎么办?”

7登录成功了  但又跳回来了。因为其它的接口 也统一走了后端。但又没实现=-----怎么办?

想想先,下节见

采用 Vben Vue3 Python Django (Fast Api 和 Django的结合)开发的后端管理系统.zip
06-15
【项目资源】:包含前端、后端、移动开发、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源,毕业设计等各种技术项目的源码。包括C++、Java、python、web、C#、EDA等项目的源码。 【适用人群】:适用于希望学习不同技术领域的初学者或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。 【项目资源】:包含前端、后端、移动开发、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源,毕业设计等各种技术项目的源码。包括C++、Java、python、web、C#、EDA等项目的源码。 【适用人群】:适用于希望学习不同技术领域的初学者或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。
实战SpringBoot2+Vue3-Vben-Admin整合之前端
05-14
【※  购买前提醒  ※】本课程分为前端+后端共计2个课程,本课属于前端部分,后端属于另外课程。 后端部分:https://download.csdn.net/course/detail/37057适用人群Java生态开发人员、Vue生态开发人员、IT类从业者课程概述该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue3-Vben-Admin+可视化等技术栈开发的项目,采用多模块,前后端分离开发。包括图形展示、权限管理、用户管理等功能。【后端技术】技术 说明Spring Boot2 MVC框架 开发的一站式解决方案Spring Security5  认证和授权框架MyBatisPlus3.3.1  基于 MyBatis 框架的快速研发框架MyBatisCode工具 生成 MyBatis 相关代码Jackson 提供了处理 JSON 数据的工具Lombok 简化对象封装工具 Druid   数据库连接池 【前端技术】Vue        互联网最火的前端框架Vue Router 路由框架Vuex 全局状态管理框架Axios 前端 HTTP 框架Vue-Vben-Admin前端 UI 框架 前端模板【开发工具】IntelliJ IDEA 开发 IDESQLyog 数据库连接客户端Postman HTTP 请求工具【开发环境】工具 版本JDK 1.8MySQL 5.7
Vue Vben Admin:开箱即用的中后台前端解决方案
最新发布
gitblog_00827的博客
09-16 1103
Vue Vben Admin:开箱即用的中后台前端解决方案 vue-vben-admin-abp-vnext 已迁移到https://github.com/colinin/abp-next-admin, 此项目归档 项目地址: h...
Vben Admin 的介绍以及使用
YZRHANYU的博客
11-17 3万+
Vben Admin 的介绍以及使用
SpringBoot+Vue-Vben-Admin中台&后台前后端完整
06-30
该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue3-Vben-Admin+蚂蚁可视化AntV 等技术栈开发的项目,采用多模块,前后端分离开发。包括图形展示、权限管理、用户管理等功能。【后端技术】技术 说明Spring Boot2 MVC框架 开发的一站式解决方案Spring Security5  认证和授权框架MyBatisPlus3.3.1  基于 MyBatis 框架的快速研发框架MyBatisCode工具 生成 MyBatis 相关代码Jackson 提供了处理 JSON 数据的工具Lombok 简化对象封装工具 Druid   数据库连接池 【前端技术】Vue        互联网最火的前端框架Vue Router 路由框架Vuex 全局状态管理框架Axios 前端 HTTP 框架Vue-Vben-AdminI 前端 UI 框架 前端模板 
后台管理系统
m0_53912016的博客
10-22 2231
高配参考 vben-admin 低配参考 高配参考 低配参考
vue-vben-admin.md
07-30
vue-vben-admin.md
vue-vben-admin-main源码
12-19
在这个“vue-vben-admin-main”源码包中,我们可以深入学习和理解Vue.js的高级应用以及与之相关的工具链。 1. **项目结构**:解压后的文件夹将展示Vue项目的标准结构,包括`src`目录(存放源代码)、`public`目录...
vue-vben-admin-main.zip
04-09
Vue-Vben-Admin 是一个基于 Vue.js 的现代化管理后台模板,设计风格采用了流行的 Ant Design Vue 框架,提供了一套完整的权限管理、表单、表格、多级路由、国际化等企业级应用所需的组件和功能。这个压缩包 "vue-...
vue-vben-admin:基于Vite2,vue3.0,ant-design-vue 2.x,打字稿,vuex,vue-router的vue3样式管理员,正在努力进行更新。
05-11
Vue Vben Admin是一个免费的开源中端和后端模板。 使用最新的vue3 , vite2 , TypeScript和其他主流技术开发,开箱即用的中端和后端前端解决方案也可用于学习参考。 特征 最新技术发展水平:使用诸如Vue3 / vite2之...
vben-admin面免登录
weixin_54858833的博客
10-12 2580
直接在源码中找到的,记录一下. 设置白名单 router/permissionGuard.ts 修改路由守卫中的白名单部分 添加面路由 免登录面相当于公共面 以上!
Vue-Vben-Admin:打造高效中大型项目后台解决方案
chenchuang0128的博客
03-05 2145
Vue-Vben-Admin是一个基于Vue3.0、Vite、Ant-Design-Vue和TypeScript的开源项目,旨在为开发中大型项目提供一站式的解决方案。随着技术的不断更新与发展,我们有理由相信,Vue-Vben-Admin将会在未来的企业级开发中发挥越来越重要的作用。基于Vue3.0、Vite和Ant-Design-VueVue-Vben-Admin采用了最新的Vue3.0框架,结合Vite构建工具和Ant-Design-Vue组件库,为开发者提供了一个高效且易于维护的开发环境。
能不能推荐个 vue 后台管理系统模板?
SiKi学院的博客
07-10 5431
​ 下面是我整理的vue2和vue3的一些后台管理系统模板,希望对你有帮助~ ​
Vue-Vben-Admin:中大型项目后台解决方案及如何实现面反向传值
chenchuang0128的博客
03-13 1382
Vue-Vben-Admin是一个基于Vue3.0、Vite、Ant-Design-Vue和TypeScript的开源项目,旨在为开发中大型项目提供一站式的解决方案。随着技术的不断更新与发展,我们有理由相信,Vue-Vben-Admin将会在未来的企业级开发中发挥越来越重要的作用。基于Vue3.0、Vite和Ant-Design-VueVue-Vben-Admin采用了最新的Vue3.0框架,结合Vite构建工具和Ant-Design-Vue组件库,为开发者提供了一个高效且易于维护的开发环境。
Vue-Vben-Admin-一个使用composition-api+ts的后台系统
热门推荐
ann的博客
07-24 3万+
VUE VBEN ADMIN 介绍 vue-vben-admin 是一个全新的开源系统,基于ant-design-vue,typescript,@vue/composition-api,tsx实现的 vue3 风格的后台管理系统,让您提前学习vue3+ts带来的体验。适合中大型项目的开发,实际开发中可以直接使用。 兼容 vue2 的浏览器,一切免费,不收取任何费用,请放心使用。后续定期提供更新及维护,可供参考与学习, 预览 vue-vben-admin-预览 仓库 gitHub ...
springboot - vue-element-admin 整合,修改原有的登录退出
张小三的博客
02-17 2388
说明 本次使用的到的数据均为假数据,并未使用数据库。 vue文件中的方法调用注意看文件的引入。 其中有些使用伪代码的方式。 前期准备 创建一个spring boot项目, 项目结构如下: 说明: config: GlobalCORSConfig:配置vue-element-admin与springboot之间的跨域请求 model: vo: 返回给前端的实体对象。 po:service 与dao之前传递的对象。 service:接口层 impl:service接口的实现层,其下的类需要实现servi
vue vben admin 使用, (个人感觉这项目封装的太深了!!!!)
阿臻
03-30 5630
开启了表单搜索功能, demo 代码是 formtable 组件, 个人还是比较喜欢 template 方式, 这样的方式使用不了 getForm 这种方法。在请求方法里面重新返回一个 promise 对象, 用满足规定的格式返回就可以了。需要注意的是, 如果使用了组件表单搜索功能, 就是说你需要提供一个获取数据的api, 这里着重去看怎么适配表格需要的响应数据结构。建议表格这种东西使用 vben自己封装的, ant design 自身的还需要你去动态调整表格高度。我们是不会被困难打败的, 只会越战越勇!
Vue-Vben-Admint:打造高效、美观的后台管理系统
奇妙的Bug之旅
10-25 782
在现代Web开发中,前后端分离已经成为了一种趋势。本文将详细介绍如何使用Vue-Vben-Admint这个优秀的开源项目搭建一个高效、美观的后台管理系统。我们将通过详细的操作步骤和代码示例,帮助你快速掌握Vue-Vben-Admint的使用方法。首先,我们需要在你的计算机上安装Node.js和npm。请访问Node.js官网下载并安装适合你操作系统的版本。一、安装Node.js和npm。按照提示完成安装过程。四、编写组件和面布局。
SpringBoot+Vue-Vben-Admin
05-11
SpringBoot+Vue-Vben-Admin 是一种常见的前后端分离开发框架,其中 SpringBoot 是后端框架,Vue-Vben-Admin前端框架。 SpringBoot 是基于 Java 语言的一种轻量级开发框架,它提供了一种快速构建基于 Spring 框架的应用程序的方式。SpringBoot 通过简化配置和减少开发时间来提高开发效率。它还提供了许多插件和集成,例如 Spring Security、Spring Data JPA 等。 Vue-Vben-Admin 是基于 Vue.js 的一种前端框架,它提供了一种快速搭建管理后台的方式。Vue-Vben-Admin 提供了丰富的组件和功能,例如表格、表单、图表等。它还支持动态路由和权限控制,可以满足大多数管理后台的需求。 将 SpringBoot 和 Vue-Vben-Admin 结合使用,可以实现前后端分离开发,提高开发效率和代码可维护性。前端使用 Vue-Vben-Admin 搭建管理后台界面,后端使用 SpringBoot 提供接口服务,前后端通过 RESTful API 进行通信。同时,SpringBoot 还可以提供安全认证、数据访问等功能,使开发变得更加简单和高效。
写文章

热门文章

  • 追溯系统二次开发源代码免费分享---第一篇 6212
  • 农产品追溯系统免费源代码分享及下载---第2篇 5459
  • 数据可视化,大屏展示看板 模板收集 4795
  • 农产品追溯系统免费源代码分享及下载---第4篇(已开源) 4161
  • 免费溯源系统下载及说明----第3篇(已开源) 2128

分类专栏

  • vue-vben-admin 与.net core 4篇
  • 深度学习自学日志 1篇
  • 追溯系统 4篇
  • .net 2篇

最新评论

  • YOLOv8实例分割-使用.Net /.net Core 实例分割

    小赵_爱学习: 截取分割图和掩码图的代码可以分享一下吗?或者可以告诉一下怎么做吗?

  • 免费溯源系统下载及说明----第3篇(已开源)

    追雨潮: https://gitee.com/hechao58/hcrainFor1 gitee 项目地址

  • 免费溯源系统下载及说明----第3篇(已开源)

    追雨潮: 之前域名过期了----项目目前不维护 代码有点旧

  • 免费溯源系统下载及说明----第3篇(已开源)

    jiezhixing008: 没有下载地址呀,而且你的网页打不开呢

  • 追溯系统二次开发源代码免费分享---第一篇

    Li志: 非常给力

最新文章

  • 让linux系统时间与(windows)服务器同步操作说明
  • vue-vben-admin 与.net core 结合实例 【自学与教学 小白教程】---第4节---部门管理
  • vue-vben-admin 与.net core 结合实例 【自学与教学 小白教程】---第3节
2024年3篇
2023年4篇
2021年3篇
2020年2篇
2019年3篇

目录

目录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值

深圳坪山网站建设公司广州网站优化公司咨询江门外贸网站关键词优化报价网站优化怎么学网站付费排名优化 泊头优化网站有什么软件深圳网站seo优化排名政务网站优化莆田网站seo优化怎么做优化网站就属24金手指专业网站排名优化遴选火8星很棒武威网站优化推广外包公司搜狗网站优化排名网站优化中链接相关知识网站优化一般收费多少特殊的网站优化郑州网站优化哪里做得好盐池seo网站优化大丰网站优化排名方案淡水网站优化推广安徽网站优化费用金华seo网站优化盐城响水网站seo优化淄博网站排名优化外贸网站优化怎么节省成本湛江网站优化步骤广州网站优化哪个最好网站内外链优化方法盘锦祥云平台优化网站专业网站优化运营泉州出口加工区网站优化香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声卫健委通报少年有偿捐血浆16次猝死汪小菲曝离婚始末何赛飞追着代拍打雅江山火三名扑火人员牺牲系谣言男子被猫抓伤后确诊“猫抓病”周杰伦一审败诉网易中国拥有亿元资产的家庭达13.3万户315晚会后胖东来又人满为患了高校汽车撞人致3死16伤 司机系学生张家界的山上“长”满了韩国人?张立群任西安交通大学校长手机成瘾是影响睡眠质量重要因素网友洛杉矶偶遇贾玲“重生之我在北大当嫡校长”单亲妈妈陷入热恋 14岁儿子报警倪萍分享减重40斤方法杨倩无缘巴黎奥运考生莫言也上北大硕士复试名单了许家印被限制高消费奥巴马现身唐宁街 黑色着装引猜测专访95后高颜值猪保姆男孩8年未见母亲被告知被遗忘七年后宇文玥被薅头发捞上岸郑州一火锅店爆改成麻辣烫店西双版纳热带植物园回应蜉蝣大爆发沉迷短剧的人就像掉进了杀猪盘当地回应沈阳致3死车祸车主疑毒驾开除党籍5年后 原水城县长再被查凯特王妃现身!外出购物视频曝光初中生遭15人围殴自卫刺伤3人判无罪事业单位女子向同事水杯投不明物质男子被流浪猫绊倒 投喂者赔24万外国人感慨凌晨的中国很安全路边卖淀粉肠阿姨主动出示声明书胖东来员工每周单休无小长假王树国卸任西安交大校长 师生送别小米汽车超级工厂正式揭幕黑马情侣提车了妈妈回应孩子在校撞护栏坠楼校方回应护栏损坏小学生课间坠楼房客欠租失踪 房东直发愁专家建议不必谈骨泥色变老人退休金被冒领16年 金额超20万西藏招商引资投资者子女可当地高考特朗普无法缴纳4.54亿美元罚金浙江一高校内汽车冲撞行人 多人受伤

深圳坪山网站建设公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化