关于route:ngrxrouterstore-在-SAP-电商云-Spartacus-UI-开发中的作用

题目:@ngrx/router-store 的作用 官网 用于将 Angular Router 与 Store 连贯的绑定。 在每个路由器导航周期中,会分派多个动作,让您能够监听路由器状态的变动。 而后,您能够从路由器的状态中抉择数据,为您的应用程序提供附加信息。 装置: npm install @ngrx/router-store --save之后,在 package.json 会呈现一个依赖: actionRouter Store 提供了五个按特定程序调度的导航操作。 Router Store 提供的 routerReducer 应用 actions 给出的最新路由器状态更新其状态。 默认状况下,咱们倡议应用咱们提供的 creator function. routerRequestAction在每次导航开始时,路由器将调度 ROUTER_REQUEST action.Spartacus 没有用到这个 action. routerNavigationAction在导航期间,在任何 guard 或 resolvers 运行之前,路由器将调度 ROUTER_NAVIGATION 操作。 Spartacus 里应用到了这个 action: navigation target: routerNavigatedAction胜利导航后,路由器将调度 ROUTER_NAVIGATED action. 事件 ROUTER_NAVIGATION 触发时,home page 的 page guard 和 resolver 还没有执行: 事件 ROUTER_NAVIGATED 产生时,跳转曾经胜利实现了。所以 nextState 为 undefined. ...

November 1, 2021 · 1 min · jiezi

通俗理解IP路由

日常工作环境中,我们习惯于使用ping去测试网络的连通性。如果ping不通,我们往往会去怀疑是不是路由配置错了。路由是什么我们知道,IP地址是网络世界里的门牌号。你可以通过IP地址访问远在天边的网站,那么数据是如何到达网站的呢?靠的就是路径上每个节点的路由。路由,简单的说就是指导IP报文该去哪的指示牌。 一般说来,主机会在以下两个时机进行路由查询 收到报文时,查询路由决定是上送本机(LOCAL IN),或者从哪个出接口转发(FORWARD)本机发送报文时,查询报文出接口注意,转发需要开启 net/ipv4/ip_forward路由表长什么样以一个典型的主机为例,tristan有一个外部网卡eth0和一个内部还回网卡lo [root@tristan]# ifconfigeth0 Link encap:Ethernet HWaddr 00:80:C8:F8:4A:51 inet addr:192.168.99.35 Bcast:192.168.99.255 Mask:255.255.255.0 UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1 RX packets:27849718 errors:1 dropped:0 overruns:0 frame:0 TX packets:29968044 errors:5 dropped:0 overruns:2 carrier:3 collisions:0 txqueuelen:100 RX bytes:943447653 (899.7 Mb) TX bytes:2599122310 (2478.7 Mb) Interrupt:9 Base address:0x1000 lo Link encap:Local Loopback inet addr:127.0.0.1 Mask:255.0.0.0 UP LOOPBACK RUNNING MTU:16436 Metric:1 RX packets:7028982 errors:0 dropped:0 overruns:0 frame:0 TX packets:7028982 errors:0 dropped:0 overruns:0 carrier:0 collisions:0 txqueuelen:0 RX bytes:1206918001 (1151.0 Mb) TX bytes:1206918001 (1151.0 Mb)[root@tristan]# route -nKernel IP routing tableDestination Gateway Genmask Flags Metric Ref Use Iface192.168.99.0 0.0.0.0 255.255.255.0 U 0 0 0 eth0127.0.0.0 0.0.0.0 255.0.0.0 U 0 0 0 lo0.0.0.0 192.168.99.254 0.0.0.0 UG 0 0 0 eth0通过route -n我们可以看到主机上简要的路由表信息(当然通过ip route也可以),那么上面的路由信息中的每一表项代表什么意思呢? ...

June 2, 2019 · 3 min · jiezi

为了学习理解依赖注入和路由,自己撸了一个PHP框架

如何提高自己编写代码的能力呢?作为web开发者,我们通常都是基于面向对象OOP来开发的,所以面向对象的设计能力或者说设计模式的运用能力尤为重要,当然还有开发语言本身特性和基础的灵活运用。我们可以去阅读一些优秀的开源项目,理解里面的代码设计,去学习和造轮子来提高自己。我比较关注web framework中的路由、HTTP、依赖注入容器这几部分,路由和http处理是web框架必不可少的,整个框架的服务对象依赖解析也是很重要的,有了依赖注入容器可以实现类很好的解耦。Dependency Injection Container先来说下什么是依赖注入,依赖注入是一种允许我们从硬编码的依赖中解耦出来,从而在运行时或者编译时能够修改的软件设计模式(来自维基百科 Wikipedia)。依赖注入通过构造注入,函数调用或者属性的设置来提供组件的依赖关系。下面的代码中有一个 Database 的类,它需要一个适配器来与数据库交互。我们在构造函数里实例化了适配器,从而产生了耦合。这会使测试变得很困难,而且 Database 类和适配器耦合的很紧密。<?phpnamespace Database;class Database{ protected $adapter; public function __construct() { $this->adapter = new MySqlAdapter; }}class MysqlAdapter {}这段代码可以用依赖注入重构,从而解耦<?phpnamespace Database;class Database{ protected $adapter; public function __construct(MySqlAdapter $adapter) { $this->adapter = $adapter; }}class MysqlAdapter {}现在我们通过外界给予 Database 类的依赖,而不是让它自己产生依赖的对象。我们甚至能用可以接受依赖对象参数的成员函数来设置,或者如果 $adapter 属性本身是 public的,我们可以直接给它赋值。根据依赖注入的概念,我们的框架实现了这些特性。Dependency injection Container基于PSR-11规范实现,包括3种注入实现方式:构造方法注入(Constructor Injection)、setter方法或属性注入(Setter Injection)、匿名回调函数注入,代码如下:1.构造方法注入(Constructor Injection)<?php declare(strict_types=1);namespace Examples;use Eagle\DI\Container;class Foo{ /** * @var \Examples\Bar / public $bar; /* * Foo constructor. * @param \Examples\Bar $bar / public function __construct(Bar $bar) { $this->bar = $bar; }}/class Bar {}/class Bar { public $baz; public function __construct(Baz $baz) { $this->baz = $baz; }}class Baz {}$container = new Container;$container->set(Foo::class)->addArguments(Bar::class);$container->set(Bar::class)->addArguments(Baz::class);$foo = $container->get(Foo::class);var_dump($foo, $foo->bar);var_dump($foo instanceof Foo); // truevar_dump($foo->bar instanceof Bar); // truevar_dump($foo->bar->baz instanceof Baz); // true2.方法注入<?phpdeclare(strict_types=1);namespace Examples;require ‘vendor/autoload.php’;use Eagle\DI\Container;class Controller{ public $model; public function __construct(Model $model) { $this->model = $model; }}class Model{ public $pdo; public function setPdo(\PDO $pdo) { $this->pdo = $pdo; }}$container = new Container;$container->set(Controller::class)->addArguments(Model::class);$container->set(Model::class)->addInvokeMethod(‘setPdo’, [\PDO::class]);$container->set(\PDO::class) ->addArguments([‘mysql:dbname=test;host=localhost’, ‘root’, ‘111111’]);$controller = $container->get(Controller::class);var_dump($controller instanceof Controller); // truevar_dump($controller->model instanceof Model); // truevar_dump($controller->model->pdo instanceof \PDO); // true3.匿名回调函数注入<?phpdeclare(strict_types=1);namespace Examples;require ‘vendor/autoload.php’;use Eagle\DI\Container;class Controller{ public $model; public function __construct(Model $model) { $this->model = $model; }}class Model{ public $pdo; public function setPdo(\PDO $pdo) { $this->pdo = $pdo; }}$container = new Container;$container->set(Controller::class, function () { $pdo = new \PDO(‘mysql:dbname=test;host=localhost’, ‘root’, ‘111111’); $model = new Model; $model->setPdo($pdo); return new Controller($model);});$controller = $container->get(Controller::class);var_dump($controller instanceof Controller); // truevar_dump($controller->model instanceof Model); // truevar_dump($controller->model->pdo instanceof \PDO); // true自动布线 (auto wiring)<?phpdeclare(strict_types=1);namespace AutoWiring;require ‘vendor/autoload.php’;use Eagle\DI\ContainerBuilder;class Foo{ /* * @var \AutoWiring\Bar / public $bar; /* * @var \AutoWiring\Baz / public $baz; /* * Construct. * * @param \AutoWiring\Bar $bar * @param \AutoWiring\Baz $baz / public function __construct(Bar $bar, Baz $baz) { $this->bar = $bar; $this->baz = $baz; }}class Bar{ /* * @var \AutoWiring\Bam / public $bam; /* * Construct. * * @param \AutoWiring\Bam $bam */ public function __construct(Bam $bam) { $this->bam = $bam; }}class Baz{ // ..}class Bam{ // ..}$container = new ContainerBuilder;$container = $container->build();$foo = $container->get(Foo::class);var_dump($foo instanceof Foo); // truevar_dump($foo->bar instanceof Bar); // truevar_dump($foo->baz instanceof Baz); // truevar_dump($foo->bar->bam instanceof Bam); // trueRoute再介绍下路由使用的例子,route可以使用symfony的http foundation组件来处理HTTP请求(http messages)。<?phprequire ‘vendor/autoload.php’;use Eagle\Route\Router;use Symfony\Component\HttpFoundation\Request;$router = new Router();$router->get(’/articles’, function () { return ‘This is articles list’;});$router->get(’/articles/{id:\d+}’, function ($id) { return ‘Article id: ’ . $id;});$router->get(’/articles/{id:\d+}[/{title}]’, function ($id, $title) { return ‘Article id: ’ . $id . ‘, title: ’ . $title;});/匹配处理路由组/$router->group(’/articles’, function () use ($router) { $router->get(’/list’, function() { return ‘This is articles list’; }); $router->get(’/detail’, function ($id, $title) { return ‘Article detail id: ’ . $id . ‘, title: ’ . $title; });});$request = new Request();$routeHandler = $router->getRouteHandler();$response = $routeHandler->handle($request);echo $response;其它的ORM、cache、filesystem、session、validation等组件可以使用composer来由用户自由扩展。项目地址 https://github.com/parvinShi/… ...

March 11, 2019 · 2 min · jiezi

nuxt中使用路由守卫

1.在plugins文件下创建一个route.jsimport { getCookie, setCookie } from ‘@/pages/logreg/api/cookie’import axios from ‘axios’export default ({ app, store }) => { app.router.beforeEach((to, from, next) => { let isClient = process.client if (isClient) { let currentUrl = location.href if (currentUrl.indexOf(‘access_token=’) !== -1) { let wechattoken = currentUrl.split(‘access_token=’)[1] wechattoken = wechattoken.split(’&’)[0] setCookie(’token’, wechattoken, 5) } let token = getCookie(’token’) if (token) { store.state.user.userinfo.token = token axios .get(‘https://api.ass.net/pub/api/user_info', { params: { token } }) .then(res => { res = res.data if (res.code == 0) { res = res.data res.headImg = res.headImg.replace(‘http:’, ‘https:’) store.state.user.userinfo = Object.assign( {}, store.state.user.userinfo, res ) } }) .catch(error => console.log(error)) } } next() })}2.在nuxt.config.js里面配置 plugins: [ { src: ‘@/plugins/route’, ssr: true } ], ...

January 26, 2019 · 1 min · jiezi

vue中$router以及$route的使用

路由基本概念route,它是一条路由。{ path: ‘/home’, component: Home }routes,是一组路由。const routes = [ { path: ‘/home’, component: Home }, { path: ‘/about’, component: About }]router可以理解为一个容器,或者说一种机制,它管理了一组route。简单来说,route只是进行了URL和函数的映射,而在当接收到一个URL之后,去路由映射表中查找相应的函数,这个过程是由router来处理的。 const router = new VueRouter({ routes // routes: routes 的简写 })VUE中$route为当前router跳转对象里面可以获取name、path、query、params等。$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法,返回上一个history使用$router.go方法。跟上面说的一样,这里的$router就管理路由的跳转,英文里er结尾的都表示一种人,这里你可以把这个想象中一个管理者,他来控制路由去哪里(push、go),这样就比较容易记。路由跳转1 可以手写完整的path:this.$router.push({path:/user/${userId}})这种方式需要在路由中作如下配置{ path: ‘/user/:userId’, name: ‘***’, component: *** }这种接收参数的方式是this.$route.params.userId。2 也可以用params传递:this.$router.push({name:‘Login’,params:{id:’leelei’}})//不带参数 变成 ip/login3 也可以用query传递:this.$router.push({path:’/login’,query:{id:’leelei’})//带查询参数变成 ip/login?id=leelei//带斜杠/代表从根目录出发,不会嵌套之前的路径query传参是针对path的,params传参是针对name的。。接收参数的方式都差不多。。this.$route.query.和this.$route.params.注意这只是跳转url,跳转到这个url显示什么组件,得配置路由。router跳转和<router-link>标签跳转,规则差不多。一些需要注意的事使用query传参的话,会在浏览器的url栏看到传的参数类似于get请求,使用params传参的话则不会,类似于post请求。如果提供了path,params将会被忽略(即如果要使用params传参,则一定要使用name),但是query不属于这种情况。如果使用完整路径和query传参,刷新页面时不会造成路由传参的参数丢失。router.push和router.replace的区别是:replace不会向 history 添加新记录,而是替换掉当前的 history 记录,即使用replace跳转到的网页‘后退’按钮不能点击。最后谢谢大家,如果有错误的地方请指出。

October 13, 2018 · 1 min · jiezi