0. 服務架構
k8snode01 192.168.89.133 開發平臺
k8snode02 192.168.89.134 代碼存放地 製品庫
k8smaster 192.168.89.132 線上平臺 [URI: http://www.項目名.com,本地hosts文件可以解析一下]
1. VUE項目搭建流程:
1. 安裝node.js
2. 安裝npm , 使用npm 安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
3. 安裝 vue-cli
cnpm install -g vue-cli
4. 初始化項目
vue init webpack todolist
5. 安裝相應的npm依賴
cnpm install
6. 修改項目監聽地址
vim config/index.js
host: '192.168.89.133'
port: 80
7. 運行項目
npm run dev
Your application is running here: http://192.168.89.133:80
佔用當前終端
2. VUE項目部署升級
vim /usr/local/bin/makeup
#!/bin/bash
#/usr/local/bin/makeup
read -p 'service name:' servername
if [ ! -d /backup/${servername} ];then
mkdir /backup/${servername}
fi
cd /opt/vue-pros/${servername}/
cnpm run build
mv dist ${servername}
zip -r ${servername}.zip ${servername}
# 上傳到製品庫
ssh k8snode02 ls /backup/${servername} &> /dev/null
if [ $? -ne 0 ] ; then
ssh k8snode02 mkdir -p /backup/${servername}
fi
scp ${servername}.zip k8snode02:/backup/${servername}/${servername}-`date +%Y%m%d-%H%M%S`.zip
# 部署到服務器
scp ${servername}.zip k8smaster:/usr/local/nginx/html/
ssh k8smaster mv /usr/local/nginx/html/${servername} /tmp/${servername}-`date +%Y%m%d-%H%M%S`
ssh k8smaster unzip /usr/local/nginx/html/${servername}.zip -d /usr/local/nginx/html
ssh k8smaster rm -f /usr/local/nginx/html/${servername}.zip
rm -rf ${servername} ${servername}.zip
echo ${servername}"update finished"
chmod +x /usr/local/bin/makeup
3. VUE中引入bootstrap,jquery
安裝依賴包
cnpm install jquery --save-dev
cnpm install popper.js --save-dev
cnpm install bootstrap --save-dev
vim main.js
import 'bootstrap'
import './assets/css/bootstrap.min.css'
import './assets/css/bootstrap-reset.css'
import './assets/css/assets/font-awesome/css/font-awesome.css'
引入相關js,css文件
4. 配置路由
https://segmentfault.com/a/1190000014441507?utm_source=tag-newest
vim router/index.js
... ...
const router = new Router({
routes: [
{ path: '/login', name: 'Login', component: Login },
{ path: '/hello', name: 'Hello', component: Hello },
{ path: '/404', name: 'page404', component: Page404 },
{
path: '/',
redirect: '/Login',
component: Login
},
{ path: '/base', name: 'Base', component: Base,
children: [
{ path: 'filebeat',name: 'Filebeat',component: Filebeat },
{ path: 'baseline',name:"Baseline", component: Baseline },
{ path: 'deploy',name: 'Deploy', component: Deploy }
]
},
{
path: '*',
redirect: '/404',
name: 'Page404',
component: Page404
},
]
})
export default router
5. 解決地址欄出現#問題
1). vim index.html
... ...
const router = new Router({
mode: 'history',
... ...
2). 修改nginx代理
k8smaster[服務所在機器,在location下添加try_files]
vim /usr/local/nginx/conf/conf.d/todolist.cnf
server {
listen 80;
server_name www.todolist.com;
location / {
try_files $uri $uri/ /index.html;
root /usr/local/nginx/html/todolist;
index index.html index.htm;
}
}
6. Vue+django實現登錄問題
1). 安裝axios
cnpm install axio
2). 修改main.js, 設置默認header
... ...
import {setCookie,getCookie} from './assets/js/cookie'
import axios from 'axios'
Vue.prototype.$axios = axios;
axios.defaults.headers.post["X-CSRFToken"] = getCookie("csrftoken");
... ...
3). 編寫cookie.js
vim assets/js/cookie.js
// 用export把方法暴露出來
// 設置cookie
export function setCookie(key,value) {
var exdate = new Date(); //獲取時間
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000);
window.document.cookie = key + "=" + value + ";path=/;expires=" + exdate.toGMTString();
}
// 讀取cookie
export function getCookie(param) {
var c_param = '';
if (document.cookie.length > 0){
var arr = document.cookie.split('; '); //這裏顯示的格式需要切割一下自己可輸出看下
for( var i=0;i<arr.length;i++){
var arr2 = arr[i].split('=');
if (arr2[0] === param){
c_param = arr2[1];
}
}
return c_param;
}
}
// 刪除cookie
export function delCookie(key) {
var exdate = new Date(); //獲取時間
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000);
window.document.cookie = key + "=" + '' + ";path=/;expires=" + exdate.toGMTString();
}
4). 修改 config/index.js , 給後端請求加前綴,以作區分
proxyTable: {
'/api': {
target: 'http://192.168.89.133:80',
changeOrigin: true,
pathRewrite: {
'^/api': '' // http://192.168.89.133:80/user/add 可以寫成 '/api/user/add'
}
}
},
5). Login.vue頁面配置
a. 設置需要參數
... ...
data = {
username: '',
userpass: '',
csrfmiddlewaretoken: '',
};
... ...
b. 獲得csrfmiddlewaretoken
mounted () {
var vm = this;
vm.$axios({
method: 'get',
baseURL: '/api',
url:'/accounts/login/', // django默認登錄頁面
})
.then(function(response){
const regex = /csrfmiddlewaretoken' value='(.*)'/gm;
var arr, reg = new RegExp("csrfmiddlewaretoken' value='(.*)'");
if (arr === response.data.match(reg))
vm.form.csrfmiddlewaretoken = unescape(arr[1])
else
console.log('not found crsf value')
})
},
c. 提交登錄信息
login () {
if( this.username === '' || this.userpass === ''){
alert('用戶名或密碼不能爲空')
}else {
var vm = this;
this.$axios({
method: 'post',
baseURL: '/api',
url: '/accounts/login/?next=/api/public/getuserinfo',
data: vm.data,
headers: {
'Content-Type': 'application/x-www-form-urlencoded' //django 登錄默認是form表單,需要添加
},
transformRequest: [ // django 登錄默認是form表單,axios默認是json格式,說以發送數據要通過transformRequest轉換爲form格式
function (data) {
let ret = '';
for(let it in data){
ret += encodeURIComponent(it)+ '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}
]
}).then(function (response) {
if(response.data.code === 0){
setCookie('username',this.username);
window.location='/base';
}else {
vm.$message.error('Login failed!!');
}
});
}
}
6. 簡單路由校驗配置
vim route/index.js
router.beforeEach(function (to, from , next) {
console.log('to',to.name);
function IsLogin() {
console.log('login check....');
if (getCookie('username') !== undefined){
return true
}else {
return false
}
}
if(IsLogin()){
console.log('login true');
if(to.name === 'login'){
next()
}else {
next()
}
}else{
console.log('login false');
if(to.name === 'login'){
router.push({name: 'login'})
}
}
});
雲計算之VUE開發【上】
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.