14.vue路由腳手架

一.vue路由：https://router.vuejs.org/zh/

1、定義

let router = new VueRouter({mode:"history/hash",base:"基本路徑" 加一些前綴  必須在history模式下有效linkActiveClass:"active", 范圍選擇linkExactActiveClass:"exact", 精確選擇routes:[{path,component}]
});

2、注入Vue實例中

new Vue({router})

3、渲染

內容
默認翻譯成a標簽

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let Index = {template:`<div>首頁</div>`};
let User = {template:`<div>用戶</div>`};
let News = {template:`<div>新聞</div>`};
let About = {template:`<div>關于我們</div>`};
let Login = {template:`<div>用戶登陸</div>`};
let Info = {template:`<div>用戶信息</div>`}let router = new VueRouter({//mode:"history",//hash//mode:"hash",//hash,linkActiveClass:"active",linkExactActiveClass:"exact",//base:"/base/",// 在歷史模式下運行routes:[//配置路由 {path,component}{path:"/index",component:Index},{path:"/user",component:User},{path:"/user/login",component:Login},{path:"/user/login/info",component:Info},{path:"/news",component:News},{path:"/about",component:About},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, }); 
};
</script>
</head><body>
<div id="app"><a class="nav" href="#/index">首頁</a><a class="nav" href="#/user">用戶</a><a class="nav" href="#/user/login">用戶登陸</a><a class="nav" href="#/user/login/info">用戶信息</a><a class="nav" href="#/news">新聞</a><a class="nav" href="#/about">關于我們</a><hr /><router-link class="nav" to="/index">首頁</router-link><router-link class="nav" to="/user">用戶</router-link><router-link class="nav" to="/user/login">用戶登陸</router-link><router-link class="nav" to="/user/login/info">用戶信息</router-link><router-link class="nav" to="/news">新聞</router-link><router-link class="nav" to="/about">關于我們</router-link><router-view></router-view>
</div>
</body>
</html>

res:
image

跳轉：

window.history.forward/back();

vm.$router.forward/back();
vm.$router.go(+-n);

vm.$router.push(path);
vm.$router.push({path});

exp:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let Index = {template:`<div>首頁</div>`};
let User = {template:`<div>用戶</div>`};
let News = {template:`<div>新聞</div>`};
let About = {template:`<div>關于我們</div>`};let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/index",component:Index},{path:"/user",component:User},{path:"/news",component:News},{path:"/about",component:About},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, methods:{back(){//window.history.back();//this.$router.back();this.$router.go(-1);},forward(){//window.history.forward();//this.$router.forward();this.$router.go(1);},gohome(){//location = "http://localhost/20180727/%E8%B7%AF%E7%94%B14.html#/index"//this.$router.push("/index");this.$router.push({path:"/index"});}}}); 
};
</script>
</head><body>
<div id="app"><input @click="back" type="button" value="后退"/><input @click="forward" type="button" value="前進"/><input @click="gohome" type="button" value="回到首頁"/><hr /><router-link class="nav" to="/index">首頁</router-link><router-link class="nav" to="/user">用戶</router-link><router-link class="nav" to="/news">新聞</router-link><router-link class="nav" to="/about">關于我們</router-link><router-view></router-view>
</div>
</body>
</html>

user?id=123 ? req.query ??? /user
/user/123 ??? req.params ?? /user/:id

4.路由傳參：

{path:"/user/:id"} ? {{$route.params.id}} ?
{path:"/user"} ?? {{$route.query.id}} ??

exp1:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let User = {template:`<div>用戶id:{{$route.params.id}}---{{a}}--{{b}}</div>`,data(){return {a:1,b:2}   },updated(){console.log("updated",this.$route.params.id);   }
};
let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/user/:id",component:User},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, }); 
};
</script>
</head><body>
<div id="app"><router-link class="nav" to="/user/111">用戶1</router-link><router-link class="nav" to="/user/222">用戶2</router-link><router-link class="nav" to="/user/333">用戶3</router-link><router-view></router-view>
</div>
</body>
</html>

res:

https://upload-images.jianshu.io/upload_images/12200279-5b1f57650ddb67ec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

exp2:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let User = {template:`<div>用戶id:{{$route.query.id}}</div>`,updated(){console.log("updated",this.$route.query.id);    }
};
let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/user",component:User},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, }); 
};
</script>
</head><body>
<div id="app"><router-link class="nav" to="/user?id=111">用戶1</router-link><router-link class="nav" to="/user?id=222">用戶2</router-link><router-link class="nav" to="/user?id=333">用戶3</router-link><router-view></router-view>
</div>
</body>
</html>

res:
image

高級用法：把參數變成組件的屬性

{path:"/user/:id",props:true} ?? props:["id"] ---> this.id ? {{id}} ? ?? params
{path:"/user",props:true} ???? props:["id"] ---> this.id ? {{id}} ? 錯誤的 query

props格式：

1、布爾值 true變成組件屬性
2、對象 {不會改變的值}
3、函數

props(router){  return {router.params/query}    
}

query只能用3.函數傳參

exp1:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let User = {props:["id"],template:`<div>用戶id:{{$route.params.id}}---{{id}}</div>`,updated(){console.log("updated",this.$route.params.id,this.id);   }
};
let router = new VueRouter({routes:[//配置路由 {path,component}//{path:"/user/:id",component:User,props:true},//{path:"/user/:id",component:User,props:{id:123}},{path:"/user/:id",component:User,props(router){console.log(router);return {id:router.params.id}}},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, }); 
};
</script>
</head><body><div id="app"><router-link class="nav" to="/user/111">用戶1</router-link><router-link class="nav" to="/user/222">用戶2</router-link><router-link class="nav" to="/user/333">用戶3</router-link><router-view></router-view>
</div>
</body>
</html>

res:
image

exp2:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let User = {props:["id"],template:`<div>用戶id:{{$route.query.id}}---{{id}}</div>`,updated(){console.log("updated",this.$route.query.id,this.id);    }
};
let router = new VueRouter({routes:[//配置路由 {path,component}//{path:"/user",component:User,props:true},//{path:"/user",component:User,props:{id:123}},{path:"/user",component:User,props(router){console.log(router);return {id:router.query.id} ;}},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, }); 
};
</script>
</head><body>
<div id="app"><router-link class="nav" to="/user?id=111">用戶1</router-link><router-link class="nav" to="/user?id=222">用戶2</router-link><router-link class="nav" to="/user?id=333">用戶3</router-link><router-view></router-view>
</div>
</body>
</html>

res:
image
----------------------------------

5.路由監聽

==watch==:可以加給1、Vue實例，2、組件
watch(){$route(to,from){}
}
==beforeRouteUpdate==
beforeRouteUpdate (to,from,next){next();next(false);禁止路由跳轉next(path);next({path});next({path,query});next({name,params});
}

exp1:
watch:全局監聽

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let User = {template:`<div>用戶id:{{$route.params.id}}</div>`
};
let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/user/:id",component:User},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, watch:{$route(to,from){console.log("from:",from);console.log("to:",to);      }   }}); 
};
</script>
</head><body>
<div id="app"><router-link class="nav" to="/user/111">用戶1</router-link><router-link class="nav" to="/user/222">用戶2</router-link><router-link class="nav" to="/user/333">用戶3</router-link><router-view></router-view>
</div>
</body>
</html>

exp1:
watch:局部監聽

<script>
let User = {template:`<div>用戶id:{{$route.params.id}}</div>`,watch:{$route(to,from){console.log("from:",from);console.log("to:",to);      }   }
};
let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/user/:id",component:User},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, }); 
};
</script>

exp3:
beforeRouteUpdate :
exp:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let User = {template:`<div>用戶id:{{$route.params.id}}</div>`,beforeRouteUpdate (to,from,next){console.log("from:",from);console.log("to:",to);  //next();//next(false);if(to.fullPath == "/user/111"){//next("/index");   //next({path:"/news",query:{id:123}});  //next({path:"/news/:id",params:{id:123}});//錯誤的    next({name:"user",params:{id:123}});    } else {next(); }   }
};
let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/user/:id",name:"user",component:User},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, }); 
};
</script>
</head><body>
<div id="app"><router-link class="nav" to="/user/111">用戶1</router-link><router-link class="nav" to="/user/222">用戶2</router-link><router-link class="nav" to="/user/333">用戶3</router-link><router-view></router-view>
</div>
</body>
</html>

6.命名路由：

主要的用途在路由傳參

{name,params}
{path,query}

7.路由嵌套 命名視圖

組件template取名字,router-link標簽中要加name="名字",默認default,可不寫

VueRouer({routes:[{name,component,children:[{name,componet,children:[{name,component.....}]}]}{name:components:[default:{template:xxxx}xxx:{template:xxxx}]}]
});
<router-view><router-view> name="default"   
<router-view name="xxx"><router-view>

exp1:路由嵌套

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/user/:id",name:"user",component:{template:`<div>用戶id:{{$route.params.id}} <router-view></router-view></div>`},children:[//{path,component}{path:"info",component:{template:`<div>info</div>`}},{path:"pass",component:{template:`<div>pass</div>`}}]},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, }); 
};
</script>
</head><body>
<div id="app"><router-link class="nav" to="/user/111">用戶1</router-link> <router-link class="nav" to="/user/222/info">用戶2</router-link> <router-link class="nav" to="/user/333/pass">用戶3</router-link> <router-view></router-view>
</div>
</body>
</html>

res:
image

exp2:
命名視圖

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
.nav{text-decoration:none; border:1px solid #ccc; display:inline-block; padding:20px;}
.router-link-active,.active{ background:yellow;}
.router-link-exact-active,.exact{ background:pink;}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
let router = new VueRouter({routes:[//配置路由 {path,component}{path:"/index",name:"index",component:{template:`<div>首頁</div>`},},{path:"/user",name:"user",components:{default:{template:`<div>用戶</div>`},info:{template:`<div>用戶info</div>`},pass:{template:`<div>用戶pass</div>`},    },},]   
});window.onload = function(){let vm = new Vue({el:"#app",router, }); 
};
</script>
</head><body>
<div id="app"><router-link class="nav" to="/index">首頁</router-link> <router-link class="nav" to="/user">用戶</router-link> <router-view></router-view><router-view name="info"></router-view><router-view name="pass"></router-view>
</div>
</body>
</html>

res:
image

二.vue-cli腳手架

https://www.npmjs.com/package/vue-cli

1、先安裝 npm i -g vue-cli
2、創建項目 vue init 
vue init webpack myvue
安裝模塊

相當于安卓軟件的不同的應用商城
1、npm
2、yarn https://yarnpkg.com/zh-Hans/
3、bower https://bower.io/

3、啟動項目

cd myvue
npm start 或者 npm run dev

作業:
1.Vue.config.productionTip = false

Vue.config.productionTip的意思

生產模式需要在main.js中關閉 ：Vue.config.productionTip = false,
作用是阻止 vue 在啟動時生成生產提示。
即，不設false會在生產環境依舊提示：
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.

2.import/export http://es6.ruanyifeng.com/#docs/module

引入模塊 require ?? ? ?? ? ? ? import
導出模塊 exports/moudel.exports ?? export

let fs = require("fs");

import fs from "fs"

exports.a = 12;
module.exports = {
a:12
}

export {a:12}

export default {a:12}

require/exports/moudel.exports/import/export

轉載于IMWeb社區

ES6標準發布后，module成為標準，標準的使用是以export指令導出接口，以import引入模塊，但是在我們一貫的node模塊中，我們采用的是CommonJS規范，使用require引入模塊，使用module.exports導出接口。

不把require和import整清楚，會在未來的標準編程中死的很難看。

require時代的模塊

node編程中最重要的思想之一就是模塊，而正是這個思想，讓JavaScript的大規模工程成為可能。模塊化編程在js界流行，也是基于此，隨后在瀏覽器端，requirejs和seajs之類的工具包也出現了，可以說在對應規范下，require統治了ES6之前的所有模塊化編程，即使現在，在ES6 module被完全實現之前，還是這樣。

node的module遵循CommonJS規范，requirejs遵循AMD，seajs遵循CMD，雖各有不同，但總之還是希望保持較為統一的代碼風格。

// a.js// -------- node -----------
module.exports = {a : function() {},b : 'xxx'
};// ----------- AMD or CMD ----------------
define(function(require, exports, module){module.exports = {a : function() {},b : 'xxx'};
});

可以看出，為了保持風格的高度統一，除了在瀏覽器端的模塊中要使用一個define函數來提供模塊的閉包以外，其他代碼可以完全一致。

// b.js// ------------ node ---------
var m = require('./a');
m.a();// ------------ AMD or CMD -------------
define(function(require, exports, module){var m = require('./a');m.a();
});

在使用上，也非常相似。雖然AMD or CMD提供了更加豐富的風格，但是我們本文主要是討論node環境下，所以不做擴展。

ES6中的module

ES6發布的module并沒有直接采用CommonJS，甚至連require都沒有采用，也就是說require仍然只是node的一個私有的全局方法，module.exports也只是node私有的一個全局變量屬性，跟標準半毛錢關系都沒有。

export導出模塊接口

export的用法挺復雜的，具體有哪些可以看這里。這里舉幾個例子：

// a.js
export default function() {}
export function a () {}var b = 'xxx';
export {b}; // 這是ES6的寫法，實際上就是{b:b}
setTimeout(() => b = 'ooo', 1000);
export var c = 100;

在要導出的接口前面，加入export指令。

在export之后，b還可以被修改，這和CommonJS有著巨大不同，關于內部機理的東西，本文就無恥的省略了。

注意，下面的語法有嚴重錯誤：

// 錯誤演示
export 1; // 絕對不可以
var a = 100;
export a;

export在導出接口的時候，必須與模塊內部的變量具有一一對應的關系。直接導出1沒有任何意義，也不可能在import的時候有一個變量與之對應。export a雖然看上去成立，但是a的值是一個數字，根本無法完成解構，因此必須寫成export {a}的形式。即使a被賦值為一個function，也是不允許的。而且，大部分風格都建議，模塊中最好在末尾用一個export導出所有的接口，例如：

export {fun as default,a,b,c};

import導入模塊

import的語法跟require不同，而且import必須放在文件的最開始，且前面不允許有其他邏輯代碼，這和其他所有編程語言風格一致。

import的使用和export一樣，也挺復雜，可以在這里大致了解。舉幾個例子：

import $ from 'jquery';
import * as _ from '_';
import {a,b,c} from './a';
import {default as alias, a as a_a, b, c} from './a';

這里有一些坑，暫時不透露，下面會講到。

import后面跟上花括號的形式是最基本的用法，花括號里面的變量與export后面的變量一一對應。這里，你必須了解對象的解構賦值的知識，沒這知識，你根本沒法在這里裝逼。了解了解構賦值，這里的“一一對應”的關系就能具體理解了。

as關鍵字

編程的同學對as都容易理解，簡單的說就是取一個別名。export中可以用，import中其實可以用：

// a.js
var a = function() {};
export {a as fun};// b.js
import {fun as a} from './a';
a();

上面這段代碼，export的時候，對外提供的接口是fun，它是a.js內部a這個函數的別名，但是在模塊外面，認不到a，只能認到fun。

import中的as就很簡單，就是你在使用模塊里面的方法的時候，給這個方法取一個別名，好在當前的文件里面使用。之所以是這樣，是因為有的時候不同的兩個模塊可能通過相同的接口，比如有一個c.js也通過了fun這個接口：

// c.js
export function fun() {};

如果在b.js中同時使用a和c這兩個模塊，就必須想辦法解決接口重名的問題，as就解決了。

default關鍵字

其他人寫教程什么的，都把default放到export那個部分，我覺得不利于理解。在export的時候，可能會用到default，說白了，它其實是別名的語法糖：

// d.js
export default function() {}// 等效于：
function a() {};
export {a as default};

在import的時候，可以這樣用：

import a from './d';// 等效于，或者說就是下面這種寫法的簡寫，是同一個意思
import {default as a} from './d';

這個語法糖的好處就是import的時候，可以省去花括號{}。簡單的說，如果import的時候，你發現某個變量沒有花括號括起來（沒有*號），那么你在腦海中應該把它還原成有花括號的as語法。

所以，下面這種寫法你也應該理解了吧：

import $,{each,map} from 'jquery';

import后面第一個$是{defalut as $}的替代寫法。

*符號

*就是代表所有，只用在import中，我們看下兩個例子：

import * as _ from '_';

在意義上和import _ from '_';是不同的，雖然實際上后面的使用方法是一樣的。它表示的是把'_'模塊中的所有接口掛載到_這個對象上，所以可以用_.each調用某個接口。

另外還可以通過*號直接繼承某一個模塊的接口：

export * from '_';// 等效于：
import * as all from '_';
export all;

*符號盡可能少用，它實際上是使用所有export的接口，但是很有可能你的當前模塊并不會用到所有接口，可能僅僅是一個，所以最好的建議是使用花括號，用一個加一個。

該用require還是import？

require的使用非常簡單，它相當于module.exports的傳送門，module.exports后面的內容是什么，require的結果就是什么，對象、數字、字符串、函數……再把require的結果賦值給某個變量，相當于把require和module.exports進行平行空間的位置重疊。

而且require理論上可以運用在代碼的任何地方，甚至不需要賦值給某個變量之后再使用，比如：

require('./a')(); // a模塊是一個函數，立即執行a模塊函數
var data = require('./a').data; // a模塊導出的是一個對象
var a = require('./a')[0]; // a模塊導出的是一個數組

你在使用時，完全可以忽略模塊化這個概念來使用require，僅僅把它當做一個node內置的全局函數，它的參數甚至可以是表達式：

require(process.cwd() + '/a');

但是import則不同，它是編譯時的（require是運行時的），它必須放在文件開頭，而且使用格式也是確定的，不容置疑。它不會將整個模塊運行后賦值給某個變量，而是只選擇import的接口進行編譯，這樣在性能上比require好很多。

從理解上，require是賦值過程，import是解構過程，當然，require也可以將結果解構賦值給一組變量，但是import在遇到default時，和require則完全不同：var $ = require('jquery');和import $ from 'jquery'是完全不同的兩種概念。

上面完全沒有回答“改用require還是import？”這個問題，因為這個問題就目前而言，根本沒法回答，因為目前所有的引擎都還沒有實現import，我們在node中使用babel支持ES6，也僅僅是將ES6轉碼為ES5再執行，import語法會被轉碼為require。這也是為什么在模塊導出時使用module.exports，在引入模塊時使用import仍然起效，因為本質上，import會被轉碼為require去執行。

但是，我們要知道這樣一個道理，ES7很快也會發布，js引擎們會盡快實現ES6標準的規定，如果一個引擎連標準都實現不了，就會被淘汰，ES6是遲早的事。如果你現在仍然在代碼中部署require，那么等到ES6被引擎支持時，你必須升級你的代碼，而如果現在開始部署import，那么未來可能只需要做很少的改動。

轉載于:https://www.cnblogs.com/zhongchao666/p/9463020.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/388843.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/388843.shtml
英文地址，請注明出處：http://en.pswp.cn/news/388843.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

工程師、產品經理、數據工程師是如何一起工作的？

工程師、產品經理、數據工程師是如何一起工作的？

做為一名工程師&#xff0c;免不了與產品經理打交道&#xff0c;如果公司大一些&#xff0c;數據量多一些&#xff0c;還會有數據工程師這個角色。今天會和你主要聊一聊在工作中&#xff0c;產品經理和數據工程師在哪些方面對我們工程師的幫助最大&#xff0c;以及我從他們身上…
閱讀更多...
linux-buff/cache過大導致內存不足-程序異常

linux-buff/cache過大導致內存不足-程序異常

2019獨角獸企業重金招聘Python工程師標準>>> 問題描述 Linux內存使用量超過閾值&#xff0c;使得Java應用程序無可用內存&#xff0c;最終導致程序崩潰。即使在程序沒有掛掉時把程序停掉&#xff0c;系統內存也不會被釋放。 找原因的過程 這個問題已經困擾我好幾個月…
閱讀更多...
Android 適配（一）

Android 適配（一）

一、Android適配基礎參數1.常見分辨率&#xff08;px&#xff09;oppx 2340x1080oppR15 2280x1080oppor11sp 2160*10801080*1920 (主流屏幕16&#xff1a;9)1080*216018:9 手機主流分辨率&#xff1a; 1080*2160高端 16:9 手機主流分辨率&#xff1a; 1080P (1080*1920) 或 2K …
閱讀更多...
Source Insight 創建工程（linux-2.6.22.6內核源碼）

Source Insight 創建工程（linux-2.6.22.6內核源碼）

1. 軟件設置 安裝完Source Insight&#xff0c;需要對其進行設置添加對“.S”匯編文件的支持&#xff1a; 2. 新建linux-2.6.22.6工程 1&#xff09;選擇工程存放的路徑&#xff1a; 2&#xff09;下載linux-2.6.22.6內核源碼&#xff0c;并解壓。在Source Insight中 指定源碼的…
閱讀更多...
課時20：內嵌函數和閉包

課時20：內嵌函數和閉包

目錄&#xff1a; 一、global關鍵字 二、內嵌函數 三、閉包 四、課時20課后習題及答案 ******************** 一、global關鍵字 ******************** 全局變量的作用域是整個模塊&#xff08;整個代碼段&#xff09;&#xff0c;也就是代碼段內所有的函數內部都可以訪問到全局…
閱讀更多...
從零開始學產品第六篇：更強大的測試，自動化測試和性能測試

從零開始學產品第六篇：更強大的測試，自動化測試和性能測試

本篇為【從零開始學產品】系列課第1章第5節歡迎到公眾號菜單欄&#xff0c;獲取產品經理課程更多資料 “測試就是拿點鼠標在電腦上瞎點&#xff0c;或者是用手機隨便戳幾下么&#xff1f;” “不&#xff0c;是有計劃有意圖的測試&#xff0c;比如說&#xff0c;邊界測試&#…
閱讀更多...
Get 了濾鏡、動畫、AR 特效，速來炫出你的短視頻開發特技！

Get 了濾鏡、動畫、AR 特效，速來炫出你的短視頻開發特技！

在濾鏡美顏、搞怪特效、炫酷場景等各種新奇玩法驅動下&#xff0c;短視頻開始讓人上癮。 12 月 3 日&#xff0c;七牛云聯合八大短視頻特效平臺共同推出了中國短視頻開發者創意大賽&#xff08;China Short Video Contest&#xff09;&#xff0c;面向全國邀請廣大開發者&#…
閱讀更多...
匿名函數、冒泡排序，二分法， 遞歸

匿名函數、冒泡排序，二分法， 遞歸

匿名函數 lambda 匿名函數 格式 lambda 參數&#xff1a;返回值 函數名統一叫lambda&#xff0c;最多只能寫一行普通的正常的函數 def func(n):return n * n lambda匿名函數寫法 a lambda n : n**2 print(a(3)) 當有多個返回值時suiyi lambda x, y : (1, 2) # 筆試題 …
閱讀更多...
Redis源碼剖析

Redis源碼剖析

Redis源碼剖析和注釋&#xff08;一&#xff09;---鏈表結構 Redis源碼剖析和注釋&#xff08;二&#xff09;--- 簡單動態字符串 Redis源碼剖析和注釋&#xff08;三&#xff09;--- Redis 字典結構 Redis源碼剖析和注釋&#xff08;四&#xff09;--- 跳躍表(skiplist) Redis…
閱讀更多...
Android Activity生命周期

Android Activity生命周期

Android生命周期 Android的生命周期&#xff1a;onCreate() -> onStart() -> onResume() -> onPause() -> onStop() -> onDestroy() 如下圖所示&#xff1a; 1.當activity啟動時系統會先調用onCreate(),然后調用onStart(),最后調用**onResume()**方法&#xff0…
閱讀更多...
date數據存入mysql_Date對象存入mysql數據庫

date數據存入mysql_Date對象存入mysql數據庫

java.sql.Date,java.sql.Time和java.sql.Timestamp三個都是java.util.Date的子類(包裝類)。java.sql.Date是java.util.Date的子類&#xff0c;是一個包裝了毫秒值的瘦包裝器&#xff0c;允許 JDBC 將毫秒值標識為 SQL DATE 值。毫秒值表示自 1970 年 1 月 1 日 00:00:00 GMT 以…
閱讀更多...
盛嚴謹,嚴謹,再嚴謹。_評估員工調查的統計嚴謹性

盛嚴謹,嚴謹,再嚴謹。_評估員工調查的統計嚴謹性

盛嚴謹,嚴謹,再嚴謹。The human resources industry relies heavily on a wide range of assessments to support its functions. In fact, to ensure unbiased and fair hiring practices the US department of labor maintains a set of guidelines (Uniform Guidelines) to …
閱讀更多...
復權就是對股價和成交量進行權息修

復權就是對股價和成交量進行權息修

* 所謂復權就是對股價和成交量進行權息修復,按照股票的實際漲跌繪制股價走勢圖, * 并把成交量調整為相同的股本口徑。股票除權、除息之后&#xff0c;股價隨之產生了變化&#xff0c; * 但實際成本并沒有變化。 * 如&#xff1a;原來20元的股票&#xff0c;十送十之…
閱讀更多...
前端校驗和后端校驗

前端校驗和后端校驗

問&#xff1a;到底是前端校驗好還是后端校驗好呢&#xff1f; 答&#xff1a;后端校驗比前端校驗更安全&#xff0c;更可靠&#xff0c;前端校驗可以增加用戶體驗&#xff0c;一般來說&#xff0c;在前端校驗的東西在后端也必須校驗&#xff08;比如登陸用戶名、密碼&#xff…
閱讀更多...
[MySQL] INFORMATION_SCHEMA 數據庫包含所有表的字段

[MySQL] INFORMATION_SCHEMA 數據庫包含所有表的字段

sql注入后可以通過該數據庫獲取所有表的字段信息1. COLLATIONS表 提供有關每個字符集的排序規則的信息。 COLLATIONS表包含以下列&#xff1a;COLLATION_NAME 排序規則名稱。 CHARACTER_SET_NAME 與排序規則關聯的字符集的名稱。 ID 排序規則ID。 IS_DEFAULT 排序規則是否為其字…
閱讀更多...
開根號的筆算算法圖解_一個數的開根號怎么計算

開根號的筆算算法圖解_一個數的開根號怎么計算

一個數的開根號怎么計算2020-11-08 15:46:47文/鐘詩賀帶根號的式子可以直接進行開平方的運算。一些特殊的根號運算有;√2≈1.414、1/2-√3≈0.5-1.732≈-1.232、2√5≈22.236≈4.236、√7-√6≈2.646-2.449≈0.197。開平方的筆算方法1&#xff0e;將被開方數的整數部分從個位起…
閱讀更多...
arima 預測模型_預測未來：學習使用Arima模型進行預測

arima 預測模型_預測未來：學習使用Arima模型進行預測

arima 預測模型XTS對象 (XTS Objects) If you’re not using XTS objects to perform your forecasting in R, then you are likely missing out! The major benefits that we’ll explore throughout are that these objects are a lot easier to work with when it comes to …
閱讀更多...
net程序員的iPhone開發-MonoTouch

net程序員的iPhone開發-MonoTouch

net程序員的iPhone開發-MonoTouch iPhone軟件的Native開發除了使用Apple推薦的Objective-C Cocoa之外&#xff0c;也有其他的一些工具和SDK提供 基于WEB的形式的一些框架在下面這個文章介紹過 各種SmartPhone上的跨平臺開源框架的總結 http://www.cnblogs.com/2018/archive/20…
閱讀更多...
ASP防止SQL注入

ASP防止SQL注入

防止SQL注入http://0.0.0.0/bzhs/login.asp?logTypeedit;WAITFOR DELAY 0:0:5 --logType Replace(Replace(Replace(Replace(logType,"-",""),"",""),"&",""),";","")fcdm Replace(Rep…
閱讀更多...
protobuf java 生成_protobuf代碼生成

protobuf java 生成_protobuf代碼生成

windows :1,兩個文件&#xff1a;proto.exe, protobuf-java-2.4.1.jar2,建立一個工程TestPb&#xff0c;在下面建立一個proto文件件&#xff0c;用來存放【。proto】文件3&#xff0c;將proto,exe放在工程下&#xff0c;4&#xff0c;建立一個msg.proto文件&#xff1a;option …
閱讀更多...
最新文章

Copyright @ 2022~2023