網(wǎng)頁聊天客服是如何制作的?使用WebSocket技術(shù)!

為上篇文章被頭條檢測為廣告嫌疑，可能是有其他網(wǎng)站的地址和下載鏈接。頭條系統(tǒng)已經(jīng)不再給我推薦，所以本次再寫一次，這次不打廣告，也不放鏈接了。

大家看看華為商城的客服系統(tǒng)，有沒有想過到底是如何制作出來的。你和客服MM的一問一答到底是如何實(shí)現(xiàn)的？學(xué)過ajax的朋友肯定知道，可以使用輪詢方式，隔一秒到服務(wù)器里面去查詢是否有聊天信息的到來，如果有，就取出來。這樣肯定是可以的。但是這樣做服務(wù)器壓力實(shí)在太大。如果有很多人在聊天呢？服務(wù)器可能受不了，所以，我們今天來使用WebSocket技術(shù)。該技術(shù)的特別之處在于，與HTTP協(xié)議最大的不同是，HTTP協(xié)議需要請求一次，響應(yīng)一次。而WebSocket使用的是協(xié)議是，一次握手，時(shí)時(shí)通訊。意思就是，第一次采用http協(xié)議握手完成之后，后面的鏈接就一直會保持，服務(wù)器也可以向客戶端發(fā)送信息。而不再是單向的通訊方式了。

華為客服系統(tǒng)

當(dāng)然，制作這個(gè)客服聊天系統(tǒng)確實(shí)不容易，但是如果我們只想做個(gè)簡單的網(wǎng)頁聊天那還是沒有問題的。

接下來，我給大家貼出一些關(guān)鍵代碼，給大家演示如何開發(fā)出一個(gè)網(wǎng)頁聊天系統(tǒng)。

必備技能：

html，css，javaScript，java，javaWeb，tomcat服務(wù)器，數(shù)據(jù)庫mysql。

1 首頁，必須寫一個(gè)登陸頁面，如果沒有登錄功能，那么網(wǎng)頁對方就不知道你的身份了。大部分情況都是需要登錄的。當(dāng)然如果不登錄，也是可以的，系統(tǒng)可以給你指定一個(gè)稱呼，目前大多數(shù)客服系統(tǒng)都是有登錄的。

登錄代碼

登錄界面

登錄使用的是jquery的ajax向servlet發(fā)送請求，servlet調(diào)用數(shù)據(jù)庫dao查詢是否存在賬號。這個(gè)步驟如果不會的話，那需要將javaScript和javaWeb學(xué)習(xí)一遍。

2 寫一個(gè)聊天的界面，這個(gè)界面代碼較多，但是大家可以去各種素材網(wǎng)站找模板，不用自己寫的，copy就行了。

登錄后的界面

webSocket代碼

后臺，我們采用的是java代碼。這里因?yàn)槭侨腴T，我們沒有采用spring框架，而是采用了最基本的webSocket包。這兩個(gè)包可以在tomcat文件夾下面的lib文件夾找到。

使用的包

前后臺通訊方式采用的是json方式。所以引入了Gson包。

數(shù)據(jù)庫使用了兩個(gè)表：

非常簡單的表，mysql可以直接使用

后臺部分代碼

主要使用的是@ServerEndpoint注解，以及@OnOpen@OnMessage注解。

@ServerEndpoint注解表示ws的路徑。

@OnOpen表示連接時(shí)觸發(fā)該方法

@OnMessage 表示服務(wù)器收到消息時(shí)觸發(fā)

聊天時(shí)可以發(fā)送圖片和表情

發(fā)送圖片文件采用的方式還是http方式。

將發(fā)送人和接收人和文件使用FormData封裝起來，然后使用ajax保存到服務(wù)器中。然后再將服務(wù)器保存的地址發(fā)給對方。

聊天系統(tǒng)沒有加密。只是簡單的制作。有興趣的可以私聊我，可以發(fā)源代碼給你，因?yàn)槠脚_限制，不能在文章發(fā)鏈接，見諒了。

著vue3.x越來越穩(wěn)定及vite2.0的快速迭代推出，加上很多大廠相繼推出了vue3的UI組件庫，在2021年必然受到開發(fā)者的再一次熱捧。

Vue3迭代更新頻繁，目前star高達(dá)20.2K+。

// 官網(wǎng)地址
https://v3.vuejs.org/

Vitejs目前的star達(dá)到15.7K+。

// 官網(wǎng)地址
https://vitejs.dev/

項(xiàng)目介紹

vue3-webchat 基于vue3.x+vuex4+vue-router4+element-plus+v3layer+v3scroll等技術(shù)架構(gòu)的仿微信PC端界面聊天實(shí)例。

以上是仿制微信界面聊天效果，同樣也支持QQ皮膚。

技術(shù)棧

使用技術(shù)：vue3.0+vuex4+vue-router4
UI組件庫：element-plus（餓了么Vue3 pc端組件庫）
彈窗組件：V3Layer（基于Vue3自定義桌面端彈窗）
滾動(dòng)條組件：V3Scroll（基于Vue3自定義虛擬美化滾動(dòng)條）
iconfont圖標(biāo)：阿里字體圖標(biāo)庫

Vue3.x自定義彈窗組件

大家看到的所有彈窗功能，均是自己開發(fā)的vue3.0自定義彈窗V3Layer組件。

前段時(shí)間有過一篇詳細(xì)的分享，這里就不作介紹了。感興趣的話可以去看看。

vue3.0系列：Vue3自定義PC端彈窗組件V3Layer

Vue3.x自定義美化滾動(dòng)條組件

為了使得項(xiàng)目效果一致，所有頁面的滾動(dòng)條均是采用vue3.0自定義組件實(shí)現(xiàn)。

v3scroll 一款輕量級的pc桌面端模擬滾動(dòng)條組件。支持是否原生滾動(dòng)條、自動(dòng)隱藏、滾動(dòng)條大小/層疊/顏色等功能。

大家感興趣的話，可以去看看這篇分享。

Vue3.0系列：vue3定制美化滾動(dòng)條組件v3scroll

vue.config.js項(xiàng)目配置

/**
 * Vue3.0項(xiàng)目配置
 */

const path = require('path')

module.exports = {
    // 基本路徑
    // publicPath: '/',

    // 輸出文件目錄
    // outputDir: 'dist',

    // assetsDir: '',

    // 環(huán)境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否開啟https
        https: false,
        // 編譯完是否打開網(wǎng)頁
        open: false,
        
        // 代理配置
        // proxy: {
        //     '^/api': {
        //         target: '<url>',
        //         ws: true,
        //         changeOrigin: true
        //     },
        //     '^/foo': {
        //         target: '<other_url>'
        //     }
        // }
    },

    // webpack配置
    chainWebpack: config => {
        // 配置路徑別名
        config.resolve.alias
            .set('@', path.join(__dirname, 'src'))
            .set('@assets', path.join(__dirname, 'src/assets'))
            .set('@components', path.join(__dirname, 'src/components'))
            .set('@layouts', path.join(__dirname, 'src/layouts'))
            .set('@views', path.join(__dirname, 'src/views'))
    }
}

Vue3引入/注冊公共組件

// 引入餓了么ElementPlus組件庫
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

// 引入vue3彈窗組件v3layer
import V3Layer from '../components/v3layer'

// 引入vue3滾動(dòng)條組件v3scroll
import V3Scroll from '@components/v3scroll'

// 引入公共組件
import WinBar from '../layouts/winbar.vue'
import SideBar from '../layouts/sidebar'
import Middle from '../layouts/middle'

import Utils from './utils'

const Plugins = app => {
    app.use(ElementPlus)
    app.use(V3Layer)
    app.use(V3Scroll)

    // 注冊公共組件
    app.component('WinBar', WinBar)
    app.component('SideBar', SideBar)
    app.component('Middle', Middle)

    app.provide('utils', Utils)
}

export default Plugins

項(xiàng)目中主面板毛玻璃效果(虛化背景)

<!-- //虛化背景（毛玻璃） -->
<div class="vui__bgblur">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" class="blur-svg" viewBox="0 0 1920 875" preserveAspectRatio="none">
    <filter id="blur_mkvvpnf"><feGaussianBlur in="SourceGraphic" stdDeviation="50"></feGaussianBlur></filter>
    <image :xlink:href="store.state.skin" x="0" y="0" width="100%" height="100%" externalResourcesRequired="true" xmlns:xlink="http://www.w3.org/1999/xlink" style="filter:url(#blur_mkvvpnf)" preserveAspectRatio="none"></image>
    </svg>
    <div class="blur-cover"></div>
</div>

Vue3攔截登錄狀態(tài)

vue3.0中使用全局路由鉤子攔截登錄狀態(tài)。

router.beforeEach((to, from, next) => {
    const token = store.state.token

    // 判斷當(dāng)前路由地址是否需要登錄權(quán)限
    if(to.meta.requireAuth) {
        if(token) {
            next()
        }else {
            // 未登錄授權(quán)
            V3Layer({
                content: '還未登錄授權(quán)！', position: 'top', layerStyle: 'background:#fa5151', time: 2,
                onEnd: () => {
                    next({ path: '/login' })
                }
            })
        }
    }else {
        next()
    }
})

Vue3.x聊天模塊

如上圖：聊天編輯框部分支持文字+emoj表情、在光標(biāo)處插入表情、多行文本內(nèi)容。

編輯器抽離了一個(gè)公共的Editor.vue組件。

<template>
    <div
        ref="editorRef"
        class="editor"
        contentEditable="true"
        v-html="editorText"
        @click="handleClick"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        style="user-select:text;-webkit-user-select:text;">
    </div>
</template>

另外還支持粘貼截圖發(fā)送，通過監(jiān)聽paste事件，判斷是否是圖片類型，從而發(fā)送截圖。

editorRef.value.addEventListener('paste', function(e) {
    let cbd = e.clipboardData
    let ua = window.navigator.userAgent
    if(!(e.clipboardData && e.clipboardData.items)) return

    if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
        cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
        ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
        return;
    }
    for(var i = 0; i < cbd.items.length; i++) {
        var item = cbd.items[i]
        // console.log(item)
        // console.log(item.kind)
        if(item.kind == 'file') {
            var blob = item.getAsFile()
            if(blob.size === 0) return
            // 讀取圖片記錄
            var reader = new FileReader()
            reader.readAsDataURL(blob)
            reader.onload = function() {
                var _img = this.result

                // 返回圖片給父組件
                emit('pasteFn', _img)
            }
        }
    }
})

還支持拖拽圖片至聊天區(qū)域進(jìn)行發(fā)送。

<div class="ntMain__cont" @dragenter="handleDragEnter" @dragover="handleDragOver" @drop="handleDrop">
    // ...
</div>

const handleDragEnter = (e) => {
    e.stopPropagation()
    e.preventDefault()
}
const handleDragOver = (e) => {
    e.stopPropagation()
    e.preventDefault()
}
const handleDrop = (e) => {
    e.stopPropagation()
    e.preventDefault()
    // console.log(e.dataTransfer)

    handleFileList(e.dataTransfer)
}
// 獲取拖拽文件列表
const handleFileList = (filelist) => {
    let files = filelist.files
    if(files.length >= 2) {
        v3layer.message({icon: 'error', content: '暫時(shí)支持拖拽一張圖片', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
        return false
    }
    for(let i = 0; i < files.length; i++) {
        if(files[i].type != '') {
            handleFileAdd(files[i])
        }else {
            v3layer.message({icon: 'error', content: '目前不支持文件夾拖拽功能', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
        }
    }
}

大家如果感興趣可以自己去試試哈。

ok，基于vue3+element-plus開發(fā)仿微信/QQ聊天實(shí)戰(zhàn)項(xiàng)目就分享到這里。

基于vue3.0+vant3移動(dòng)端聊天實(shí)戰(zhàn)|vue3聊天模板實(shí)例

、目錄介紹

前置知識點(diǎn)

Netty 的核心組件

Channel
Callback
Future 和 Promise
事件和 ChannelHandler

Hello World

二、前置知識點(diǎn)

1、NIO

首先我們需要回顧一下，同步、異步、阻塞、非阻塞的相關(guān)概念。

同步：調(diào)用 API 后，調(diào)用者能“馬上”就知道操作的結(jié)果。
異步：相對于同步，調(diào)用 API 后，調(diào)用者不能“馬上”知道操作的結(jié)果，要等被調(diào)用方 回調(diào) 通知結(jié)果。
阻塞：等待全部數(shù)據(jù)讀取(寫入)完成后，才返回。
非阻塞：讀取時(shí)，讀多少返回多少；寫入時(shí)，寫入多少返回多少。不用等待，全部數(shù)據(jù)完成操作后，才返回。

NIO 是一種 同步非阻塞 的 I/O模型。

同步是指線程不斷輪詢 I/O 事件是否就緒。
非阻塞是指線程在等待 I/O 的時(shí)候，可以同時(shí)做其他任務(wù)。

同步的核心是 選擇器，選擇器代替了線程本身輪詢 I/O 事件，避免了阻塞同時(shí)減少了不必要的線程消耗；非阻塞的核心就是 通道和緩沖區(qū)，當(dāng) I/O 事件就緒時(shí)，可以通過寫到緩沖區(qū)，保證 I/O 的成功，而無需線程阻塞式地等待。

NIO主要有三大核心部分：

Channel(通道)
Buffer(緩沖區(qū))
Selector(選擇器)

傳統(tǒng) I/O 基于 字節(jié)流和字符流 進(jìn)行操作，而 NIO 基于 Channel 和 Buffer 進(jìn)行操作，數(shù)據(jù)總是從通道讀取到緩沖區(qū)中，或者從緩沖區(qū)寫入到通道中。Selector 用于監(jiān)聽多個(gè)通道的事件（連接打開，數(shù)據(jù)到達(dá)等）。因此，單個(gè)線程可以監(jiān)聽多個(gè)數(shù)據(jù)通道，如下圖所示：

NIO

三、Netty 的核心組件

1、Channel

Channel 是一個(gè)通道，用于連接字節(jié)緩沖區(qū) Buffer 和另一端的實(shí)體。在 NIO 網(wǎng)絡(luò)編程模型中，服務(wù)端和客戶端進(jìn)行 I/O 數(shù)據(jù)交互（得到彼此推送的信息）的媒介就是 Channel。

Netty 對 JDK 原生的 ServerSocketChannel 進(jìn)行了封裝和增強(qiáng)。

Netty的Channel增加了如下的組件：

id 標(biāo)識唯一身份信息
可能存在的 parent Channel
管道 pepiline
用于數(shù)據(jù)讀寫的 unsafe 內(nèi)部類
事件循環(huán)執(zhí)行器 NioEventLoop

Channel可以分成兩類:

服務(wù)端: NioServerSocketChannel
客戶端: NioSocketChannel

具體依賴關(guān)系如下圖所示：

服務(wù)端: NioServerSocketChannel

NioServerSocketChannel

客戶端: NioSocketChannel

NioSocketChannel

2、Callback

callback 就是回調(diào)，一個(gè)方法可以在適當(dāng)?shù)臅r(shí)候回過頭來調(diào)用這個(gè) callback 方法。callback 是用于通知相關(guān)方某個(gè)操作已經(jīng)完成最常用的方法之一。

Netty 在處理事件時(shí)內(nèi)部使用了 callback。當(dāng)一個(gè) callback 被觸發(fā)，事件可以被 ChannelHandler 的接口實(shí)現(xiàn)處理。

一個(gè)簡單的例子如下所示：

public class ConnectHandler extends ChannelInboundHandlerAdapter {
    // 當(dāng)一個(gè)新的連接建立時(shí)，channelActive 被調(diào)用
    @Override
    public void channelActive(ChannelHandlerContext ctx) throws Exception {
           System.out.println(ctx.channel().remoteAddress());
    }
}

當(dāng)一個(gè)新的連接建立后，ChannelHandler 的 callback 方法 channelActive() 會被調(diào)用，然后打印一條消息。

這個(gè) ConnectHandler 實(shí)例（相當(dāng)于被調(diào)用者）以參數(shù)的形式傳入創(chuàng)建 Channel 連接的函數(shù)（調(diào)用者）中，之后這個(gè)函數(shù)創(chuàng)建新連接后，就會回來調(diào)用這個(gè) ConnectHandler 的 channelActive 方法，這個(gè)過程就叫回調(diào)。

3、Future 和 Promise

Future 和 Promise 起源于函數(shù)式編程，目的是將值（Future）與其計(jì)算方式（Promise）分離，從而允許更靈活地進(jìn)行計(jì)算，特別是通過并行化。

Future 表示目標(biāo)計(jì)算的返回值，Promise 表示計(jì)算的方式，這個(gè)模型將返回結(jié)果和計(jì)算邏輯分離，目的是為了讓計(jì)算邏輯不影響返回結(jié)果，從而抽象出一套異步編程模型。它們之間的紐帶就是 Callback。

簡單來說：Future 表示一個(gè) 異步任務(wù)的結(jié)果，針對這個(gè)結(jié)果可以添加 Callback 方法以便在任務(wù) 執(zhí)行成功或失敗后做出對應(yīng)的操作，而 Promise 交由任務(wù)執(zhí)行者，任務(wù)執(zhí)行者通過 Promise 可以標(biāo)記任務(wù)完成或者失敗。

在 Netty 中：

Future 接口定義了 isSuccess()，isCancellable()，cause() 等方法，這些判斷異步執(zhí)行狀態(tài)的方法都是只讀的。
Promise 接口在 extends Future 的基礎(chǔ)上增加了 setSuccess()，setFailure() 等方法，這些方法是可寫的，即 Promise 是可寫的 Future。

4、事件(event) 和 ChannelHandler

ChannelHandler

Netty 是一個(gè)事件驅(qū)動(dòng)的框架，所有的 event(事件) 都是由 Handler 來進(jìn)行處理。

ChannelHandler 可以處理 I/O、攔截 I/O 或者將 event 傳遞給 ChannelPipeline 中的下一個(gè) Handler 進(jìn)行處理。

ChannelHandler 的結(jié)構(gòu)很簡單，只有三個(gè)方法，分別是：

void handlerAdded(ChannelHandlerContext ctx) throws Exception;
void handlerRemoved(ChannelHandlerContext ctx) throws Exception;
void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) throws Exception;

event

Netty 用細(xì)分的 event(事件) 來通知我們狀態(tài)的變化或者操作的狀況。這讓我們可以基于發(fā)的 event 來觸發(fā)適當(dāng)?shù)男袨椤＿@類行為可能包括：

日志記錄
數(shù)據(jù)傳送
流控制
應(yīng)用邏輯

event 按輸入或者輸出數(shù)據(jù)流的關(guān)系來分類。可能被輸入數(shù)據(jù)或者相關(guān)狀態(tài)改變觸發(fā)的 event 包括：

活躍或者停用的連接
讀數(shù)據(jù)
用戶 event
錯(cuò)誤 event

而輸出 event 則是會觸發(fā)將來行為的操作的結(jié)果，可能會是：

打開或者關(guān)閉到遠(yuǎn)端的連接
寫或者刷數(shù)據(jù)到一個(gè) socket

每一個(gè) event 都可以被分派到一個(gè)用戶實(shí)現(xiàn)的 handler 對象的方法。

Hello World

一個(gè)簡單的 websocket 服務(wù)端，如下所示：

Server 代碼：

import io.netty.bootstrap.ServerBootstrap;
import io.netty.channel.ChannelFuture;
import io.netty.channel.ChannelInitializer;
import io.netty.channel.ChannelOption;
import io.netty.channel.ChannelPipeline;
import io.netty.channel.nio.NioEventLoopGroup;
import io.netty.channel.socket.SocketChannel;
import io.netty.channel.socket.nio.NioServerSocketChannel;
import io.netty.handler.codec.http.HttpObjectAggregator;
import io.netty.handler.codec.http.HttpServerCodec;
import io.netty.handler.codec.http.websocketx.WebSocketServerProtocolHandler;
import io.netty.handler.codec.http.websocketx.extensions.compression.WebSocketServerCompressionHandler;

public class Server {

    public static void main(String[] args) throws InterruptedException {
        // 用來接收客戶端傳進(jìn)來的連接
        NioEventLoopGroup bossGroup = new NioEventLoopGroup();
        // 用來處理已被接收的連接
        NioEventLoopGroup workerGroup = new NioEventLoopGroup();
        // 創(chuàng)建 netty 服務(wù)
        ServerBootstrap serverBootstrap = new ServerBootstrap();
        try {
            serverBootstrap.group(bossGroup, workerGroup)
                    // 設(shè)置 NIO 模式
                    .channel(NioServerSocketChannel.class)
                    // 設(shè)置 tcp 緩沖區(qū)
                    .option(ChannelOption.SO_BACKLOG, 1024)
                    // 設(shè)置發(fā)送緩沖區(qū)數(shù)據(jù)大小
                    .childOption(ChannelOption.SO_SNDBUF, 64 * 1024)
                    // 設(shè)置接收緩沖區(qū)數(shù)據(jù)大小
                    .option(ChannelOption.SO_RCVBUF, 64 * 1024)
                    // 保持長連接
                    .childOption(ChannelOption.SO_KEEPALIVE, true)
                    .childHandler(new ChannelInitializer<SocketChannel>() {
                        @Override
                        public void initChannel(SocketChannel ch) throws Exception {
                            ChannelPipeline pipeline = ch.pipeline();
                            // HttpClient編解碼器
                            pipeline.addLast(new HttpServerCodec());
                            // 設(shè)置最大內(nèi)容長度
                            pipeline.addLast(new HttpObjectAggregator(65536));
                            // WebSocket 數(shù)據(jù)壓縮擴(kuò)展
                            pipeline.addLast(new WebSocketServerCompressionHandler());
                            // WebSocket 握手、控制幀處理
                            pipeline.addLast(new WebSocketServerProtocolHandler("/", null, true));
                            // 通道的初始化，數(shù)據(jù)傳輸過來進(jìn)行攔截及執(zhí)行
                            pipeline.addLast(new ServerHandler());
                        }
                    });
            // 綁定端口啟動(dòng)服務(wù)
            ChannelFuture channelFuture = serverBootstrap.bind(8080).sync();
            channelFuture.channel().closeFuture().sync();
        } finally {
            workerGroup.shutdownGracefully();
            bossGroup.shutdownGracefully();
        }
    }
}

ServerHandler 代碼：

import io.netty.channel.ChannelHandlerContext;
import io.netty.channel.ChannelInboundHandlerAdapter;
import io.netty.handler.codec.http.websocketx.TextWebSocketFrame;

public class ServerHandler extends ChannelInboundHandlerAdapter {

    @Override
    public void channelActive(ChannelHandlerContext ctx) throws Exception {
        System.out.println("通道激活（回調(diào)）");
    }

    @Override
    public void channelRead(ChannelHandlerContext ctx, Object msg) throws Exception {
        // 僅處理 TextWebSocketFrame
        if (msg instanceof TextWebSocketFrame) {
            String request = ((TextWebSocketFrame) msg).text();
            System.out.println("收到請求：" + request);
            ctx.writeAndFlush(new TextWebSocketFrame("PONG"));
        }
    }

    @Override
    public void channelReadComplete(ChannelHandlerContext ctx) throws Exception {
        System.out.println("數(shù)據(jù)讀取完成");
    }
}

pom 依賴

<dependencies>
    <dependency>
        <groupId>io.netty</groupId>
        <artifactId>netty-all</artifactId>
        <version>4.1.6.Final</version>
    </dependency>
</dependencies>

然后運(yùn)行 Server 即可。

接下來我們來測試一下程序是否正常，這里使用到一個(gè)在線測試網(wǎng)站：http://www.easyswoole.com/wstool.html

連接上我們的服務(wù)，如下圖所示：

連接websocket

如果出現(xiàn) OPENED => 127.0.0.1:8080 的提示，則表示連接成功。否則請排查是否程序和示例代碼一致。

然后我們點(diǎn)擊開始發(fā)送按鈕，如果出現(xiàn)以下提示則表示，消息發(fā)送成功啦。

發(fā)送消息1

發(fā)送消息2

好了到這里，我們的 Hello World 已經(jīng)完成了。

在線咨詢

上一篇：原生javascript寫個(gè)拖拽照片墻，把我的女神們都放上去
下一篇：世界杯網(wǎng)頁設(shè)計(jì)截圖展示

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商