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
两种
如果需要新增,按以下操作即可
- 在 src/locales/lang/ 下新增相应的语言目录及语言文件并引入 引入 ant-design-vue 和 moment 对应的语言包
- 在 types/config.d.ts 内加上预览类型定义
- 在 src/settings/localeSetting.ts 修改语言配置
对于小白来说 这里有点坑。因为不了解“引入 ant-design-vue 和 moment 对应的语言包”
A要使用系统的预有语言【我不明白啊,不要问】
B使用一样的名称
具体可以参考我的git提交:增加繁体支持-国际化
效果如下
6登录接口
1.netcore 实现登录接口【我们前期不说 后台。后面章节再说明】
使用jwt 返回token ,接口使用token验证
2 具体参考提交“走通单一登录 但其它接口也走了。怎么办?”
7登录成功了 但又跳回来了。因为其它的接口 也统一走了后端。但又没实现=-----怎么办?
想想先,下节见
小赵_爱学习: 截取分割图和掩码图的代码可以分享一下吗?或者可以告诉一下怎么做吗?
追雨潮: https://gitee.com/hechao58/hcrainFor1 gitee 项目地址
追雨潮: 之前域名过期了----项目目前不维护 代码有点旧
jiezhixing008: 没有下载地址呀,而且你的网页打不开呢
Li志: 非常给力