從零開始一個個人博客 by asp.net core and angular(三)

来源:https://www.cnblogs.com/GreenShade/archive/2020/01/27/12236861.html
-Advertisement-
Play Games

這是第三篇了,第一篇只是介紹,第二篇介紹了api項目的運行和啟動,如果api項目沒什麼問題了,調試都正常了,那基本上就沒什麼事了,由於這一篇是講前端項目的,所以需要運行angular項目了,由於前端項目是需要調用介面的,好像要配置跨域,跨域這個東西,你可以在asp.net core項目上配置,這樣在 ...


這是第三篇了,第一篇只是介紹,第二篇介紹了api項目的運行和啟動,如果api項目沒什麼問題了,調試都正常了,那基本上就沒什麼事了,由於這一篇是講前端項目的,所以需要運行angular項目了,由於前端項目是需要調用介面的,好像要配置跨域,跨域這個東西,你可以在asp.net core項目上配置,這樣在本機5000埠運行時就可以直接調用了,也不會有跨域問題,也可以用nginx反向代理時配置跨域,由於我的項目要經常本地調試,所以我在本地直接配置了跨域,這樣部署的時候 nginx就不用配置跨域了,具體的配置代碼如下,項目里其實已經配置好了,就貼下代碼看看吧,上一篇的最底部也已經寫上了,這次就再寫一次吧。

在startup類里的ConfigureServices方法里添加如下代碼

項目代碼鏈接在第一篇里

  services.AddCors(options =>
            {
                options.AddPolicy("any", builder =>
                {
                    builder.AllowAnyOrigin() //允許任何來源的主機訪問
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .WithOrigins("http://192.168.1.109:4200", "http://localhost:4200", "http://192.168.1.103:4200",
                    "http://192.168.1.103:4200", "http://192.168.16.67:4200", "http://192.168.16.138:4200", "https://www.douwp.club")
                    .AllowCredentials()//指定處理cookie
                    .SetPreflightMaxAge(TimeSpan.FromSeconds(60));
                });
            });

在Configure方法里使用跨域 app.UseCors("any");

做到這些以後就可以愉快的玩耍了,所以來看看前端項目吧 下麵是項目結構圖

標準的前端項目文件結構 其實angular對於後端開發來說上手還是蠻快的 ts寫著很順手,就是前端擼起來比較蛋疼,好在第三方的ui庫挺多的,我用的主要就是螞蟻金服的 NG-ZORRO,對angular支持的還算可以,之前聽阿裡的哥們說angular挺老了,感覺現在學起來好像有點不流行了,不過不管怎麼說,也算是搞完了,其他的什麼就以後再說吧。下麵看看項目運行後的圖,我現在已經把它部署到自己的伺服器上了。

ui有點簡陋 不過作為一個博客展示用的網站也夠了,功能變數名稱我申請的是

www.douwp.club 意思是做UWP 不過do uwp好像沒分開很容易被誤解,我也很鬱悶。不過無所謂了,大不了回頭再申請個。

命令行進入項目文件夾,然後執行npm install npm start就可以運行了,當然你裝了angular一些東西,也可以直接使用ng serve什麼的運行項目,運行之前建議先把api項目給運行起來。

如果是不瞭解這些的朋友沒關係,你可以先把angular的官方文檔給看一遍,下麵是鏈接。

一套框架,多種平臺 移動端 & 桌面端 angular中文鏡像網站

這裡基本上講述了所有的angular的知識

下麵是TypeScript網站

TypeScript 相關介紹

當然還有es 6的一些知識 下麵是一個同事推薦的一個人的博客

ES6 入門教程

最後就是我用到了ui框架的網站了

Ant Design of Angular

感覺這些對於angular 零基礎的的人應該很有幫助,看完以後應該就能使用angular做些東西了。

項目運行以後沒問題基本上就算是好了,這個博客是用qq登錄的,然後超級管理員可以進入博客後臺進行管理,動圖上面也有展示,下麵還是貼上最後的網站地址吧。

實際項目運行地址

先寫到這裡吧 回頭再潤色潤色


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • SQL性能下降的原因 查詢語句寫的不好 索引失效 關聯查詢太多 伺服器調優及各個參數的的設置(緩衝、線程數等等) 常見的JOIN查詢 1、SQL的執行順序 手寫的順序: 真正機器執行的順序: 2、七種join查詢 最後兩種語法mysql不支持,但是我們可以用union來聯合其他的查詢結果來拼湊出最終 ...
  • 咳咳,這個是為了趕量 需要註意的就是輸入方式,別的也沒什麼難點 Problem Description Ignatius likes to write words in reverse way. Given a single line of text which is written by Igna ...
  • 1 引言 眾所周知,模塊化編程具備很多優點,尤其在複雜項目上體現更為明顯。Python模塊化編程有助於開發者統籌兼顧和分工協作,並提升代碼靈活性和可維護性,是編程開發者不可或缺的一項重要工具。 2 Python模塊 在平時Python編程中,我們所保存的以.py為尾碼的代碼文件(如hello.py) ...
  • import sys from qdarkstyle import load_stylesheet_pyqt5 from PyQt5.QtWidgets import QApplication, QTableView from PyQt5.QtCore import QAbstractTableMo ...
  • 本地127.0.0.1可以訪問到nginx,外網ip無法訪問 解決方法:1,關閉firewall防火牆(系統自帶):service firewalld stop<不推薦>。2,開發某個埠:firewall-cmd --permanent --add-port=80/tcp: <註意重啟才能生效:f... ...
  • pygame 快速入門 目標 1. 項目準備 2. 使用 創建圖形視窗 3. 理解 圖像 並實現圖像繪製 4. 理解 游戲迴圈 和 游戲時鐘 5. 理解 精靈 和 精靈組 項目準備 1. 新建 飛機大戰 項目 2. 新建一個 3. 導入 游戲素材圖片 游戲的第一印象 把一些 靜止的圖像 繪製到 游戲 ...
  • 一、結構(Struct)是CTS中五種基本類型之一,是一種值類型,同樣封裝了同屬一個邏輯單元的數據和行為,這些數據和行為通過結構中的成員表示;結構與類共用大多數相同的語法,但結構比類受到的限制更多,結構適用於表示輕量級類型;使用struct關鍵字定義結構: //定義一個公共結構MyStruct pu ...
  • 大家在使用EntityFrameworkCore的DBFirst的腳手架(Scaffolding)時應該遇到過Build Failed的錯誤,而沒有任何提示,我也遇到過不少次,目前已經完美解決並將排查方法分享給大家: (1)對於要使用腳手架的項目,首先要確保項目是可以正常編譯運行的,在VisualS ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...