web 用到 各部分功能 如何使用
# html css bootstrap javascript jquery json ajax vue element-ui
# node.js AnglerJs
# html
-- 标簽
# css
-- 樣式
-- <style></style>
-- <link href="css/earth.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css">
-- class="a" .a{ font-size: 18px; } id="b" #b{}
# bootstrap
-- 架構 最大作用: 封裝css樣式 直接用
-- <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" rel="stylesheet">
-- 分頁
-- <ul class="pagination">
-- <li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >«</a></li>
-- <li class="active"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >1</a></li>
-- <li class="disabled"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >2</a></li>
-- <li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >3</a></li>
-- <li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >4</a></li>
-- <li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >5</a></li>
-- <li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >»</a></li>
-- </ul>
# javascript
-- 使頁面動起來 動畫
-- <script></script>
-- <script src="js/earth.js"></script>
-- 變量 var a = 1; 函數function do(){} 對象 var dx = {};
-- 頁面加載完成執行 !function(){}();
# jquery
-- 封裝js 另一套api
-- <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
-- 入口函數 $(function(){ 代碼 $("#id").click(function(){ 點選之後代碼 }); });
# json
-- json 輕量級資料交換格式
-- js對象 和 字元串 互轉
-- json串 "[ {name:"lvjing",age:"23"},{} ]"
-- js對象 [ {name:"lvjing",age:"23"},{} ]
-- JSON.parse(字元串) JSON.stringify(js對象)
# ajax
-- jquery的一個方法
-- 異步通路,局部重新整理
-- 文法 : 添加jquery
--使用 : 1. 直接放在$(function(){ 中 }) 會在頁面加載完成之後執行 2. 可以放在點選一個按鈕$("#btn").click(function(){ 執行ajax });
$.ajax({
type:"post",
url:"",
data:{
"name":"lvjing",
"age":"23"
},
contentType:"application/json;charset=utf8",
dataType:"json",
success:function(data){
$("#username").text(data.name);
},
error:function(e){
console.log("error");
}
});
# vue
# element-ui
# node.js
# 我寫過的功能
1. 滑鼠點選任意位置出現文字
2. 背景動态先裝粒子特效
3. 擷取鍵盤點選的哪一個 -使用在輸入完密碼回車執行登入
4. 在html頁面中引入另一個html頁面的标簽
5. 取消按鈕 x
vue搭建環境
# vue 搭建環境
> 安裝: nodejs
npm -v
npm config get registry 目前配置鏡像
npm config set registry https://registry.npm.taobao.org 使用淘寶鏡像
> vue 腳手架 vue-cli
npm install vue-cli -g 安裝vue-cli腳手架
npm uninstall vue-cli -g 解除安裝vue-cli腳手架
vue --version
> 建立vue項目
工作空間下 dos
vue init webpack jt
參數:
Project Name 項目名稱，預設，回車
Project description 預設，回車
Author chenzs 作者
vue build 預設，回車
install vue-router? 是否安裝router，輸入：y 安裝
Use ESLint to lint your code? 規則引擎，過于嚴苛，輸入：n
Setup unit tests? 單元測試，輸入：n
Setup e2e tests with Nightwatch(Y/n)? 測試架構Nightwatch，輸入：n
Should we run 'npm install' for you after the project has been created? 預設npm，回車
> 啟動項目
npm run dev http://localhost:8081
# vue 項目
> App.vue 主界面
> 自定義元件 Item.vue 在主界面中<Item></Item> 進行使用自定義元件
> components中寫自定義元件 template中寫頁面 script中寫資料 style中樣式
> 使用element-ui main.js中導包 導入element-ui的插件
# element-ui
> 安裝 npm i element-ui -S
> 修改vue中main.js 導入element-ui
> import ElementUI from 'element-ui';
> import 'element-ui/lib/theme-chalk/index.css';
> Vue.use(ElementUI);
> 使用
> div中使用element-ui官網樣式标簽
# Promise
Promise 對象用于表示一個異步操作的最終完成 (或失敗)及其結果值。
# axios
Axios 是一個基于 promise 的 HTTP 庫，可以用在浏覽器和 node.js 中。
> npm install axios --save-dev
> main.js
> import axios from 'axios';
> Vue.prototype.$http = axios;
# less-loader less
less-loader webpack 将 Less 編譯為 CSS 的 loader。
Less 是一門 CSS 預處理語言，
它擴充了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴充。
> npm install less less-loader --save-dev
# vue-quil-editor 富文本編輯器
> npm install vue-quill-editor --save
> main.js
> import VueQuillEditor from 'vue-quill-editor';
> import 'quill/dist/quill.core.css';
> import 'quill/dist/quill.snow.css';
> import 'quill/dist/quill.bubble.css';
> Vue.use(VueQuillEditor);
# echarts 一個基于 JavaScript 的開源可視化圖表庫
> npm install echarts --save
> main.js
> import echarts from 'echarts';
> Vue.prototype.$echarts = echarts;
# vue搭建環境2
node.js
淘寶影像 npm config set registry https://registry.npm.taobao.org
安裝vue 用戶端 npm install -g @vue/cli --force
初始化 vue ui
用戶端
建立 1.詳情 2.預設 手動 3.功能 router 使用配置檔案 4.配置 ESLint+ StandardConfig
插件 1.vue-cli-plugin-element 手動導入 2.axios 3.less-loader npm install [email protected] 4.less 5.vue-quil-editor 6. echars插件
關閉ESLint校驗
項目打包 npm init -y npm i express -S
# 知識點
> 在html頁面中引入另一個html頁面的标簽
<iframe src="page/canvas-nest.html" frame name="content_frame" width="520px" height="520px" marginwidth=0 marginheigh=0></iframe>
<iframe> 标簽規定一個内聯架構。
一個内聯架構被用來在目前 HTML 文檔中嵌入另一個文檔。
> 滑鼠點選頁面任意位置出現文字
append-text.js
> 背景的動态線狀粒子特效
canvas-nest.js
筆記 2
# web
## html标簽
.ul ol type li .img .a href target .input .table tr td th .form
.audio .video
> 回到頂部
.a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" name="_top"
.a href="#_top" target="_blank" rel="external nofollow"
> input
.[type] text password radio單選 number week日期 checkbox多選 button submit送出 email date value
> table
.table bgcolor cellspacing
.td colspan rowspan
> from
placeholder name checked select option textarea button
> audio video
controls
## css
## bootstarp3
<!-- 新 Bootstrap 核心 CSS 檔案 -->
<!-- jQuery檔案。務必在bootstrap.min.js 之前引入 -->
<!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
> 表格
> 表單
> 按鈕
<div class="clearfix" > clearfix 取消浮動 裡面的内容是浮動的 對于div會有位置變化 使用clearfix會取消浮動 使得按鈕在div裡面
<button type="button" class="close">×</button>
</div> 關閉圖示
<button type="button" class="btn btn-primary btn-lg" style="text-shadow: #CCCCCC 5px 3px 3px; background-color:#FFCCCC;">
<span class="glyphicon glyphicon-heart" style="color: #FFFFCC;"> Heart</span>
</button> 圖示按鈕
> 圖檔
> bootstrap模闆
> ---------------------------------
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta标簽*必須*放在最前面，任何其他内容都*必須*跟随其後！ -->
<title>Bootstrap 101 Templat</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" target="_blank" rel="external nofollow" rel="stylesheet">
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，是以必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要隻加載單個插件。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
</html>
> ---------------------------------
## js
> if if-else
> for while for-in
> 參數 傳回值
> 數組: 長度可變, 存各種類型
> onmouseenter="print1()" 滑鼠滑過觸發功能
> prompt() 彈出框輸入内容
> === 比值 === 比值和類型
> 從浏覽器輸入的資料預設是String類型 可以使用parseInt()->number
> 變量
. var 變量名 = 變量值;
. 類型: 整形 字元串 小數
. 檢視資料類型 typeof a
> 函數
. function a(){} --相對效率快
. var b = function(){}
. var c = new Function("a","b","return a*b"); --效率慢
. !function(){}(); --加載頁面完成就執行此方法 自調用
. 箭頭函數
var a = function(){alter(1);}
var a = () = {alert(1);} var a = () = alert(1);
> 對象
.1. function p2(){}
var p = new p2();
p.name = "lvjing';
p.study = function(){console.log(12)}
調用: p.study();
console.log(p.name);
.2. var p1 = {
"name":"lvjing",
"study":function(){
console.log(1);
}
}
調用: console.log(p1.name);
> dom
document.getElementById("lj").--
.. innerText-文本有效 innerHTML-可以使用html标簽改變
> js擷取鍵盤 按的哪個
input type="text" onkeydown="jssave(event)"
function(e){
var keynum = window.event ? e.keyCode : e.which; // 鍵的數值
var keychar = String.fromCharCode(keynum); // 鍵名字
if(keynum==13){console.log("按下的是enter鍵");}
}
> js 和 jquery
js事件放在标簽中
jquery事件使用$("#a") 擷取選擇器 (例: .css) 執行
$('.item').mouseover(function(event){
console.log(event); //擷取事件對象
console.log(event.target.id); //擷取容器id
console.log(event.pageX); //擷取滑鼠位置：x坐标
console.log(event.pageY); //擷取滑鼠位置：y坐标
});
## jquery
百度 cdn : script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"
Staticfile CDN : script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
> 入口函數 : 在頁面加載完成之後運作 DOM加載完成之後
$(document).ready(function(){ 執行jquery代碼 });
$(function(){ 執行jquery代碼 });
> 選擇器
$("div")
$(".a") $("#a")
$("div,.a,#b")
$("input[type='text']")
> 隐藏/顯示
.hide()
.show()
> 捕獲
text() - 設定或傳回所選元素的文本内容 <p>你好</p> 擷取到你好
html() - 設定或傳回所選元素的内容（包括 HTML 标記） <p><b>你好</b></p> 擷取到 <b>你好</b>
val() - 設定或傳回表單字段的值
> css
.. addclass
.a{}
$("#a").addClass("a");
.. css
$("#q").css({"color":"red","font-size":"12px"});
> 鍵盤點選事件
.keydown(function(){})
.keyup(function(){})
> jquery擷取鍵盤按鍵方式
input type="password" id="password" placeholder="password"
$("#password").keyup(function(e){ if(e.keyCode==13){ alert("擡起enter鍵") } });
> jquery方式執行按鈕的點選事件
button id="btn"
$("#btn").click(function(){});
再次執行此按鈕的方法: $("#btn").click();
## json
> web(用戶端) 用戶端中 交換服務端資料
> 字元串 <--> js對象
[常用] : 從服務端擷取的資料 通過JSON轉換為js對象在用戶端中使用 服務端 --> 用戶端 response
JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）
JSON 是輕量級的文本資料交換格式
JSON 獨立于語言：JSON 使用 Javascript文法來描述資料對象，但是 JSON 仍然獨立于語言和平台。
[
{ key1 : value1-1 , key2:value1-2 },
{ keyN : valueN-1 , keyN:valueN-2 }
];
> JSON.parse()
JSON 通常用于與服務端交換資料。
在接收伺服器資料時一般是字元串。
使用 JSON.parse() 方法将 資料轉換為 JavaScript 對象。
> JSON.stringify()
JSON 通常用于與服務端交換資料。
在向伺服器發送資料時一般是字元串。
我們可以使用 JSON.stringify() 方法将 JavaScript 對象轉換為字元串。
> json js對象
json字元串 [{"name":"lvjing"}]
js對象 [{name:"lving"}]
## ajax
>>> jquery 提供了ajax
> AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
> 作用:
異步通路 不用等待上一個請求結束 進行請求
局部重新整理 在不重新加載整個頁面的情況下，可以與伺服器交換資料并更新部分網頁内容。
建立快速動态網頁
> request
> 文法: 參數
$.ajax({
type: 請求類型 get/post
url:
data:{} 請求資料 json串格式
contentType: 發送請求格式 "application/json;charset=utf-8"
dataType: 傳回資料格式 "jsonp"跨域
success:function(data){} 通路成功進行的操作
error:function(e){} 通路失敗
})
## JSON-Ajax
ajax json
.. ajax 用戶端請求 并傳回資料
異步通路
局部重新整理
.. json 對擷取的資料 -> js對象
存儲 交換文本資訊 --在網絡中傳輸資訊 JSON安全 --JSON 是輕量級的文本資料交換格式
[問題]
..前端擷取輸入 怎麼給後端存 ---通過url執行後端的方法 參數也是通過url傳遞
..查詢後端傳回資料 前端怎麼展示 ---前端要查詢,url執行後端方法,後端查詢到,傳回return給前端,前端展示
... ajax 通過url 參數 通路服務端擷取資料 success之後進行解析
... url中的參數
... json可以把傳回的 對象裝換為字元串 通過JSON裝換為js對象進行使用
# vue
## node.js
> json
輕量級資料交換格式
結構 1.對象 名稱/值 {name:"lvjing",age:23} 2.數組 ["lvjing","23"] 3.嵌套格式 [{},{}]
> 請求方式 post/delete/get/put RestFull
> ajax
data 傳遞參數
對象: data:{id:100,name:"lvj"} 拼接字元串: data: id=100&name="lvj"&age=14
for循環 擷取資料
for (var i=0;i<data.length;i++){console.log(data[i])}
for (index in data){console.log(data[index])} // in關鍵字周遊下标
for (user of data){console.log(user);}// of 周遊對象
向表中添加每行
反引号 `` 模闆字元串
let tr = `<tr>
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.age}</td>
<td>${user.sex}</td>
</tr>`;
解決問題: 拼接字元串換行 + " 繁瑣
> 跨域
如果 浏覽器請求的網址 與 ajax請求網址 必須滿足同源政策 浏覽器才能解析請求
.. 同源政策
請求協定 ://域名:端口 域名和端口号都滿足
跨域資源共享CORS
# ajax異步原理
同步: 使用者發起請求時,要求第一時間伺服器做出響應.在此期間使用者不可以做其它操作,隻能等待伺服器傳回資料. 重新整理1次.
異步: 使用者發起請求時,要求伺服器做出響應.在此期間使用者可以做其它的操作.如果後端伺服器傳回資料則通過回調函數通知客戶. 局部重新整理多次.
## vue
漸進式架構 -
一個大頁面包含..四部分..每部分由各自的頁面負責, 互不幹擾,
cdn : <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
國内 通路 國外 營運商 cdn緩存
# 文法
{{messsage}} 插值表達式 可以直接擷取data中定義的常量message
var app = new Vue({
el: '#app', // 對哪個标簽起作用
data: { // 定義所有的變量/常量
message: '123'
},
methods: { // 定義所有事件
show: function(){
condole.log(0123);
}
}
})
# API 指令
v-cloak : 在頁面解析完代碼之前,隐藏插值表達式 --不會顯示，直到編譯結束。
v-text="name" 給标簽指派, 不用插值表達式
v-html="html" 解析定義在data中變量
v-pre vue不解析所在标簽
v-once 所在标簽 内容 使用的vue中資料隻加載一次 雙向綁定失效
> 雙向綁定
v-model="msg"
> 事件綁定
v-on 監聽時間
v-on:click="num++" num會增加1
@click="num3()" methods:{ num3:function(){ this.num+=3; } }
@click.stop="num3()" 阻止單擊事件繼續傳播
@click.prevent="" 阻止預設行為
> 按鍵通路修飾符
v-on:keyup @keyup.enter="enter1()"
v-on:keydown
v-on:keypress
> 屬性綁定
v-bind:屬性="key"
<a v-bind:href="url" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >百度</a>
<a :href="url" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >百度</a>
> 類型綁定
:class="{t1:t1flag,t2:t2flag,t3:t3flag,t4:t4flag}
:class="myClass" data:{myClass:"redClass"} 動态調整樣式
> 分支結構
v-if
v-else-if
v-else
> 循環結構
v-for
數組:
hobby: ['電腦','手機','平闆'],
<span v-for="item in hobby">{{item}}</span>
對象:
user: {id: 12,name: 'lvjing',age: 23},
<span v-for="value in user">{{value}}</span> <br>
<span v-for="(value,key,index) in user">{{key}}:::{{value}}:::{{index}}; </span>
集合:
userList: [
{id:100,name:'lv',age:23},
{id:200,name:'lvj',age:24},
{id:300,name:'lvji',age:25}
]
周遊集合 : <span v-for="(user,a) in userList">{{user.id}}---{{a}}...</span>
區分節點: <span v-for="user in userList" :key="user.id">{{user.id}}...</span> <br>
> 雙向綁定--input--textarea(文本域)--select--radio--checkbox
> 屬性
.number(使用者輸入變為數值類型)
.trim(去掉開頭結尾空格) 不計算空格
.lazy(将input改為change) 離焦之後出現效果,滑鼠離開之後
v-model.number="age"
字母反轉
msg.split('').reverse().join('')
計算屬性:{{reverse}} --
vue({
computed:{
reverse: function(){ return this.msg.split('').reverse().join(''); }
}
})
計算屬性computed 與 方法methods 差別
1.
計算屬性 方法 加傳回值 使用{{reverse}}接收結果
2. 緩存
計算屬性具有 緩存機制 隻加載一次,可以反複使用 使用場景:要反複使用同一個值時
方法沒有緩存機制,一次方法執行一次
> 數組用法介紹
1.push() 在最後一個追加
2.pop() 删除最後一個
3.shift() 删除第一個元素
4.unshift() 在開頭追加一個元素
5.splice() 在指定位置替換元素
替換: 參數說明: 1.操作資料起始位置 2. 操作數量 3.替換元素的值(如果不寫表示删除)
this.spliceNum.splice(this.startN,this.count,this.value)
删除: this.spliceNum.splice(this.startN,this.count)
6.sort() 數組排序 預設是按照字元編碼的順序進行排序
7.reverse() 數組反轉
# vue的生命周期
> 鈎子函數
8個函數 初始化-4 修改-2 銷毀-2
預定義的函數進行操作
> 執行個體化成功
mounted(){}
beforeCreadted vue執行個體的挂載元素$el和資料對象data都為undefined，還未初始化。 加loading事件
created vue執行個體的資料對象data有了，$el還沒有 結束loading、請求資料為mounted渲染做準備
beforeMount vue執行個體的$el和data都初始化了，但還是虛拟的dom節點，具體的data.filter還未替換。
mounted vue執行個體挂載完成，data.filter成功渲染 配合路由鈎子使用
beforeUpdate data更新時觸發
updated data更新時觸發 資料更新時，做一些處理（此處也可以用watch進行觀測）
beforeDestroy 元件銷毀時觸發
destroyed 元件銷毀時觸發，vue執行個體解除了事件監聽以及和dom的綁定（無響應了），但DOM節點依舊存在 元件銷毀時進行提示
created () {
console.log('==============' + 'created' + '===================')
console.log(this.$el)
console.log(this.$data)
console.log(this.filter)
},
# promise
> 解決傳統ajax回調地獄問題 B包
# axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
> 1. axios封裝了promise,異步調用更簡潔
> 2. 請求類型 post delete get put
> 3. 分組 get/delete post/put 用法分
> 4. 參數:
url:
請求參數
> 5. 使用:
axios.get("url")
.then()
.catch();
axios.get("url",{
params: { ID:1234 }
})
.then() -success
.catch(); -error
axios({
methods: 'get',
url: url,
params: {id:1}
})
data:{} 隻适用于這些請求方法 'PUT', 'POST', 和 'PATCH'
restFul 簡化get請求
無狀态請求
> 6. ajax 回調地獄
.then的存在 傳回promise對象
使用 鍊式加載結構 方法加傳回值
> 7. 簡化
1. 公共路徑: axios.defaults.baseURL="http://localhost:8614/user/";
2. 解構指派
await 辨別異步請求,解構操作
async 函數中支援解構
let {data:value} 用來接收解構後的對象,,将傳回值指派給value, value就是後端的傳回值
async function saveBtn(){
let {data:value} = await axios.post('saveUser',this.user)
}
# 箭頭函數
function(result){
console.log(result.data);
}
(result)=>console.log(result.data)
result=>console.log(result.data)
# 跳轉頁面
location.href="http://47.92.74.202:81/payment.php" target="_blank" rel="external nofollow" ;
# 頁面展現快 vue
記憶體中有該對象, vm-虛拟DOM對象
# let const
let 聲明的變量隻在 let 指令所在的代碼塊内有效。
const 聲明一個隻讀的常量，一旦聲明，常量的值就不能改變。
# vue 元件化
>1. 分布式 分層
tomcat(使用者管理,部門管理)
子產品拆分: tomcat(使用者管理) tomcat(部門管理)
層級拆分: pojo dao service controller util
核心理念: 分布式架構,解決系統架構的耦合性
>2. 元件
分布式思想, 頁面分區
提取共性, 封裝為元件
>3. 元件化
單獨定義html/css/js, 元件之間互不影響.
>4. 步驟
要求:
元件名(标簽名), 元件模闆id
元件模闆id定義-template:"#appTem",
資料定義data是一個函數傳回變量-date(){return{msg:"msg"}},
方法methods-methods:{}
定義元件模闆,模闆内必須有一個根目錄 <div></div>
元件名,定義元件名為駝峰規則,使用時标簽内.大寫字母前使用- 例如: 元件名: appComOne 标簽: <app-com-one></<app-com-one>>
全局元件
所有div内都能用
1. vue對象綁定頁面中div id="app"
2. 定義全局元件 Vue.component("appComOne",{template:"#appComOneTem",data(){return{}},methods:{}})
3. 定義全局元件模闆(在body中), <template id="appComOneTem"><div>模闆内容</div></template>
4. 使用全局元件,在vue綁定的div内 <app-com-one></app-com-one>
局部元件
隻能在定義的div内使用, new Vue()的el内, 定義局部元件實作在vue的components内
1. vue對象, 綁定div的id el:"app", 定義局部元件 components:{app1:app1,app2,app2}
2. 定義局部元件 對象 let app1={template:"#app1Tem",data(){return{}},methods:{}} let app2={}
3. 定義局部元件模闆 <template id="app1Tem"><div>模闆内容</div></template>
4. 使用局部元件,在vue綁定的div内 <app1></app1>
>4.1 全局元件實作
展示頁面
<div id="lvj">
使用元件 引用元件..标簽解析是變成小寫..駝峰用 - componentName component-name
<component-name></component-name>
</div>
定義元件模闆html 有一個根目錄<div>
<template id="componentDiv">
<div><h4>測試元件</h4>資料:{{num}}<button @click="addNum()">自增</button></div>
</template>
<script>
全局元件--元件名
Vue.component("componentName",{
元件模闆--模闆id
template: "#componentDiv",
屬性 元件内有效
data(){return{num:1}},
方法定義
methods:{addNum(){this.num++;}}
})
vue對象-綁定div.lvj
new Vue({el:"#lvj"})
</script>
>4.2 局部元件實作 隻能在目前元素内部使用
<div id="app1">
使用局部元件app1
<app1></app1>
</div>
<div id="app2">
不能用,局部元件,隻能用在app1中
<app1></app1>
</div>
定義局部元件模闆具體實作
<template id="app1Tem">
<div><span v-show="kw">app1資料 : </span>{{msg}}<button @click="showW()">kw</button></div>
</template>
<script>
定義局部元件的具體實作, 是個對象, 先定義後使用-(寫在new Vue()前)
let app1 = {
元件模闆, 模闆id
template: "#app1Tem",
data(){return{msg:"app1",kw:false}},
methods:{showW(){this.kw=true}}
}
let app2 = {}
定義vue對象
new Vue({
el: "app1",
app1内的局部元件定義
components:{com1: com1,com2: com2}
})
</script>
# vue 路由 Router
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
> 概念
網絡通信 映射關系
使用者發起請求,
> 前端路由/用戶端路由
将所有的路由的配置生成js, 儲存到浏覽器, 使用者請求, 自己映射對應的請求資訊( 元件 ), 直接通路靜态資源
> 集中式路由
所有的使用者請求都經過後端,後端路由/伺服器端路由
> 把路由位址資訊放到前端浏覽器
前端伺服器 .靜态資源 .html頁面
> 頁面跳轉
<a></a>
> 步驟
1. 建立路由對象
2. 建立vue對象, 把路由對象交給vue管理
3. 建立局部元件對象, 把元件給路由使用
4. 建立局部元件html模闆頁面
5. 定義路由連接配接, <router-link to="/user">, 在vue綁定div中, router-link編譯為a, to編譯為href
6. 路由填充位, 使用路由中用到的元件, <router-view>
<div id="appR">
<router-link to="/user"><router-link>
<router-view></router-view>
</div>
<template id="appRTem">
<div> <h3>路由元件</h3> </div>
</template>
<script>
let router = new VueRouter({
路由規則
routes: [{path:"/user",component:user}]
})
new Vue({
el: "appR",
router:router
})
let user = {template:"#appRTem"}
</script>
# 重定向
> 概念
url 請求位址發生變化
重定向請求發送多次, 多次請求,多次響應
重定向是服務行為
重定向不能傳遞參數
> 實作
redirect 跳轉頁面
let router = new VueRouter({
routes: [
{path:"/index",redirect: "/user"}
]
})
# 路由嵌套機制 children
> 元件嵌套
router-view元件中有router-view
元件頁面中包含router-view
> 步驟
1. new Vue() 對象綁定div
2. new VueRouter() 定義路由規則,使用的元件 new VueRouter({routes:[ {path:"/",redirect:"/user"},{path:"/user",component: user, children: [{path:"/user/name",component:name},{path:"/user/age",component:age}] } ]})
3. let user={template:"#userTem"} 定義元件頁面 let name={template:`<h3>lvjing</h3>`} let age={template:`<h4>24</h4>`}
4. 定義user元件的具體内容 , 子元件占位符 <template id="userTem"> <div> name.age <router-link to="/user/name">name <router-link to="/user/age">age <router-view>
5. 使用 body <div id="app"> <router-link to="/user"> <router-view>
# 執行個體
https://gitee.com/zhao-qing-jing/ssmpro2104-jt/tree/master/g-vue-component/src/main/resources/static/vueCom
# vue 腳手架
> 架構
> .vue檔案
1. template 頁面模闆, html頁面内容
2. script js内容
3. style 樣式渲染
> src 目錄 結構
APP.vue 預設跳轉頁面
main.js 腳手架核心配置js
router 設定路由
plugins 引入ui工具
components 元件, 頁面 welcome login register home 業務頁面
assets css/js, 引入第三方圖示樣式
> main.js 檔案配置規則
核心配置
控制整個腳手架的運作的初始js, 公共依賴資訊, 全局變量
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import './assets/css/global.css'
import './assets/ali-icon/iconfont.css'
/* 導入富文本編輯器 */
import VueQuillEditor from 'vue-quill-editor'
/* 導入富文本編輯器對應的樣式 */
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
/* 導入axios包 */
import axios from 'axios'
/* 設定axios的請求根目錄 */
axios.defaults.baseURL = 'http://localhost:8705/'
/* 向vue對象中添加全局對象 以後發送ajax請求使用$http對象 */
Vue.prototype.$http = axios
Vue.config.productionTip = false
/* 定義過濾器 */
Vue.filter("priceFormat",function(price){
return (price / 100).toFixed(2)
})
/* 将富文本編輯器注冊為全局可用的元件 */
Vue.use(VueQuillEditor)
new Vue({
router, /* 路由 */
/* 綁定頁面 id="#app" */
render: h => h(App) // 1. 綁定頁面
}).$mount('#app') // 2. 綁定div元素
> 父元件 向 子元件傳遞參數
/* 向vue對象中添加全局對象 以後發送ajax請求使用$http對象 */
Vue.prototype.$http = axios
/* 将富文本編輯器注冊為全局可用的元件 */
Vue.use(VueQuillEditor)
Vue.prototype 父子元件參數傳遞, 屬性/對象傳參
Vue.use() 父子元件插件傳遞
> 子元件 向 父元件傳遞參數
// 對外聲明路由對象 子元件向父元件傳遞資料
export default router
> 檔案如何綁定的
main.js中new Vue() 對象中 路由, 頁面
頁面 APP.vue
路由 router/index.js
進入登入界面
> main.js 定義vue對象,
> router/index.js 定義路由(url索引), 請求路徑與元件映射關系, 使用指定元件(頁面) 規則: {path: '/', redirect: '/login'},{path: '/login', component: Login}
> App.vue 使用路由占位符,加載路由對象, 展示界面 router
> components/Login.vue 具體頁面實作, 元件
main.js
new Vue({
router, /* 路由 */
/* 綁定頁面 id="#app" */
render: h => h(App) // 1. 綁定頁面
}).$mount('#app') // 2. 綁定div元素
App.vue
<template>
<div id="app">
<!-- 添加路由占位符-->
<router-view></router-view>
</div>
</template>
router/index.js
const router = new VueRouter({
// 路由規則
routes:[
{path: '/', redirect: '/login'},
{path: '/login', component: Login}
]
})
login
頁面
# element
> element-ui 導入vue
>1. 導入插件
>2. 父向子傳遞插件
import Vue from 'vue';
import {
Pagination, 分頁
Dialog, 對話框
} from 'element-ui';
Vue.use(Pagination);
Vue.use(Dialog);
//将彈框元件挂載到Vue對象中 使用者可以使用this關鍵字調用
Vue.prototype.$message = Message
//通過MessageBox函數定義 消息提示框
Vue.prototype.$confirm = MessageBox.confirm
>3. 使用
路由配置中 配置頁面元件
import ElementUI from '../components/ElementUI.vue'
{path: '/elementUI', component: ElementUI}
ElementUI.vue 元件中具體頁面
<div>
<div class="block">
<span class="demonstration">評分 {{value2}}</span>
<el-rate v-model="value2" :colors="colors"></el-rate>
</div>
</div>
>4. 屬性
ref 标明是form表單
:model="" 屬性綁定, 對象綁定
>5. 表單校驗
el-form :rules="rules"
el-form-item prop="name"
定義rules驗證規則
data(){return{
rules: {
username: [{required:true,message:'please enter your username',trigger:'blur'},{min:3,max:10,message:'長度在3-10之間',trigger: 'blur'}],
password: [{ required: true, message: 'please enter your password', trigger: 'blur' },{ min: 3, max:30, message: '長度在 3 到 30 個字元', trigger: 'blur' }]
}
}}
required true 必須
trigger blur離焦
>6. 重置
擷取表單資訊,然後執行重置函數
resetFields 對整個表單進行重置，将所有字段值重置為初始值并移除校驗結果
this.$refs[formName].resetFields();
this.$refs.loginFormRef.resetFields()
>7. 登入
1. validate
對整個表單進行校驗的方法，參數為一個回調函數。該回調函數會在校驗結束後被調用，
并傳入兩個參數：是否校驗成功和未通過校驗的字段。若不傳入回調函數，則會傳回一個 promise
Function(callback: Function(boolean, object))
this.$refs.loginFormRef.validate( valid => { 校驗之後 失敗傳回 成功執行請求 } )
2. post請求 form表單 參數username,password
3. 資料是否正确校驗, 查詢
4. 回執, 資料處理完, 告訴前端, 狀态資訊status 200-成功 201-失敗
5. 登入之後,短時間内再次進入,不需要再次登入, token秘鑰
登入成功,跳轉到首頁
> 接口文檔
前後端資料需要哪些,參數,方法
> . 後端傳回 token 前端需要儲存, 如何存儲?
. Session-會話控制/會話機制 : 存儲使用者資訊(所需屬性和配置), 使用者會話存在期間, 資訊一緻存在
當使用者在app中的網頁之間跳轉時, 存儲在Session對象中的變量不會丢失, 在整個使用者會話中儲存下來
* 短時間内(會話期間)有效
. Cookie- :
網站識别使用者身份, 将session中的資訊儲存到計算機本地, 暫時或永久儲存
加密的資料
* 一段時間内有效 例如:七天免密登入
.. 例如:
session 安全 銀行, 财務, 員工
cookie 騰訊會員
.. 使用:
前端:
session
//擷取使用者token資訊(後端傳回的)
let token = result.data
window.sessionStorage.setItem("token",token)
cookie
.. 檢視:
浏覽器:
F12 Application/Session Storage
...解決 登入之後(頁面跳轉)的使用者資訊展示在首頁中,
> 8. 路由導航守衛
: 不讓使用者使用url路徑随便進入系統頁面
http://localhost:8614/#/home 直接進入了首頁 不允許
沒有登入,直接輸入url進入首頁---不允許 登入之後--允許
router/index.js
方法 : router.beforeEach()
方法參數 : 回調函數 (to,from,next) => {}
回調函數參數 : to..要通路的路徑 from..從哪個路徑來 next..請求放行
政策: /login..放行 不是/login..校驗token...有放行...沒有跳轉到/login
router.beforeEach(
(to,from,next) => {
if(to.path === "/login") return next(); // 放行
let sessionToken = window.sessionStorage.getItem("token");
if(token) return next(); // 放行
next("/login"); //跳轉到/login
}
)
> 首頁 Home.vue
> 9. 左側菜單
> 10. user
> 11. 作用域插槽
<!-- 作用域插槽, 通過一個标簽擷取目前行對象, -周遊的資料 slot-scope="scope" -->
<template slot-scope="scope">
<el-switch v-model="scope.row.status" @change="updateStatus(scope.row)"
active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
</template>
> 12. 正則
手機号驗證 請輸入正确的手機号 随便11位數字不能通過
validator: checkPhone 校驗
phone: [
{ required: true, message: '請輸入手機号', trigger: 'blur' },
{ min: 3, max: 30, message: '長度在 3 到 30 個字元', trigger: 'blur' },
{ validator: checkPhone , trigger: 'blur' }
],
//校驗手機号的郵箱規則
const checkPhone = (rule, value, callback) => {
//定義校驗手機号的正則文法
const phoneRege = /^1[34578][0-9]{9}$/
if (phoneRege.test(value)) {
return callback()
}
callback(new Error('請填寫正确的手機号'))
}
> 1.字元
/ 轉義 ^ 開頭 $ 結尾
0* >=0 1+ >=1 ? 0 1
例子 reger
8* --- 88
8? --- 8
> 2.區間用法 次數
{n} n {n,} >=n {n.m} >=n <=m
例子
3{3} --- 333 3{3,} --- 3333 3{2.5} ---- 33 ~ 33333
> 3.任意字元
.點 除\n \r 單個字元
[a-z] 範圍
[^xyz] 非xyz
> 4.分組
() 分組 | 邏輯或
xxx.png (jpg|png|gif)
vue-axios demo_user 展示資料 删除 修改 新增
# vue-axios demo_user 展示資料 删除 修改 新增
## vue頁面資料傳遞
表格設計, tbody tr td
--[查]
結果集: axios請求擷取到結果, 指派給 userList數組
擷取一條: v-for(users in userList) 疊代userList擷取每條
展示到td: {{user.name}} / v-text="user.name" 展示到td中
--[删]
擷取要删的資料的id: 每一條資料,後面有删除, 是以可以獲得每條資料各自的id,
執行: 按鈕@click="deleteBtn(user.id)"
方法: deleteBtn(user.id)
--[修]
頁面: 寫要修改的資料的内容頁面 input框 v-show="disU"用于顯示隐藏
資料: 在擷取每條資料時, 跟一個修改 可以直接擷取到每條資料 users
更新按鈕: @click="updateB(users)" 功能 this.user = user;
展示資料: v-model="user.name" 雙向綁定 因為 this.user = user;
送出,執行: updateBtn() 頁面中資料已經是 user
--[增]
頁面: 和update一樣
按鈕: @click="insertB()"
資料: 開始展示資料為空, 添加資料 v-model="user.name" 雙向綁定
送出: insertBtn(user)
> 按鈕
删除 deleteBtn(id) user.id,v-for()得到
更新 updateB(user) user,v-for()得到 展示input
更新送出 updateBtn() this.user,input v-model 雙向綁定得到
新增 insertB() 展示input
新增送出 insertBtn() this.user,input v-model 雙向綁定得到
傳回 returnBtn() div的v-show
清空 clearBtn() 清空input
## axios各種請求
get delete put post
-- [get]
axios請求: axios.get(`http://localhost:8614/user/find`).then(result=>{this.userList = result.data;});
頁面接收: 使用UserList數組
-- [delete]
axios請求: axios.delete(`http://localhost:8614/user/delete/${id}`)
-- [put]
axios請求: axios.put('http://localhost:8614/user/update', this.user)
-- [post]
axios請求: axios.post("",參數) axios.post('http://localhost:8614/user/insert',this.user)
發生的請求: 兩次請求 1.跨域(預檢) 2.403(正常)
資料: 使用的input表單 和put一樣 input v-model="user.name"(雙向綁定)
傳遞的資料: json串
-- [url參數]
params:{}
data:{} 隻能用在post/put
-- [成功]
.then() 箭頭函數可以使用 this.
删除 / 新增 / 修改 之後的查詢 getUserList()放在 .then() 中 --原因異步請求
筆記1
# 2021-02-02
實作網頁 HTML 超文本标記語言
文字,圖檔,視訊,音頻,動畫
ajax爬蟲
#### 1.C/S(word 遊戲) 桌面系統
#### 2.B/S(網站)
浏覽器 B -browser
伺服器 S -server
web中間件 nodejs(javaScript)/tomcat(java)
資料庫 mysql
<div></div>
<img src="a,jpg"/>
### 展示一個網頁
浏覽器通路 chrome 以服務形式,,,啟動了node服務,,端口8848
http://127.0.0.1:8848/web2012/day01-02-02/01-hello.html(常用)
file:///D:/Git/web2012/day01-02-02/01-hello.html
### * 标簽
html,head,body,style,title,
h1-h6,div,span
table,tr,td,
br,hr,img
<meta>
<br/>,<hr/>,<img/>
### * 标簽作用
<meta charset="utf-8"> 字元集使用哪種
title 網頁标題
meta charset = utf-8 亂碼 解決字元集
h1-h6 标題大小
div 塊自動換行
span 塊 實作頁面布局
tr 行
td 單元格
### * 快捷鍵
删除 Ctrl+D
### note
!DOCTYPE html
聲明web 浏覽器關于頁面使用哪個 HTML 版本進行編寫的指令
table 表格中沒有列的概念,是單元格
meta 原資訊
```<table><tr><tb>呂晶</tb><tb>呂晶</tb></tr></table> ```
樣式設計 style
border 邊框
width 寬
align 橫向排列,,,left,right,center
valign 縱向排列,,top,bottom,center
hr 橫線
空格 七個空格等價于兩個漢字
img 圖檔
src 配置圖檔來源,相對路徑,本html檔案所在檔案夾下的圖檔
等比縮放,隻設定寬或高
類class .name
id #name
font-size 字型大小
font-weight 字型加粗
padding 内邊距 上右下左
padding-left right top bottom
padding: 10px 0px 10px 10px;
margin 外邊距
dashed 邊框虛線
solid 邊框實線
# 2021-02-03
### Git
團隊協作代碼管理工具,,團隊5人
pull
git add README.me 工作空間 -> 本地索引(日志資訊)
git add . 變化内容(新增,修改,删除)
git commit -m "commit" 本地索引 -> 本地倉庫
git push -u origin master 本地倉庫 -> 遠端倉庫 master主分支
git push
### 架構圖
執行結構 技術
C/S Client/Server B/S Browser/Server
JSP, html+css+vue
html,css,javaScript,vue ajax ssm mybatis
java對象 json(位元組流,js解析)
### margin和padding
盒子模型
(margin(border(padding(div元素))))
margin 外邊距
padding 内邊距
### table
<>合并表格
橫向 colspan
縱向 rowspan
<>圓角矩形
border-radius:10px;
### 谷歌二維碼
java jar包 生成二維碼
本質,一串字元
點代表什麼
<>下載下傳的jar包,導入java程式中
通知程式,引用jar包
jar包放在lib檔案夾裡
Build Path 建立jar包在java程式中的路徑
使用方法 不需要導包 在同名包下
java.lang 包 不需要導包
package
### css
line-height: 200px;
./images/1.jpg .表示目前路徑
background
### menu
菜單
ul li
list-style: none: 去掉 li 的點
float: left; 浮動 使 li 标簽在一行
li:hover{} 滑鼠經過
### 連接配接
a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow"
target="" _blank 點選連接配接後 怎麼出現網頁 彈出
text-decoration: none; 下劃線
display: inline-table;
塊級元素 展現,以表格形式布局 設定段落生成一個行内框
### 動畫
＞拉伸
transition: width 2s; 寬度拉伸2s
.name:hover{width:100px;}
需要配合,滑鼠經過效果(滑鼠經過後變成什麼樣),
transition: 2s;
.name:hover{width:50px; height:50px;}
＞移動
animation
＞＞聲明動畫 在要使用動畫的css樣式中
animation: movebox 2s infinite linear;
movebox 動畫名
2s時間
infinite 循環執行
linear 勻速
＞＞定義動畫内容
@keyframes movebox{
from{left: 0px;}
to{left: 100px;}
}
動畫執行是在坐标中,需要position
position: relative;
position 位置
relative 相對位置
＞旋轉
transform 改變形狀
旋轉，縮放，移動，傾斜
rotate 旋轉 0deg 從0°開始
@keyframes run{
from{ transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
＞＞滑鼠移入動畫暫停,移出繼續
animation-play-state: paused;
play-state 播放狀态
paused 暫停
放在:hover中
### 音頻視訊
＞＞音頻
audio
audio src="audio/li.mp3" controls="controls"
controls 音頻控制台
＞＞視訊
video
video src="video/20170727_121728_4185.mp4" controls="controls" height="300px"
可以使用width height控制視訊的頁面大小
＞＞相對,絕對路徑
src="audio/li.mp3"
相對路徑:網頁源檔案夾,所在的目錄 目前檔案夾中的 audio/li.mp3
src="D:\Git\web2012\day02\video\20170727_121728_4185.mp4"
絕對路徑:直接指定檔案所在位置,和目前目錄無關
網頁通路形式不能通路視訊
http://127.0.0.1:8848/web2012/day02/audio-video.html
直接打開html檔案
file:///D:/Git/web2012/day02/audio-video.html
### 總結
jar包 導入(放在lib下) 引用(bulid path)
二維碼 導入jar包
CreateQR.make(寬度,高度,網址,生成圖檔路徑)
同名包不用import,java可以識别
audio video
animation transition transform
border-radius
display
# 2021-02-04
transition 拉伸 transition 2s
animation 動畫 animation run 4s linear infinite
@keyframes{from{} to{}}
from 表單
boostrap
javascript 動态網站 腳本語言 弱語言 浏覽器場景
### 表單
h1~h6 标題的大小
label 文本
text radio checkbox select-option button
文本框
input type="text" name="name" id="name" placeholder="請輸入姓名"
placeholder 文本框灰色字 提示資訊
單選
input type="radio" name="sex" id="sex" checked="checked"
checked 預設已經選擇的
多選
input type="checkbox" name="hobby" id="hobby"
下拉
select name="edu" id="edu"
option value="1" selected="seected" 幼稚園 option
select
selected 預設選擇
按鈕
button name="button" 取消 button
name id
document.getElementByName("name")
document.getElementById("id")
在使用js擷取name和id是用到
label span
bootstrap中對label有特性
label屬性for="name"
作用: 光标定位,點選文字會定位到輸入框(輸入框高亮)
name id 重複
name可以重複 id不能重複
但在radio和checkbox中id相同代表 為一組
單選框
radio 圓框 選了去不掉
互斥 name同名隻能選擇一個
name不同名,可以同時選
多選框 checkbox 方框 選了可以再去掉
下拉框
select name id
option 下拉選項
表單送出 送出的值是value值
＞＞link标簽
外部引入
link type="" rel="" href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow"
type類型 text/css
rel樣式表 stylesheet
href路徑 css/bootstrap.min.css
> input css
input[type="test"]
### bootstrap
樣式美化 封裝css3
形成漂亮的界面ui( user interface )
css是浏覽器直接支援的,直接代碼
bootstrap 第三方 預定義class
https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css
菜鳥教程中的bootstrap
.min 意思最小檔案 壓縮(把檔案所有内容換行 空格去掉) 檔案相對小
1)html 頁面引入 css 樣式表檔案
在head标簽中添加 link 标簽,,屬性 rel href
2)在标簽上就可以加入class = "form-group"
class(bootstrap中的class) 看網上手冊 菜鳥教程
container 容器 大的div
form-group
form-control
radio-inline
checkbox-inline
btn
btn-primary
btn-danger
### JavaScript
與java無關
java強語言 幾乎都能幹 C/S B/S(JSP)
javascript弱語言 腳本語言
鄙視鍊 c java c# javascript sql
B/S brower浏覽器
js更新ES5/ES6(主流)/ES7
typescript 向強語言發展
＞＞js作用
通路網頁元素，可以和背景程式對接，實作前背景貫穿
傳輸背景的資訊不包括美化css，label不包括，表單元素
怎麼拿到元素内容？姓名input框的内容？
體系：DOM（頁面元素擷取，編輯）、BOM（浏覽器控制） DOM document object model 文檔對象模型 BOM browser object model 浏覽器對象模型
javascript會把html頁面整個抽象，去除雜質，頁面元素（div/input/button...） 形成tree樹，DOM樹， 為什麼要抽象出DOM樹？為了頁面元素快速定位，擷取它資訊 網頁html解析，從上到下，從左到右，頁面button，76行，按順序解析性能低； tree樹 document就是樹根，它代表整個html頁面 頁面上的所有元素就被抽象成tree樹上的節點node 樹形結構一旦形成，它檢索資料速度遠高于html順序解析
js注釋 和 java 一樣 //
js中的字元串 單引号 雙引号 都可以
引入js檔案使用 < script src="js/"></ script>
type="text/javascript" 可省略 預設
src="" 引入外部js jquery.js
在script标簽中寫js的内容 < script>js内容< /script>
＞＞在浏覽器頁面中顯示
1.彈窗
window.alert(); alert();--BOM中提供的api
2.檢視源代碼f12
console.log(); --Chrome 提供的方法
＞＞4種方式 擷取a标簽内容 dom.html
1. tag
對應的是a标簽 參數為a标簽 傳回所有a标簽的數組
document.getElementsByTegName("a");
document.getElementsByTegName("a")[0]; 得到第一個元素
document.getElementsByTegName("a")[0].innerText; 得到元素的内容
document.getElementsByTegName("a")[0].href; 得到元素的連結
2. classname
對應的是a标簽中的 class屬性 參數是class的值 傳回所有class屬性一樣的 數組
document.getElementsByClassName("jd");
3. name
對應的是a标簽中的name屬性 參數是name的值 傳回所有name屬性一樣的 數組
document.getElementsByName("pdd");
4. id
對應的是a标簽的id屬性 參數是 id的值 傳回一個值 js書寫中規定id為唯一的
document.getElementByClassId("cgb");
＞＞修改頁面中的值(顯示的)
擷取到原來的值 再指派
document.getElementByClassId("cgb").innerText = "呂晶";
document.getElementByClassId("cgb").href = "呂晶";
>> 連結a 幾種通路形式 css樣式
a:link{} 未通路過的樣式 隻在第一次重新整理頁面時有用 通路過之後都是vidited
a:visited{} 通路過的樣式
a:hover{} 滑鼠滑過的樣式 為了效果必須放在link 和visited後面
a:active{} 滑鼠點選時的樣式
>> 定義變量
->>var var a = "521";
适用于定義所有的變量類型,var a="lvjing";
在使用var定義後 還可以重新使用var定義 重新定義後會覆寫掉原來的
var a="lvyingying";
typeof() 檢視變量的類型
var定義變量,代碼塊 {var a = "10000";} 如果代碼塊之前定義過a 會覆寫
->>let
let b="1000"; 定義變量
代碼塊中使用let定義變量 {let b="500";} 出了代碼塊變量就釋放了(彈出棧了)
let 精度高
-const
常量 const m="lvjing";
定義後不能再指派
>>函數
->普通函數
var f = function(){console.log("123456");} 定義 f(); 調用
var f = function(a){return a;} f(10);
var f = function(a,b){return a+b;} f(10,20);
->箭頭函數 arrow function
var f=()=>{console.log("123456");console.log("456798");}
var f=()=>console.log("456798"); 隻有一條執行語句
var f=(a)=>{return a;} f(10);
var f=(a,b)=>{return a+b;} f(10,20);
var f=a=>return a; 隻有一個參數和一條執行語句
>>datatype
字元串,整形,布爾,數組
var a = "lvjing";
var a = 123;
var a = true;
var a = ["123","456","789","123456","456789","789456"];
>通路數組
a[0]第一個元素 a[a.length-1] 最後一個元素
>>對象
var lv = new Object();
lv.name = "lvjing";
var car = {
name: "保時捷718",
age: "30",
f1:function(){
return this.name+this.age; 使用this通路對象中的屬性
}
};
>動态增加屬性
car.price = "123";
car.f2=function(){
return car.name+car.age;
}
>>this
this的最終指向的是那個調用它的對象
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window
}
}
}
var j = o.b.fn;
j(); 在這裡調用this的是j而不是fn,j隻是等于fn這個函數
var j = o.b.fn();
在這裡j是fn執行後的結果,this被fn執行
form
dom
var
arrow-funcation
datatype
car
# 2021-02-05 day04
js 必須會 隻局限于浏覽器
es6 維護js标準化 ECMAScript
js的衍生 1. aiax(必須 請求(把頁面發送給後端java) 依賴js)
2. json(必須 傳回 不依賴js)
3. typescript 可以存本地檔案 +nodejs服務 可以修改本地
#### bootstrap
第三方推特發明 是一套css樣式表,使定義規範化
記憶規範,根據demo學習,查找要實作的效果在bootstrap中怎麼用的
各種class bootstrap 優化頁面
1.栅格體系 可以适應PC端 移動端
2.适應主流浏覽器,相容性
借鑒bootstrap發展了element-UI(餓了麼)
#### js
文法,api
BOM Browser Object Model
DOM 樹 Document Object Model 代表html頁面
樹形結構,檢索快,效率高
隻關心表單(關鍵)元素,隻向背景送出主要内容(呂晶 姓名不送出)
根據掃描,形成dom樹 按元素類型
無法預估元素類型,就形成數組elements
頁面隻有一個,數組個數為1
通路
tagName,className,name,id
doucument.getElementsByClassName
doucument.getElementById
radio 送出的是男或女
checkbox 送出數組 ["123","456"]
開發時使id唯一,便于使用
es6
js中var,Object
es6是js的高版本 block scoping 塊域,變量定義使用範圍更小,釋放快
let,const(不允許修改),{}
1. var a = function(){} var a = function(arg){return arg;}
var a = () => {} arrow function 知識簡化js函數,不能完全替代
var a = (arg) => {return arg;} var a = arg => arg
2. 數組var a=["1","2"];
3. 對象var a={name:123,age:25}; key:value,key:value
對象中函數 var a = {b:function(){},c:()=>{}}
對象定義中傳統函數的this代表整個對象,,,箭頭函數中的this是window的對象
動态增加對象的函數
a.b1=function(){this.name} this代表本對象
a.c1=()=>{this.name a.name} this代表window對象,使用a代表本對象
this 在普通函數中代表目前對象 this 在箭頭函數中代表window對象
java 靜态語言,編譯時查錯,運作前保障程式的安全性
js 動态語言,邊解析邊執行,動态添加屬性方法,靈活,,,,,缺乏安全(黑客可以改内容)
alt+/ 提示
> css居中
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
#### bootstrap
class="container" 最外面大盒子修飾 給盒子大小後會水準居中
class="form-group" 大盒子
for="username" 輸入框外文字修飾
class="form-control" 輸入框input修飾
autocomplete="off" 關閉自動完成,輸入框不彈出之前使用的内容
class="btn btn-primary" 按鈕修飾 button
onclink = "save()" 按鈕事件 單擊觸發裡面的函數 函數自定義
function save(){let username = document.getElementById("username")}
擷取對象中的元素(不同的标簽調用不同的字段)
div.innerText a标簽a.innerText input.value
### jquery
第三方 改變了js寫法,新機制,代碼更簡介
js标準,jquery民間标準,替代js
anglarjs,react,vue js架構,更厲害 vue基于js和jquery
vue阿裡收購,
js jquery
document $()
document.getElementsByTagName("a") $("a")
document.getElementsByClassName("a") $(".a")
document.getElementsByName("a") $("input[type='text']") $(":text")
document.getElementById("a") $("#a")
input.value $("#a").val()
div.innerText $(#a).text()
1)簡潔
2)選擇器 文法:$(select).action()
select選擇器 .username(class) #username(id)
action() 動作 函數
導入 <script src="jquery"></script>
jquery提示 文法提示庫左鍵 jquery1.8
fieldset legend```
<fieldset><legend>登入</legend><div>内容</div></fieldset>
登入外面的大框```
>>儲存 取消 按鈕
儲存 擷取輸入的使用者名密碼 取消 清空輸入框
1.js
使用按鈕中設定的onclick功能 onclick="jssave()" onclick="jsclear()" 點選按鈕觸發方法
定義方法
function jssave(){console.log(document.getElementById("username").value);}
function jsclear(){document.getElementById("username").value="";}
2.jQuery
前期綁定 使用 按鈕中設定onclick功能 點選觸發方法
定義方法
function jqsave(){console.log($("#username").val());}
function jqclear(){$("#username").val("");}
後期綁定 設定按鈕id 擷取按鈕 設定點選事件 .click(匿名函數)
$("#btnSave").click(function(){console.log($("#username").val());})
$("#btnClear").click(function(){$("#username").val(""));})
---設定按鈕的屬性 點選之後不允許第二次點選
在定義按鈕功能中設定 attr(設定或傳回) attr參數 name value
disable 對按鈕設定時 會禁用按鈕 預設為false
$("#pay").attr("disabled",true);
--checkbox 全選 取消全選
複選框,設定全選和取消全選按鈕 button
使用jq中的.click方法設定點選事件
jq中的checked(預設選中)屬性 true全部選中 false取消全選
$("#selectAll").click(function(){$("[id=hobby]").prop("checked",true);})
$("#unSelectAll").click(function(){$("[id=hobby]").attr("checked",false);})
在去選中attr隻能使用一次,是以用prop 在取消全選中,attr可以使用多次
### json
交換資料 兩台計算機通訊 計算機+網絡TCP/IP
txt (10,20,30)明文資訊不安全
xml (< price>10< /price>)自定義标簽,标簽量大,造成網絡傳輸資料量增加,性能低
json []數組 {}一條記錄 "key","value"屬性 值 表示字段,資料
京東擷取某個商品100003717483的價格
請求連結：
https://item.jd.com/100003717483.html 商品詳情
https://p.3.cn/prices/mgets?skuIds=J_100003717483 商品價格
json字元串：
[
{
"p":"2499.00",
"id":"J_100003717483",
}
]
JSON 對象 把字元串變成js對象 JSON.parse()
通過對象擷取内容
<span id="itemId"></span>
var item = JSON.parse(jsonstr);
$("#itemId").text(item[0].id); 傳回取到的值
### ajax
送出請求 https://p.3.cn/prices/mgets?skuIds=J_100003717483
請求網站 ajax送出請求(相當于浏覽器發起請求) 京東伺服器響應
在内部進行查詢,商品資訊,轉換為json字元串傳回
＞＞jquery.ajax參數
type:GET/POST 連結形式的差異
url:連結 位置
data:參數對象 資料
contentType:發送請求格式 application/json;charset=utf-8;
dataType:傳回的資料格式 json/jsonp跨域(京淘項目)
success:通路成功(data) data就是傳回的json對象
error(e):通路出錯,網站傳回錯誤資訊
請求
GET json/jsonp
POST jsonp data中的資料 在data中寫 或者 在url中包括 或者 都有 都可以
#### 小結
1)jQuery 封裝了js 更簡介 $() api
$("selector").action() 選擇器
2)json 字元串 遠端資料傳輸 資料交換格式
[數組] {一條記錄} key:value屬性值
3)ajax 參數
# 2021-02-07
>>jQuery
封裝了js api
document.getElementsByTagName("a"); $("a");
document.getElementsByClassName("a"); $(".a");
document.getElementById("a"); $("#a");
Vue 隻關心資料和業務
>>json ********
xml <name>lvjing</name><age>23</age>
json {name:"lvjing",age:23} 一條記錄
[{name:"lvjing",age:23},{name:"zhaoqing",age:24}]
擷取 記錄[{},{}]
json可以表達多重對象,,,{}中可以使對象
json和java Object,php,c#
>>ajax
js是互動,,對頁面内容擷取,設定
ajax 前台(h5+css+js)與背景(維護資訊,店小二)資料連通(把前台資料送出到背景,把背景的資料在前台展示) ajax中間傳遞
js（xmlHttpRequest、xhr對象)推出ajax這個技術，可以把前台（h5+css3+js使用者看頁面，商品頁面） 和背景程式（維護資訊，店小二操作頁面）連通。 （把前台資料送出背景，把背景傳回資料在前台展示）ajax就負責中間傳遞 ajax把一個使用者請求發送到後端（京東），京東背景伺服器接收到這個請求request，再去通路背景程式， 背景程式處理，把某個商品的價格資訊傳回，把傳回資訊封裝成json字元串，ajax拿到傳回值， 把它在轉換成js對象。success(data)就封裝到成功函數的data參數中。頁面就可以對data進行解析， 最終把id和p展示在頁面上。
ajax請求request->後端->通路後天程式->傳回資訊封裝為json字元串->ajax拿到傳回值->轉換為js對象
成功擷取 success(data) 解析data 資訊在頁面上展示
>>jQuery.ajax(背過)
https://p.3.cn/prices/mgets?skuIds=J_100003717483
type:GET/POST 請求
url:通路位址 資料存儲位置
data:{"skuIds":"J_100003717483"} js對象 資料key:value
contentType:請求類型 application/json;charset=utf-8;
dataType:響應類型 json/jsonp跨域(一個網站通路另一個網站會發生跨境 限制)
success:function(data){
//參數是一個函數，代表網站成功處理并且傳回
//data網站背景成功處理後，把結果封裝到data對象中，背景傳回json字元串，内部轉換變成js對象
//JSON浏覽器直接支援，JSON.parse(jsonstr)
//注意這個傳回data是一個數組還是單個對象
console.log(data)，如果最外層是[]就代表傳回是數組，如果最外層傳回是{}，就代表是一條記錄
items[0] 第一條資料，items[1]。。。
item
}
error:function(e){失敗資訊}
＞＞＞＞ajax json
>>GET/POST 差異
https://p.3.cn/prices/mgets?skuIds=J_100003717483
手寫參數
https://p.3.cn/prices/mgets
自動拼接表單元素 形成串
網站請求的兩種方式 HTTP規範
1) GET參數拼接在URL後 參數 第一個使用? 之後的使用&
jdbc:mysql://localhost:3306/mysql-db?charset=utf8&severTimezone=Asia/Shanghai
2) POST 參數不能直接在浏覽器輸入,使用form,搜集表單元素(input/select)
形成一個串,
get手寫 form自己拼接
ajax
data參數
>>script腳本
head body中 body後 html外
邊解釋邊執行,上到下 左到右
先後加載順序
按鈕 先加載按鈕 在加載按鈕的操作 script放在定義按鈕後
把script放在引用頁面元素之後
jquery ready() js建構完動漫樹後觸發
＞＞jQuery ready()
$().reasy(匿名函數)
$(匿名函數)
$().reasy(function(){})
$(function(){})
>>Vue
前端架構,級别很高
hello vue
第三方技術 js檔案 引入
自己的文法 new Vue()對象
div id="app" vue操作區域進行資料渲染
# 2021-02-18
### vue
特點:資料驅動,元件化
是一套漸進式的架構,使用必須是全套
五個部分*************************
>>>開發vue頁面步驟:
1. 單獨導入vue.js
2. 按vue的文法結構寫代碼,少量api new vue()
3. body中加一個div,所有内容要寫在這個div中,id="app"
挂載點el 內插補點表達式 資料data
內插補點表達式:兩個大括号括起來值必須在data中進行定義，就可以通路，這個寫法插值表達式
div id="app" {{msg}}
new Vue({el:"#app",data:{msg:"hello lvjing"}});
View ViewModel Model MVVM架構(Vue)
api分水嶺,死的(隻是包裝了)
架構中有思想
>>建立vue檔案模闆
建立-自定義模闆.複制要使用的模闆
>>>雙向綁定 View Model
input type="text" id="address" v-model="address"
使用指令v-model在input中操縱資料,可以改變view中的值
vue
1.操縱view model随之變化
2.操縱model view也會變化
>>data 三種形式
1.對象 data:{msg:"lvjing"}
2.函數 data:function(){return {msg:"lvjing"}}
3.es6(類似函數) data(){return {msg:"lvjing"}}
>>調試錯誤
f12 浏覽器調試視窗 console(js,vue錯誤資訊)可以看到第幾行錯誤
SyntaxError 文法錯誤
二分法處理錯誤, 通過運作各部分代碼查找 錯誤代碼區域,定位到錯誤
>>函數
methods:{say:function(){}}
>>按鈕中調用方法
>>git 克隆
遠端倉庫複制到本地
一般是克隆别人的,看代碼 克隆項目組
本地備份
指令
git clone 倉庫位址
在要存放的本地目錄下 git bash 執行
git clone https://gitee.com/nutony/res.git
>>>網頁小技巧
寫過JSP頁面，java代碼和html交融，混雜一起，
怎麼把java代碼轉換html一些内容 技術JSTL TAG庫，起到翻譯作用。
vue通過指令把vue資料翻譯成html代碼
v-model,v-on:click(@click)
v-cloak,v-show,v-if,v-else,v-else-if
v-for,v-on,v-bind
>>v-cloak
頁面的選擇器,有屬性就執行樣式
特殊效果,螢幕頁面晃動
f12-network-online slow 3G
內插補點表達式頁面有明顯晃動,加載中會顯示原來的對象内容(是以晃動)
先加載頁面,加載vue對象,才開始解析,最終替換頁面中的內插補點表達式(渲染)
解決:加一個樣式,把頁面值div id=app 整個div藏起來, display:none; 等Vue加載完畢，在把它展示！
[v-cloak]{display:none;} 這個指令頁面選擇器，有這個屬性就執行這個樣式
div v-cloak
>>v-show,v-if,v-else,v-else-if
是否成年,age
v-show 展示與不展示,條件成立的展示,不成立的隐藏了
v-if 不成立的條件直接去掉了
性能 頻繁之後show性能高
分支結構 if else 隻經過條件成立的語句
>>v-for
類似于java中的foreach循環,in後面就是集合,o代碼每次周遊的目前值
o,i o代表目前行内容,i代表目前索引值,注意順序,vue定死順序
v-for="o in hobby" {{o}}
v-for="o.i in hobby" {{i}}-{{o}}
>>v-on
**button 事件
v-on:click="show"
v-on:click="show()"
@click="show"
>>v-bind
當插值表達式用作屬性值時,v-bind可以使 插值表達式作為vue變量
<a :href="site.url" target="_blank" rel="external nofollow" >{{site.name}}</a>
>>v-text v-html
v-text 純文字輸出
v-html 會翻譯data中資料的html标簽
div.innerText div.innerHtml
>> 指令沒有晃動,指令配合頁面标簽
### vue漸進式架構
1.隻引入vue.js
2.vue.js+vue項目(加載 依賴包,插件(直接拿别人的來用))
組織第三方插件,規範 npm+webpack 打包工具 nodejs
項目,結構 限制(用的别人的東西, 把别人的組織起來)
>>步驟
nodejs web中間件 翻譯解析開發語言 js/jq/vue 容器 小項目
tomcat web中間件 翻譯解析java springmvc+spring+mybaits 大項目
nodejs是基于chrome浏覽器核心 解析js最快服務
需要js庫 引入 npm管理第三方js庫(jq.vue.element-ui)
webpack 小項目拷貝 大項目(環境) 打封包件
nodejs解析 npm管理js庫 webpack打包
>>vue-cli 腳手架
1.驗證nodejs node -v
2.npm 鏡像 阿裡的
npm切換到淘寶鏡像方式:
npm config set registry https://registry.npm.taobao.org
檢視:
npm config get registry
3.安裝腳手架
npm install vue-cli -g #安裝vue-cli腳手架
install 安裝 vue-cli (vue-client縮寫 vue用戶端 vue.js) -g 全局安裝
npm uninstall vue-cli -g #解除安裝vue-cli腳手架
vue # 展示幫助提示
vue --version # 2.9.6
vue –V
where vue #vue安裝在哪裡
如果指令出錯Err，不是警告warn，重新執行指令（網絡不穩定）
如果報權限不足，安裝nodejs時要以管理者賬号來安裝
>>安裝vue項目
1.找個目錄
->vue init webpack jt 此處項目名不能使用大寫
建立jt項目,
Project Name 項目名稱，預設，回車
Project description 預設，回車
Author chenzs 作者
vue build 預設，回車
install vue-router? 是否安裝router，輸入：y 安裝
Use ESLint to lint your code? 規則引擎，過于嚴苛，輸入：n
Setup unit tests? 單元測試，輸入：n
Setup e2e tests with Nightwatch(Y/n)? 測試架構Nightwatch，輸入：n
Should we run 'npm install' for
you after the project has been created? 預設npm，回車
成功後 啟動服務
->cd jt
->npm run dev 進入京淘項目
Your application is running here: http://localhost:8080
http://localhost:8080 通路
>>>>>>>>>安裝執行代碼
安裝nodejs
node -v
npm config set registry https://registry.npm.taobao.org
npm config get registry
npm install vue-cli -g
vue --version
vue init webpack jt
cd jt
npm run dev
最後:Your application is running here: http://localhost:8080
>>>>>>>>vue項目結構
node_modules 臨時目錄,自己管理,第三方js 依賴
src 源檔案目錄 *.js *.vue
static 靜态資源 vue檔案規定檔案存放位置,圖檔 css js
index.html 首頁 localhost:8080
package.Json 配置檔案 全局配置 index.html 調用哪些檔案
webpack.dev.conf.js 全局配置檔案
src/main.js
new Vue({
el: '#app', 挂載點
router, 路由
components: { App }, 元件(省略字尾) APP.vue
template: '<App/>' 模闆
})
src/App.vue
三個結構
<template>html+vue(動态網站) view</template>
<script>vue js 操作頁面資料 model</script>
<style>元件的獨立修飾</style>
預設內建子元件
自己寫的所有元件在App.vue中
src/components/HellowWorld.vue
>>>>>>>>>總結
看不到底層在做什麼
>>Vue
本質是就是封裝js，jQuery，在代碼中已經看不見了
壞處：不知道底層在幹嘛？不夠透，在大型項目中，不可能所有細節都自己做，提倡“拿來主義”
ssm，都是拿來别人的東西spring拿mybatis，springcloud微服務，網飛，阿裡
好處：Vue資料驅動，屏蔽底層js的api，無需去記憶這些晦澀難懂難記東西，隻需要操縱資料！
減輕開發者工作量，為做大型項目
>> Vue和js、jquery細節差異
擷取頁面上輸入框
```<input type="text" id="address" v-model="address"/> ```
js.api documet.getElementById("address").value = "123";
jQuery.api $("#address").val("123"); 标新立異，創造新的東西，額外記憶
vm.data.address
address= "123";
>>Vue中有什麼東西？
1）結構：死的結構
View 視圖，頁面展示内容：a. 插值表達式{{msg}}、b. 标簽上加指令 <p v-for=""></p>
Model 模型，資料
ViewModel 視圖模型，把視圖和資料綁定起來，Vue對象，内部完成解析過程
衍生出：MVVM架構
2）
View， 規定頁面body中加div，預設修飾app，習慣，Vue對其進行解析，動态網站
Model，資料來源：el（element）挂載點、data資料、methods函數
>>Vue 提供很多指令，形成動态網站
v-model 雙向綁定
v-show、v-if、v-else-if、v-else，判斷語句
v-for，循環語句
v-on，@click，單擊事件
v-bind，:href="url" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ，url不是字元串，而是資料的變量名稱
v-text、v-html，text純文字，裡面有html标簽不解析，html會解析标簽
>>Vue是漸進架構
1）簡單的vue，直接引入vue.js
2）大型項目vue項目，
a. nodejs(web中間件，啟動服務)/
b. npm 依賴js插件
c. webpack打包，編譯過程（儲存、重新啟動）壓縮
d. vue-cli 腳手架
## 任務：
1、搭建環境
2、修改HelloWorld.vue，頁面展現”京淘電商平台“，改成紅色
# 2021-02-19
js 實作 浏覽器增強互動
jquery 簡化,優化 js代碼 本質是js之上,小的格局變化,根本沒變 dom樹
Anglur 網絡 TCP/IP分層協定 後端 j2ee mvc 三大架構
Anglur開了架構的先河，分層概念TCP/IP分層7層協定（網絡，硬體+軟體），j2ee架構分層概念，MVC架構，三大架構，微服務
大前端 reactjs vuejs
架構 : 已經實作了基礎的架構, 開發人員的代碼量減少 **能更加注重業務實作
在架構的基礎上實作自己的業務,無需更細緻的寫代碼
現在關注是 架構如何實作的功能
架構思想應用,漸進式,資料驅動(data, 插值表達式, 标簽的屬性),元件化(代碼複用)
自己做架構 别人是如何實作的 ()()()把vue學透 怎麼做到的
>>> vue.js 漸進式
vue.js, 元件化, npm管理依賴(js庫), webpack打包工具
>>> 資料驅動
架構 存在限制.
檔案名 目錄components/Item.vue App.vue引入元件
按規定寫好的 自動連入整體項目 約定大于配置
資料驅動 學習的關注點 js的api -> 結構(代碼放在哪,文法結構)
MVVM架構
寫資料就放模型Model的位置，寫頁面展示放視圖View的位置，剩下事情VM去做（vue它連接配接模型和視圖，渲染）。
>>> vue實作機制
Vue對象結構
el挂載點, data資料區, methods函數區
注意: data中資料寫法, methods中函數寫法
>>> Vue資料展示
js/jq 操作dom樹,更新頁面
雙向綁定: Vue, 頁面改變 <--> 資料改變
1)插值表達式: {{msg}} Vue底層周遊{{msg}} , 在資料區查找對應的變量, 使用變量值替換
2)v-指令集: vue編譯之後把對應的指令翻譯成html語句,
v-show,v-if,v-for, ....
#### Vue項目 工程 ########### 很重要
1. 自己添加元件 圖書: title,sellpoint,price,intro
2. 商品管理 新增,修改,删除,清單 CRUD
3. element-ui
>>>>寫自己的元件
1.定義元件: src/compinents/Item.vue
2.注冊元件: App.vue 在其中引入Item.vue
3.使用元件: <Item></Item> 标簽 Vue就會翻譯為<template>中的内容
export default{} 隻供本元件使用
>>引入element-ui
有一系列的元件ui
布局 表單 表格 對話框 輸入框 文本域
業務邏輯
新增 修改 删除 清單 如何聯系起來
資料使用資料庫 對象數組
>>>
1.定義元件: src/compinents/Item.vue view data methods
2.注冊元件: App.vue
script 在其中引入Item.vue
導入 import Item from "./components/Item.vue";
components選項, App.vue 根元件下有哪些元件
export default { components:{Item} }
3.使用元件: App.vue template div <Item></Item>
>>> 引入element-ui
安裝
https://element.eleme.cn/#/zh-CN 元件
npm管理第三方插件 (元件)
安裝 npm i element-ui -S
i 安裝install element-ui 插件名 -S 安裝生産環境
-D 開發環境
引入項目
修改main.js 元件導入方式 全局(其他也可以調用)
import ElementUI from 'element-ui'; 引入ui
import 'element-ui/lib/theme-chalk/index.css'; 引入css
Vue.use(ElementUI); 使用元件
>>>>栅格設計
為了适合pc端和手機端 螢幕分為24列
<el-row></el-row> 布局标簽
>>>>>>>>> jt/src/components/Item.vue
el-row 布局标簽 為頁面中的行 24列
>-* 在頁面中 設定添加按鈕
el-button
>-* 設定表格展示内容
table column列
在data中設定表格已有資料内容 數組對象 list:[{},{},{}]
頁面中設定 操作, 修改 删除 按鈕
>-* 添加按鈕 彈出對話框
設定對話框
按鈕功能 彈出對話框 toadd
給添加按鈕設定點選事件
>-* 對話框
内容
按鈕 确認 save 取消
dialogVisible (用來顯示或關閉對話框) data中設定資料預設為default不顯示
:visible :visible.sync="dialogVisible" 後面的是個變量
用來顯示和隐藏一個彈框
>-* form表單
添加資料
彈出對話框 中 設定form表單(對應頁面資料内容) 輸入内容
設定預設資料 m
:model="m" 綁定
>-* 點選 确認 按鈕 儲存輸入資料到頁面中
設定确認按鈕事件 方法save
新增 修改 删除 splice
同時關閉對話框
>>>>數組新增,修改,删除
splice() index 索引(在哪裡改動) howmany 删除幾個 item 添加的元素(可變元素)
list.splice(0,0,"lv") 新增
list.splice(2,1,"jing") 修改
list.splice(2,1) 删除
在表單中輸入内容
點選确認 資料添加到頁面中,同時關閉對話框
>-* 删除
每行周遊 有索引值index
Vue插槽slot-scope 提供變量s
s.$index 代表目前行索引值
s.row 代表目前行資料 (list[2])
list.splice(index,1)
template slot-scope="s" @click="del(s.$index)"
設定del方法删除資料
>-*修改
1.擷取目前行index 擷取目前行資料row 把m資料去變量 this.m=row
2.對話框 回顯 form表單與回顯對話框中的資料關聯 :model="m"
3.點選确定按鈕，save方法，加參數具體值m，修改頁面值，它通過雙向綁定，就改變資料區m中屬性 儲存這個值，splic函數
4.設定一個變量，isUpdate，是否修改
新增：isUpdate=false；修改：isUpdate=true
新增和修改是公用save方法，通過這個參數調用不同splice，if判斷
修改按鈕設定點選事件 方法toupdate 傳參s.$index,s.row
定義方法toupdate
直接把臨時資料m設定為 row
打開對話框 顯示的内容是目前行的資料
副作用
**點選确認 是新增 **修改form表單時 table中的内容也變 ***字型不一樣
**點選确認 是新增
解決方法:
設定一個變量，isUpdate，是否修改
新增：isUpdate=false；修改：isUpdate=true
新增和修改是公用save方法，通過這個參數調用不同splice，if判斷
全局變量 index 在點選确認按鈕時,splice的索引值
**修改form表單時 table中的内容也變
解決方法:
巧妙實作，利用js提供JSON方法實作！
JSON js子集，浏覽器直接支援文法
JSON.parse() //把json字元串轉換js對象
JSON.stringify() //把js對象轉換json字元串
this.m = row js對象 this.m = JSON.parse(JSON.stringify(row));
//經過2次轉換，建立新對象 new Object() 不同的引用，
修改form表單框中内容，this.m，這時和頁面row就沒有關系
**字型不一樣
style中設定 textarea font-family:"微軟雅黑";
>>>>>
export default{
name:"Item",
data(){},
methods:{}
}
>>>>>SPA
現在主流方式單頁面SPA，Vue架構推崇單頁面，不用重新整理
![小米note12turbo16GB+1TB1024GB最大記憶體[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)