首页 文章

我怎么能把4角作为前端和laravel api作为后端?

提问于
浏览
-1

我有一个完整的堆栈Angular 4用于前端,后端用laravel实现 . 现在我想seo服务器端渲染Angular,但我不知道如何做到这一点 . 另一方面,服务器端的语言是Laravel,我不能使用该节点 .

有没有办法完全复制Laravel的路线并使用laravel和nodejs?

更新1:当我加载页面时这些错误显示,但从表面上看,一切正常:

_normalizedNames:
      Map {
            'server' => 'server',
            'content-type' => 'content-type',
            'transfer-encoding' => 'transfer-encoding',
            'connection' => 'connection',
            'vary' => 'vary',
            'cache-control' => 'cache-control',
            'date' => 'date',
            'strict-transport-security' => 'strict-transport-security' } 
        },
type: 2,
url: 'https://domainbackend/backend/api/f-product/'

}


```java
const domino = require('domino');
const fs = require('fs');
const path = require('path');

import 'localstorage-polyfill'
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import {enableProdMode} from '@angular/core';
// Express Engine
import {ngExpressEngine} from '@nguniversal/express-engine';
// Import module map for lazy loading
import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';

import * as express from 'express';
import {join} from 'path';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');
const template = fs.readFileSync(join(DIST_FOLDER, 'home', 'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;
global['Event'] = null;
global['localStorage'] = localStorage;

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main.bundle');

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));


app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'home'));

// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'home'), {
  maxAge: '1y'
}));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', { req });
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

路线:

import { NgModule} from '@angular/core';
import {RouterModule, Routes} from "@angular/router";
import {ProgrammingComponent} from "./programming.component";
import {PMainComponent} from "./p-main/p-main.component";
import {ProgrammingChildComponent} from "./programming-child/programming-child.component";
import {ProgrammingPostComponent} from "./programming-post/programming-post.component";


const graphicRoutes: Routes = [
  {path:'', component: ProgrammingComponent,children:[
    { path: '', pathMatch: 'full', redirectTo: 'category/all'},
    { path: 'برنامه-نویسی/category', pathMatch: 'full', redirectTo: 'category/all'},
    { path: 'category/all', component: PMainComponent},
    {path:'category/:id', component: ProgrammingChildComponent},
    {path:':id', component: ProgrammingPostComponent},
    {path:'search', loadChildren: './main-programming-search/main-programming-search.module#MainProgrammingSearchModule'},
  ]},

];

@NgModule({
  imports: [RouterModule.forChild(graphicRoutes)],

  exports: [RouterModule],
})

export class ProgrammingRoutingModule {

}

1 回答

  • 1

    你需要的是meta标签,让我们说用户点击/关于

    然后在你的组件中添加它

    about.component.ts:

    import {Component, Input, OnInit} from '@angular/core';
    import {Meta, Title} from '@angular/platform-browser';
    import {SettingsService} from '../services/settings.service';
    import {ISiteSettings} from '../interfaces/ISiteSettings';
    
    @Component({
      selector: 'app-about',
      templateUrl: './about.component.html',
      styleUrls: ['./about.component.scss']
    })
    export class AboutComponent implements OnInit {
        public site_settings:ISiteSettings;
       constructor( private meta:Meta, private title:Title,private settings_ser:SettingsService) {
    
      }
    
      ngOnInit(){
        this.site_settings.getSettings().subscribe(settings => {
          this.site_settings = settings;
          this.setMeta();
        });
      }
    
      setNeta(title:string = null,keywords:string = null,description:string = null):void{
        let _t = this.site_settings.title + ' | ' + this.site_settings.description;
        let _k = this.site_settings.keywords;
        let _d = this.site_settings.description;
        if(title && title.length) {
          _t  = title;
        }
        if(keywords && keywords.length){
          _k = keywords;
        }
        if(description && description.length){
          _d = description;
        }
        this.title.setTitle(_t);
        this.meta.updateTag({ name: 'keywords', content: _k});
        this.meta.updateTag({ name: 'description', content: _d });
      }
    }
    

    settings_ser 调用laravel来获取about页面的预定义元,一旦你拥有它,你就会在index.html页面中更新以下元:

    <meta name="initial description" content="Boutique Create Agency">
    <meta name="initial keywords" content="Boutique Create Agency">
    <title>initial title</title>
    

相关问题