好久没写文字了,当然大家也不期待嘛,反正看代码就行了。
首先说下这个项目吧。
如标题一样是基于 vue+.NET 开发的框架,也是群友一直吼吼吼要一个 vue 版本的 ABP 框架。
我们先来看看首页吧:
还比较酷炫,提供下演示账号
演示地址:http://vue.yoyocms.com/
账号: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
建议读一读 尤雨溪大神的建议安装前端依赖
进入
中的 Assets 目录
- Web项目
- $ npm i
运行项目
记得先启动后台
- $ npm run dev
webpack 会用 express 启动一个 8986 端口的 web 服务器
- $ npm run build
该命令会将所有文件编译到
目录下, 参考上面的项目结构图
- dist
创建一个模块的目录。
- src/views
的目录, 其中包含了所有系统管理的页面
- administration
和
- components
目录, 表示其中的组件和资源都只属于当前模块
- assets
, 作为父路由的页面, 用来控制该模块下的所有页面。
- Index.vue
如果需要获取数据, 请在
- User.vue
中添加名为
- methods
的方法, 在该方法中, 需要在获取完数据后调用
- fetchData
关闭内容区域的 loading 遮罩层。(可以参照 User.vue)
- abp.view.setContentLoading(false)
目录,添加路由的模块文件夹,在该文件夹中添加名为
- src/router
的文件
- index.js
中注册当前添加的路由信息
- src/router/index.js
目录, 添加对应接口请求的模块, 比如 role 相关的都放到
- src/services
中
- roleService.js
文件导出的对象和
- roleService.js
是对应的。这样使用的好处是可以统一管理和扩展
- abp.services.yoyocms.role
以上就是 vue 版本的 ABP 的基本情况了。
vue 版本开源地址:https://github.com/yoyocms/YoYoCms.AbpProjectTemplate
vue 版本演示地址:http://vue.yoyocms.com/
angularJS 版本开源地址:https://github.com/ltm0203/YoYoCms
angularJS 版本演示地址:http://www.yoyocms.com
如果你有好的建议或者 bug 反馈,请到 github 上提 issue 。
体验网址 是: http://www.yoyocms.com/
来源: http://www.cnblogs.com/wer-ltm/p/7380122.html