雲端極簡部署Svelte3聊天室

来源:https://www.cnblogs.com/helong-123/archive/2022/06/22/16399517.html
-Advertisement-
Play Games

一 、通過雲開發平臺快速創建初始化應用 1.創建相關應用模版請參考鏈接:嘗鮮少代碼高性能的Svelte框架 2.完成創建後就可以在github中查看到新增的Vite倉庫 二 、 本地編寫 Svelte3聊天室 1.將應用模版克隆到本地 首先假定你已經安裝了Git、node,沒有安裝請移步node官網 ...


一 、通過雲開發平臺快速創建初始化應用

1.創建相關應用模版請參考鏈接:嘗鮮少代碼高性能的Svelte框架

2.完成創建後就可以在github中查看到新增的Vite倉庫

file

二 、 本地編寫 Svelte3聊天室

1.將應用模版克隆到本地

  • 首先假定你已經安裝了Git、node,沒有安裝請移步node官網進行安裝。克隆項目:
git clone + 項目地址
  • 進入項目文件
cd Svelte
  • 切換到feature/1.0.0 分支上
git checkout feature/1.0.0
  • 安裝依賴包
npm install
  • 啟動服務
 npm run dev

這裡打開瀏覽器8080埠,並出現預設頁面。

2.項目結構目錄

file

3.自定義導航欄Navbar+菜單欄Tabbar

項目中頂部導航條及底部菜單欄均是基於svelte定製開發的自定義組件。

file

file

file

4.自定義手機端彈窗組件

svelte-popup 一款基於Svelte3.x開發自定義多功能svPopup彈出框組件,支持超過20+參數自由配置、組件式+函數式混合調用方式。

file

5.config.js配置文件

如何在svelte.js項目中使用sass/less編寫樣式?可以安裝 sass 及 svelte-preprocess 依賴。

file

/**
 * svelte.config.js基礎配置文件
 */

import adapter from '@sveltejs/adapter-auto'
import path from 'path'
import SvelteProcess from 'svelte-preprocess'

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter(),
        vite: {
            resolve: {
                alias: {
                    '@': path.resolve('./src'),
                    '@assets': path.resolve('./src/assets'),
                    '@utils': path.resolve('./src/utils')
                }
            }
        }
    },
    // allow you to use Svelte with tools like TypeScript, PostCSS, SCSS, and Less.
    preprocess: SvelteProcess()
};

export default config

6.SvelteKit公共模板及錯誤頁

使用svelteKit構建的項目,公共模板__layout.svelte及錯誤頁__error.svelte配置如下。

<script>
    import { onMount } from 'svelte'
    import { page } from '$app/stores'
    import { goto } from '$app/navigation'
    import { userinfo } from '@/store/index.js'

    let whiteRoute = ['/auth/login', '/auth/register']

    onMount(() => {
        if(!$userinfo) {
            goto('/auth/login')
        }else {
            if(whiteRoute.includes($page.url.pathname)) {
                goto('/')
            }else {
                goto($page.url.pathname)
            }
        }
    })
</script>

<div class="sv__container flexbox flex-col">
    <slot />
</div>

<style>
    @import '@/app.scss';
    @import '@assets/css/reset.scss';
    @import '@assets/css/layout.scss';
    @import '@assets/fonts/iconfont.css';
</style>
<!-- //Svelte錯誤頁 -->
<script context="module">
    export function load({ error, status }) {
        return {
            props: { error, status }
        }
    }
</script>

<script>
    import Navbar from '$lib/Navbar'

    export let status
    export let error

    function goBack() {
        history.go(-1)
    }
</script>

<svelte:head>
    <title>404錯誤</title>
</svelte:head>

<Navbar title="Page Error!!!" />

<div class="sv__scrollview flex1">
    <div class="sv__page-error flexbox flex-col flex-alignc flex-justifyc">
        <div class="sv__page-error-img">
            <img src="404.png" alt="" />
        </div>
        <div class="sv__page-error-content">
            <div class="c-red fs-36">┗| {status} |┛ 嗷~~</div>
            <div class="c-999 mt-10">{error.message}</div>
            <div class="mt-20 sv__btn sv__btn-default" on:click={goBack}><i class="iconfont icon-arrL"></i> 返迴首頁</div>
        </div>
    </div>
</div>

7.狀態管理+本地存儲

svelte框架也提供了創建狀態管理svelte/store,配置localStorage本地化存儲服務。

/**
 * Svelte狀態管理
*/

import { writable } from 'svelte/store'

const createStore = (value, key) => {
    const { subscribe, set, update } = writable(value)
    return {
        // 持久化存儲
        useStorage: () => {
            const data = localStorage.getItem(key)
            if(data) {
                set(JSON.parse(data))
            }
            // 訂閱
            subscribe(val => {
                [null, undefined].includes(val) ? localStorage.removeItem(key) : localStorage.setItem(key, JSON.stringify(val))
            })
        },
        subscribe,
        set,
        update,
    }
}

export const userinfo = createStore(localStorage.getItem('userinfo')||null, 'userinfo')

8.實現仿朋友圈下拉刷新

使用 svelte.js+mescroll 實現仿朋友圈下拉轉圈功能。

file



    
        
        
    


    
        
            
                ...
            
        
    

9.實現聊天功能

聊天頁面文本框支持文字+emoj混排,游標處插入表情、網址/圖片/視頻預覽、紅包等功能。並且底部文本框單獨抽離了一個editor.svelte組件。

file


以上就是基於svelte.js+svelteKit開發仿微信app界面聊天實例的一些分享,希望對大家有所幫助!

三 、 雲端一鍵部署上線應用

1.上傳代碼

git add . 
git commit -m '添加你的註釋'
git push

2.在日常環境部署

一鍵進行應用部署。在應用詳情頁面點擊日常環境的「部署」按鈕進行一鍵部署,部署狀態變成綠色已部署以後可以點擊訪問部署網站查看效果。

file

3.配置自定義功能變數名稱線上上環境上線

  • 配置線上環境自定義功能變數名稱。在功能開發驗證完成後要線上上環境進行部署,線上上環境的「部署配置」-「自定義功能變數名稱」中填寫自己的功能變數名稱。例如我們添加一個二級功能變數名稱 company.workbench.fun 來綁定我們部署的前端應用。然後複製自定義功能變數名稱下方的API網關地址對添加的二級功能變數名稱進行CNAME配置。

file

  • 配置CNAME地址。複製好 API網關功能變數名稱地址後,來到你自己的功能變數名稱管理平臺(此示例中的功能變數名稱管理是阿裡雲的功能變數名稱管理控制台,請去自己的功能變數名稱控制台操作)。添加記錄的「記錄類型」選擇「CNAME」,在「主機記錄」中輸入你要創建的二級功能變數名稱,這裡我們輸入「company」,在「記錄值」中粘貼我們之前複製的 API網關功能變數名稱地址,「TTL」保留預設值或者設置一個你認為合適的值即可。

file

  • 線上上環境部署上線。回到雲開發平臺的應用詳情頁面,按照部署的操作,點擊線上環境的「部署按鈕」,部署完成以後就在你自定義的功能變數名稱進行了上線。CNAME 生效之後,我們輸入 company.workbench.fun(示例網址) 可以打開部署的頁面。至此,如何部署一個應用到線上環境,如何綁定自己的功能變數名稱來訪問一個線上的應用就完成了,趕緊部署自己的應用到線上環境,用自己的功能變數名稱玩起來吧 ;)

file

4.項目預覽效果

file

file

file

file

file

file

一鍵創建svelte應用模版鏈接 :https://workbench.aliyun.com/application/front/create?fromConfig=25&fromRepo=sol_github_25

參考文獻:https://www.cnblogs.com/xiaoyan2017/p/16110203.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 大佬的理解-> Java多線程(三)--synchronized關鍵字詳情 大佬的理解-> Java多線程(三)--synchronized關鍵字續 1、問題引入 買票問題 1.1 通過繼承Thread買票 繼承Thread買票案例 /* 模擬網路購票,多線程資源共用問題,繼承Thread方式; 結 ...
  • 控制結構 順序 程式從上到下逐行地執行,中間沒有任何判斷和跳轉。 順序控制舉例和註意事項 Java中定義成員變數時採用合法的前向引用。如: public class Test{ ​ int num1 = 12; ​ int num2 = num1 + 2; } 錯誤形式: public class ...
  • 前言 當我們開始學習Python時,我們會養成一些不良編碼習慣,而更可怕的是我們連自己也不知道。 我們學習變成的過程中,大概有會這樣的經歷: 寫的代碼只能完成了一次工作,但後來再執行就會報錯或者失敗,令人感到懊惱, 或者偶然發現一個內置函數可以讓你的工作更輕鬆時,瞬間豁然開朗。 我們中的大多數人仍然 ...
  • 1. 前言 距離上次發《MAUI初體驗:爽》一文已經過去2個月了,本計劃是下半年或者明年再研究MAUI的,現在計劃提前啦,因為我覺得MAUI Blazor挺有意思的:在Android、iOS、macOS、Windows之間共用UI,一處UI增加或者修改,就能得到一致的UI體驗。 看看這篇文章《Bla ...
  • 一:背景 1. 一個有趣的話題 最近在看 硬體異常 相關知識,發現一個有意思的空引用異常問題,拿出來和大家分享一下,為了方便講述,先上一段有問題的代碼。 namespace ConsoleApp2 { internal class Program { static Person person = n ...
  • 為什麼要使用Gridsome Gridsome 通過使用PRPL模式將超高性能構建到每個頁面中。您可以獲得開箱即用的代碼拆分、資產優化、漸進式圖像和鏈接預取。Gridsome 網站預設獲得幾乎完美的頁面速度分數。 Gridsome 生成靜態 PWA。只有關鍵的 HTML、CSS 和 JavaScri ...
  • 轉載自:https://blog.csdn.net/u013685264/article/details/121903540?spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault% ...
  • 記錄windows11系統,按shift鍵中英文切換未生效解決辦法 問題由來:中英文切換不順暢 問題搜索思路: shift鍵跟粘滯鍵有關,博主顯示直接去搜Windows shift鍵切換中英文不順暢。看到有人說從Windows 10後shift鍵就有了該特性,有些大佬描述是跟粘滯鍵有關,shift按 ...
一周排行
    -Advertisement-
    Play Games
  • 用例演示 - 創建實體 本節將演示一些示例用例並討論可選場景。 創建實體 從實體/聚合根類創建對象是實體生命周期的第一步。聚合/聚合根規則和最佳實踐部分 建議為Entity類創建一個主構造函數,以保證創建一個有效的實體。因此,無論何時我們需要創建實體的實例,我們都應該使用那個構造函數 參見下麵的問題 ...
  • 領域邏輯 & 應用邏輯 如前所述,領域驅動設計中的業務邏輯分為兩部分(層):領域邏輯和應用邏輯: 領域邏輯由系統的核心領域規則組成,應用邏輯實現應用特定的用例 雖然定義很明確,但實現起來可能並不容易。您可能無法決定哪些代碼應該位於應用程式層,哪些代碼應該位於領域層。本節試圖解釋其中的差異 多個應用程 ...
  • 表弟大學快畢業了,學了一個學期Python居然還不會寫學生管理系統,真的給我丟臉啊,教他又不肯學,還讓我直接給他寫,我真想兩巴掌上去,最終還是寫了給他,誰讓他是我表弟呢,關鍵時候還是得幫他一把! 寫完了放在那也是放著,所以今天分享給大家吧! 話不多說,咱們直接開始吧! 代碼解析 一、登錄頁面 1、定 ...
  • Zookeeper3.7源碼剖析 能力目標 掌握Zookeeper中Session的管理機制 能基於Client進行Debug測試Session創建/刷新操作 能搭建Zookeeper集群源碼配置 掌握集群環境下Leader選舉啟動過程 能說出Zookeeper選舉過程中的概念 能說出Zookeep ...
  • 前言 今天給大家分享一下我自己寫的筆記,純純的都是乾貨,關於字好像也能看。這是我學python整理出來的一些資料,希望對大家 有用。想要更多的資料那就的給一個關註了… python學習交流Q群:903971231### #導入Counter from collections import Count ...
  • Hi,大家好,我是Mic 一個工作5年的粉絲找到我。 他說: “Mic老師,你要是能回答出這個問題,我就佩服你” 我當場就懵了,現在打賭都這麼隨意了嗎? 我問他問題是什麼,他說“Kafka如何避免重覆消費的問題!” 下麵看看普通人和高手的回答! 普通人: Kafka怎麼避免重覆消費就是我們可以通過 ...
  • 前言 Steam是由美國電子游戲商Valve於2003年9月12日推出的數字發行平臺,被認為是電腦游戲界最大的數位發行平臺之一,Steam平臺是全球最大的綜合性數字發行平臺之一。玩家可以在該平臺購買、下載、討論、上傳和分享游戲和軟體。 而每周的steam會開啟了一輪特惠,可以讓游戲打折,而玩家就會 ...
  • 本篇內容將在上一篇已有的內容基礎上,進一步的聊一下項目中使用JPA的一些高階複雜場景的實踐指導,覆蓋了主要核心的JPA使用場景,可以讓你在需求開發的時候對JPA的使用更加的游刃有餘。 ...
  • 1.路徑處理 1.找模塊:sys.path import sys print(sys.path) - 1.理解 - 1.是python去查找包或模塊 - 2.項目開始根目錄,python內置的目錄 - 3.雖然說python的安裝目錄下也可以存放我們寫的模塊,但是不建議(太多了,不大好找) - 4. ...
  • Go 語言入門練手項目系列 01 基於命令行的圖書的增刪查改 02 文件管理 持續更新中... > 本文來自博客園,作者:Arway,轉載請註明原文鏈接:https://www.cnblogs.com/cenjw/p/gobeginner-proj-bookstore-cli.html 介紹 這是一 ...