99r6这里在线精品视频,天天干天天操心

122021-5

助力體驗設計的10個方向

文章來源：站酷作者：再次微笑_

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網(wǎng)站建設、平面設計服務

評論(0) 瀏覽(1759)

112021-5

SpringBoot + Spring Cloud +Vue 管理系統(tǒng)前端搭建（二、visual studio code開發(fā)前端項目）

前端達人

我們打開visual studio code , 選擇文件------------->將文件夾添加到工作區(qū)，導入我們的項目

安裝Element

導入后，我們安裝以下element

官網(wǎng)：https://element.eleme.cn/#/zh-CN/component/installation

安裝命令：npm add element-ui或者也可以用yarn

安裝完成后，我們在main.js中引入Element

import Vue from 'vue'

import App from './App'

import router from './router'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

/* eslint-disable no-new */

Vue.use(ElementUI)

new Vue({

el: '#app',

router,

components: { App },

})

頁面路由

我們把components改名為views,并在目錄下添加3個頁面：Login.vue、Home.vue、404.vue。

頁面內(nèi)容類似：

<h2>Login Page</h2>

</div>

</template>

export default {

}

</script>

配置路由

打開router/index.js,添加3個路由分別對應主頁、登錄、404頁面

import Vue from 'vue'

import Router from 'vue-router'

import Login from '@/views/Login'

import Home from '@/views/Home'

import NotFound from '@/views/404'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

component: Home

}, {

path: '/login',

component: Login

}, {

path: '/404',

component: NotFound

}

]

})

配置完后啟動項目，在瀏覽器訪問測試

http://localhost:8080/#/

http://localhost:8080/#/login

http://localhost:8080/#/404

說明我們的配置已經(jīng)生效了

安裝scss

安裝依賴：

npm uninstall sass-loader //卸載當前版本） 
npm install sass-loader@7.3.1 --save-dev //卸了重新安裝了一個低版本
npm install node-sass@4.14.1 --save-dev //安裝node-sass

安裝的時候注意對應版本，版本不對應，啟動會報錯

安裝后修改404頁面

<p class="not-found-desc">抱歉！您訪問的頁面<em>失聯(lián)</em>啦 ...</p>

<el-button @click="$router.go(-1)">返回上一頁</el-button>

<el-button type="primary" class="not-found-btn-gohome" @click="$router.push('/')">進入首頁</el-button>

</div>

</template>

export default {

}

</script>

.site-wrapper.site-page--not-found {

position: absolute;

top: 60px;

right: 0;

bottom: 0;

left: 0;

overflow: hidden;

.site-content__wrapper {

padding: 0;

margin: 0;

background-color: #fff;

}

.site-content {

position: fixed;

top: 15%;

left: 50%;

z-index: 2;

padding: 30px;

text-align: center;

transform: translate(-50%, 0);

}

.not-found-title {

margin: 20px 0 15px;

font-size: 8em;

font-weight: 500;

color: rgb(55, 71, 79);

}

.not-found-desc {

margin: 0 0 30px;

font-size: 26px;

text-transform: uppercase;

color: rgb(118, 131, 143);

> em {

font-style: normal;

color: #ee8145;

}

.not-found-btn-gohome {

margin-left: 30px;

}

</style>

再瀏覽器訪問http://localhost:8080/#/404

可以看到樣式改變了

安裝axios

命令：npm install axios

安裝完成后修改Home頁面，進行一個簡單的測試

<el-button type="primary" @click="testAxios()">測試Axios調(diào)用</el-button>

</div>

</template>

import axios from 'axios'

import mock from '@/mock/mock.js'

export default {

methods: {

testAxios() {

axios.get('http://localhost:8080').then(res => { alert(res.data) })

}

</script>

可以看到我們的請求已經(jīng)成功了

安裝Mock.js

為了模擬后臺接口提供頁面需要的數(shù)據(jù)，引入mock.js

安裝依賴：npm install mockjs -dev

安裝完成，在src新建一個mock目錄，創(chuàng)建mock.js，在里面模擬兩個接口，分別攔截用戶和菜單的請求并返回相應數(shù)據(jù)。

import Mock from 'mockjs'

Mock.mock('http://localhost:8080/user', {

'name': '@name', // 隨機生成姓名

'name': '@email', // 隨機生成郵箱

'age|1-12': 7, // 年齡1-12之間

})

Mock.mock('http://localhost:8080/menu', {

'id': '@increment', // id自增

'name': 'menu', // 名稱為menu

'order|1-10': 6, // 排序1-10之間

})

修改Home.vue,在頁面添加兩個按鈕，分別觸發(fā)用戶和菜單請求。成功后彈出返回結(jié)果

注意：要在頁面引入mock import mock from '@/mock/mock.js'

Home.vue

<template>
<div class="page">
<h2>Home Page</h2>
<el-button type="primary" @click="testAxios()">測試Axios調(diào)用</el-button>
<el-button type="primary" @click="getUser()">獲取用戶信息</el-button>
<el-button type="primary" @click="getMenu()">獲取菜單信息</el-button>
</div>
</template>

訪問http://localhost:8080/#/

點擊獲取用戶信息

點擊獲取菜單信息

可以看到我們已經(jīng)得到響應數(shù)據(jù)，這樣mock就集成進來了

看完記得點贊哦

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網(wǎng)站建設、平面設計服務


    
        


    
    
        文章來源：網(wǎng)絡某處。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

評論(0) 瀏覽(1833)

112021-5

PM2托管工具使用詳解

前端達人

參考 pm2從入門到精通
服務器上的項目需要保持穩(wěn)定，即使發(fā)生故障項目也要自動重啟以提供服務，這時需要托管工具對我們的項目進行托管。PM2正是這樣一款工具，可以利用它來簡化很多node應用管理的繁瑣任務，如性能監(jiān)控、自動重啟、負載均衡等，而且使用非常簡單。

安裝pm2

$ npm install -g pm2 


    
        1

啟動應用

$ pm2 start app.js  (--watch)  # 加上watch參數(shù)后可以實時修改代碼 


    
        1

管理進程

$ pm2 list 


    
        1

停止應用

$ pm2 stop <app name> 


    
        1

重啟應用

$ pm2 restart <app name> 


    
        1

刪除應用

$ pm2 delete <app name> 


    
        1

顯示某個應用程序的日志

$ pm2 logs <app name> 


    
        1

顯示所有應用程序的日志

$ pm2 logs

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網(wǎng)站建設、平面設計服務


    
        


    
    
        文章來源：網(wǎng)絡某處。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

評論(0) 瀏覽(2267)

112021-5