雲端極簡部署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
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...