同步操作将从 角落的白板报/YoYoCms.AbpProjectTemplate 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
首先说下这个项目吧。 如标题一样是基于VUE+.NET开发的框架,也是群友一直吼吼吼要一个vue版本的ABP框架。 我们先来看看首页吧:
还比较酷炫,提供下演示账号
账号:demo
密码:bb123456
当然你也可以自己注册一个账号,来进行验证。
首先对不知道ABP框架的同学说明下啥是ABP框架:
ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WEB应用程序框架和项目模板。 框架 ABP是基于最新的ASP.NET CORE,ASP.NET MVC和Web API技术的应用程序框架。并使用流行的框架和库,它提供了便于使用的授权,依赖注入,验证,异常处理,本地化,日志记录,缓存等常用功能。 架构 ABP实现了多层架构(领域层,应用层,基础设施层和表示层),以及领域驱动设计(实体,存储库,领域服务,应用程序服务,DTO等)。还实现和提供了良好的基础设施来实现最佳实践,如依赖注入。 模板 ABP轻松地为您的项目创建启动模板。它默认包括最常用的框架和库。还允许您选择单页(Angularjs)或多页架构,EntityFramework或NHibernate作为ORM。访问官网,了解更多。
本次选择的项目的结构为:
在之前的文章 [ABP框架]动态web Api的拦截用法 中有说明如何使用token进行授权验证,目前使用的依然是cookie的方式进行验证。 但是不影响前后端开发方式。 看下登录页面:
####前端使用的框架
1.vue
2.vuex
3.vue-router
4.jquery
1.element-ui
2.waves
3.bootstrap
4.BSBADMIN
以下是前端人员的原话,感谢 慧鑫666 抽出时间来完善vue的界面。
进行开发前, 我们假定你有
es6
,sass
,vue
,vue-router
,vuex
的技能基础。
建议读一读 尤玉溪大神的建议安装前端依赖
进入
Web项目
中的Assets目录
$ npm i
运行项目
记得先启动后台
$ npm run dev
webpack会用 express 启动一个8986端口的web服务器
$ npm run build
该命令会将所有文件编译到
dist
目录下, 参考上面的项目结构图
src/views
创建一个模块的目录。administration
的目录, 其中包含了所有系统管理的页面
每个模块里面也可能会包含 components
和 assets
目录, 表示其中的组件和资源都只属于当前模块Index.vue
, 作为父路由的页面, 用来控制该模块下的所有页面。User.vue
methods
中添加名为 fetchData
的方法, 在该方法中, 需要在获取完数据后调用 abp.view.setContentLoading(false)
关闭内容区域的loading遮罩层。(可以参照User.vue)src/router
目录,添加路由的模块文件夹,在该文件夹中添加名为 index.js
的文件src/router/index.js
中注册当前添加的路由信息src/services
目录, 添加对应接口请求的模块, 比如role相关的都放到roleService.js
中roleService.js
文件导出的对象和abp.services.yoyocms.role
是对应的。这样使用的好处是可以统一管理和扩展以上就是vue版本的ABP 的基本情况了。
vue版本开源地址:http://git.oschina.net/yoyocms/yoyocms-abpprojecttemplate
vue版本演示地址:http://vue.yoyocms.com/
angularJS版本开源地址:https://github.com/ltm0203/YoYoCms
angularJS版本演示地址:http://www.yoyocms.com
如果你有好的建议或者bug反馈,请到git上提issue 。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。