摘要:本文記錄創建一個小的、簡單的產品網站的步驟。

A,新增數據庫: ProduceWebDB 并新建表ProCategories、Products

USE [ProduceWebDB]GO/****** Object: Table [dbo].[ProCategories] Script Date: 2015/6/2 15:54:49 ******/SET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGOSET ANSI_PADDING ONGOCREATE TABLE [dbo].[ProCategories]( [CateID] [decimal](18, 0) IDENTITY(1,1) NOT NULL, [CateName] [varchar](250) NOT NULL) ON [PRIMARY]GOSET ANSI_PADDING OFFGO/****** Object: Table [dbo].[Products] Script Date: 2015/6/2 15:54:50 ******/SET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGOCREATE TABLE [dbo].[Products]( [ProID] [decimal](18, 0) IDENTITY(1,1) NOT NULL, [ProName] [nvarchar](250) NOT NULL, [ProImagePath] [nvarchar](max) NOT NULL, [ProIntroduce] [text] NOT NULL, [ProCateID] [bigint] NOT NULL, [AddTime] [datetime] NULL, [AddIP] [nchar](18) NULL, [IsDelete] [bit] NOT NULL) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]GOALTER TABLE [dbo].[Products] ADD CONSTRAINT [DF_Products_CreateTime] DEFAULT (getdate()) FOR [AddTime]GOALTER TABLE [dbo].[Products] ADD CONSTRAINT [DF_Products_IsDelete] DEFAULT ((0)) FOR [IsDelete]GOView Code
B,項目新增ProductList_Admin.ashx一般處理程序 ,在Templates/Admin下添加對應的 ProductList_Admin.html頁面 ,在后臺顯示產品列表。
Templates/Admin/Head.html:相當于模板頁的頁頭部分,用Bootstrap導航組件其他頁面通過#parse("Head.html")調用

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html;" charset="gb2312" /> <!-- 這個屬性主要是設置瀏覽器優先使用什么模式來渲染頁面的--> <!-- #下面的meta標簽告訴IE瀏覽器,IE8/9及以后的版本都會以最高版本IE來渲染頁面。 --> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--移動設備都是這Viewport里面打開,width=device-width表示打開頁面默認和設備一致,initial-scale=1表示頁面不進行縮放 --> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- 上述3個meta標簽*必須*放在最前面,任何其他內容都*必須*跟隨其后! --> <title>后臺管理</title> <!-- Bootstrap --> <!--<link href="CSS/bootstrap.min.css" rel="stylesheet"/>--> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" /> <!--低版本瀏覽器如果支持HTML5需要添加以下js--> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss .com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <!--鼠標懸停彈出下拉菜單--> <style type="text/css"> .navbar .nav > li .dropdown-menu { margin: 0; } .navbar .nav > li:hover .dropdown-menu { display: block; } .navbar .nav > li .dropdown-menu > li:hover { font-size: larger; } </style></head><body> <!-- --導航條 默認高度50px, 固定在頂部 --> <nav class="navbar navbar-default .navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <!--當瀏覽器寬度變窄的時候會顯示這個Button按鈕,并且會把data-target中的div中ul收縮導航到Button下方--> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <!--定義小按鈕的樣式--> <span class="sr-only">Toggle navigation</span> <!-- 頁面變窄時 , 按鈕的3條橫線 --> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!--Logo位置--> <a class="navbar-brand" href="http://m.survivalescaperooms.com/chengzish/">后臺管理</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <!--導航條內容--> <li class="active"><a href="#">首頁 <span class="sr-only">(current)</span></a></li> <li><a href="#">成功案例編輯</a></li> <li><a href="#">新聞活動編輯</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">服務編輯<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">軟件定制編輯</a></li> <li class="divider"></li> <li><a href="#">外包服務編輯</a></li> <li class="divider"></li> <li><a href="#">咨詢服務編輯</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">OA系統解決方案編輯<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">員工考勤系統編輯</a></li> <li class="divider"></li> <li><a href="#">薪資結算系統編輯</a></li> <li class="divider"></li> <li><a href="#">門禁管理系統編輯</a></li> <li class="divider"></li> <li><a href="#">APP開發編輯</a></li> </ul> </li> </ul> <!--搜索表單--> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search" /> </div> <button type="submit" class="btn btn-default">搜索</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Git Fork</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdow
新聞熱點
疑難解答