<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

首頁

202023-2

【vue2】對路由的理解

藍藍設計的小編

目錄

一、vue路由概念

二、路由基礎

總結手動自動配置區別：

三、路由重定向與二級路

1.路由重定向

四、路由跳轉傳參

1.聲明式導航：

2.編程式導航

一、vue路由概念

1.概念：

確保我們在vue中實現頁面跳轉到我們所想的頁面

2.初體驗：

可以看到當我們點擊不同的組件的時候我們實現了路由的功能：在vue中實現頁面的跳轉

注意看，當我點擊的時候上面地址欄中加載了不同的網頁。下面我們來學習下路由的寫法

二、路由基礎

1.路由模式

路由兩種模式

路由書寫寫法：

在index.js中的router對象中書寫




    

        

            

            

        

        

            
                const router = new VueRouter({
            

        

    

    

        

            

            

        

        

            
                mode: 'history',//默認是hash模式
            

        

    

    

        

            

            

        

        

            
                })

hash模式：

路由例如: http://localhost:8080/#/home

history模式：

路由例如: http://localhost:8080/home

兩種模式的區別：

外觀：hash的url有個#符號，history沒有，history外觀更好看。
刷新：hash刷新會加載到地址欄對應的頁面，history刷新瀏覽器會重新發起請求，如果服務端沒有匹配當前的url，就會出現404頁面。
history模式以后上線需要服務器端支持, 否則找的是文件夾

2.路由寫法

起步 | Vue RouterVue Router3官網介紹：起步 | Vue Router

①手動配置（較少使用）

下載與導入vue-router

導入組件

創建routes路由規則（路徑和頁面一一對應）

創建路由對象

把路由對象掛載到App.vue

在頁面寫路由導航router-link （生成a標簽）

在頁面寫路由出口router-view (生成占位盒子，用于顯示頁面內容)

下面開始我們相關文件的創建

1.創建我們的腳手架(此時沒有選擇Router)：

2.準備我們的App.vue文件：




    

        

            

            

        

        

            
                <template>
            

        

    

    

        

            

            

        

        

            
                <div>
            

        

    

    

        

            

            

        

        

            
                <!-- 頂部導航欄 -->
            

        

    

    

        

            

            

        

        

            
                <div class="footer_wrap">
            

        

    

    

        

            

            

        

        

            
                <a href="#/find">發現音樂</a>
            

        

    

    

        

            

            

        

        

            
                <a href="#/my">我的音樂</a>
            

        

    

    

        

            

            

        

        

            
                <a href="#/friend">朋友</a>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                <!-- 下面內容 -->
            

        

    

    

        

            

            

        

        

            
                <div class="top"></div>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                </template>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                export default {
            

        

    

    

        

            

            

        

        

            
                methods: {}
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <style scoped>
            

        

    

    

        

            

            

        

        

            
                body,
            

        

    

    

        

            

            

        

        

            
                html {
            

        

    

    

        

            

            

        

        

            
                margin: 0;
            

        

    

    

        

            

            

        

        

            
                padding: 0;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .footer_wrap {
            

        

    

    

        

            

            

        

        

            
                position: fixed;
            

        

    

    

        

            

            

        

        

            
                left: 0;
            

        

    

    

        

            

            

        

        

            
                top: 0;
            

        

    

    

        

            

            

        

        

            
                display: flex;
            

        

    

    

        

            

            

        

        

            
                width: 100%;
            

        

    

    

        

            

            

        

        

            
                text-align: center;
            

        

    

    

        

            

            

        

        

            
                background-color: #333;
            

        

    

    

        

            

            

        

        

            
                color: #ccc;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .footer_wrap a,
            

        

    

    

        

            

            

        

        

            
                span {
            

        

    

    

        

            

            

        

        

            
                cursor: pointer;
            

        

    

    

        

            

            

        

        

            
                flex: 1;
            

        

    

    

        

            

            

        

        

            
                text-decoration: none;
            

        

    

    

        

            

            

        

        

            
                padding: 20px 0;
            

        

    

    

        

            

            

        

        

            
                line-height: 20px;
            

        

    

    

        

            

            

        

        

            
                background-color: #333;
            

        

    

    

        

            

            

        

        

            
                color: #ccc;
            

        

    

    

        

            

            

        

        

            
                border: 1px solid black;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .footer_wrap a:hover,
            

        

    

    

        

            

            

        

        

            
                span:hover {
            

        

    

    

        

            

            

        

        

            
                background-color: #555;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                .top {
            

        

    

    

        

            

            

        

        

            
                padding-top: 62px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                .footer_wrap .router-link-active {
            

        

    

    

        

            

            

        

        

            
                background-color: #000;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </style>

3.在src下面新建views文件夾并創建我們需要的.vue文件

3.1 find.vue




    

        

            

            

        

        

            
                <template>
            

        

    

    

        

            

            

        

        

            
                <div>
            

        

    

    

        

            

            

        

        

            
                <div class="nav_main">
            

        

    

    

        

            

            

        

        

            
                <router-link to="/Ranking">排行</router-link>
            

        

    

    

        

            

            

        

        

            
                <router-link to="/Recommend">推薦</router-link>
            

        

    

    

        

            

            

        

        

            
                <router-link to="/SongList">歌單</router-link>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <div style="1px solid red;">
            

        

    

    

        

            

            

        

        

            
                <router-view></router-view>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                </template>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                export default {
            

        

    

    

        

            

            

        

        

            
                name: 'find',
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <style scoped>
            

        

    

    

        

            

            

        

        

            
                .nav_main {
            

        

    

    

        

            

            

        

        

            
                background-color: red;
            

        

    

    

        

            

            

        

        

            
                color: white;
            

        

    

    

        

            

            

        

        

            
                padding: 10px 0;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .nav_main a {
            

        

    

    

        

            

            

        

        

            
                text-align: center;
            

        

    

    

        

            

            

        

        

            
                text-decoration: none;
            

        

    

    

        

            

            

        

        

            
                color: white;
            

        

    

    

        

            

            

        

        

            
                font-size: 12px;
            

        

    

    

        

            

            

        

        

            
                margin: 7px 17px 0;
            

        

    

    

        

            

            

        

        

            
                padding: 0px 15px 2px 15px;
            

        

    

    

        

            

            

        

        

            
                height: 20px;
            

        

    

    

        

            

            

        

        

            
                display: inline-block;
            

        

    

    

        

            

            

        

        

            
                line-height: 20px;
            

        

    

    

        

            

            

        

        

            
                border-radius: 20px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .nav_main a:hover {
            

        

    

    

        

            

            

        

        

            
                background-color: brown;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .nav_main .router-link-active{
            

        

    

    

        

            

            

        

        

            
                background-color: brown;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </style>

3.2 my.vue




    

        

            

            

        

        

            
                <template>
            

        

    

    

        

            

            

        

        

            
                <div>
            

        

    

    

        

            

            

        

        

            
                <img src="../assets/my.png" alt="" width="100%">
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                </template>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                export default {
            

        

    

    

        

            

            

        

        

            
                name: 'my',
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <style scoped>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </style>

3.3 friend.vue




    

        

            

            

        

        

            
                <template>
            

        

    

    

        

            

            

        

        

            
                <div>
            

        

    

    

        

            

            

        

        

            
                <ul>
            

        

    

    

        

            

            

        

        

            
                <li>這是當前頁面 query 接收到的參數:
            

        

    

    

        

            

            

        

        

            
                <span>姓名：{{ $route.query.name }}</span> --
            

        

    

    

        

            

            

        

        

            
                <span>年齡：{{$route.query.age}}</span> 
            

        

    

    

        

            

            

        

        

            
                </li>
            

        

    

    

        

            

            

        

        

            
                <li>這是當前頁面 params 接收到的參數:
            

        

    

    

        

            

            

        

        

            
                <!-- <span>姓名：{{ $route.params.name }}</span> -- 
            

        

    

    

        

            

            

        

        

            
                 <span>年齡：{{ $route.params.age }}</span>   -->
            

        

    

    

        

            

            

        

        

            
                </li>
            

        

    

    

        

            

            

        

        

            
                </ul>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                </template>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                export default {
            

        

    

    

        

            

            

        

        

            
                name: 'friend',
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <style scoped>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </style>

3.4 notfound.vue




    

        

            

            

        

        

            
                <template>
            

        

    

    

        

            

            

        

        

            
                <div class="box">
            

        

    

    

        

            

            

        

        

            
                <h1>這是一個 404 頁面</h1>
            

        

    

    

        

            

            

        

        

            
                <img src="../assets/404.png" alt="">
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                </template>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                export default {
            

        

    

    

        

            

            

        

        

            
                name: 'notfound',
            

        

    

    

        

            

            

        

        

            
                data() {
            

        

    

    

        

            

            

        

        

            
                return {
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <style scoped>
            

        

    

    

        

            

            

        

        

            
                .box {
            

        

    

    

        

            

            

        

        

            
                display: flex;
            

        

    

    

        

            

            

        

        

            
                flex-direction: column;
            

        

    

    

        

            

            

        

        

            
                justify-content: center;
            

        

    

    

        

            

            

        

        

            
                align-items: center;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </style>

4.準備圖片素材（所有素材可私信博主獲?。?

5.所有準備工作做完現在開始我們的文件配置

1.下載與導入vue-router

npm i vue-router@3.6.5
導入vue-router (在main.js中)




    

        

            

            

        

        

            
                //main.js中導入
            

        

    

    

        

            

            

        

        

            
                // 0.導入路由
            

        

    

    

        

            

            

        

        

            
                import VueRouter from 'vue-router'
            

        

    

    

        

            

            

        

        

            
                // 使用vue的插件，都需要調用Vue.use()
            

        

    

    

        

            

            

        

        

            
                Vue.use(VueRouter)

2.導入組件

@符號代表 /src 文件夾的絕對路徑，在腳手架中文件比較多的時候，使用這個@符號會更加的方便

在main.js中導入




    

        

            

            

        

        

            
                // 導入組件
            

        

    

    

        

            

            

        

        

            
                import find from '@/views/find.vue'
            

        

    

    

        

            

            

        

        

            
                import friend from '@/views/friend.vue'
            

        

    

    

        

            

            

        

        

            
                import my from '@/views/my.vue'
            

        

    

    

        

            

            

        

        

            
                import notfound from '@/views/notfound.vue'

3.創建路由規則

路由規則作用：設置 url 和組件對應的規則

在main.js中寫入




    

        

            

            

        

        

            
                // 路由規則
            

        

    

    

        

            

            

        

        

            
                const routes = [
            

        

    

    

        

            

            

        

        

            
                { path: '/find', component: find },
            

        

    

    

        

            

            

        

        

            
                { path: '/friend', name: 'friend', component: friend },
            

        

    

    

        

            

            

        

        

            
                { path: '/my', component: my },
            

        

    

    

        

            

            

        

        

            
                { path: '/notfound', component: notfound },
            

        

    

    

        

            

            

        

        

            
                ]

4.創建路由對象

路由對象：幫你管理這些路由規則

在main.js中寫入




    

        

            

            

        

        

            
                // 創建路由對象
            

        

    

    

        

            

            

        

        

            
                const router = new VueRouter({
            

        

    

    

        

            

            

        

        

            
                routes// (縮寫) 相當于 routes: routes
            

        

    

    

        

            

            

        

        

            
                })

5.掛載路由到根組件

掛載到根組件作用：讓你的整個應用都有路由功能

在main.js中寫入




    

        

            

            

        

        

            
                // 掛載路由到根組件
            

        

    

    

        

            

            

        

        

            
                new Vue({
            

        

    

    

        

            

            

        

        

            
                router,
            

        

    

    

        

            

            

        

        

            
                render: h => h(App)
            

        

    

    

        

            

            

        

        

            
                }).$mount('#app')

6.在頁面寫路由導航router-link

作用與a標簽一樣實現跳轉，好處：當點擊鏈接的時候自帶一個專屬類名

在App.vue中我們將傳統的a標簽進行替換：

替換a標簽原因：便于我們做專屬效果

我們選中點擊的超鏈接做觸發效果：

7在頁面寫路由出口router-view

占位盒子，用于渲染路由匹配到的組件

（<router-view> : 是vue內置的一個組件,會自動替換成路由匹配的組件）

好了一個最最最基本的路由就被我們制作完成啦！下面我們來看看效果：

上述的操作有些許麻煩，下面我們來使用我們開發中常用的自動配置方法

②自動配置（推薦使用）

創建腳手架方式與手動配置類似，唯一不同是此處必須選擇Router

對比手動模式：

此刻：腳手架已經幫我們創建好了Router路由不需要我們下載與導入vue-router了

只需要寫：

導入組件

配置路由規則

路由導航

路由出口

并且為了進一步的封裝我們的配置信息，我們的配置代碼將寫在router/index.js下，不再是全部寫在main.js下。

1.導入組件（index.js中）




    

        

            

            

        

        

            
                import find from '@/views/find.vue'
            

        

    

    

        

            

            

        

        

            
                import friend from '@/views/friend.vue'
            

        

    

    

        

            

            

        

        

            
                import my from '@/views/my.vue'
            

        

    

    

        

            

            

        

        

            
                import notfound from '@/views/notfound.vue'

2.配置路由規則（index.js中）




    

        

            

            

        

        

            
                { path: '/find', component: find },
            

        

    

    

        

            

            

        

        

            
                { path: '/friend', name: 'friend', component: friend },
            

        

    

    

        

            

            

        

        

            
                { path: '/my', component: my },
            

        

    

    

        

            

            

        

        

            
                { path: '/notfound', component: notfound }

3.路由導航（直接cv我們之前的App.vue文件）




    

        

            

            

        

        

            
                      <router-link to="/find">發現音樂</router-link>
            

        

    

    

        

            

            

        

        

            
                      <router-link to="/my">我的音樂</router-link>
            

        

    

    

        

            

            

        

        

            
                      <router-link to="/friend">朋友</router-link>

4.路由出口（App.vue中）




    

        

            

            

        

        

            
                <div class="top">
            

        

    

    

        

            

            

        

        

            
                <router-view></router-view>
            

        

    

    

        

            

            

        

        

            
                </div>

效果查看：

總結手動自動配置區別：

自動配置省去了一些固定不變的操作，我們不需要寫繁瑣且固定的代碼，只需要寫不同的代碼。且代碼書寫的位置都給我們設置好了，我們直接遵守該規范書寫代碼即可

三、路由重定向與二級路由

1.路由重定向

路由重定向官方文檔：重定向和別名 | Vue Router

重定向應用場景：頁面輸入根路徑/ , 自動跳轉到首頁

注意點 : 重定向只是修改路徑，還需要單獨去設置路由匹配規則

重定向命令：




    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                path: '/',
            

        

    

    

        

            

            

        

        

            
                /* 
            

        

    

    

        

            

            

        

        

            
                 (1)重定向只是修改頁面路徑。  輸入 / 會重定向到 /路徑
            

        

    

    

        

            

            

        

        

            
                 (2)只有component才會讓vue去尋找路由匹配頁面。所以設置了重定向，還需要單獨設置匹配規則
            

        

    

    

        

            

            

        

        

            
                 */
            

        

    

    

        

            

            

        

        

            
                redirect: "路徑"
            

        

    

    

        

            

            

        

        

            
                },

1. 就拿我們剛才創建的舉例：

實現效果：當我在瀏覽器中打開的時候我沒有輸入任何路徑，vue自動幫我們跳轉到了 my.vue這個頁面組件

2.也可以利用重定向來設置當我們路徑錯誤提示404頁面：

實現效果：當我任意輸入沒有匹配的路徑，自動幫我們跳轉到了notfound.vue這個組件

2.二級路由

實現頁面中存在第二級的跳轉

寫法(拿我們上述的案例實操，需要素材可私信博主喔)：

①在index.js中引入




    

        

            

            

        

        

            
                // 導入二級路由
            

        

    

    

        

            

            

        

        

            
                import Ranking from '@/views/second/Ranking.vue'
            

        

    

    

        

            

            

        

        

            
                import Recommend from '@/views/second/Recommend.vue'
            

        

    

    

        

            

            

        

        

            
                import SongList from '@/views/second/SongList.vue'

②在需要引用的組件中使用：




    

        

            

            

        

        

            
                //格式：
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                path: '路徑', component: 組件名, children: [
            

        

    

    

        

            

            

        

        

            
                //此處填寫二級路由的路徑信息
            

        

    

    

        

            

            

        

        

            
                ]
            

        

    

    

        

            

            

        

        

            
                }




    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                path: '/find', component: find, children: [
            

        

    

    

        

            

            

        

        

            
                {path:'/',redirect:'/SongList'},
            

        

    

    

        

            

            

        

        

            
                { path: '/Ranking', component: Ranking },
            

        

    

    

        

            

            

        

        

            
                { path: '/Recommend', component: Recommend },
            

        

    

    

        

            

            

        

        

            
                { path: '/SongList', component: SongList }
            

        

    

    

        

            

            

        

        

            
                ]
            

        

    

    

        

            

            

        

        

            
                }

③寫路由導航與出口

查看效果：

可以看到：當我們點擊一級路由之后，我們還可以點擊二級路由到我們的專屬頁面中

四、路由跳轉傳參

有兩種跳轉傳參方式：

聲明式導航

編程式導航

1.聲明式導航：

①query寫法：

在路徑中加參數信息即可

<router-link to="/路徑?參數名=參數值&參數名=參數值</router-link>

接收信息：

在觸發的組件中書寫{{ $route.query.屬性名}}接收

舉個例子：

②params寫法：

在index.jsx文件中寫：參數名。在需要傳遞的路由路徑中寫參數值

接收信息：

在觸發的組件中書寫{{ $route.params.屬性名}}接收

實現效果：

2.編程式導航

①query寫法:

結構：




    

        

            

            

        

        

            
                this.$router.push({
            

        

    

    

        

            

            

        

        

            
                path: '/路徑',
            

        

    

    

        

            

            

        

        

            
                query: { 屬性名: '屬性值'}
            

        

    

    

        

            

            

        

        

            
                })

接收信息：

在觸發的組件中書寫{{ $route.query.屬性名}}接收

舉個例子：

②params寫法

結構:




    

        

            

            

        

        

            
                this.$router.push({
            

        

    

    

        

            

            

        

        

            
                name: '我們注冊路徑的組件名',//寫path獲取不到值！??！
            

        

    

    

        

            

            

        

        

            
                query: { 屬性名: '屬性值'}
            

        

    

    

        

            

            

        

        

            
                })

注意點:寫path獲取不到值，需要用name

接收信息：

在觸發的組件中書寫{{ $route.params.屬性名}}接收

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

評論(0) 瀏覽(1369)

172023-2

【前端】參考C站動態發紅包界面，高度還原布局和交互

目錄

1、界面效果

2、界面分析

2.1、整體結構

3、代碼實現

3.1、標題區域布局

3.2、表單區域

3.2.1、祝福語

3.2.2、紅包數量

3.2.3、紅包總金額

3.2.4、余額支付

3.3、確認按鈕區域

4、完整代碼

5、基礎知識點

1、界面效果

完成效果

C站發紅包界面

2、界面分析

2.1、整體結構

上部分為標題、中間為表單、底部為確定按鈕

2.2、標題

底部背景、標題文本、右上角關閉按鈕

2.3、表單

祝福語文本、紅包數量文本、紅包總金額、當前余額文本顯示、以及前往充值按鈕

2.4、按鈕

左邊為需支付金額顯示，右邊為取消和確定按鈕

3、代碼實現

3.1、標題區域布局

1）背景圖片

圖片寬度380px像素，高度56px像素

2）背景圖片自動填充

布局一個div，寬度為400px像素，高度為56px像素，然后再設置背景圖片樣式，由于圖片本身寬度小于div寬度，div會多出20px像素，圖片會自動填充，默認效果如下




    

        

            

            

        

        

            
                <div style="width:400px;height:56px;background:url(/1674461966454.jpg);background-size: 100%;">
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </div>

3）圖片百分比顯示

再給div設置背景百分比縮放顯示，效果如下

background-size: 100%;

4）文本

布局一個span標簽，顯示"添加紅包"文本，白色黑體，18號字體，加粗，左對齊，且左邊距20px像素。并設置div標簽56px像素垂直居中樣式，效果如下

5）關閉按鈕

在右上角添加一個關閉按鈕，一般可以設置一個svg標簽圖標，設置高28px，寬36px

base64編碼圖標

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAA4CAYAAABez76GAAAAAXNSR0IArs4c6QAAAtVJREFUeF7tm2FO3DAQhR+0BVZt2QIFujfrQXqMHqQ3W4kflRYJrZBArV6EUTa7jj0ee0yILUUIZcb2fJnMsx3tEYAfAI4x3/YPwDOARwAPAJ76KI4AfAdwMl8+e5ET0j0AggMBXQBYNEA7BJhNfwmJgL6+XI3RLgFm0oaAmD3Motb2CdwREOsP61Br+wQeCIgKRiVrbZ/AEwGxzV3qfcnRFWm2JvUeRA5Qk/oAoCb1AUBN6gOAmtQHADWpDwBqUh8BqEn9AUhO5nmrSX0AkLnULxaL7gFtt9vu7EXatP4x4/UzyFTqGdx6vf7NSa5Wq19SSFr/GDi06QMyk3oX3HK5/MlJbDabPxJIWv9YOENAZlI/DFACSeMrAeNs+xlkKvUpgab4pEDp+wwBmUq9JGCJrRbKGCBzqY8JPMYmJ5QxQOZSz8mMAeB9qp0r6JJ6lQPa8BUzlfp+AD5ItKkFZ6hi/N9M6g893UOQ+nbS5UCJDDKTet/kfZBqwDmUQaZSL8mitwToCsBpjvSU9jGFV4wxnQP4Ig1Oaz+VIt2prvWn6CnJPAGZFuqYRWCMjTaDff7DdZCzM9lySAKX2OaE5QPEGsRaVKylBJziow3AB4iv2e3gvEg71qu/JlCNb0oAPkDdCh/A55ROQz7aAy+tf2h+/ftjgD4CuJF0JrHVHplq/WPnOgaIfVwCOIvtTGqnPXTX+sfMNwSo6uY1JoDSNiFARWtR6eBy9B8DiDbXAFiTZtdiABHKbF+1WECEVGUTWztlJYBoS1WrchRSC5QEEOdIe54Xzea3HVJAs4OUAoiQuFdjJn2qlfpW46YCcpC+lVxpW0EYG0cDyPXLDS0VLkdfb4HJzhxyBcVFJBXu3S0mcwFyxZufrplROfutmlUlAmEBJyRek/8tbAlA7om/C1AlATlQHIMLS35O4tnSpLLKAtCwhrCQExj/8vrwAo3gasxntMb9B9PXrmqWhf+yAAAAAElFTkSuQmCC

錯位布局

設置相對定位position樣式，位于右上角。它所在的父級就要設置絕對定位relative。這樣關閉按鈕圖標就會以它所在的父級定位，否則可能會布局錯位，比如下面錯位效果

正確布局

樣式代碼




    

        

            

            

        

        

            
                <style type="text/css">
            

        

    

    

        

            

            

        

        

            
                 .title { width: 400px; height: 56px; background: url(/1674461966454.jpg); background-size: 100%; line-height: 56px;position:relative; }
            

        

    

    

        

            

            

        

        

            
                 .title-text { font-size: 18px; font-weight: bold; color: #fff; font-family: 黑體; margin-left: 20px; }
            

        

    

    

        

            

            

        

        

            
                 .close { position: absolute; top: 0px; right: 0px; width: 36px; height: 28px; }
            

        

    

    

        

            

            

        

        

            
                </style>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <div class="title">
            

        

    

    

        

            

            

        

        

            
                 <span class="title-text">添加紅包</span>
            

        

    

    

        

            

            

        

        

            
                 <img class="close" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAA4CAYAAABez76GAAAAAXNSR0IArs4c6QAAAtVJREFUeF7tm2FO3DAQhR+0BVZt2QIFujfrQXqMHqQ3W4kflRYJrZBArV6EUTa7jj0ee0yILUUIZcb2fJnMsx3tEYAfAI4x3/YPwDOARwAPAJ76KI4AfAdwMl8+e5ET0j0AggMBXQBYNEA7BJhNfwmJgL6+XI3RLgFm0oaAmD3Motb2CdwREOsP61Br+wQeCIgKRiVrbZ/AEwGxzV3qfcnRFWm2JvUeRA5Qk/oAoCb1AUBN6gOAmtQHADWpDwBqUh8BqEn9AUhO5nmrSX0AkLnULxaL7gFtt9vu7EXatP4x4/UzyFTqGdx6vf7NSa5Wq19SSFr/GDi06QMyk3oX3HK5/MlJbDabPxJIWv9YOENAZlI/DFACSeMrAeNs+xlkKvUpgab4pEDp+wwBmUq9JGCJrRbKGCBzqY8JPMYmJ5QxQOZSz8mMAeB9qp0r6JJ6lQPa8BUzlfp+AD5ItKkFZ6hi/N9M6g893UOQ+nbS5UCJDDKTet/kfZBqwDmUQaZSL8mitwToCsBpjvSU9jGFV4wxnQP4Ig1Oaz+VIt2prvWn6CnJPAGZFuqYRWCMjTaDff7DdZCzM9lySAKX2OaE5QPEGsRaVKylBJziow3AB4iv2e3gvEg71qu/JlCNb0oAPkDdCh/A55ROQz7aAy+tf2h+/ftjgD4CuJF0JrHVHplq/WPnOgaIfVwCOIvtTGqnPXTX+sfMNwSo6uY1JoDSNiFARWtR6eBy9B8DiDbXAFiTZtdiABHKbF+1WECEVGUTWztlJYBoS1WrchRSC5QEEOdIe54Xzea3HVJAs4OUAoiQuFdjJn2qlfpW46YCcpC+lVxpW0EYG0cDyPXLDS0VLkdfb4HJzhxyBcVFJBXu3S0mcwFyxZufrplROfutmlUlAmEBJyRek/8tbAlA7om/C1AlATlQHIMLS35O4tnSpLLKAtCwhrCQExj/8vrwAo3gasxntMb9B9PXrmqWhf+yAAAAAElFTkSuQmCC" alt="">
            

        

    

    

        

            

            

        

        

            
                </div>

3.2、表單區域

3.2.1、祝福語

1）組成元素

紅色星號、文本、輸入文本框、刷新文本按鈕

2）calc函數

它屬于css3的功能，calc() 函數用于動態計算長度值。對于布局非常有作用。

需要特別注意，函數內的參數值前后都需要保留一個空格，例如：width: calc(100% - 40px)；

3）刷新小圖標

樣式設置16x16高寬度

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA3NJREFUSEu1lX+IVFUUx7/nPpV1N1zbzNQsXFkUoZBCqH+KNhJikKid14QpsjLv3Uc/yCQpCcISot+yJZHz3qxj2xIxzozJYCCuWiREfxQZJIT9IgjKoq0l3WZ33v3GvN3ZdczdmWXr/vfePef7uefce84R/M9LGtVPFYvN+Lm0H8SVIhwi5BcFc7i1FScSiUQ4lU7DgN7e3MpyyLMAVK2YnBOoXVp37bscJAKk3i0uwvnRByFsmjQKv/KcxJGLnVJvZ69XI1hNkasAWUXCAXldxUYgAy0tTYlNmzYMXuwzBgjyu0HzzCUnMPObrKVbtnSdmyr8bDZrDQ7hAaHsJdEmIh8vv7Z5fSwWK1V9IkAQ5JeTdAEsJrAZ4BWRwbw5HV73fd/Wu6dM5tCKkdHwJMAVEHnTc+1HawCVj76+oy3DpaHPQKwG5ALA5kYBFf90unBDaMLPRaAEcrPr2l+OpW58pYL8E6B5FcAZAPMBtM8EUJHx/dwegtsF6j2t4xsnAJnMyaaR8m/fg1giFmI0shPELVhorvESiT/rpai6H6Ua5gdSypYyyxwn8XsUgd+bu4shjwH4Ubt2+4ED7y8wJmxLJu3vGhWv2vnBweMk7lSCe133/sNjAL/wFBG+CJE3PNfeNlPRmqcc5J8HzdMQ9Zznxp+tPtMANI4oeVw79uuzAfjp3DYa9kBUj+fGt49HMHE5j2kd3zsbQCqdfxLGvARRr3lufEdNikRkn3bth2YFCPL7QbMVIg97rv3WeKEV1hiGZ0Tw68JWLp2ueU0HJ6n8dO6nymtUImsrtTBZB37uC4BrxZL1OmkPNBpFJpNdMlpWAxTpEeEgQ+YAOetpe9UlhZbbCfIFERxzHftuETGNQHz/4AYCRVHqCMiVJNcILK11V1AD6OsrLB4uhaejYlOySzv27hkBRL4h2QHB17ip/UZv3brRGsBYP8nfHhoeB6hEsVs7iXfqQSYiEERDh2KSmDPvVLVJ/mvg+OnCDprwlYgucpRzrUem66hBkIsZsmZuVHwtJfc4jl287EQLgkObifIeElcDUoLgFCAfKZgPOzoWfdLZ2VmuRtbf/8GC88MX+gVcVv1HyB+Ya3mVg005MtPpbJuhehlgNwlrMlXyqaftW+ulrrpfdyZHJ/z7r9tAq1Ng7gDltNZ28j8DNCo0ld0/bOx/KATgarIAAAAASUVORK5CYII=

4）文本框默認高亮

input輸入文本框默認點擊選中會有一個高亮的效果，可以設置樣式去掉

outline:none;

5）隨機文本

設置隨機祝福語文本值，可設置js全局數組參數變量保存。

并且給右邊的刷新按鈕綁定點擊事件，然后在事件內使用隨機函數進行隨機顯示

交互代碼




    

        

            

            

        

        

            
                <script type="text/javascript">
            

        

    

    

        

            

            

        

        

            
                 $(function () {
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                  // 祝福語
            

        

    

    

        

            

            

        

        

            
                  var labelText = ['成就一億技術人!', '節日快樂', 'Hello World', '新春大吉!', '大吉大利', 'Bug Free'];
            

        

    

    

        

            

            

        

        

            
                  $('.cl-input img').click(function () {
            

        

    

    

        

            

            

        

        

            
                  // Math.random() - 隨機函數會產生0~1之間的值
            

        

    

    

        

            

            

        

        

            
                  var index = parseInt(Math.random() * labelText.length);
            

        

    

    

        

            

            

        

        

            
                  var text = labelText[index];
            

        

    

    

        

            

            

        

        

            
                  $('.cl-input input').val(text);
            

        

    

    

        

            

            

        

        

            
                  });
            

        

    

    

        

            

            

        

        

            
                 });
            

        

    

    

        

            

            

        

        

            
                </script>

效果如下

布局代碼




    

        

            

            

        

        

            
                <div class="content-label">
            

        

    

    

        

            

            

        

        

            
                 <div class="cl-text">
            

        

    

    

        

            

            

        

        

            
                  <span style="color:#f00;">*</span>
            

        

    

    

        

            

            

        

        

            
                  <span>祝福語</span>
            

        

    

    

        

            

            

        

        

            
                 </div>
            

        

    

    

        

            

            

        

        

            
                 <div class="cl-input">
            

        

    

    

        

            

            

        

        

            
                  <input placeholder="請填寫紅包祝福語或標題" value="成就一億技術人!" />
            

        

    

    

        

            

            

        

        

            
                  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA3NJREFUSEu1lX+IVFUUx7/nPpV1N1zbzNQsXFkUoZBCqH+KNhJikKid14QpsjLv3Uc/yCQpCcISot+yJZHz3qxj2xIxzozJYCCuWiREfxQZJIT9IgjKoq0l3WZ33v3GvN3ZdczdmWXr/vfePef7uefce84R/M9LGtVPFYvN+Lm0H8SVIhwi5BcFc7i1FScSiUQ4lU7DgN7e3MpyyLMAVK2YnBOoXVp37bscJAKk3i0uwvnRByFsmjQKv/KcxJGLnVJvZ69XI1hNkasAWUXCAXldxUYgAy0tTYlNmzYMXuwzBgjyu0HzzCUnMPObrKVbtnSdmyr8bDZrDQ7hAaHsJdEmIh8vv7Z5fSwWK1V9IkAQ5JeTdAEsJrAZ4BWRwbw5HV73fd/Wu6dM5tCKkdHwJMAVEHnTc+1HawCVj76+oy3DpaHPQKwG5ALA5kYBFf90unBDaMLPRaAEcrPr2l+OpW58pYL8E6B5FcAZAPMBtM8EUJHx/dwegtsF6j2t4xsnAJnMyaaR8m/fg1giFmI0shPELVhorvESiT/rpai6H6Ua5gdSypYyyxwn8XsUgd+bu4shjwH4Ubt2+4ED7y8wJmxLJu3vGhWv2vnBweMk7lSCe133/sNjAL/wFBG+CJE3PNfeNlPRmqcc5J8HzdMQ9Zznxp+tPtMANI4oeVw79uuzAfjp3DYa9kBUj+fGt49HMHE5j2kd3zsbQCqdfxLGvARRr3lufEdNikRkn3bth2YFCPL7QbMVIg97rv3WeKEV1hiGZ0Tw68JWLp2ueU0HJ6n8dO6nymtUImsrtTBZB37uC4BrxZL1OmkPNBpFJpNdMlpWAxTpEeEgQ+YAOetpe9UlhZbbCfIFERxzHftuETGNQHz/4AYCRVHqCMiVJNcILK11V1AD6OsrLB4uhaejYlOySzv27hkBRL4h2QHB17ip/UZv3brRGsBYP8nfHhoeB6hEsVs7iXfqQSYiEERDh2KSmDPvVLVJ/mvg+OnCDprwlYgucpRzrUem66hBkIsZsmZuVHwtJfc4jl287EQLgkObifIeElcDUoLgFCAfKZgPOzoWfdLZ2VmuRtbf/8GC88MX+gVcVv1HyB+Ya3mVg005MtPpbJuhehlgNwlrMlXyqaftW+ulrrpfdyZHJ/z7r9tAq1Ng7gDltNZ28j8DNCo0ld0/bOx/KATgarIAAAAASUVORK5CYII=" alt="">
            

        

    

    

        

            

            

        

        

            
                 </div>
            

        

    

    

        

            

            

        

        

            
                </div>

3.2.2、紅包數量

布局和祝福語一樣，刷新按鈕換成了單位文本。

這里文本框有個離開焦點事件，如果判斷沒有輸入值，那么提示”請輸入數量"，并且紅包數量只能是正整數，文本框也變為紅色邊框，默認則為藍色邊框

布局效果

布局代碼




    

        

            

            

        

        

            
                <div class="content-label">
            

        

    

    

        

            

            

        

        

            
                 <div class="cl-text">
            

        

    

    

        

            

            

        

        

            
                  <span style="color:#f00;">*</span>
            

        

    

    

        

            

            

        

        

            
                  <span>紅包數量</span>
            

        

    

    

        

            

            

        

        

            
                 </div>
            

        

    

    

        

            

            

        

        

            
                 <div class="cl-input">
            

        

    

    

        

            

            

        

        

            
                  <input placeholder="請填寫紅包數量" value="" />
            

        

    

    

        

            

            

        

        

            
                  <span>個</span>
            

        

    

    

        

            

            

        

        

            
                 </div>
            

        

    

    

        

            

            

        

        

            
                </div>

交互效果

交互代碼




    

        

            

            

        

        

            
                $("#txtCount").blur(function () {
            

        

    

    

        

            

            

        

        

            
                 txtCount = $(this).val();
            

        

    

    

        

            

            

        

        

            
                 if (txtCount == undefined || txtCount == null || txtCount == '' || txtCount.trim() == '') {
            

        

    

    

        

            

            

        

        

            
                  $("i", $(this).parent()).show().html('請輸入數字！');
            

        

    

    

        

            

            

        

        

            
                  $(this).parent().addClass('red-border');
            

        

    

    

        

            

            

        

        

            
                 }
            

        

    

    

        

            

            

        

        

            
                 else {
            

        

    

    

        

            

            

        

        

            
                  if (txtCount <= 0) {
            

        

    

    

        

            

            

        

        

            
                  $("i", $(this).parent()).show().html('請輸入有效數字格式！');
            

        

    

    

        

            

            

        

        

            
                  $(this).parent().addClass('red-border');
            

        

    

    

        

            

            

        

        

            
                  }
            

        

    

    

        

            

            

        

        

            
                  else if (!isNaN(txtCount)) {
            

        

    

    

        

            

            

        

        

            
                  $("i", $(this).parent()).hide();
            

        

    

    

        

            

            

        

        

            
                  $(this).parent().removeClass('red-border');
            

        

    

    

        

            

            

        

        

            
                  }
            

        

    

    

        

            

            

        

        

            
                  else {
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                  }
            

        

    

    

        

            

            

        

        

            
                 }
            

        

    

    

        

            

            

        

        

            
                });

3.2.3、紅包總金額

布局和前面一樣，這就是前端布局的魅力，有很多可以重用的東西

布局效果

布局代碼




    

        

            

            

        

        

            
                <div class="content-label">
            

        

    

    

        

            

            

        

        

            
                 <div class="cl-text">
            

        

    

    

        

            

            

        

        

            
                  <span style="color:#f00;">*</span>
            

        

    

    

        

            

            

        

        

            
                  <span>紅包總金額</span>
            

        

    

    

        

            

            

        

        

            
                 </div>
            

        

    

    

        

            

            

        

        

            
                 <div class="cl-input">
            

        

    

    

        

            

            

        

        

            
                  <input placeholder="請填寫紅包總金額" value="" />
            

        

    

    

        

            

            

        

        

            
                  <span>元</span>
            

        

    

    

        

            

            

        

        

            
                 </div>
            

        

    

    

        

            

            

        

        

            
                </div>

3.2.4、余額支付

這里的布局和前面稍微多點東西，布局差不多。

這里只做讀取展示用，也可以用input輸入文本框，設置默認只讀即可

布局效果

布局代碼




    

        

            

            

        

        

            
                <div class="content-label">
            

        

    

    

        

            

            

        

        

            
                 <div class="cl-text">
            

        

    

    

        

            

            

        

        

            
                  <span style="color:#f00;">*</span>
            

        

    

    

        

            

            

        

        

            
                  <span>余額支付</span>
            

        

    

    

        

            

            

        

        

            
                 </div>
            

        

    

    

        

            

            

        

        

            
                 <div class="cl-input">
            

        

    

    

        

            

            

        

        

            
                  <label>當前余額：<b>51.25</b> 元</label>
            

        

    

    

        

            

            

        

        

            
                  <span class="span">前往充值 > </span>
            

        

    

    

        

            

            

        

        

            
                 </div>
            

        

    

    

        

            

            

        

        

            
                </div>

3.2.5、文本邊框交互邏輯

當點擊文本框時，先判斷是否已經提示無效信息，也就是已經有紅色邊框，有則不顯示藍色邊框，沒有則顯示藍色邊框。當離開文本框焦點，那么則移除藍色邊框

交互效果

交互代碼




    

        

            

            

        

        

            
                // 文本框點擊事件
            

        

    

    

        

            

            

        

        

            
                $('.cl-input input').click(function () {
            

        

    

    

        

            

            

        

        

            
                var className = $(this).parent().attr('class');
            

        

    

    

        

            

            

        

        

            
                if (className.indexOf('red-border') < 0) {
            

        

    

    

        

            

            

        

        

            
                $(this).parent().addClass('blue-border');
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }).blur(function () {
            

        

    

    

        

            

            

        

        

            
                $(this).parent().removeClass('blue-border');
            

        

    

    

        

            

            

        

        

            
                });

3.3、確認按鈕區域

1）支付額文本

這里布局左定位，金額數字加紅色字體

2）取消和確認按鈕

取消按鈕鼠標移動上去邊框變深，直接使用css的hover屬性即可完成。

確認按鈕的效果使用同樣的方式

3）布局效果

4）布局代碼




    

        

            

            

        

        

            
                <!--按鈕-->
            

        

    

    

        

            

            

        

        

            
                <div class="button">
            

        

    

    

        

            

            

        

        

            
                 <div class="price">
            

        

    

    

        

            

            

        

        

            
                  <span>需支付：</span>
            

        

    

    

        

            

            

        

        

            
                  <span id="priceSpan" style="font-size:20px;color:#f00;">0.00</span>
            

        

    

    

        

            

            

        

        

            
                  <span>元</span>
            

        

    

    

        

            

            

        

        

            
                 </div>
            

        

    

    

        

            

            

        

        

            
                 <div class="btn">
            

        

    

    

        

            

            

        

        

            
                  <div class="btnCancel">
            

        

    

    

        

            

            

        

        

            
                  <span>取消</span>
            

        

    

    

        

            

            

        

        

            
                  </div>
            

        

    

    

        

            

            

        

        

            
                  <div class="btnOk not-allowed">
            

        

    

    

        

            

            

        

        

            
                  <span>確定</span>
            

        

    

    

        

            

            

        

        

            
                  </div>
            

        

    

    

        

            

            

        

        

            
                 </div>
            

        

    

    

        

            

            

        

        

            
                </div>

5）交互代碼




    

        

            

            

        

        

            
                // 紅包個數
            

        

    

    

        

            

            

        

        

            
                var txtCount = 0;
            

        

    

    

        

            

            

        

        

            
                var txtPrice = 0;
            

        

    

    

        

            

            

        

        

            
                $("#txtCount").keyup(function () {
            

        

    

    

        

            

            

        

        

            
                 txtCount = $(this).val();
            

        

    

    

        

            

            

        

        

            
                 $("#priceSpan").html(txtCount * txtPrice);
            

        

    

    

        

            

            

        

        

            
                });
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // 紅包總金額
            

        

    

    

        

            

            

        

        

            
                $("#txtPrice").keyup(function () {
            

        

    

    

        

            

            

        

        

            
                 txtPrice = $(this).val();
            

        

    

    

        

            

            

        

        

            
                 $("#priceSpan").html(txtPrice);
            

        

    

    

        

            

            

        

        

            
                });

4、完整代碼

紅包數量和紅包金額那里還有幾個交互和邏輯判斷，有興趣的小伙伴可以自己實現下，有疑問的可咨詢了解

完整代碼可以查看gitCode：小5聊 / Csdn Red Bag Html · GitCode

5、基礎知識點

calc()函數	可用于高寬度精準布局，更加合理布局
position和relative	相對和絕對定位，同樣有助于合理定位和布局
Math.random()	隨機函數，隨機產生0~1的值
keyup()	鍵盤彈上事件
click()	元素點擊事件
blur()	離開焦點事件

總結：前端布局，要玩出花樣和效果，還是需要點藝術天賦?？傊?，挺有趣的，剛入門可能會覺得比較難，當你熟練之后，還是挺有趣的！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

評論(0) 瀏覽(1692)

172023-2

vue可視化拖拽組件模板,vue組件拖拽自定義界面

前端可視化開發平臺哪個好用？

ThingJS 基于 HTML5 和 WebGL 技術，可方便地在主流瀏覽器上進行瀏覽和調試，支持 PC 和移動設備。

ThingJS 為可視化應用提供了簡單、豐富的功能，只需要具有基本的 Javascript 開發經驗即可上手。

ThingJS 提供了場景加載、分層級瀏覽，對象訪問、搜索、以及對象的多種控制方式和豐富的效果展示，可以通過綁定事件進行各種交互操作，還提供了攝像機視角控制、點線面效果、溫濕度云圖、界面數據展示、粒子效果等各種可視化功能網頁鏈接。

谷歌人工智能寫作項目：小發貓

可視化快速開發平臺的難度太高了，有沒有簡單的？

如果可視化平臺還覺得太難了，那真的沒有簡單的了，程序員還得寫代碼，全靠經驗判定呢typescript是用來干什么的，為什么要用typescript。

軟件是由程序員編寫的代碼出現的，一般開發軟件需要有UI前端，后臺程序員，還有數據庫人員等來一起完成一個項目，一般沒有專業知識的是沒有辦法去獨立開發一個軟件平臺的哦。首先要開發軟件，需要知道要什么功能？

達到什么效果？最終實現目的。這幾個問題搞清楚之后，就可以考慮自己的預算，考慮好了預算之后，才好結合自己的需求，提供給軟件開發公司進行溝通，溝通之后，確定價格，這樣就可以簽合同開始制作啦。

如果有疑問，可以在下面補充，我們一起討論吧。

hec-dssvue是什么軟件

HEC-DSSVue是一個基于Java的可視化實用程序，允許用戶在HEC-DSS數據庫文件中繪制，制表，編輯和操作數據。

HEC-DSSVue生成的圖形是高度可定制的，可以以各種格式保存，包括“jpeg”和“png”（便攜式網絡圖形），或者打印或復制到剪貼板以包含在報告中。HEC-DSSVue包含六十多個數學函數。

除了這些函數之外，HEC-DSSVue還提供了幾個實用程序函數，這些函數提供了一種將數據集輸入到HEC-DSS數據庫中、重命名數據集名稱、將數據集復制到其他HEC-DSS數據庫文件以及刪除數據集的方法。

MongoVUE可視化工具怎么寫js代碼

一、AdobeEdge目前還處于預覽階段的AdobeEdge是用HTML5、CSS、JavaScript開發動態互動內容的設計工具。內容可以同時兼容移動設備和桌面電腦。

Edge的一個重要功能是Web工具包界面，方便確保頁面在不同瀏覽器中的架構一致性，此外Edge還將整合T...。

前端開發需要掌握什么技術

。

前端需要掌握的技術還是很多的1.熟練掌握前端開發技術(HTML5、CSS3、JS、JSON、XHTML)，了解各項技術的相關標準；2.掌握Ajax異步編程，能夠寫出高性能、可復用的前端組件；3.對OO、MVC、MVVM等編程思想、前端框架有深刻理解，熟練掌握至少一個前端框架了解其原理（常用前端框架Vuejs，AngularJS，React，Bootstrap，QUICKUI，移動端有：FrozenUI，weUI，SUI，MUI，AUI）；4.善于Web性能優化，可訪問性、對SEO等有良好的體驗；理解表現層與數據層分離的概念、Web語義化；5.了解前端安全機制，熟悉HTTP協議以及瀏覽器緩存策略；6.熟悉常見JS開發框架源碼實現（如：prototype、jQuery、Mootools，Ext，Dojo，underscore、YUI、Kissy）；7.擁有良好的代碼編寫，設計文檔撰寫的經驗，熟練使用Git等版本控制工具；8.對常見的瀏覽器兼容問題有清晰的理解，并有可靠的解決方案；如IE6/7/8/9、Firefox、Safari、Chrome。

Web前端開發（可視化方向）是什么職位

。

可往3D開發工程師轉型，前提要熟練掌握js，熟悉webgl，這里你可以練練手網頁鏈接ThingJS基于HTML5和WebGL技術，可方便地在主流瀏覽器上進行瀏覽和調試，支持PC和移動設備。

ThingJS為可視化應用提供了簡單、豐富的功能，只需要具有基本的Javascript開發經驗即可上手。

ThingJS提供了場景加載、分層級瀏覽，對象訪問、搜索、以及對象的多種控制方式和豐富的效果展示，可以通過綁定事件進行各種交互操作，還提供了攝像機視角控制、點線面效果、溫濕度云圖、界面數據展示、粒子效果等各種可視化功能。

ThingJS提供如下相關組件和工具供用戶使用：CityBuilder：聚焦城市的3D地圖搭建工具，打造你的3D城市地圖。CamBuilder：簡單、好用、免費的3D場景搭建工具。

ThingPano：全景圖制作工具，輕松制作并開發全景圖應用，實現3D宏觀場景和全景微觀場景的無縫融合。ThingDepot：上萬種模型，數十個行業，自主挑選，一次制作多次復用。

現在做網頁前端的學習路線是什么

初學者必看干貨web前端學習路線圖，隨著移動互聯網的發展，web前端逐漸受到企業的重視，前端開發人員的薪資也水漲船高，越來越多的人看好前端行業的發展，想要轉行加入。

下面，給大家分享一份web前端學習路線圖，希望對初學者有所幫助。Web前端行業的發展，讓前端人員能完成比以前更多的職責范圍，所以未來前端可以寬口徑就業，前景非常好。

除此之外，目前web前端工程師日均崗位缺口超50000，平均薪資10820元/月。對于零基礎的人而言，要怎么學習web前端呢？1、前端頁面重構。

主要內容為PC端網站布局、Photoshop工具及切圖、H5移動端網頁布局、HTML5+CSS3新特性與交互。學習目標是完成PC端網站布局，可實現響應式布局，一套代碼適配PC端、移動端、平板設備等。

2、前后端網頁交互。

主要內容為JavaScript語法全面進階、ES6到ES10新語法實踐、jQuery應用及插件使用、設計模式及插件編寫、封裝JS工具庫及WebAPIS、AJAX+PHP+MySQL前后端交互、前端工程化與模塊化應用以及PC端全棧開發項目等。

學習目標是可以掌握前端工程化工具，如git、gulp、webpack等，搭建項目及開發項目。3、+前端框架。

主要內容為全面進階、Koa2+MongoDB搭建服務、框架、框架、小程序云開發與小程序框架、原生APP與混合APP、數據可視化與桌面應用等。

學習目標是掌握桌面應用及可視化大數據，實現復雜數據展示類項目，能夠獨立完成前后臺相關功能，勝任HTML5全棧開發工程師職位。

很多學習web前端的朋友都希望在學成后能找到一份滿意的工作，所以我們在學習過程中一定要注意實戰經驗的積累，如果你所學的東西對企業沒有用，那你所做的一切都是無用功。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

評論(0) 瀏覽(1629)

162023-2

Vue/Node.js—時間處理器—silly-datetime

一、在Vue框架中使用

1、安裝插件—時間格式化插件

npm i silly-datetime --save

2、Main.js文件引用


        

            

                

                    

                    

                

                

                    
                        import Time from "silly-datetime"; //時間格式化處理插件
                    

                

            

            

                

                    

                    

                

                

                    
                        Vue.prototype.$Time = Time; //全局使用

3、頁面中使用

this.$Time.format(new Date(), 'YYYY-MM-DD HH:mm:ss');

二、在Node框架中使用

1.安裝插件

npm i silly-datetime --save

2.在node中引入

const timeQs = require('silly-datetime'); // 事件格式化控件

3.在后端路由中

obj.time = timeQs.format(new Date(), 'YYYY-MM-DD HH:mm:ss');

4、參數說明

格式	類型	說明	實例
YYYY	年	年份	YYYY ：2019
MM	月	月份，補0	MM：07
M	月	月份，不補0	M：7
DD	日	日，補0	DD：07
D	日	日，不補0	D：7
HH	小時	24小時，補0	HH：07
H	小時	24小時，不補0	H：7
hh	小時	12小時，補0	hh：07
h	小時	12小時，不補0	h：7
A	am	上午	mm：07
a	pm	下午	m：7
mm	分鐘	分鐘，不補00	mm：07
m	分鐘	分鐘，不補0補0	m：7
s	秒鐘	秒鐘，不補00	s：07
s	秒鐘	秒鐘，不補0補0	s：7

文章知識點與官方知識檔案匹配，可進一步學習相關知識

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

評論(0) 瀏覽(1227)

162023-2

如何使用 Node.js 列出目錄中的所有文件

在 Node.js 中，您可以使用該fs.readdir()方法列出目錄中的所有可用文件。.此方法異步工作以讀取給定目錄的內容，并返回目錄中不包括和的文件名數組..。

這是一個讀取目錄中所有可用文件并在控制臺上打印它們的名稱的示例：




    

        

            

            

        

        

            
                const fs = require('fs');
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // directory path
            

        

    

    

        

            

            

        

        

            
                const dir = './node_modules/';
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // list all files in the directory
            

        

    

    

        

            

            

        

        

            
                fs.readdir(dir, (err, files) => {
            

        

    

    

        

            

            

        

        

            
                if (err) {
            

        

    

    

        

            

            

        

        

            
                throw err;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // files object contains all files names
            

        

    

    

        

            

            

        

        

            
                // log them on console
            

        

    

    

        

            

            

        

        

            
                files.forEach(file => {
            

        

    

    

        

            

            

        

        

            
                console.log(file);
            

        

    

    

        

            

            

        

        

            
                });
            

        

    

    

        

            

            

        

        

            
                });

fs.readdir()如果給定目錄不存在，該方法將拋出錯誤。

該fs模塊還提供了 call 的同步變體，readdir()它readdirSync()同步工作并返回文件名數組：




    

        

            

            

        

        

            
                const fs = require('fs');
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // directory path
            

        

    

    

        

            

            

        

        

            
                const dir = './node_modules/';
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // list all files in the directory
            

        

    

    

        

            

            

        

        

            
                try {
            

        

    

    

        

            

            

        

        

            
                const files = fs.readdirSync(dir);
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // files object contains all files names
            

        

    

    

        

            

            

        

        

            
                // log them on console
            

        

    

    

        

            

            

        

        

            
                files.forEach(file => {
            

        

    

    

        

            

            

        

        

            
                console.log(file);
            

        

    

    

        

            

            

        

        

            
                });
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                } catch (err) {
            

        

    

    

        

            

            

        

        

            
                console.log(err);
            

        

    

    

        

            

            

        

        

            
                }

查看本指南以了解有關在 Node.js 應用程序中讀取和寫入文件的更多信息

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

評論(0) 瀏覽(1582)

152023-2

web自動化測試入門篇03——selenium使用教程

閱讀目錄

1. 目的
2. 說明
3. 關于解答上一篇的問題
4. 啟動
5. 瀏覽器基礎操作
6. 注意點與小技巧

1. 目的

web自動化測試作為軟件自動化測試領域中繞不過去的一個“香餑餑”，通常都會作為廣大測試從業者的首選學習對象，相較于C/S架構的自動化來說，B/S有著其無法忽視的諸多優勢，從行業發展趨、研發模式特點、測試工具支持，其整體的完整生態已經遠遠超過了C/S架構方面的測試價值。接上一篇文章，我們將繼續深入探討Selenium的相關使用方法與技巧。

2. 說明

此篇中所用的技術棧為Selenium+Python，因其本身編程難度不高，總體思想都是基于面向對象的編程理念，故只要大家的編碼語言基礎不弱，就完全可以做到平替。

3. 關于解答上一篇的問題

在正式啟動瀏覽器之前，這里還需要說說上一篇沒有提及的一個問題，后臺有同學私信說在對應驅動網站上完全找不到自己瀏覽器對應版本的驅動，關于瀏覽器驅動的版本，大家都知道驅動的版本應該是要與瀏覽器的版本完全對應上的。但往往日常工作中因為環境或者其他客觀因素會導致瀏覽器的版本五花八門，也會出現驅動網站上完全沒有你目前工作環境中對應的瀏覽器版本，這里我們大可使用中版本號一致的驅動來進行嘗試，沒有必要將版本進行完全的匹配。比如你的Chrome瀏覽器的版本號為107.0.5304.107，如果這時對應網站只有107.0.5304.62與108.0.5359.22的前后兩個版本的驅動比較相近，這里就有兩個選擇，第一就是卸掉原有的瀏覽器，安裝對應的版本；第二則是選擇107.0.5304.62來進行嘗試；相信大家在成本耗時的判斷下，一般都會選擇第二個選項來進行嘗試對吧？那么我可以很負責任的告訴你，第二個判斷是完全行的通的。不必太過糾結驅動的小版本號是否完全匹配。

4. 啟動

我們將一切準備就緒后就可以開始我們的selenium之旅了，首先我們需要將使用selenium進行瀏覽器的啟動（訪問百度）。

from selenium import webdriver

browser = webdriver.Chrome() browser.get('https://www.baidu.com') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

如果對應的瀏覽器驅動沒有進行環境變量的設置，可以在代碼中直接進行程序的路徑指定來進行后續的瀏覽器操作。

from selenium import webdriver

path = r'C:\Program Files\Google\Chrome\Application\chromedriver.exe' browser = webdriver.Chrome(path) browser.get('https://www.baidu.com') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

使用Selenium打開后的瀏覽器都會標識出正在受到自動化測試軟件控制的相關提示。

在這里插入圖片描述

5. 瀏覽器基礎操作

Selenium本身提供給了我們非常多的各類瀏覽器與頁面的操作函數，方便我們根據所需測試業務來進行自由搭配使用甚至是二開。

5.1 瀏覽器窗口操作

對于瀏覽器窗口的尺寸進行控制與獲取，如最大化、最小化、指定窗口大小等。

窗口全屏

browser.fullscreen_window() 


    
        1

窗口最大化

browser.maximize_window() 


    
        1

窗口最小化

browser.minimize_window() 


    
        1

自定義窗口大?。▽扻高）

browser.set_window_size(1080, 720) 


    
        1

自定義窗口坐標位置與大?。▁坐標，y坐標，寬X高）

browser.set_window_rect(100, 200, 1080, 720) 


    
        1

獲取窗口的大?。▽扻高）

browser.get_window_size() 


    
        1

獲取窗口的坐標位置，返回一個字典對象

browser.get_window_position() 


    
        1

獲取窗口的坐標與大?。▁坐標，y坐標，寬X高）

browser.get_window_rect() 


    
        1

獲取當前窗口的句柄

browser.current_window_handle 


    
        1

獲取當前所有窗口的句柄

browser.window_handles 


    
        1

5.2 頁面基礎操作

對于瀏覽器當前頁面的一些操作，如前進、后退、刷新等。

前進（下一頁面）

browser.forward() 


    
        1

后退（上一頁面）

browser.back() 


    
        1

刷新（當前頁面）

browser.refresh() 


    
        1

截圖并保存為test.png（當前頁面）

browser.save_screenshot('test.png') 


    
        1

截圖并保存為png文件（當前頁面）

browser.get_screenshot_as_file('test_02.png') 


    
        1

截圖并將信息轉為base64編碼的字符串

browser.get_screenshot_as_base64() 


    
        1

5.3 信息操作

對于瀏覽器當前一些信息的獲取與操作。

獲取頁面URL（當前頁面）

browser.current_url 


    
        1

獲取日志類型，會返回一個列表對象

browser.log_types 


    
        1

獲取瀏覽器操作日志，注意函數內的參數為固定值類型’browser’

browser.get_log('browser') 


    
        1

獲取設備操作日志，參數原理同上

browser.get_log('driver') 


    
        1

獲取當前頁面標題

browser.title 


    
        1

獲取當前瀏覽器的名字

browser.name 


    
        1

5.4 元素操作

Selenium中最基礎也是最重要的一環，基本上對于頁面的業務操作大多數都集中與此。另外需要注意的是元素定位所使用的find_element_by的方法在很早之前就已經被廢棄，這里同樣也會使用最新的find_element方法進行講解。
如何查看頁面中的元素與其相關屬性，這里以Chrome為例，我們只需按F12或者右鍵頁面選擇“檢查”，再點擊調試窗口的左上角的箭頭標志或者使用快捷鍵Ctrl+Shift+C來進行元素的選取，此時Elements標簽頁中會將焦點對應跳轉至該元素的html代碼行中，接下來我們就可以針對不同的元素和不同的屬性來進行定位操作。

在這里插入圖片描述

5.4.1 name定位

通過一個元素的name屬性來進行定位。

比如定位百度中的搜索欄，我們通過name屬性來進行定位。該元素的html構造如下：

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off"> 


    
        1

我們只需將name屬性后面的值拿出，賦予給find_element方法即可。新的By方法我們只需要導入selenium.webdriver.common.by下的By方法即可。

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.NAME, 'wd') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

5.4.2 class name定位

通過一個元素的class屬性來進行定位。

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CLASS_NAME, 's_ipt') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

5.4.3 id定位

通過一個元素的id屬性來進行定位。

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.ID, 'kw') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

5.4.4 css定位

css selector也被成為選擇器定位，它通過頁面內的元素的id、name、tag三個屬性來進行定位，根據元素屬性的重復程度，可以單獨屬性定位也可組合屬性來進行定位。而且相較于xpath定位方式來說，博主更推薦使用此方法來進行定位，無論是易用度還是維護性來說比xpath定位好的多。

單屬性定位–tag屬性

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, 'input') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

單屬性定位–id屬性

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, '#kw') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

單屬性定位–class屬性

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, '.s_ipt') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

多屬性定位–tag+id屬性

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, 'input#kw') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

多屬性定位–tag+class屬性

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, 'input.s_ipt') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

同樣的，其他的組合方式大家可以舉一反三，不斷嘗試，比如模糊匹配input[class ~= "局部關鍵字"]、層級定位#form > span > input等等等等。

5.4.5 link text定位

這種定位方式適用于頁面中帶有超鏈接的元素，直接通過超鏈接標簽內的文字進行元素定位。

我們以百度首頁為例，可以看到該頁面中有很多的超鏈接標簽，如果我們想模擬點擊跳轉至新聞對應頁面的操作，就可以用link text的元素定位方法來進行實現。

在這里插入圖片描述

使用超鏈接標簽對中的“新聞”一詞來進行定位。

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.LINK_TEXT, '新聞').click() 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

5.4.6 partial link text定位

這個定位方式與link text定位十分相像，實際上也就是link text的模糊查找定位方式，對象也是超鏈接內的文字，只不過他匹配的不是全部文字而是局部。

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.PARTIAL_LINK_TEXT, '新').click() 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

5.4.7 tag定位

tag定位的效率總體來說不高，也不太推薦單獨使用，html頁面中一般也是由很多相同或不同的標簽對組成。就tag而言標簽重復的越多，定位的效率其實也就越低。

比如我們想在百度的搜索欄中輸入“selenium”關鍵字，那么光使用tag其實就很難達到我們的目的，甚至無法準確定位到我們想要的元素。如果運氣好，搜索欄的input標簽在html頁面中排在第一位那還好，只要不是第一位，我們就需要編寫其他的代碼邏輯來輔助我們繼續定位這個元素。

所以下面的代碼實在是不能稱之為高效的執行代碼

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.TAG_NAME, 'input').send_keys('selenium') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

5.4.8 xpath定位

一般來說無法通過以上的這些元素定位方法定位的情況下，我們會使用xpath定位方法。但這里需要特別注意，xpath方法分為絕對路徑和相對路徑兩種定位方式，博主只推薦如果真要使用xpath就使用相對路徑+正則表達式的方式來進行元素定位。不推薦絕對路徑的原因就不用博主多說了吧，只要你敢用，后期的腳本維護與復用絕對會讓你抓狂的。

還是老樣子，我們使用xpath的相對路徑寫法來定位百度首頁的搜索欄。

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.XPATH, '//*[@id="kw"]').send_keys('selenium') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

另外與find_element方法相對應的find_elements方法這里就不多做介紹了，該種方法是將當前頁面中所有能匹配上對應元素定位方法的元素全部獲取。大家可以根據自己的需求來進行選取和使用。

5.5 延時方式

我們加載頁面時通常會因為網絡環境等各方面的客觀因素而導致元素加載的速度各不相同，如果此時我們沒有對業務操作進行一定的延時執行，那么大概率業務操作會出現各類的no such element報錯。
那么我們就需要在頁面元素加載完成之后再對相應的元素進行業務操作來規避上面說的這個問題。Selenium內可以使用三種延時的函數來進行對應的延時業務操作。

5.5.1 隱式等待

隱式等待的作用是在頁面加載是隱性的進行特定時長的等待，如果在規定的等待時長內頁面加載完畢，則會繼續進入下一個業務操作，如果沒有加載完畢，則會拋出一個超時的異常。這里其實有兩個問題，第一，隱式等待是全局性質的，也就是說一旦你設置了個5秒，那整個程序都會使用這個等待時間類進行配置，靈活性較低；第二，如果碰到了有些頁面中的元素是局部加載的話，那整個頁面的加載是否完成也就沒有了其意義，隱式加載無法針對這樣的情況作出調整，智能度較低。所以一般來說只要是對于頁面的整體加載要求不高或者元素的加載比較穩定的程序，都可以使用隱式等待來進行延時操作。

from selenium import webdriver from selenium.webdriver.common.by import By

browser = webdriver.Chrome() browser.get('https://www.baidu.com') browser.implicitly_wait(5) browser.find_element(By.XPATH, '//*[@id="kw"]').send_keys('selenium') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8

5.5.2 顯式等待

顯式等待的作用則是使用特定的等待時長來進行某些業務邏輯判斷，如果判斷（比如元素是或否加被定位）在時間完成那繼續執行下一個業務操作，如果判斷失敗也會拋出no such element的異常，而顯式等待的默認檢查元素周期為0.5秒。乍一看好像與隱式等待差不多，其實不然，首先顯式等待是針對頁面中某個或某組特定元素而執行的，隱式則是全局，對所有的元素都生效；其二，顯式等待可以通過自定義條件來進行元素的定位和選取，隱式則不行。

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.wait import WebDriverWait from selenium.webdriver.support import expected_conditions as EC

browser = webdriver.Chrome() browser.get('https://www.baidu.com') ele = WebDriverWait(browser, 10, 0.5).until(EC.presence_of_element_located((By.XPATH, '//*[@id="kw"]'))) ele.send_keys('selenium') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

5.5.3 強制等待

這個應該是平時大家代碼中用的最多的等待方式了吧，sleep是針對線程進行掛起的一種等待方式，等待時長根據指定的參數來進行決定。最大的好處就是簡單粗暴，無任何邏輯在里面，所以也被稱為強制等待。

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.XPATH, '//*[@id="kw"]').send_keys('selenium') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8

那么以上的三種等待方式其實各有各的特點與缺點，三者之間沒有絕對的好用和不好用，而在我們的日常工作場景中也希望大家可以根據實際的情況有選擇性的使用。

5.6 超時等待

元素加載超時我們可以使用以上三種延時方式來進行處理，那么頁面超時了又該如何操作呢？selenium也為我們準備了兩個函數來對應這樣的局面。

頁面加載超時

browser.set_page_load_timeout(30) 


    
        1

這里推薦將超時的時間有效的拉長，不宜過短。過短的超時時間容易導致整體頁面出現未加載html代碼情況下直接令驅動無法工作的情況。

頁面異步js或ajax操作超時

browser.set_script_timeout(30) 


    
        1

這個函數是用于execute_async_script()相關的異步js操作超時報錯，由于是異步操作，等待時間同理也不易過短。

5.7 鍵鼠操作

瀏覽器中鍵盤與鼠標的操作也是不可或缺的重要一環，在被測對象的業務要求中往往占有不少的戲份。

文字輸入

browser.find_element(By.ID, 'kw').send_keys('selenium') 


    
        1

點擊

browser.find_element(By.ID, 'kw').click() 


    
        1

點擊并按住不放（左鍵長按），這些模擬鼠標操作需要導入ActionChains包

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') act.click_and_hold(ele).perform() 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

右鍵點擊

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') act.context_click(ele).perform() 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

雙擊

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') act.double_click(ele).perform() 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

拖拽元素至另一個元素處，ele_a 為source，ele_b 為target

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele_a = browser.find_element(By.ID, 'btn_a') ele_b = browser.find_element(By.ID, 'btn_b') act.drag_and_drop(ele_a, ele_b).perform() 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12

拖拽元素至指定位置后松開，元素后為x，y坐標值

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'btn_a') act.drag_and_drop_by_offset(ele, 200, 100).perform() 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12

鼠標移動至指定元素

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'btn_a') act.move_to_element(ele).perform() 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12

按下指定的鍵位（示例代碼中是回車鍵）

from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.key_down(Keys.ENTER).perform() 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12

松開指定的鍵位，這里也可以用鏈式寫法

from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.key_down(Keys.ENTER) act.key_up(Keys.ENTER) # 鏈式寫法 act.key_down(Keys.ENTER).act.key_up(Keys.ENTER).perform() 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15

移動鼠標到指定坐標位置

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.move_by_offset(100, 200).perform() 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

移動到距離指定元素多少距離的位置（從左上角0， 0開始計算）

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.move_to_element_with_offset(ele, 100, 200).perform() 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

在指定元素位置松開鼠標

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.click_and_hold(ele).release(ele).perform() 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

發送指定的鍵或者內容至指定元素

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.send_keys_to_element(ele, 'selenium').perform() 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

暫停所有操作，默認單位為秒

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.context_click(ele).pause(5).double_click(ele).perform() 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

5.8 組件操作

頁面中也存在著很多不同種類的組件，比如單選框、多選框、下拉列表、選項卡等。這些操作也可以通過selenium提供的函數進行實現。

清除指定元素中的內容（輸入框等）

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') ele.send_keys('selenium') sleep(2) ele.clear() 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14

提交確認（類似于Keys.ENTER的效果）

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') ele.send_keys('selenium') sleep(2) ele.submit() 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14

下拉列表，我們就可以使用Select方法來實現選取操作
使用Select方法需要從selenium.webdriver.support.select導入該方法
例如下圖中某網站的下拉列表對象

在這里插入圖片描述

html構造如下
在這里插入圖片描述

select_by_index()方法

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.select import Select

browser = webdriver.Chrome() browser.get('https://www.xxxx.com') ele = browser.find_element(By.ID, 'input_factor_gj_count') # 需要注意下標要從0開始，選擇1%那一項 Select(ele).select_by_index('0') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

select_by_value()方法

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.select import Select

browser = webdriver.Chrome() browser.get('https://www.xxxx.com') ele = browser.find_element(By.ID, 'input_factor_gj_count') # 指定元素的value屬性值，選擇1%那一項 Select(ele).select_by_value('0.01') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

select_by_value()方法

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.select import Select

browser = webdriver.Chrome() browser.get('https://www.xxxx.com') ele = browser.find_element(By.ID, 'input_factor_gj_count') # 指定元素的文本值，選擇1%那一項 Select(ele).select_by_visible_text('1%') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

框架切換（Frame）
如果在頁面中定位某一個元素失敗并檢查其屬性并沒有問題時，就該考慮是否在祖先節點中是否存在frame或者iframe標簽。這樣的頁面就表名存在多層框架嵌套，這時我們就需要進行框架切換的操作，來準確定位到指定元素。

例如某頁面存在兩層frame嵌套，內部框架的xpath為：//*[@id="mainDiv"]/iframe，此時如果定位某個輸入框失敗之后，我們就應該轉而跳入該frame內進行元素定位。

from selenium import webdriver from selenium.webdriver.common.by import By

browser = webdriver.Chrome() browser.get('https://www.xxxx.com') # 定位到指定的frame path = browser.find_element(By.XPATH, '//*[@id="mainDiv"]/iframe') # 切換至該frame內 browser.switch_to_frame(path) ele = browser.find_element(By.CLASS_NAME, 'input') ele.send_keys('selenium') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13

標簽頁切換
我們瀏覽器在使用中一般會打開多個瀏覽窗口，也就是多個標簽頁。此時我們就可以通過每個標簽頁的句柄來進行定位和互相切換。

switch_to_window()
我們利用瀏覽器窗口的句柄來進行標簽頁的切換

from selenium import webdriver from selenium.webdriver.common.by import By

browser = webdriver.Chrome() browser.get('https://www.baidu.com') # 第一個窗口的句柄下標為0，打開第二個就是1 browser.switch_to_window(browser.window_handles[1]) # 此時就會使用第二個標簽頁去訪問淘寶 browser.get('https://www.taobao.com') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

彈窗處理
頁面中時常也存在著各類的彈窗，比如警告、確認、提示等等，那么對于這些彈窗我們也有著相應的業務處理方法。

首先我們需要明確的是每種類型的彈窗中元素也是各不相同，所以我們針對不同的彈窗使用不同的屬性來定位和操作。

警告彈窗
一般來說就是告知到使用者執行某些操作與頁面之后將要注意的事項，這種窗口只需確認。

from time import sleep from selenium import webdriver from selenium.webdriver.common.by import By

browser = webdriver.Chrome() browser.get('https://www.xxxx.com') browser.find_element(By.ID, 'btn_tg_title').click() sleep(1) # 在警告彈窗中點擊確認按鈕 browser.switch_to_alert().accept() 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

確認彈窗
多用于在用戶執行提交操作后的動作確認，有確認和取消兩個選項。

from time import sleep from selenium import webdriver from selenium.webdriver.common.by import By

browser = webdriver.Chrome() browser.get('https://www.xxxx.com') browser.find_element(By.ID, 'btn_submit').click() sleep(1) #確認二選一 browser.switch_to_alert().accept() #取消二選一 browser.switch_to_alert().dismiss() 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13

提示彈窗
這個通常用來處理用戶信息交互的場景，用戶可以通過彈窗輸入一些文字信息，來傳遞與進行后續的業務處理。

from time import sleep from selenium import webdriver from selenium.webdriver.common.by import By

browser = webdriver.Chrome() browser.get('https://www.xxxx.com') browser.find_element(By.ID, 'btn_info_inquiry').click() sleep(1) #　這里傳遞信息到提示彈窗，警告與確認兩類彈窗不可使用，會報錯 browser.switch_to_alert().send_keys('20100909') 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

5.9 鑒權操作

既然是web自動化測試，那我們又怎么能少了Cookie的相關操作呢？用戶的狀態和業務請求都的需要用他來進行鑒權。在selenium中對Cookie進行操作其實也很簡單，首先我們需要手動的登錄被測網站一次，待網站Cookie存入本地后即可使用Selenium自帶的函數對齊進行業務操作。

首先我們獲取對應網站的Cookie值

import json from selenium import webdriver

browser = webdriver.Chrome() browser.get('https://www.baidu.com') # 寫入保存為文件還是直接打印至控制臺，各取所需 with open('cookies.txt', 'w') as f: f.write(json.dumps(browser.get_cookies())) cookies = browser.get_cookies() print(cookies) 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13

接下來我們簡單的對獲得的Cookie進行處理

# 刪除所有的cookies browser.delete_all_cookies() # 循環打印cookie中的name和value for c in cookies: # 查看打印出的cookie對應的鍵值對 print("%s : %s" % (c['name'], c['value'])) # 根據自己的業務需求進行cookie的增刪改 cookie = {"name": "xxxx", "value": "xxxx"} # 最后添加即可 driver.add_cookie(cookie) 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

5.9 js操作

Selenium也為我們提供了可執行js腳本相關的函數，他們的作用是在某些頁面中模擬一些業務動作（畫面滑動，選擇日期等）。在一些僅靠webdriver無法實現的業務場景中，我們就可以依靠此函數來輔助測試目的的達成。

js的查找元素方法(ID)

document.getElementById("id") 


    
        1

js的查找元素方法(name)

document.getElementsByName('name') 


    
        1

js的查找元素方法(class)

document.getElementsByClassName("class_name") 


    
        1

js的查找元素方法(tag)

document.getElementsByTagName('tag_name') 


    
        1

js的查找元素方法(css)

document.querySelector("css selector") 


    
        1

js的查找元素方法(css_list)

document.querySelectorAll("css selector") 


    
        1

execute_script()
從上可以看出其實js的定位元素方法和selenium中的差不多，接下來我們就可以將需要執行的js語句放入到執行函數中使用。

from selenium import webdriver

browser = webdriver.Chrome() browser.get('https://www.baidu.com') # 定位后修改指定元素的value屬性 js_script_exec = 'document.getElementById("form_motion").value="list_modify";' browser.execute_script(js_script_exec) 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8

6. 注意點與小技巧

對于某些動態div標簽（窗口），一般的方法不太奏效的情況下，可以嘗試下switch_to_default_content()方法，跳轉到最外層；
使用模擬鍵鼠操作的時候，無論是單獨使用還是鏈式寫法，記得在結尾加上perform()方法進行執行；
如果元素定位時報錯element click intercepted，記得檢查界面上是否有其他元素進行覆蓋，元素有可能也是具有隱藏屬性的；
元素過期報錯element is not attached to the page document，可以嘗試重新刷新頁面，這里不推薦直接使用refresh方法，還是養成好習慣先懟上try…except…捕捉到異常后在進行刷新或重置操作；
對于屬性值為動態的元素，墻裂推薦使用CSS selector或者xpath方法來進行元素定位，正則表達式也推薦大家最好能掌握；
如果前期對xpath的相對路徑寫法比較頭疼，推薦使用F12調試工具自帶的元素復制功能，在你想要復制的元素所在的標簽對這行右鍵，選擇copy —— Copy XPath選項即可；
輸入框默認存在內容想要刪除再輸入信息的話，不推薦模擬鍵盤操作Ctrl+A，然后模擬退格鍵，試試clear()方法吧；
抓不到元素可以使用延時方法，輸入文字也是一樣的道理，業務場景中需要大量輸入文字的，無論是從文件中還是提取又或者是遍歷，出現少字漏字的話，同樣也可以使用延時的方法，適當的放慢處理的速度；
在頁面中總會有些不可見的元素，這種情況使用is_displayed()方法即可快速定位找到；
有些被測頁面需要驗證碼，無論是手機的還是圖片驗證，和開發同學溝通一下，留個萬能的就行了，其本身的功能手工回歸一下即可，不必太過糾結；
三方登錄功能也是如此，不推薦直接使用web自動化去搞，三方的一般是不開源的，有這折騰的時間還不如跑跑接口和黑盒，自動化的話繞過去即可；
自動化測試用例這塊的話博主還是推薦不要有依賴，和功能測試用例同理，每次的執行順序或者數量都會根據需求與業務場景發生變化，一旦依賴了會大大增加測試同學的維護成本，后面有空我會單獨出一期自動化測試用例的文章來為大家介紹。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

評論(0) 瀏覽(1765)

152023-2

2023年前端開發趨勢未來可期

目錄

一、企業內前端開發比重

1、目前學校教課的種類多樣

2、目前服務端語言多樣

3、企業中前端開發占比

二、目前業內更受歡迎的開發語言

1、過去一直到今年的開發語言排名

2、那么未來呢

三、近期CSDN問答的前端活躍度

1、近期CSDN問答模塊活躍度

2、活躍度能說明什么

四、前端開發都做什么？

1、這個問題需要想嗎？

2、日常工作是什么？

3、還做什么？

4、想想，還能做什么？

5、有點理想好不好

五、給初學者的建議

1、堅定信心

2、是否要去培訓機構

3、學習之余的鞏固

4、贏在實戰

5、知識點的舉一反三

一、企業內前端開發比重

1、目前學校教課的種類多樣

搞明白前端開發人員在企業中的占比，你才可以在學校或者即將畢業的時候選擇出自己將要深入學習的開發語言。很多學校既要教C語言，又教單片機，既教java，也教前端開發知識，但老師的課是有限的，給留了作業，也許都不檢查，下一課老師就要繼續往下講，因為這是他的工作，老師們也有生活，不可能圍著某些人轉，學不會就不往下開課了。

而搞懂前端開發在企業中的占比呢，能夠更好的讓你覺得如果自己比較平凡，得到什么等級可以卷得過別人，可以在這么多職位中占有一席之地。

2、目前服務端語言多樣

很可喜的是，目前傳統行業已經信息化改造完成，不管他們是內部系統，或者外部聯合系統，都需要前端開發；我們每天看見大街上跑的汽車企業，某些電子企業，手機廠商，都需要前端開發的職位；更別提電商，直播這些我們生活所不可缺少的行業。但你還需要知道的是，如果你想學的一門服務端語言，java phython .net 或者其他，很可能這家公司就不會用，無形中給自己減少了很多工作機會。

3、企業中前端開發占比

以上的圖，是從過去幾年一直到今年（2022）年的各大公司的占比，畢竟是大廠嘛，對用戶體驗，前端接觸到瀏覽器，最接近用戶的要求肯定會高一些。

但是通過對多家中小公司的逐步了解發現，出去UI , 項目，產品，DBA，運維等職位外，服務端開發與前端開發的比例幾乎是1:1 ，甚至有的外包性質的公司，他們一旦產品成型后，新的客戶換皮膚，更換界面的需求會更多，所以前端開發會需求更多一些。

二、目前業內更受歡迎的開發語言

此前有人戲稱，是開發語言受歡迎，并非你受歡迎。但不得不說，某個開發語言受歡迎程度如果更加靠前，說明市場需求更大，更受歡迎，而將來準備從事某一種開發語言，也是非常關鍵的信息來源。

1、過去一直到今年的開發語言排名

通過以上往年到今年的開發語言受歡迎程度發現，javascript這門前端必備的開發語言名列前茅，甚至在眾多服務端開發語言中也不甘示弱，當然這之中并沒有表明HTML CSS是一門開發語言，如果是的話，HTML CSS 也必將榜上有名，因為各行各業都不要網頁對外公式自己的產品，但服務端開發語言五花八門，而前端必備javascript。

2、那么未來呢

從web1.0時代，頁面簡單的只讀時代，到web2.0時代，不斷的交互，前端開發這個職位也在不斷的進步。那么在未來的web3.0時代，很多人疑惑，可能PC的網頁用處會越來越少，甚至不客氣的說H5的頁面也會少很多，據推測APP也會減少，未來將會有更多的數據整合產品出現。那么未來前端還會大有可為嗎？

答案是肯定的，偉大的《紅寶書》開頭便說：javascript能做所有的事情，如果他能。而且nodejs的流行，也使前端可以更多的滲透到服務端開發，flutter的最新發布，WPA的使用，也使APP得到了更大的挑戰，CSS3的不斷進步，前端游戲引擎的盛行，也使前端有了更大的發展前景與選擇，那么即便未來的元宇宙世界，相信前端javascript也一定能夠勇往直前

三、近期CSDN問答的前端活躍度

1、近期CSDN問答模塊活躍度

如果這只是當下技術領域的一個縮影，可見比較活躍的的開發語言有java phython c mysql 然后才是javascript。從開發開發技術職位區分還是服務端和前端，但前端活躍度卻比較靠后，不管是提問，回答，數量等維度上

2、活躍度能說明什么

說明什么問題呢？從事前端開發人數少嗎？前端開發在學習，工作中沒有問題嗎？前端開發比較懶惰，不愿意上社區來參與活動嗎？

我們知道nodejs可以做服務端開發，但是有多少企業敢于讓從開始就搭上node serve的架子，不斷讓前端同學去嘗試，不斷在node領域發光發熱，為整個行業添磚加瓦呢，很少吧。而幾乎大部分公司，還是比較守舊的，從最開始的jSP時代，甚至不需要前端，服務端寫完服務端代碼，然后開始寫JSP。JSP里再套java代碼，順帶著添加一些javascript事件，樣式怎么辦，那個時候extjs jquery還非常盛行，easyui jqueryui 等，可以讓服務端開發人員快速生產頁面。

但隨著提升用戶體驗的欲望越來越強烈，《國富論》開篇也講分工帶來的好處，前端才逐漸有了一席之地，甚至在一些大公司，前端的話語權可以超越服務端，他們通過技術驅動業務向前。

按照比例學可知，一旦某些事物達到一個數量后，某些細節世界也可以大體展現整體的宏觀判斷。那么我的理解是，在眾多開發語言中，盡管javascript那么受歡迎，目前企業中前端占比還算不錯，但總的來說，跟其他服務端開發語言總和來比，前端人員還是少。如果服務端語言像前端一樣僅有javascript的話，我相信csdn問答模塊這個業界縮影將不會是這種狀態，甚至會大有不同。

四、前端開發都做什么？

1、這個問題需要想嗎？

其實很多老師，很多培訓機構的老師教前端，大家各有各自的工作，各有各自的生活，他知道來了一批學生，這是自己分內的工作，其實很多學生也只是停留在前端開發做網頁的意識上，未來我想找到一份共走，可以養活自己。這無可厚非

2、日常工作是什么？

其實日產工作還真就是做網頁，做了C端做B端，做了PC做H5，嵌套到webview里，嵌套的APP的殼子里，這些都是工作。

小程序，各種各樣的小程序；各種手機屏幕尺寸的適配；各種APP內部的嵌套；

做完了前端，開發點node層的工作吧，卷一卷，棒服務端同學減輕點工作壓力；

3、還做什么？

再來點代碼優化吧，如果將自己的代碼調的代碼量更少，如何不寫注釋也可以清晰明了，如何不得不寫注釋，可以寫的更清楚；

來一點性能優化吧，現在出去面試，沒做過性能優化都不好意思說自己做過工作。沒辦法，整體的需求纏身，但你卻很少從中吸取知識，日復一日，到找工作那天發現，自己做的工作，其實都是勞動力。如何驅動自己，再尋求解決方案，再將性能指標不斷提升。

4、想想，還能做什么？

卷一卷，讀書破萬卷。將自己的點子，自己的做法不斷形成方法論，對內輸出，乃至對外輸出，提升影響力。

5、有點理想好不好

還要啥理想，向公共組件團隊滲透，向技術棧所在團隊滲透？

小插曲：這里加一個小插曲，promise解決了什么問題？這道題是不是必考題，千篇一律的答案是什么？解決了回調地獄？異步的工作我們當同步的來執行？

這算不算進步？這算不算創新？那么我就問問你，有回調地獄你的項目跑步起來了？用同步的寫法來搞異步的事情降本增效了？

那么我就問問你，是你把之前的寫法用上現在的promise節省的時間多，還是你每天摸魚的時間多。說白了異步是一個需要花費時間的事情，因為有了異步，有了時間差，才使我們的工作出現了更多的可能性，不確定性。你更應該解決的是不是這個問題。

個人觀點啊，沒說promise不好，挺好的。

五、給初學者的建議

1、堅定信心

不管是在?；蛘呙悦５募磳㈦x校，一旦決定要學，不管是學哪種開發語言，都要堅定信心，切記不可三天打魚，兩天曬網；

2、是否要去培訓機構

這要看個人家庭的生活水平，一個家庭攻讀出一個大學生實屬不易，畢業后念培訓班需要一定的資本支持。但對于很多人來說，沒有學習方向，念培訓班也是個選擇，至少可以入個門；但大部分的培訓課程對于目前的就業形勢掌握不足，就像楊過剛去鐘南山一樣，練不夠基本功，詞匯一大堆，實戰沒多少，最后說啥名詞都是666，一干活就撓頭；

其實我根據自己的經驗，也在籌備規劃一套更卷，更適合入門到守門再到卸門的課程，我的目標就是更實用，更卷，更有助于大多數想學習的同學們，你需要的只是一句：我想學習，我要學習，我能學習，而不是馬內。

3、學習之余的鞏固

現在網絡上文章多的是，雖然很多不夠系統，但正好夠大家鞏固當日知識點所用。學一定要用，用后一定要鞏固，鞏固后一定要舉一反三形成自己的知識點，方法論，記錄個博客啦，筆記啦，分享到身邊的人，這樣足可鞏固無憂

4、贏在實戰

知識點掌握的好不叫好，可以把知識點貫穿起來，做出一個市面上的東西，這算超越自我，切記不可自滿，學完知識點就說自己精通，那只會在面試或者在工作的時候讓自己更加煩惱，掉頭發，熬夜。

5、知識點的舉一反三

做為初級開發，最重要的就是對于解決問題，有自己的一套手段，這樣至少可以保證快速的完成需求。但如果想繼續往上走，必須得有一些別人所沒有的東西。這里說到舉一反三，記得當時學習的時候，學完js基礎需要寫一個99乘法表，當時本來上課就少，硬生生把js的嵌套循環99乘法表寫出來。晚上睡覺的時候想，如果純用HTML CSS 是不是也能寫出來，就這樣，HTML的倒是好寫，但CSS的又憋了很久，總算是寫出來了。你就說，這樣下去，誰能有我卷?，F在我總結出了怎么利用純HTML CSS JS 寫出3版99乘法表，并且總結出了自己的文章，希望可以讓初學者能夠更快的入門。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

評論(0) 瀏覽(1394)

142023-2

是什么讓學習 Web 開發在未來幾年變得有價值？

什么是網頁開發？

Web 開發是指在互聯網上創建網站或 Web 應用程序。它涉及一系列任務，從開發網站的整體結構和設計到編寫使網站栩栩如生的代碼。Web 開發可能是一個復雜的過程，它通常涉及使用各種不同的技術，包括 HTML、CSS 和 JavaScript，以及服務器端語言，如 PHP、Ruby、Nodejs 和 Python。Web 開發人員可能在前端工作網站的一部分，這是用戶與之交互的部分，或者在后端，這是處理網站幕后功能的部分。Web 開發是一個快速發展的領域，Web 開發人員需要跟上最新的技術和最佳實踐，才能創建有效且引人入勝的網站和 Web 應用程序。

在這里插入圖片描述

Web 開發領域的未來是什么樣的？

可以肯定地說，Web 開發將繼續是一個重要且充滿活力的領域。隨著 Internet 的不斷發展和演變，對 Web 開發人員的需求也可能會增加。Web 開發中使用的技術和工具也將繼續發展和改進，這將使 Web 開發人員能夠創建更先進、更復雜的網站和應用程序。此外，人工智能、虛擬現實和增強現實以及物聯網等新技術的興起可能會為網絡開發人員帶來新的機遇和挑戰。Web 開發的未來看起來一片光明，對于那些對技術充滿熱情的人來說，它將繼續是一個令人興奮和有益的領域。

現在是成為 Web 開發人員的好時機嗎？

Web 開發是一個快速發展和動態的領域，由于 Web 應用程序開發的復雜性和多樣性不斷增加，因此對 Web 開發人員的需求量很大。

Web 開發人員有什么好的工作機會嗎？答案是肯定的?；ヂ摼W改變了我們的生活方式。如果您想加入一個令人興奮的新行業來開發新技術，我們建議您這樣做并成為一名網絡開發人員。該技術不僅“防 covid”，而且相對抗衰退。

人們每天都越來越多地參與網絡，并使用他們的智能手機和平板電腦訪問互聯網，因此對于網絡開發人員來說，創建針對這些智能設備優化的網站和網絡應用程序非常重要。

對于網站和應用程序而言，提供用戶會喜歡的令人難忘的用戶體驗將變得更加重要。具有提供引人入勝的用戶體驗天賦的開發人員應該研究這些趨勢帶來的機會。

總之，每項 Web 技術的背后都有一支經驗豐富、才華橫溢的開發人員團隊，他們負責更新、開發和維護它。技術每天都在發展，因此有才華的 Web 開發人員始終可用并存在非常重要。

在這里插入圖片描述

網頁設計和網頁開發有何不同？

網頁開發和網頁設計是兩個經?；煜莫毩㈩I域。雖然它們是相關的，但它們是具有不同重點和目標的不同學科。

網頁設計側重于網站的美學和功能方面，涉及用戶界面和用戶體驗的規劃和創建。網頁設計師負責網站的布局、配色方案和整體外觀，以及網站的導航和用戶流程。

另一方面，Web 開發側重于構建網站的技術方面。這包括編寫代碼來創建網站的各種組件，例如前端和后端，并將它們集成以創建功能強大且可用的網站。Web 開發人員負責網站的實施和維護，并且可能會使用各種編程技能和框架來實現。

Web 開發人員是專門開發可通過 Web 瀏覽器訪問 Internet 的應用程序和服務的程序員。Web 開發人員使用各種技術和語言（例如 HTML、CSS 和 JavaScript）來創建網站或 Web 應用程序的結構、布局和設計。

Web 開發人員負責構建和維護 Web 應用程序的各種組件，包括用戶界面、服務器端邏輯和數據庫。他們還可能負責將 Web 應用程序與其他系統和 API 集成，并負責實現增強用戶體驗的特性和功能。

總之，網頁設計關注網站的視覺和面向用戶的方面，而網頁開發則關注網站的技術實現和功能。

在這里插入圖片描述

網絡開發人員做什么的？

前端網頁開發

前端開發人員是專門從事 Web 開發客戶端的 Web 開發人員。他們負責構建和維護 Web 應用程序的用戶界面和用戶體驗，包括布局、設計和交互性。

前端開發人員通常精通前端技術和語言，例如 HTML、CSS 和 JavaScript。他們負責實施 Web 應用程序的視覺設計，包括布局、排版和配色方案。他們還可能負責實現交互元素，例如按鈕、表單和菜單，以及將 Web 應用程序與后端系統和 API 集成。

除了技術技能，前端開發人員還需要對用戶體驗和設計原則有深刻的理解。他們應該能夠創建直觀、用戶友好且美觀的 Web 應用程序。

前端開發是 Web 開發的重要組成部分，前端開發人員在創建 Web 應用程序的外觀方面發揮著關鍵作用。

后端網頁開發

后端開發人員是專門從事 Web 開發服務器端的 Web 開發人員。他們負責構建和維護 Web 應用程序的底層邏輯和基礎設施，包括服務器端邏輯、數據庫和 API。

后端開發人員通常具有服務器端語言和技術方面的專業知識，例如 PHP、Python、Ruby 和 Node.js。他們負責實現 Web 應用程序的服務器端邏輯，包括業務規則、數據驗證和用戶身份驗證。他們還可能負責設計和實施數據庫模式，以及將 Web 應用程序與其他系統和 API 集成。

除了技術技能，后端開發人員還需要具備強大的問題解決、溝通和協作能力。他們應該能夠批判性和邏輯性地思考，并能夠設計和實施可擴展、可維護且高效的解決方案。

后端開發是 Web 開發的重要組成部分，后端開發人員在構建和維護 Web 應用程序的功能和性能方面發揮著關鍵作用。

全棧網頁開發

全棧開發人員是在前端和后端開發方面都具有專業知識的 Web 開發人員。他們負責構建和維護整個 Web 應用程序，從用戶界面和用戶體驗到底層服務器端邏輯和數據庫。

全棧開發人員通常對用于構建 Web 應用程序的技術和語言有深入的了解，包括 HTML、CSS、JavaScript 和服務器端語言（如 PHP、Python 和 Ruby）。他們能夠處理 Web 應用程序的所有層，從用戶界面和用戶體驗到數據庫和服務器端邏輯。

除了技術技能，全棧開發人員還需要具備強大的問題解決、溝通和協作能力。他們應該能夠創造性和批判性地思考，并能夠適應不斷變化的技術和要求。

全棧開發是一個充滿挑戰和回報的領域，由于 Web 應用程序的復雜性和多樣性不斷增加，對全棧開發人員的需求量很大。

站長

網站管理員負責構建、維護和更新網站。他們還可能負責將網站與其他系統或云服務集成，例如數據庫和內容管理系統 (CMS)，以及實施增強用戶體驗的特性和功能。

網站管理員通常與開發團隊的其他成員（包括圖形設計師、內容創建者和項目經理）密切合作，以創建和維護滿足企業或組織需求的網站。他們還可以與客戶合作以了解他們的要求并提供滿足他們需求的解決方案。

從哪里開始，第一步是什么？

如果你是 Web 開發的新手并且想知道從哪里開始以及第一步是什么，這里有一些建議：

學習 HTML 和 CSS 等 Web 開發基礎知識——這些是 Web 的核心技術，良好的這些語言基礎對于任何 Web 開發人員來說都是必不可少的。您可以從學習 HTML 和 CSS 的基礎知識開始，例如網頁的結構、如何添加內容和樣式以及如何創建簡單的靜態網頁。

選擇開發環境——開發環境是一組用于構建和測試 Web 應用程序的工具和資源。這通常包括用于編寫代碼的文本編輯器或集成開發環境 (IDE)、用于測試網頁的 Web 瀏覽器以及用于運行 Web 應用程序的本地 Web 服務器。帶有大量插件的 vscode 編輯器肯定需要引起您的注意。

構建一個簡單的網頁——學習了 HTML 和 CSS 的基礎知識后，嘗試構建一個包含一些文本、圖像和基本樣式的簡單網頁。這將使您有機會練習所學的技能，并了解不同技術如何協同工作。然后更進一步，開始復制一些最流行的網絡應用程序，然后 memic 嘗試重新創建它，我指的只是這里的設計。

探索 Web 開發框架和庫– 有許多可用的 Web 開發框架和庫可以更輕松地構建 Web 應用程序。一些流行的選項包括 React、Angular、Vue.js 和 Django。一旦你確定了一個框架，立即開始學習它并堅持下去直到你掌握它。

在這里插入圖片描述

學習基礎知識

HTML或超文本標記語言是一種用于創建和構建網頁內容的編程語言。HTML使用一系列元素或標簽來定義網頁的結構和布局，包括標題、段落、列表和鏈接。HTML 還允許開發人員向網頁添加圖像、視頻和其他多媒體內容，使其成為構建 Web 應用程序的強大且通用的語言。

定義帶有標題、段落和圖像的簡單網頁的 HTML 代碼：

<!DOCTYPE html> <html> <head> <title>我的 Web 頁面</title> </head> <body> <h1>Hello, World!</h1> <p>這是我的第一個 Web 頁面</p> <img src="https://www.example.com/image.jpg" alt="A beautiful landscape"> </body> </html> 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

在此示例中，<html>和<body>標簽定義了網頁的結構，而<h1>、<p>和<img>標簽定義了頁面的內容。<img>標簽的src屬性指定要顯示的圖像的 URL，而alt屬性為無法看到圖像的用戶提供圖像的文本描述。所以你需要了解 HTML 標簽和它們的屬性。

CSS或層疊樣式表是一種樣式表語言，用于描述以標記語言編寫的文檔的外觀和格式。在 Web 開發環境中，CSS 用于控制以 HTML 或其他標記語言編寫的網頁的外觀和布局。CSS 允許開發人員為網頁上的內容定義顏色、字體、大小和其他樣式，使其成為構建現代響應式 Web 應用程序的重要組成部分。

可用于設置上述網頁內容樣式的 CSS 代碼：

body { font-family: Arial, sans-serif; background-color: #f1f1f1; } h1 { color: #333; text-align: center; margin: 30px 0; } p { color: #777; font-size: 18px; line-height: 1.5; padding: 0 20px; } img { width: 100%; height: auto; } 

    




    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22

在此示例中，body選擇器將樣式應用于網頁的<body>元素， h1選擇器將樣式應用于所有<h1>元素，p和img選擇器將樣式應用于所有<p>和<img>元素，分別。此 CSS 代碼中定義的樣式指定頁面及其元素的字體系列、背景顏色、文本對齊方式和其他屬性。顯示此示例演示了選擇 HTML 元素的重要性以及需要使用哪些屬性來設置它的樣式。因此，了解所有類型的選擇器以及它們需要的屬性。

你可以使用 CSS 框架讓您的生活更輕松。最受歡迎的是Bootstrap和Tailwind CSS，它們都是用于構建響應式、移動優先的 Web 應用程序的前端框架。這兩個框架都提供了一組預定義的 CSS 類和組件，可以輕松地將它們合并到網頁中，以創建一致的、具有專業外觀的設計。Bootstrap 和 Tailwind CSS 是構建現代響應式 Web 應用程序的強大工具。這兩個框架之間的選擇將取決于您的個人喜好和項目的具體需求。

最流行的框架

有許多不同的框架可用于 Web 開發，每個框架的流行程度取決于項目的具體需求以及開發人員、團隊或公司的偏好。一些最流行的 Web 開發框架包括：

React： React 是用于構建用戶界面的最多的javascript 框架之一。許多公司都在使用它，并且擁有龐大的開發人員社區。

Angular： Angular 是一個基于 TypeScript 的開源 Web 應用程序框架，由 Google 的 Angular 團隊以及個人和公司社區領導。

Vue.js： Vue.js 是一個用于構建用戶界面的漸進式 JavaScript 框架。它旨在逐步采用并可以集成到現有項目中。

Ember.js： Ember.js 是一個用于構建大型 Web 應用程序的開源 JavaScript Web 框架。它以其約定優于配置方法和強調開發人員生產力而聞名。

10 種最流行的 Web 開發編程語言

以下編程語言列表可幫助您了解在成為 Web 開發人員的過程中您想要學習和追求的語言。大多數時候，選擇將取決于您選擇的框架或其他方式：

JavaScript——讓我們從顯而易見的最流行的 Web 開發編程語言開始，它是 JavaScript，它是一種用于構建前端 Web 應用程序的通用語言。它是一種客戶端語言，這意味著它在用戶的網絡瀏覽器中運行，并允許開發人員創建交互式和動態網頁。JavaScript 還通過 Node.js 等技術用于服務器端開發，它允許開發人員構建可擴展的高性能 Web 應用程序。

Python – Python 是一種高級解釋型編程語言，廣泛用于 Web 開發。它具有簡單易學的語法，是初學者的絕佳選擇。Python 還以其強大的庫和框架而聞名，例如 Flask 和 Django，這使得快速構建復雜的 Web 應用程序變得容易。

Java – Java 是一種流行的面向對象的編程語言，廣泛用于構建可擴展的高性能 Web 應用程序。它是一種通用語言，可用于為各種平臺（包括桌面、移動和 Web）構建 Web 應用程序。

Ruby – Ruby 是一種高級解釋型編程語言，通常用于 Web 開發。它以簡單和優雅著稱，使其成為想要快速輕松地構建 Web 應用程序的開發人員的熱門選擇。

PHP – PHP 是一種流行的腳本語言，廣泛用于構建動態網站和 Web 應用程序。它是一種服務器端語言，這意味著它在網絡服務器上運行并生成發送到用戶網絡瀏覽器的 HTML 頁面。

C# – C# 是一種流行的面向對象的編程語言，通常用于構建 Web 應用程序。它是一種通用語言，可用于為各種平臺（包括桌面、移動和 Web）構建 Web 應用程序。

Swift – Swift 是一種現代的編譯型編程語言，通常用于構建 Web 應用程序。它是一種功能強大的語言，以其安全性和性能著稱，使其成為構建需要處理大量數據或執行復雜計算的 Web 應用程序的絕佳選擇。

Go – Go 是一種現代的編譯型編程語言，通常用于構建 Web 應用程序。它是一種快速、高效的語言，以并發性和可擴展性著稱，使其成為構建需要處理大量流量或數據的 Web 應用程序的絕佳選擇。

TypeScript – TypeScript 是一種流行的類型化編程語言，通常用于構建大型、復雜的 Web 應用程序。它是 JavaScript 的超集，這意味著它包含 JavaScript 的所有功能，以及可以更輕松地構建大型、可維護的 Web 應用程序的附加功能。

Kotlin – Kotlin 是一種現代的編譯型編程語言，通常用于構建 Web 應用程序。它是一種簡潔、強大的語言，以其安全性和與 Java 的互操作性而著稱，使其成為構建需要與現有 Java 代碼集成的 Web 應用程序的絕佳選擇。

Web開發是一個好職業嗎？

追求網絡開發職業道路可能是一個不錯的選擇，原因有很多。Web 開發職業的一些好處包括：

對 Web 開發人員的高需求：對 Web 開發人員的需求一直很高，并且預計在未來幾年將繼續增長。這意味著那些擁有技能和經驗的人將有很多機會在這個領域取得成功。

高薪： Web 開發人員的薪水很高，薪水因經驗、地點和其他因素而異?？偟膩碚f，Web 開發人員可以期望獲得豐厚的薪水，并且成長和進步的潛力很大。

靈活性： Web 開發可以在工作地點和日程安排方面提供很大的靈活性。許多 Web 開發人員遠程工作，并且能夠設置自己的時間并按照靈活的時間表工作。

學習和成長的機會： Web 開發是一個不斷變化的領域，新技術和工具不斷涌現。這意味著作為 Web 開發人員，始終有學習和成長的機會，并保持在行業的前沿。

創造有形事物的滿足感：作為一名 Web 開發人員，您將有機會創造有形且有用的事物。這可以令人難以置信地滿足，并且可以為您的工作提供成就感和自豪感。

Web開發的未來范圍

Web 開發的未來看起來一片光明，許多激動人心的發展和趨勢即將出現。一些可能影響 Web 開發未來的最新 Web 開發趨勢包括：

人工智能和機器學習的興起：人工智能和機器學習在網絡開發中變得越來越重要，出現了許多新的工具和框架來幫助開發人員構建人工智能驅動的應用程序。
物聯網的發展：物聯網 (IoT) 是一個由可以收集和共享數據的連接設備組成的網絡，預計在未來幾年將顯著增長。這將為網絡開發人員創造新的機會來構建可以連接這些設備并與之交互的應用程序。
移動設備的重要性日益增加：隨著越來越多的人使用智能手機和其他移動設備訪問網絡，網絡開發人員創建適合移動設備的應用程序和網站將變得越來越重要。
漸進式 Web 應用程序的興起：漸進式 Web 應用程序 (PWA) 是外觀和感覺都像本機移動應用程序的 Web 應用程序，并且有望在未來變得更加流行。這將為 Web 開發人員創造新的機會來構建可跨不同設備和平臺提供無縫用戶體驗的 PWA。
云計算的發展：云計算在網絡開發中變得越來越重要，許多公司將他們的應用程序和數據轉移到云中。這將為 Web 開發人員創造新的機會來構建云原生應用程序并將它們與現有的云服務集成。

結論：

Web 開發仍然值得學習，因為它是構建和維護作為現代 Internet 支柱的網站和 Web 應用程序的基本技能。隨著世界變得越來越緊密，對 Web 開發人員的需求不斷增長，對于那些擁有構建和維護未來 Web 應用程序的技能和專業知識的人來說，有許多激動人心的機會。

Web 開發也是一個回報豐厚且具有挑戰性的領域，它允許開發人員利用他們的創造力和解決問題的技能來構建供全球數百萬人使用的應用程序。有了合適的工具和資源，任何人都可以學習 Web 開發并開始構建自己的 Web 應用程序，從而打開一個充滿可能性和機遇的世界。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

評論(0) 瀏覽(1227)

142023-2

Vue.js 狀態管理：Pinia 與 Vuex

錄

Vuex 和 Pinia 是用于管理 Vue.js 應用程序狀態的標準 Vue.js 庫。讓我們比較一下他們的代碼、語言、功能和社區支持。

如果沒有合適的庫，開發人員管理應用程序的狀態可能會很困難。Vuex 和 Pinia 是標準的 Vue.js 庫，用于處理應用程序中的條件。這兩個庫都非常適合狀態管理，但是由于它們出色的特性和功能，選擇哪個庫用于你的項目需要時間并且令人沮喪。好吧，我們將在本文中看看為什么一個是最好的。

在本文中，我們將通過實際代碼示例查看代碼比較、它們的變體、功能，以及推薦使用哪一個來管理你的狀態應用程序，以便更好地理解。我們還將考慮每個產品的語言、功能和社區支持。

Pinia 和 Vuex 簡介

我將簡要總結 Vuex 和 Pinia。如果你想要更詳盡的解釋，我建議閱讀Vuex 文檔和Pinia 文檔。

什么是Pinia？

Pinia是一個新的狀態管理庫，可幫助你在 Vue.js 應用程序中跨組件管理和存儲響應數據和狀態。Pinia 由 Vue 核心團隊成員之一 Eduardo San Martin Morote 創建。

Pinia 使用新的反應系統來構建一個直觀且完全類型化的狀態管理系統。

庫中引入的新特性是促成 Pinia 推薦的因素之一?？傮w而言，Pinia 顯得輕巧、簡單且易于掌握。它擁有可以使 Vue 3 和 Vue 2 中的編程變得通用的一切。因此，這是試用 Pinia 的理想機會。

什么是 Vuex？

Vuex是一種狀態管理模式和庫，構建為集中式存儲，可幫助你維護 Vue 應用程序中存在的所有組件的狀態。Vuex 遵循確保你的狀態突變為預測標準的規則。

使 Vuex 更強大的一個因素是組件從 Vuex store 中獲取它們的狀態，并且可以快速有效地響應 store 狀態的變化。

Vuex雖然是維護你store的狀態管理庫，但建議你熟悉或搭建過大型SPA。如果你沒有經驗，Vuex 可能會冗長且令人生畏。

如果你的應用程序很廣泛，你需要管理復雜的數據流，并且你有嵌套的組件，你可以使用 Vuex。查看官方文檔以獲取有關何時使用 Vuex 的更多信息。

Pinia 的特點

Pinia 和 Vuex 之間的區別之一是 Pinia 是“模塊化設計”，換句話說，它被構建為擁有多個商店，而 Vuex 只有一個商店。在這些商店中，您可以擁有子模塊。除此之外，Pinia 允許將這些模塊中的每一個從他們的商店直接導入到需要的組件中。

模塊化設計

如果您是一名 Vue 開發人員并且曾使用 Vuex 管理應用程序的狀態，您會注意到 Vuex 只有一個商店。在該商店中，您可以在其中包含多個模塊。使用 Pinia，您可以將這些模塊中的每一個都存儲在一個地方，并在需要時將它們直接導入到組件中。

此方法允許捆綁器自動對它們進行代碼拆分，并提供更好的 TypeScript 推理。

完整的開發工具支持

Pinia 提供開發工具支持，以幫助您使用該庫構建和輕松調試。當我們安裝 Pinia 時，它會自動掛接到我們的 Vue.js 開發工具，并讓我們跟蹤對我們的商店所做的更改，這讓我們在 Vue.js 版本（Vue 2 和 Vue3）中獲得流暢的開發人員體驗。

Pinia 很直觀

Pinia 提供了一個簡單的 API，使您的商店的編寫變得簡單且井井有條，就像創建組件一樣。這意味著與 Vuex 解決方案相比，需要掌握的樣板文件和概念更少。

Pinia 是可擴展的

Pinia 還提供了一個完整的插件系統，具有交易和本地存儲同步等功能，適用于 Pinia 默認行為不足的情況。

TypeScript 支持

Pinia 提供比 Vuex 更好的 TypeScript 支持，具有 Javascript 自動完成功能，這使得開發過程變得簡單。

Pinia 輕量的

Pinia 的重量只有 1 KB，因此很容易融入您的項目。這可能會提高您的應用程序性能。

Vuex的特點

模塊

當您的應用程序擴展時，遍歷變得很困難。但是，使用 Vuex 模塊，您可以根據領域功能將您的商店拆分為多個文件，并從該特定命名空間中的模塊訪問狀態循環。

開發工具支持

Vue devtools 中的 Vuex 選項卡允許我們查看狀態并跟蹤我們的變化。這使我們能夠快速評估我們的程序如何執行和調試錯誤。

熱重載

Vuex支持熱重載功能，它使用 webpack 的熱模塊替換 API，可以在您開發時快速重載您的 mutations、modules、action 和 getters。

TypeScript 支持

如果你想編寫一個 TypeScript 存儲定義，Vuex 可以提供它的類型并且更容易實現。它有一個默認的 TypeScript 配置，不需要額外的設置。

Pinia和Vuex的代碼對比

Pinia 是一個輕量級庫，可幫助您管理整個應用程序的反應狀態。與 Vuex 相比，Pinia API 易于學習，使您的代碼更易于閱讀。

讓我們看一下使用 Pinia 和 Vuex 管理我們的狀態的代碼比較：

Vuex

在此示例中，我們將查看一個簡單的 Vuex 存儲，它跟蹤待辦事項列表項的狀態：

import { createStore } from 'vuex' const TodoListstore = createStore({ state() { return { todoListItems: [] } }, actions: { addNewList({ commit }, item) { { commit('createNewItem', item) } }, mutations: { createNewItem(state, item) { state.todoListItems.push(item) } } }) 

    




    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20

如果你看上面的代碼，你可以看到 Vuex 存儲中的三個動作：狀態、動作和突變。狀態返回當前的todoListItems，動作提交一個突變來創建一個新項目，最后，突變創建新項目并將其添加到列表中。當你構建一個更大的應用程序時，你可能會意識到動作和突變相對相似，導致冗余代碼，因為每個狀態變化都需要一個樣板。

Pinia

使用 Pinia 簡單 API，您可以消除突變和冗余代碼。讓我們查看一個代碼示例，了解當您使用 Pinia 實現之前的代碼時的樣子：

import { defineStore } from 'pinia' Export const useListStore = defineStore('list', { state() => ({ return { todoListItems: [] } }), actions: { addNewList() { this.todoListItems.push(item) } }}) 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13

上面的示例是 Pinia API 在管理應用程序狀態時如何工作的簡單代碼。使用 Pinia，我們刪除了突變并將其直接更新到我們的動作中。

注意：在上面的代碼示例中，當我們將項目直接提交給我們的操作時，我們不需要跟蹤我們的項目。

Pinia 和 Vuex 的優缺點

Pinia 和 Vuex 是控制應用程序狀態的優秀工具，但其中一個必須具有另一個所沒有的某些功能。讓我們來看看它們是什么。

Pinia 的優點

Pinia 允許你在不重新加載頁面的情況下修改你的商店。
它在 JavaScript 中提供 TypeScript 支持和良好的自動完成功能。
Pinia 提供 devtool 支持，這有助于增強開發人員使用該工具的體驗。
Pinia 只有狀態、吸氣劑和動作。不需要突變。
使用 Pinia，你可以將狀態存儲在一個地方，并在請求時將其傳遞給它們的組件。
它是一個重量為 1 KB 的輕量級庫。
它提供服務器端渲染支持和自動類型模塊，無需額外工作。
Pinia 兼容 Vue 2 和 Vue 3。

Pinia 的缺點

與 Vuex 相比，它沒有龐大的社區支持和解決方案。
Pinia 不支持調試功能，如時間旅行和編輯。

Vuex 的優點

Vuex 有 mutations、getters 和 actions。
與 Pinia 相比，Vuex 的社區支持很大。
Vuex 支持調試功能，如時間旅行和編輯。

Vuex 的缺點

它對 TypeScript 不友好。
你只能將其用于大型 SPA。

我應該使用哪個：Pinia 還是 Vuex？

好吧，這就是它變得更具挑戰性的地方，因為仍然有一些項目需要使用 Vuex 來處理狀態應用程序，即使 Pinia 是新推薦的狀態管理庫。它有幾個 Vuex 沒有的有價值的功能。

Vuex 仍然是構建大型 SPA 的理想解決方案，因為對于構建中小型應用程序的人來說，它相當冗長。

Pinia 也一樣。盡管如此，如果你需要所有列出的功能，例如 devtool 支持、TypeScript 支持和狀態應用程序的輕松管理，那么 Pinia 是最好的解決方案——它為你提供流暢的開發體驗。

如果你正在構建一個不太復雜的應用程序，無論是中等到廣泛的應用程序，你都可以使用 Pinia，因為它的重量約為 1 KB。

結論

由于功能多樣，在管理應用程序狀態時，在 Vuex 和 Pinia 之間進行選擇可能會造成混淆。不過，這兩個框架都非常適合管理狀態應用程序。本文簡要比較了它們的特性、功能和對代碼的影響。讀完這篇文章后，也許你將能夠找到適合你的庫。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

評論(0) 瀏覽(1634)

132023-2

MAC 解壓rar

本文轉載至 : Mac解壓壓縮 rar文件

一、下載壓縮包到本地（Downloads文件夾下）

RAR 5.60 for Mac OS Xwww.rarlab.com

二、雙擊打開下載好的rarosx-5.6.0.tar.gz文件，會自動解壓出一個rar文件夾。由于默認下載到了Downloads目錄，所以在終端中執行

cd ~/Downloads/rar 


    
        1

三、需要執行兩個命令。一個是安裝rar壓縮命令，一個是安裝unrar解壓命令

sudo install -c -o $USER rar /usr/local/bin/
sudo install -c -o $USER unrar /usr/local/bin 


    
        1
    

    
        2

四、走完上面三步，實際上我們mac已經能夠正常解壓和壓縮rar文件了。下面只介紹解壓命令

1，解壓命令

//解壓到當前目錄
unrar x a.rar //解壓到指定目錄
unrar x a.rar ~/Downloads //解壓文件到當前目錄
unrar e test.rar //查看rar中的文件
unrar l test.rar //更詳細?
unrar v test.rar //測試是否可以成功解壓
unrar t test.rar 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12

2，壓縮命令

// 將file文件壓縮到text.rar
rar a text.rar file

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

評論(0) 瀏覽(1244)

« 1 ... 4 5 6 7 8 9 10 ... 104 »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合