vue-vben-admin 与.net core 结合实例 【自学与教学 小白教程】---第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登录成功了  但又跳回来了。因为其它的接口 也统一走了后端。但又没实现=-----怎么办?

想想先,下节见

  • 18
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值