摘要:
]})只需要在对应的路由对象下添加children数组即可,数组内的对象的path只需填相对路由即可。这里的例子可是不能运行成功噢,哪怕实现了Login组件也不能看到预期的效果。还有一点最重要的需要注意:在子路由/嵌套路由的情况下,想要层层渲染到子路由/嵌套路由,必须在其上层路由对象的模板中,添加<router-view>组件,让vue-router能继续往下渲染。代码:<rou
路由的概念在计算机界中的历史大概可以追溯到OSI模型中的数据链路层与网络层中的定义。这里的定义大意是:在转发数据包时,根据数据包的目的地址进行寻址,从而将数据包发往指定的目的地。
见GetMonitorChartDataFromAPI方法(这里的/api/services/app/log_SystemMonitorService/GetMonitorChartData就是ABP
在 Web开发中同样存在着路由的概念,在各式各样的前端 mvvm框架出来之前,普遍存在于后端。通俗的说法也就是 [module/]controller/action
的组合,将 url映射到指定的 action
中处理。现在在前端中同样存在着路由这一概念。
r)exportdefaultnewRouter({routes:[{path:"/",name:"HelloWorld",component:HelloWorld}]
为什么需要路由
在以往的前端开发中,通常没有路由这一概念,这样就造成一个问题:
>login</router-link>重点:不管是this.$router.push的参数,还是router-link的to参数,它们都可以是一个路由对象记住这一点,就可以随心所欲
- 前端是离散的,不可独立的(静态页面除外,它不需要上下文)。
脱离了后端的前端无法较好的构建一个完整系统,当然也有一些比较优秀的方案:
omdatabase,选择数据库连接之后就会创建实体模型,然后我们将这里生成的实体剪切到core项目下,即完成了core层的实体创建工作。 LgWG.LogQuery.Core层定义系统的领域,即定
- 单页应用,采用 ajax控制 dom节点以及动态修改页面内容
等等。
dateLogMonitorDatas方法被调用,完成前台的同步更新(_clients.Clients(list).updateLogMonitorDatas())。由于在该LogMonitorDal
但不可否认的是,在没有路由这一概念的情况下,前端确实显得不够灵活,跳转页面时随处可见的路径硬编码。url 即物理路径。
ue.use(Router)3.定义路由在这一步,我们要定义路由。即我们想让哪些url解析到哪些组件上去,来看看官方的例子:importVuefrom"vue"importRouter
为了完善前端开发,在后来的框架中,均引入了路由、控制器、视图等后端概念。借鉴成熟的东西来完善自身,这是非常便捷的一种方式。
,参数只能使用query,不能使用params也就是说,下面的代码是不能正常传递参数的:this.$router.push({path:"/login",params:{usernam
因此在现在的前端开发中,路由也是必不可少的一环了。很多人被它的概念弄的晕头转向,让我们捋一捋,看看它的真面目。
然后生成数据库。对于LogQuery数据库,确实是这样的(对此数据库的实体,ABP已经为我们做好了,我们只需要upodate数据库即可)。然而对于LogTrace_R和LogMonitor_R数据库,
路由是什么
前端中的路由更好理解。以 vue
举例,vue-router
会解析 url,将其映射到指定的 component进行渲染。因此,在这里我们给 vue
中的路由一个通俗的、狭义的定义:
中,用户可以设置监控范围、显示点数、是否为实时模式、窗口模式等条件,在查询模式和实时更新模式中都会根据这些条件获取响应的数据,进行相应的显示。这些设置可以根据用户级或租户级从数据库中读取(AbpSet
路由是对 url进行解析,看这个 url是否存在有与之匹配的组件去渲染。
的组件去渲染。路由如何使用在vue中分为三步:1.安装vue-router组件。可以查看package.json,看是否安装了vue-router。没有的话安装一下即可。在vue-cli3.x中,可以
路由如何使用
在vue
中分为三步:
is.$router.push({path:"/login",query:{username:"xxx",}})//命名路由带参数跳转this.$router.push
1. 安装vue-router
组件。
可以查看 package.json
,看是否安装了 vue-router
。没有的话安装一下即可。
业务功能实现日志查询。 本网站分为公共方法/工具类、基础设施层、领域层、应用服务层、网站应用层,权限部分的设计ABP已经为我们实现好了,我们需要做的工作是实现监控日志LogMonitor和操作轨迹日
在 vue-cli 3.x
中,可以直接在左侧面板中的依赖里查看到,并且一键安装。
: 这3个方法都是调用应用服务层的相关方法实现。具体参考代码。4.2系统监控界面及实现 系统监控就是实时显示各个服务器的运行情况,并可根据日期、系统名称等条件,从数据库中检索出详细的监控数据,
2. 使用vue-router
在 main.js
中全局引入一下:
因此在现在的前端开发中,路由也是必不可少的一环了。很多人被它的概念弄的晕头转向,让我们捋一捋,看看它的真面目。路由是什么前端中的路由更好理解。以vue举例,vue-router会解析url,将其映射到
import Router from "vue-router"
Vue.use(Router)
3. 定义路由
在这一步,我们要定义路由。
中可以使用如下语句获取vue-router实例:this.$router//通过路由跳转,下面的代码会跳转到localhost/loginthis.$router.push("/login
即我们想让哪些 url解析到哪些组件上去,来看看官方的例子:
等,使用等差数列的算法,具体实现参见代码中的GetDataByInterval方法。四、网站表现层 本层用于展现网站,是和用户直接打交道的界面。使用的是ASP.NETMVC5.0框架,表格显示采用的
import Vue from "vue"
import Router from "vue-router"
import HelloWorld from "@/components/HelloWorld"
Vue.use(Router)
export default new Router({
routes: [
{
path: "/",
name: "HelloWorld",
component: HelloWorld
}
]
})
例子中的 routes
数组中有一个路由对象,这个路由对象定义了如下的路由:
饼图曲线图显示使用的是chart,js,曲线图实时更新采用的是SignalR技术,界面效果见文章开头所示。4.1轨迹日志查询界面及实现 轨迹日志查询就是根据日期、日志类型、用户姓名、模块名、关键词等
url 对应根,即服务器web地址。
不能运行成功噢,哪怕实现了Login组件也不能看到预期的效果。还有一点最重要的需要注意:在子路由/嵌套路由的情况下,想要层层渲染到子路由/嵌套路由,必须在其上层路由对象的模板中,添加<route
此路由的名称是 HelloWorld
,路由的名称可以用以路由间的跳转,但必须保证唯一。
-router能继续往下渲染。代码:<router-view:key="$route.fullPath"></router-view>很多童鞋就是被卡在这里
此路由对应的组件是 HelloWorld
组件,这个组件在第三行代码中引入了。
to类与实体类的双向自动转换)、SignalR、Bootstrap、jQuery等。参考网站:http://www.aspnetboilerplate.com/。 使用该框架进行开发时,第一步是从A
以上三点也是定义一个路由对象的基本要素,第二点非必须。
示点数等条件检索监控数据。若监控范围内的数据量total大于要显示的点数tarNum,则在从0~total-1中取出tarNum个数,尽量做到间隔相等,使用等差数列的算法,具体实现参见代码中的GetD
定义子路由
现在我们有 localhost/
的路由了,如果再加一个 localhost/login
的路由呢?
指定的目的地。在Web开发中同样存在着路由的概念,在各式各样的前端mvvm框架出来之前,普遍存在于后端。通俗的说法也就是[module/]controller/action的组合,将url映射到指定的
import Vue from "vue"
import Router from "vue-router"
import HelloWorld from "@/components/HelloWorld"
Vue.use(Router)
export default new Router({
routes: [
{
path: "/",
name: "HelloWorld",
component: HelloWorld,
children: [
{
path: "login",
name: "Login",
component: Login
}
]
}
]
})
只需要在对应的路由对象下添加 children
数组即可,数组内的对象的 path
只需填相对路由即可。这里的例子可是不能运行成功噢,哪怕实现了 Login
组件也不能看到预期的效果。
mponent:Login}]}]})只需要在对应的路由对象下添加children数组即可,数组内的对象的path只需填相对路由即可。这里的例子可是不能运行成功噢,哪怕实现了Login组件也不能看到预
还有一点最重要的需要注意:
用ABP框架,需要对以下知识有所了解:ASP.NETMVC5、WebAPI2、DDD领域驱动设计(Entities、Repositories、DomainServices、DomainEvents、A
- 在子路由/嵌套路由的情况下,想要层层渲染到子路由/嵌套路由,必须在其上层路由对象的模板中,添加
<router-view>
组件,让vue-router
能继续往下渲染。
代码:
每个角色的操作范围。具体请参考代码。 2、日志记录:本系统引用Log2Net组件,在Application_Start事件中注册日志系统,在各application和session事件中注册各个日志
<router-view :key="$route.fullPath"></router-view>
很多童鞋就是被卡在这里了,还有另一种写法:
果再加一个localhost/login的路由呢?importVuefrom"vue"importRouterfrom"vue-router"importHelloWo
<router-view></router-view>
多级路由也是这么层层定义出来的。
这个组件,我们可以方便地将日志记录到数据库中,那么,我们怎么能看到这些日志呢?于是,日志查询网站应运而生。效果图如下: 该代码已开源,地址为 https://git
路由间的跳转
在引入 vue-router
之后,在组件中可以使用如下语句获取 vue-router
实例:
30/Log2Net-LgWG.LogQuery 。下面介绍其代码设计。一、总体介绍 日志查询网站由三部分组成:1、系统监控;2、日志查询;3、权限设计。本系统对应的数据库为读写分离中的读
this.$router
// 通过路由跳转,下面的代码会跳转到 localhost/login
this.$router.push("/login")
// 通过命名跳转, 下面的代码同样会跳转到 localhost/login
this.$router.push({ name : "Login" })
// 路由带参数跳转
this.$router.push({
path: "/login",
query: {
username: "xxx",
}
})
// 命名路由带参数跳转
this.$router.push({
name: "Login",
params: {
username: "xxx",
}
})
上述在带参数跳转的例子中,需要着重注意的一点:
务。在本层中,DTO数据传输对象的主要作用是封装UI层需要的数据,避免数据库实体全部暴露给UI层。这些dto对象被用作服务层方法的参数或返回值。 本层中的服务分为接口和实现,调用时使用接口方法。这些
- 当使用
path
跳转时,参数只能使用 query
,不能使用 params
也就是说,下面的代码是不能正常传递参数的:
d}]})例子中的routes数组中有一个路由对象,这个路由对象定义了如下的路由:url对应根,即服务器web地址。此路由的名称是HelloWorld,路由的名称可以用以路由间的跳转,但必须保证唯一。
this.$router.push({
path: "/login",
params: {
username: "xxxx",
}
})
在视图中可以使用如下代码进行跳转:
随心所欲的玩转跳转了。写在最后路由这篇没有demo演示,因为路由这部分想要更好的结合实践来学习的话,最好利用实战来学习。因此这里只讲述了路由的概念和基本用法,以及使用中常见的几个问题。我们在入门篇会经
<router-link :to="{ path: "/login"}">login</router-link>
重点:
域,即定义系统使用的实体,定义仓储接口等。本项目定义了LogTrace和LogMonitor两个领域,分别定义了其实体和仓储接口。我们定义了泛型的基础仓储接口IBaseRepository,这两个仓储
- 不管是
this.$router.push
的参数,还是 router-link
的 to
参数,它们都可以是一个路由对象
记住这一点,就可以随心所欲的玩转跳转了。
uery.EntityFramework层为仓储实现,我们分别定义这两个实体接口的实现。一般情况下,我们只需要继承EfRepositoryBase就可以了,EfRepositoryBase已经为我们定
写在最后
路由这篇没有demo演示,因为路由这部分想要更好的结合实践来学习的话,最好利用实战来学习。
mAPI方法(这里的/api/services/app/log_SystemMonitorService/GetMonitorChartData就是ABP框架根据我们的服务的接口,自动为我们生成的接口
因此这里只讲述了路由的概念和基本用法,以及使用中常见的几个问题。
name:"xxxx",}})在视图中可以使用如下代码进行跳转:<router-link:to="{path:"/login"}">lo
我们在入门篇会经常使用到它的,会有更多的机会去深入的了解它,深入篇也会对它进行一个更深入的了解:如何自动化生成路由。
ink>重点:不管是this.$router.push的参数,还是router-link的to参数,它们都可以是一个路由对象记住这一点,就可以随心所欲的玩转跳转了。写在最后路由这篇没有demo演
发表评论