【AaronYang第一講】ASP.NET MVC企業開發的基本環境[資源服務器概念]

時間  2019-11-09
標籤 AaronYang第一講 asp.net asp mvc 企業 開發 基本 環境 資源 服務器 概念 欄目 ASP 简体版
原文   原文鏈接

學完了ASP.NET MVC4 IN ACTION 六波之後 企業開發演習php

標籤：AaronYang  茗洋  EasyUI1.3.4   ASP.NET MVC 3css

本篇博客地址：http://www.cnblogs.com/AaronYang/p/3324014.htmlhtml

開發準備(AaronYang原味)

1你須要從EasyUI官網下載最新的EasyUI，我用的是EasyUI 1.3.4 (百度雲下載)你能夠從這裏進入官網下載jquery

2既然是以爲有企業味道，公司發佈產品使用最後都是經過域名訪問咱們作的產品，爲了模擬域名的訪問模式，咱們須要修改host，這裏我使用 SwitchHost(百度雲下載)linux

3我跟你們同樣，窮屌絲。有一臺本身的馬馬虎虎的小筆記本本就夠了。因此不少編程實驗，我只能簡單模擬，但會提供嘗試的方向web

來這裏學習，簡單的ASP.NET程序寫好後，發佈讓web能夠在局域網訪問，這裏應該都會的，假設你會了吧。不少初學者寫項目，都喜歡直接把圖片，js文件，樣式文件直接在項目中建對應的文件夾放着。可是企業的項目，可能有不少不少的項目。因此此時咱們須要一個資源服務器，把經常使用的多個系統公用的資源放到上面，而後經過連接訪問獲得資源。這個服務器你能夠是Linux的，也能夠是windows的，本人linux不怎麼樣，因此仍是微軟的iis部署吧，你也能夠用其餘的web服務器，好比Apache，tomcat。這裏只是提供一種分離的思想。放到不一樣的服務器上，讓服務器術業有專攻。不一樣的硬盤對應的讀寫的速度都不同，有的讀速度快，有的寫快，寫的快的服務器，咱們能夠作，好比說日誌服務器，這裏咱們可能須要對硬盤的讀的要求高點，咱們普通的demo固然不會有壓力測試的，因此沒事
接下來你須要想一個你的域名，我直接用個人域名了，例如http:// www.yyang.com,固然這個域名不存在的。可是經過SwitchHost，咱們能夠模擬出來。接下來，個人資源服務器域名就叫 http://res.yyang.com
對於資源服務器，可能你的網站圖片是重點，且訪問叫頻繁，因此你能夠在單獨分出來一個例如 http://image.yyang.com來減少服務器壓力，單獨特殊處理。
我在D盤新建了一個文件夾，直接叫yyang了
image
接下來，咱們新建一個空的ASP.NET網站，這裏我沒有用MVC，我以爲ASP.NET就夠了，固然你也能夠PHP，隨便了
這裏我取了個Yyang.Res.Web做爲這個項目的名字
image image
接下來，新建幾個文件夾- image，css，js，res
再創建一個空的頁面 Default.aspx，寫上簡單的你的大名
image image
按下F5，咱們試下能不能運行
image
接下來，咱們打開下載好的Easyui1.3.4
我只是刪掉簡單的txt文件。其實demo，api，咱們根本就不要的，你能夠選擇刪掉，或者不刪掉。我只是以爲初學的時候，對EasyUI不熟悉的能夠參考學習下，因此沒有去掉，這裏已經包括了jquery包，因此不想在放其餘的jquery包到項目中去了
image
拷貝該文件夾到項目的res文件夾去，固然你本身隨便怎麼好管理怎麼放。咱們運行項目，直接訪問easyui的demo頁面
image image
image
接下來，咱們在訪問js的文件 http://localhost:29245/Yyang.Res.Web/res/jquery-easyui-1.3.4/easyloader.js
均可以了，咱們能夠把這個項目部署到IIS上

4基本部署方法express

打開IIS管理器，運行窗口輸入inetmgr，前提 操做系統中裝了 IIS
（開始> 控制面板>程序>打開或關閉Windows功能 wps_clip_image-13252>裏面的所有選中而後肯定 便可安裝）
1.4.1.  開始發佈
咱們能夠在D盤創建一個wwwroot的文件夾，專門用來放發佈好的項目
而後在wwwroot中新建一個 res.yyang.com的文件夾，用來放資源系統的網站
發佈web22
image可是彷佛沒有image等空文件夾
咱們能夠在image文件裏放一個logo，在css和js放一個空的css文件和js文件，而後從新發布
個人css代碼以下：
  
@charset "utf-8";
/*
 * 將具備默認margin和padding的標記置零
 * @overlay *
 * @desc    全部標記的margin、padding都在使用時具體定義
 */
*{margin:0;padding:0;}
/*
 * 修正IE5.x和IE6的斜體溢出bug
 * @bugfix
 * @css-for IE 5.x/Win, IE6
 */
* html body{
overflow: visible;
}
* html iframe, * html frame{
overflow: auto;
}
* html frameset{
overflow: hidden;
}

/* @group 經常使用標籤 */
/*
* 基本標籤默認樣式取消
* @overlay HTML標籤
* @desc 取消基本標籤默認樣式,防止不一樣瀏覽器顯示效果不一樣
* @Prop text-align:center; 解決不一樣瀏覽器劇中問題
*/
body{color:#000;background:#fff;font:12px/22px Verdana,Arial,sans-serif,"Times New Roman",宋體;text-align:center;}
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,tr{margin:0;padding:0;}
input,select{font-size:12px;vertical-align:middle;}
/*
* 設置內容左對齊
* @overlay div
* @desc 恢復因BODY設置劇中產生的繼承
*/
body div{text-align:left;}

/*
* 標籤屬性
* @overlay textarea,input
* @desc 強制輸入時內容超出時換行
*/
textarea,input{    word-wrap:break-word;word-break:break-all;padding:0px;}
/*
* 清除ul列表標記的樣式
* @overlay li
* @desc    ul列表更多的用在不須要列表前置符號的樣式裏
*/
li{list-style-type:none;}
/*
* 定義圖片邊框
* @overlay img
* @desc    當圖片做爲連接內容被填充時，會有默認邊框出現，重定義掉
*/
img{border:0 none;}
/*
* 定義默認的連接樣式
* @overlay a
* @desc    僅僅是做爲默認樣式提供，能夠在各自的實例中覆蓋掉
*/
a:link, a:visited{
color:#000;
text-decoration: none;
}
a:hover{
color:#F60;
text-decoration: underline;
}
/* 去掉連接的虛線框 */
/* a {outline: none; a {star:expression(this.onFocus=this.blur()); */  

/*
* 定義H系列標籤
* @overlay HN
* @desc 覆蓋H系列標籤默認屬性
*/
h1{ font-size:24px;}
h2{ font-size:20px;}
h3{ font-size:18px;}
h4{ font-size:16px;}
h5{ font-size:14px;}
h6{ font-size:12px;}

/* @end */


/* @group 通用屬性定義 */
/* 鼠標樣式 */
.pointer{cursor:pointer;}
/* 取消邊框 */
.NoBorder{border:0 none;}
/* 文本對齊方式 */
.t-l{text-align:left;}
.t-c{text-align:center;}
.t-r{text-align:right;}

/*
* 字母和單詞換行設置
* @class Break 強制內容換行
* @class Nobreak 強制內容不換行
*/
.Break{word-break:break-all;word-wrap:break-word;}
.Nobreak{word-break:keep-all;word-wrap:normal;}

/* 浮動定義 */
.FL{float:left;}
.FR{float:right;}

/* 定義文本下劃線 */
.UnLine{text-decoration:underline;}
.DisunLine{text-decoration:none;}

/* 定位關係 */
.absolute{position:absolute;}
.relative{position:relative;}

/* 下劃點虛線 */
/*
.dotLine{ background:url(../image/dot01.gif) repeat-x left bottom;}
*/


/* ul列表
.ul-fl li{
float:left; height:23px; line-height:23px; padding-left:20px;
}
.ul-fl-d li{
float:left; height:23px; line-height:23px; background:url(../images/dot/dot3-3.jpg) no-repeat 8px 10px; padding-left:20px;
}
.ul-no-f li{
height:23px; width:100%; overflow:hidden; line-height:23px; background:url(../images/dot/dot3-3.jpg) no-repeat 8px 10px; padding-left:20px;
}
*/
/* @end */  


/* 通用容器 */
.wrapper{
clear: both;
overflow: hidden;
}

/* @group 隱藏元素 */

/*
* 隱藏元素
* @class o-hidden
* @desc 當元素內容內容超出元素height 或 width 時，隱藏之
*/
.o-hidden{overflow:hidden;}
/*
* 隱藏元素
* @class invisible
* @desc    visibility能夠隱藏元素，可是仍是會在佈局中佔位
*/
.invisible{
visibility:hidden;
}

/*
* 從頁面佈局上隱藏元素
* @class hidden
* @desc    從佈局上隱藏元素
*/
.hidden{
display: none;
}
.block {display:block;}
/* @end */

/*
 * 清理元素
 * @class clear
 * @desc    清理浮動元素,當浮動換行時後面元素不但願浮動，添加此屬性，防止IE BUG
 */
 .clear{clear:both; height:0px; width:100%; font-size:1px; line-height:0px; visibility:hidden; overflow:hidden;}
 


/* 經常使用樣式定義 */

/*
* 邊框定義
* @Pro 由大寫B開頭,表示系統公用邊框樣式
* @desc 經常使用樣式可更具一個項目的樣式使用頻率從新定義,擴展
*/
.BTW{ border-top-width:1px;}
.BRW{ border-right-width:1px;}
.BLW{ border-left-width:1px;}
.BBW{ border:0px; border-bottom-width:1px;}
.Bord1{border:1px solid #999;}
.Bord2{border:2px solid #999;}

/* 邊框寬度 (BW開頭) */
.BW1{ border-width:1px;}
.BW2{ border-width:2px;}
.BW3{ border-width:3px;}
.BW4{ border-width:4px;}
.BW5{ border-width:5px;}
/* 邊框樣式 (Bs開頭) */
.BsS{ border-style:solid;}
.BsD{ border-style:dotted;}
/* 邊框顏色 (Bc開頭) */
.BcBlue{ border-color: #0000FF;}
.BcBlack{ border-color: #000;}
/* 下劃線 */
.BotLine{ border-bottom:1px solid #CFCFCF; overflow:hidden;}
/*.BotDotLine{ background: url(../image/dot01.gif) repeat-x left bottom;}*/
.BotDotLine01{ width:95%; margin:0 auto; background: url(../image/dot01.gif) repeat-x; height:1px; line-height:1px; overflow:hidden;}
/*.BotDasLine{ border-bottom:1px dashed #CFCFCF; overflow:hidden; height:1px; line-height:1px;}*/
/*.border-r-dot{ background:url(../image/dot02.gif) repeat-y right top;}*/

/*
* 寬度定義
* @Pro 由小寫C開頭,表示color
* @desc 經常使用樣式可更具一個項目的樣式使用頻率從新定義,擴展
*/
.W1024,.W786,.W975,.W972{width:968px;margin:0 auto;}
.W1024{width:1024px;}
.W786{width:786px;}
.W975{width:975px;}
.W972{width:972px;}

/*
* 顏色功能定義
* @Pro 由小寫C開頭,表示color
* @desc 經常使用樣式可更具一個項目的樣式使用頻率從新定義,擴展
*/
.cRed{color: #F00;}
.cWhite{color: #FFF;}
.cGreen{color:#0F0;}
.cGray{color: #666;}
.cBlue{ color: #00F;}
.cblack{ color:#000;}
/* 定義某個項目經常使用顏色 */
.c001{color:#663;}

/*
* 定義字體樣式
* @Pro 由大寫字母F開頭,表示FONT
* @desc 經常使用樣式可更具一個項目的樣式使用頻率從新定義,擴展
*/

/* 字體樣式 */
.FB{font-weight:bold;}
.FN{ font-weight:normal;}
.FI{font-style:italic;}
/* 字體大小 */
.F10{font-size:10px;}
.F11{font-size:11px;}
.F12{font-size:12px;}
.F13{font-size:13px;}
.F14{font-size:14px;}
.F16{font-size:16px;}
.F18{font-size:18px;}

/*
* 定義間距,上下2個DIV間距
* @Pro 使用DIVH開頭.
* @desc 上下DIV有間距時使用,儘可能不使用margin/padding值,防止不一樣瀏覽器出現BUG,
*     使用下面屬性可兼容大多瀏覽器.
*/
.DivH5,.DivH10,.DivH15,.DivH20,.DivH25,.DivH30,DivH1,.DivH40{width:100%;overflow:hidden;}
.DivH1{ height:1px;}
.DivH5{height:5px;}
.DivH10{height:10px;}
.DivH15{height:15px;}
.DivH20{height:20px;}
.DivH25{height:25px;}
.DivH30{height:30px;}
.DivH40{height:40px;}

/*
* 定義行高
* @class LH
* @desc 使用較少,主要定義line-height屬性
*/
.LH1{ line-height:1px; }
.LH10{ line-height:10px; }
.LH15{ line-height:15px; }
.LH18{ line-height:18px; }
.LH20{ line-height:20px; }
.LH25{ line-height:25px;}
.LH30{ line-height:30px;}
.LH35{ line-height:35px;}

/*
* 標題樣式定義
* @Pro PTit
* @desc 在定義p標籤元素或其它元素時,須要同時定義行高和高度,通常使用在標題顯示中.
*/

.PTit25,.PTit20,.PTit18,.PTit30,.PTit,.PTit1,.PTit22{    width:100%;    overflow:hidden;}
.PTit30{line-height:30px;height:30px;}
.PTit25{line-height:25px;height:25px;}
.PTit22{line-height:22px;height:22px;}
.PTit20{line-height:20px;height:20px;}
.PTit18{line-height:18px;height:18px;}
.PTit15{line-height:15px;height:15px;}
.PTit10{line-height:10px;height:10px;}
.PTit1{line-height:1px;height:1px;}

/*
* MORE更多樣式設計
* @Pro MORE
* @desc 顯示在右側更多/MORE樣式,可根據需求擴展
*/

.More{text-align:right;position:absolute; top:0; right:3px;}
.MoreR5{ position:absolute; top:0px; right:3px; font:12px normal; }
.MoreR15{ position:absolute; top:0px; right:15px; font:12px normal;}

/*
* 普通列表樣式定義
* @desc 文章列表樣
* @use 通常列表使用,ul li列表
*/
.ArtList,.ArtList25,.ArtList22,.ArtList24{ width:100%; overflow:hidden; margin:0 auto;}
.ArtList li{ width:100%; height:20px; line-height:20px; overflow:hidden;}
.ArtList25 li{ width:100%; height:25px; line-height:25px; overflow:hidden;}
.ArtList24 li{ width:100%; height:24px; line-height:24px; overflow:hidden;}
.ArtList22 li{ width:100%; height:22px; line-height:22px; overflow:hidden;}

/* @end */



/* 備註 */
/*在終極頁面中調用該通用樣式時,應該注意顯示效果的不一樣,由於後臺上傳信息時編輯器裏面樣式並無調用本默認樣式表.
 *
 *因此在編輯器中標籤會有默認的屬性,用戶在添加信息時,這些信息都是附帶默認樣式的.
 *若是用咱們在終極頁面也調用本默認CSS文件的話,許多標籤如:p,td,li......標籤默認樣式都被取消,所以顯示效不一樣.
 *
 *解決辦法:
 *    在終極頁面顯示內容區域還原這些標籤的默認屬性.
 *
 */
  
 /*
 ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,tr{ margin:auto; padding:inherit;}
 input,select{ font-size:inherit;}
 img{border: inherit;}
 ul,li{margin:auto; padding:inherit;}
 li{
list-style-type:disc;
 }
*/
CSS通用樣式集合

Logo我直接使用博客園的了編程

logo

js我直接新建一個空的js文件commom.jsjson

完成後,咱們從新發布一下windows

imageimage

打開IIS管理器 (Win+R  輸入inetmgr也能夠打開)

imageimageimage

完成後,咱們打開瀏覽器輸入

http://res.yyang.com/res/jquery-easyui-1.3.4/index-demo.html

發現運行不了,由於這個域名根本不存在,此時咱們須要switchhost的幫助

打開Switchhost.咱們先創建一個 開發的host環境,刪掉默認的方案一,方案二,添加一個開發方案

imageimage

一個開發嚴格的公司,每每有好幾臺服務器,一個產品的發佈都要通過好幾個服務器環境的測試才能夠驗收

一臺開發環境服務器,通常都是本身電腦(127.0.0.1),一臺基本測試服務器(例如192.168.10.110),另外一臺測試服務器(例如192.168.10.120),最後一臺測試服務器是跟真實部署環境比較像的服務器環境，咱們叫P版環境（例如192.169.10.188），最後就是真實的最終要使用的發佈的服務器環境了。咱們在創建幾個方案，固然這裏不少開發者只有一臺電腦，我建議仍是不要用虛擬機，哎，個人電腦配置很差。。。開虛擬機會卡卡滴。有條件的多買幾個電腦，模擬公司的開發環境。（爲了實踐更多的技術，我必須努力賺錢買本身的電腦，個人目標，今年買3臺電腦，固然不是服務器級別的了，加油！！！）

imageimage

雙擊某個方案，就能夠當即切換環境。咱們雙擊開發環境，添加以下host配置

127.0.0.1 www.yyang.com
127.0.0.1 res.yyang.com

 

此時咱們打開瀏覽器，輸入：

http://res.yyang.com:1001/res/jquery-easyui-1.3.4/index-demo.html

效果會以下：

image

這就是Switchhost的做用，咱們之後在代碼得到域名的時候，就不會是什麼localhost了，與真實的環境更接近。

接下來，咱們訪問默認的Default.aspx頁面

image

很明顯，.net framework沒有對的上,解決方法以下：

image

image

此時刷新瀏覽器，會有以下的錯誤

image

解決辦法：

image

image

修改爲

image

此時，咱們輸入res.yyang.com:1001/default.aspx或者 res.yyang.com:1001均可以訪問咱們一開始的初始頁面

imageimage

imageimage

此時咱們訪問圖片資源和樣式資源，還有js文件資源均可以訪問了

其實這裏我講多了，其實咱們只須要能訪問基本的資源文件就夠了，aspx頁面都不要可否訪問到均可以，這裏只是爲之後的ASP.NET MVC發佈作簡單的引入。爲了安全起見，咱們仍是不要讓訪問者能夠訪問其餘資源吧

關於發佈，還有兩個地方順便講一下：

image

打開默認文檔，咱們刪掉裏面的默認頁面default.aspx頁面，這樣子

當咱們輸入 res.yyang.com:1001 的時候,因爲沒有指定默認的頁面，因此服務器會禁止訪問，可是其餘靜態資源咱們均可以訪問的

image

此時訪問，會出現403

image

咱們此時若是想讓開發者查看到 easyui下的目錄結構，可是也是被禁止的

image

咱們能夠經過以下修改，就可讓開發者看到了，可是這樣子每每是不安全的，這裏咱們還沒用到真實環境給人家用，咱們只是本身用，因此打開，咱們有時能夠看看easyui目錄的結構，而後能夠針對性的打開demo學習

image

image

單擊啓用後，勾選長日期，不勾選也沒事。而後點擊應用，就能夠了

image

刷新瀏覽器：

image

做爲一個嚴格的資源服務器，是禁止顯示目錄結構，但這裏咱們只是本身用，固然你隨時能夠關掉目錄瀏覽的權限

 

做爲一個資源服務器,特殊文件格式的文件的訪問的需求,咱們仍是要知足的,例如 .json格式的文件，企業裏有的都是把json文件後綴名直接變成js格式的來避免

咱們試圖瀏覽到以下目錄

http://res.yyang.com:1001/res/jquery-easyui-1.3.4/demo/accordion/

image

當咱們單擊.json文件時候，發現禁止訪問

image

解決方法：

image

 

image

 

imageimage

刷新瀏覽器：

image

此時，咱們已經能夠訪問 第三方格式的文件了。咱們的MVC項目就能夠經過Get請求方式得到資源服務器資源，而後解析了

關於IIS  資源服務器 發佈就到這裏結束了，之後咱們還須要一個文件服務器，之後再說吧

 

 

相關代碼下載：   點我下載
本篇博客地址：http://www.cnblogs.com/AaronYang/p/3324014.html
 

在下一講裏面咱們主要講搭建 第一個使用EasyUI1.3.4 的ASP.NET MVC3企業項目使用和特別事項，還有些企業的忌諱。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程