2017年5月1日 星期一
Website-FireBase Hosting 靜態網頁部屬
此篇會從如何安裝、連結、部屬專案開始
會寫此篇的目的在於因為網路資訊過多
想整理出自己較能理解的版本
官方文件說明 : 連結
步驟概要
- 下載 Node.js
- 用 npm 串接 FireBase
- 將專案部屬到 FireBase
1 . 下載 Node js : 連結
2 .開啟命令提示字元,確認 NPM 是否確實安裝
npm -version
3 . 安裝相關套件,以便於後續使用
npm install -g firebase-tools
4 . 新增專案檔案夾
並且要有 public
還有 index.html( 放置在 public 底下 )
6 . 命令提示字元指向此路徑
cd C:\Users\BluePC\Desktop\Test\public ( 建議用複製 )
4 . 執行 FireBase ,並且執行程序
firebase init ( 不用加 npm )
這邊可能會出現需要權限的需求,所以必須串接你的帳號
輸入 Login 指令,成功後再次執行 firebase init
firebase login
5 .選擇 Hosting 選項
6 . 選擇 Firebase 底下的指定專案
7 .
參考資料 : Firebase Hosting 靜態網站部署試用
參考資料 : Firebase 架站
參考資料 : Get Started with Hosting
Mac
參考資料:Firebase Hosting 靜態網站部署
參考資料:https://andy6804tw.github.io/2017/12/14/npm-tutorial/
參考資料:【備忘録】npm -g install に失敗する
歡迎轉載,請註明出處。
2017年2月22日 星期三
2017年2月21日 星期二
Bootstrap-基本用法( 一 )
必須先在頁面添加以下 Library
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
參考資料:Bootstrap Get Started
參考資料:利用Bootstrap Grid System排版的學習筆記
AngularJS-常用方法
1 . 點擊觸發兩方法:
http://stackoverflow.com/questions/17584432/using-ng-click-to-call-two-different-functions
2 . 表格格式錯誤提醒
http://wijmo.com/blog/easy-form-validation-in-angularjs/
3 . 點擊後,檢查表格後執行方法(Nikos Paraskevopoulos)
http://stackoverflow.com/questions/31159006/form-validation-on-ng-click-angularjs
3-1 . 確認表格輸入參數_最有效
https://jsfiddle.net/r8d1uq0L/
4 . no-repeat list
https://blog.rjmetrics.com/2015/09/02/8-features-of-ng-repeat/
5 . no-repeat 動態篩選
https://docs.angularjs.org/api/ng/filter/filter
6 . no-repeat table click 取得當列參數
http://stackoverflow.com/questions/15288047/angularjs-ng-click-on-repeat-table-row-not-working
7 . no-repeat list has if els 產生列表遇到判斷式
http://stackoverflow.com/questions/15810278/if-else-statement-in-angularjs-templates
8 . no-repeat filiter 排序 筆數...等教學
http://abgne.tw/angularjs/angularjs-getting-stared/filters-3.html
9 . no-repeat table 多項排序
http://stackoverflow.com/questions/31074578/how-to-reverse-sort-a-column-on-click-using-angularjs
10 . no-repeat 上下排序
https://scotch.io/tutorials/sort-and-filter-a-table-using-angular
10_1 . no-repeat 多重篩選
http://plnkr.co/edit/kozaU39E74yqjZCpgDqM?p=preview
11 . 下拉選單_初始化...等
http://jsfiddle.net/840cc677/9/
12 . angularJS function retrun
http://stackoverflow.com/questions/24215197/how-to-show-return-value-of-a-function-with-angularjs
13 . 顯示/隱藏元件
http://stackoverflow.com/questions/16660826/show-hidden-div-on-ng-click-within-ng-repeat
http://stackoverflow.com/questions/23035647/angularjs-ng-click-and-ng-show-to-show-a-div
14 . controller 互相溝通_第四點較常用
http://www.storagelab.org.cn/zhangdi/2014/11/19/%E4%B8%8D%E5%90%8Ccontroller%E4%BD%9C%E7%94%A8%E5%9F%9F%E4%B9%8B%E9%97%B4%E9%80%9A%E4%BF%A1%E7%9A%84%E6%96%B9%E5%BC%8F/
3-1 . 確認表格輸入參數_最有效
https://jsfiddle.net/r8d1uq0L/
4 . no-repeat list
https://blog.rjmetrics.com/2015/09/02/8-features-of-ng-repeat/
5 . no-repeat 動態篩選
https://docs.angularjs.org/api/ng/filter/filter
6 . no-repeat table click 取得當列參數
http://stackoverflow.com/questions/15288047/angularjs-ng-click-on-repeat-table-row-not-working
7 . no-repeat list has if els 產生列表遇到判斷式
http://stackoverflow.com/questions/15810278/if-else-statement-in-angularjs-templates
8 . no-repeat filiter 排序 筆數...等教學
http://abgne.tw/angularjs/angularjs-getting-stared/filters-3.html
9 . no-repeat table 多項排序
http://stackoverflow.com/questions/31074578/how-to-reverse-sort-a-column-on-click-using-angularjs
10 . no-repeat 上下排序
https://scotch.io/tutorials/sort-and-filter-a-table-using-angular
10_1 . no-repeat 多重篩選
http://plnkr.co/edit/kozaU39E74yqjZCpgDqM?p=preview
11 . 下拉選單_初始化...等
http://jsfiddle.net/840cc677/9/
12 . angularJS function retrun
http://stackoverflow.com/questions/24215197/how-to-show-return-value-of-a-function-with-angularjs
13 . 顯示/隱藏元件
http://stackoverflow.com/questions/16660826/show-hidden-div-on-ng-click-within-ng-repeat
http://stackoverflow.com/questions/23035647/angularjs-ng-click-and-ng-show-to-show-a-div
14 . controller 互相溝通_第四點較常用
http://www.storagelab.org.cn/zhangdi/2014/11/19/%E4%B8%8D%E5%90%8Ccontroller%E4%BD%9C%E7%94%A8%E5%9F%9F%E4%B9%8B%E9%97%B4%E9%80%9A%E4%BF%A1%E7%9A%84%E6%96%B9%E5%BC%8F/
angular.module("myApp", [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.submit = function() {
}
}]);
2017年2月20日 星期一
JavaScript-常用方法
項目
1 . 頁面初始化
2 . 取得對應標籤參數
3 . 點擊事件
4 . Form 傳送資料,另一頁面接收( Jsp、Struts2 )
頁面初始化
取得對應標籤參數
點擊事件
Form 傳送資料,另一頁面接收( Jsp、Struts2 )
參考資料:How to pass the values from one jsp page to another jsp without submit button?
1 . 頁面初始化
2 . 取得對應標籤參數
3 . 點擊事件
4 . Form 傳送資料,另一頁面接收( Jsp、Struts2 )
頁面初始化
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
});
</script>
<body>
</body>
</html>
取得對應標籤參數
<script>
.
var age = document.getElementById("editText").value;
.
</script>
<body>
.
<input type="text" id="editText" value="" />
.
</body>
點擊事件
<script>
function myFunction() {
.
.
.
}
</script>
<body>
<input type="button" id="btn" value="送出" onclick="myFunction()" />
</body>
</html>
Form 傳送資料,另一頁面接收( Jsp、Struts2 )
參考資料:How to pass the values from one jsp page to another jsp without submit button?
a.jsp
<form action="hello_4" method="post">
<input type="text" name="name">
<input type="submit" name="send">
</form>
b.jsp
<body>
<% String name=request.getParameter("name"); out.print("Hello:"+name); %>
</body>
訂閱:
文章 (Atom)















