【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教程