备案控制台
开发者社区 开发与运维 文章 正文

如何充分利用Composition API对Vue3项目进行代码抽离（下）

2022-04-27 113
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 接上文。

对比一

  • 抽离前


<template>
  <div class="import-config-container" v-show="isShow">
    <div class="import-config-alert">
      <div class="close-import-config-alert" @click="closeAlert"></div>
      <div class="import-config-alert-title">导入配置</div>
      <div class="import-config-alert-remind">说明：需要上传之前保存导出的xxx.json配置文件，文件中的信息会完全覆盖当前信息</div>
      <form action="" class="form">
        <label for="import_config_input" class="import-config-label">
          上传配置文件
          <i v-if="hasFile == 1" class="fas fa-times-circle uploadErr uploadIcon"/>
          <i v-else-if="hasFile == 2" class="fas fa-check-circle uploadSuccess uploadIcon"/>
        </label>
        <input id="import_config_input" type="file" class="select-file" ref="inputFile" @change="fileChange">
      </form>
      <lp-button type="primary" class="import-config-btn" @_click="importConfig">确认上传</lp-button>
    </div>
  </div>
</template>
<script>
import {ref, inject} from 'vue'
import lpButton from '../../public/lp-button/lp-button'
export default {
    props: {
      isShow: {
        type: Boolean,
        default: true
      }
    },
    components: {
        lpButton
    },
    setup(props, {emit}) {
        const result = ref('none')     // 导入的结果
        const isUpload = ref(false)    // 判断是否上传配置文件
        const isImport = ref(false)    // 判断配置是否导入成功
        const isLoading = ref(false)   // 判断按钮是否处于加载状态
        const inputFile = ref(null)    // 获取文件标签
        const hasFile = ref(0)         // 判断文件的传入情况。0：未传入  1: 格式错误  2：格式正确
        const $message = inject('message')
        // 导入配置
        function importConfig() {
          let reader = new FileReader()
          let files = inputFile.value.files
          if(hasFile.value == 0) {
            $message({
              type: 'warning',
              content: '请先上传配置文件'
            })
          }
          else if(hasFile.value == 1) {
            $message({
              type: 'warning',
              content: '请上传正确格式的文件，例如xx.json'
            })
          }
          else if(hasFile.value == 2) {
            reader.readAsText(files[0])
            reader.onload = function() {
              let data = this.result
              window.localStorage.navInfos = data
              location.reload()
            }
          }
        }
        // 关闭弹窗
        function closeAlert() {
          emit('closeImportConfigAlert', false)
          hasFile.value = 0
        }
        function fileChange(e) {
          let files = e.target.files
          if(files.length === 0) {
            $message({
              type: 'warning',
              content: '请先上传配置文件'
            })
          }
          else {
            let targetFile = files[0]
            if(!/\.json$/.test(targetFile.name)) {
              hasFile.value = 1
              $message({
                type: 'warning',
                content: '请确认文件格式是否正确'
              })
            } else {
              hasFile.value = 2
              $message({
                type: 'success',
                content: '文件格式正确'
              })
            }
          }
        }
        return {
          result, 
          isUpload,
          isImport, 
          isLoading,
          importConfig, 
          closeAlert,
          inputFile,
          fileChange,
          hasFile
        }
    }
}
</script>


  • 抽离后


<template>
  <div class="import-config-container" v-show="isShowImportAlert">
    <div class="import-config-alert">
      <div class="close-import-config-alert" @click="handleImportConfigAlert(false)"></div>
      <div class="import-config-alert-title">导入配置</div>
      <div class="import-config-alert-remind">说明：需要上传之前保存导出的xxx.json配置文件，文件中的信息会完全覆盖当前信息</div>
      <form action="" class="form">
        <label for="import_config_input" class="import-config-label">
          上传配置文件
          <i v-if="hasFile == 1" class="fas fa-times-circle uploadErr uploadIcon"/>
          <i v-else-if="hasFile == 2" class="fas fa-check-circle uploadSuccess uploadIcon"/>
        </label>
        <input id="import_config_input" type="file" class="select-file" ref="inputFile" @change="fileChange">
      </form>
      <lp-button type="primary" class="import-config-btn" @_click="importConfig">确认上传</lp-button>
    </div>
  </div>
</template>
<script>
/* API */
import { inject } from 'vue'
/* 组件 */
import lpButton from '@/components/public/lp-button/lp-button'
/* 功能模块 */
import importConfigFunction from '@/use/importConfig'
export default {
    components: {
        lpButton
    },
    setup() {
        const $message = inject('message')
        const { 
          isShowImportAlert,
          handleImportConfigAlert,
          result,  
          isUpload, 
          isImport, 
          isLoading, 
          importConfig, 
          closeAlert, 
          inputFile, 
          fileChange, 
          hasFile 
        } = importConfigFunction($message)
        return {
          isShowImportAlert,
          handleImportConfigAlert,
          result, 
          isUpload,
          isImport, 
          isLoading,
          importConfig, 
          closeAlert,
          inputFile,
          fileChange,
          hasFile
        }
    }
}
</script>


  • 抽离出的代码文件


// 导入配置功能
import { ref } from 'vue'
const isShowImportAlert = ref(false),   // 导入配置弹框是否展示
      result = ref('none'),             // 导入的结果
      isUpload = ref(false),            // 判断是否上传配置文件
      isImport = ref(false),            // 判断配置是否导入成功
      isLoading = ref(false),           // 判断按钮是否处于加载状态
      inputFile = ref(null),            // 获取文件元素
      hasFile = ref(0)                  // 判断文件的传入情况。0：未传入  1: 格式错误  2：格式正确
export default function importConfigFunction($message) {
    // 控制弹框的展示
    function handleImportConfigAlert(value) {
        isShowImportAlert.value = value
        if(!value) hasFile.value = 0
    }
    // 上传的文件内容发生改变
    function fileChange(e) {
        let files = e.target.files
        if(files.length === 0) {
            $message({
            type: 'warning',
            content: '请先上传配置文件'
            })
        }
        else {
            let targetFile = files[0]
            if(!/\.json$/.test(targetFile.name)) {
                hasFile.value = 1
                $message({
                    type: 'warning',
                    content: '请确认文件格式是否正确'
                })
            } else {
            hasFile.value = 2
                $message({
                    type: 'success',
                    content: '文件格式正确'
                })
            }
        }
    }
    // 导入配置
    function importConfig() {
        let reader = new FileReader()
        let files = inputFile.value.files
        if(hasFile.value == 0) {
          $message({
            type: 'warning',
            content: '请先上传配置文件'
          })
        }
        else if(hasFile.value == 1) {
          $message({
            type: 'warning',
            content: '请上传正确格式的文件，例如xx.json'
          })
        }
        else if(hasFile.value == 2) {
          reader.readAsText(files[0])
          reader.onload = function() {
            let data = this.result
            window.localStorage.navInfos = data
            location.reload()
          }
        }
    }
    return {
        isShowImportAlert,
        result,
        isUpload,
        isImport,
        isLoading,
        inputFile,
        hasFile,
        handleImportConfigAlert,
        fileChange,
        importConfig,
    }
}


对比二

  • 抽离前


<template>
    <!-- 此处因代码太多，暂时省略，详情可以点击文末的项目源码查看 -->
</template>
<script>
import {ref, inject} from 'vue'
import {useStore} from 'vuex'
import urlAlert from '../public/urlAlert/urlAlert'
import tagAlert from '../public/tabAlert/tabAlert'
import carousel from './childCpn/carousel'
import search from './childCpn/search'
import { exchangeElements } from '../../utils/utils'
<script>
export default {
    components: {
        urlAlert,
        tagAlert,
        carousel,
        search,
    },
    setup() {
        const store = useStore()
        const catalogue = store.state.catalogue
        const moduleUrl = store.state.moduleUrl
        const moduleSearch = store.state.moduleSearch
        const $message = inject('message')
        const $confirm = inject('confirm')
        const editWhich = ref(-1)
        // 弹出添加URL的框
        function addMoreUrl(id) {
            store.commit('changeUrlInfo', [
                {key: 'isShow', value: true},
                {key: 'whichTag', value: id},
                {key: 'alertType', value: '新增网址'}
            ])
        }
        // 处理无icon或icon加载失败的图片，令其使用默认svg图标
        function imgLoadErr(e) {
            let el = e.target
            el.style.display = 'none'
            el.nextSibling.style.display = 'inline-block'
        }
        function imgLoadSuccess(e) {
            let el = e.target
            el.style.display = 'inline-block'
            el.nextSibling.style.display = 'none'
        }
        // 进入编辑状态
        function enterEdit(id) {
            if(id != editWhich.value) {
                editWhich.value = id
            } else {
                editWhich.value = -1
            }     
        }
        // 修改标签弹框弹出
        function editTagAlertShow(tab) {
            store.commit('changeTabInfo', [
                {key: 'isShowAddTabAlert', value: true},
                {key: 'tagName', value: tab.name},
                {key: 'trueIcon', value: tab.icon},
                {key: 'isSelected', value: true},
                {key: 'currentIcon', value: tab.icon},
                {key: 'id', value: tab.id},
                {key: 'alertType', value: '修改标签'}
            ])
        }
        // 删除标签以及标签下的所有网址
        function deleteTag(id) {
            $confirm({
                content: '确定删除该标签以及该标签下所有网址吗？'
            })
            .then(() => {
                store.commit('remove', id)
                $message({
                    type: 'success',
                    content: '标签页及子网址删除成功'
                })
            })
            .catch(() => {})
        }
        // 删除某个网址
        function deleteUrl(id) {
            $confirm({
                content: '确定删除该网址吗？'
            })
            .then(() => {
                store.commit('remove', id)
                $message({
                    type: 'success',
                    content: '网址删除成功'
                })
            })
            .catch(() => {})      
        }
        // 弹出修改URL的弹框
        function editUrl(url) {
            store.commit('changeUrlInfo', [
                {key: 'url', value: url.url},
                {key: 'icon', value: url.icon},
                {key: 'id', value: url.id},
                {key: 'name', value: url.name},
                {key: 'isShow', value: true},
                {key: 'alertType', value: '修改网址'}
            ])
        }
        function judgeTabIsShow(i) {
            const URLS = catalogue[i]['URLS']
            let length = URLS.length
            for(let j = 0; j < length; j++) {
                if(moduleSearch.searchWord == '') return false;
                else if(URLS[j].name.toLowerCase().indexOf(moduleSearch.searchWord.toLowerCase()) !== -1) return true;
            }
            return false
        }
        function judgeUrlIsShow(i, j) {
            const url = catalogue[i]['URLS'][j]
            if(url.name.toLowerCase().indexOf(moduleSearch.searchWord.toLowerCase()) !== -1) return true;
            return false;
        }
        let elementNodeDragged = null   // 被移动的地址框元素
        let elementNodeLocated = null  // 移入的地址框元素
        let draggedId = -1   // 被移动地址框的id
        // 地址框开始拖拽
        function urlBoxDragStart(e) {
            const el = e.target
            if(el.nodeName !== 'LI') return;
            // 记录当前被拖拽地址框元素
            elementNodeDragged = el    
            // 将被拖拽对象隐藏
            el.style.display = 'fixed'
            el.style.opacity = 0
        }
        // 地址框拖拽结束
        function urlBoxDragEnd(e) {
            let el = e.target
            el.style.display = 'inline-block'
            el.style.opacity = 1
            // 获取当前正在编辑标签中所有url的排序
            let timer = setTimeout(() => {
                const result = []
                const children = elementNodeLocated.parentNode.children
                let length = children.length
                for(let i = 0; i < length - 1; i++) {
                    result.push(children[i].getAttribute('data-id'))
                }
                store.commit('dragEndToUpdate', {tabId: editWhich.value, result})
                clearTimeout(timer)
            }, 500)
        }
        // 被拖动的地址框触碰到其它的地址框
        function urlBoxEnter(e, tabId) {
            if(tabId != editWhich.value) return;
            let el = e.target
            while(el.nodeName !== 'LI') el = el.parentNode;        // 若子元素触发dragenter事件，则查找到父元素li标签
            if(el === elementNodeDragged) return;     // 避免自己拖拽进入自己的情况
            if(elementNodeLocated !== el) elementNodeLocated = el    // 记录被移入的地址框元素
            exchangeElements(elementNodeDragged, el)     //  地址框位置互换
        }
        return {
            catalogue, 
            addMoreUrl, 
            moduleUrl, 
            moduleSearch,
            imgLoadErr,
            imgLoadSuccess, 
            enterEdit, 
            editTagAlertShow,
            deleteTag,
            deleteUrl,
            editUrl,
            editWhich,
            judgeTabIsShow,
            judgeUrlIsShow,
            urlBoxDragStart,
            urlBoxDragEnd,
            urlBoxEnter,
        }
    }
}
</script>


  • 抽离后


<template>
  <!-- 此处因代码太多，暂时省略，详情可以点击文末的项目源码查看 -->
</template>
<script>
/* API */
import { inject } from 'vue'
import { useStore } from 'vuex'
/* 组件 */
import urlAlert from '@/components/public/urlAlert/index'
import tabAlert from '@/components/public/tabAlert/index'
import carousel from './carousel'
import search from './search'
/* 功能模块 */
import baseFunction from '@/use/base'
import editFunction from '@/use/edit'
import urlAlertFunction from '@/use/urlAlert'
import tabAlertFunction from '@/use/tabAlert'
import searchFunction from '@/use/search'
export default {
    components: {
        urlAlert,
        tabAlert,
        carousel,
        search,
    },
    setup() {
        const catalogue = useStore().state.catalogue
        const $message = inject('message')
        const $confirm = inject('confirm')
        // 一些基础的方法
        let { imgLoadErr, imgLoadSuccess } = baseFunction()
        // url框编辑下的相关变量及功能
        let { 
            editWhich, 
            handleEdit, 
            deleteTab, 
            deleteUrl, 
            urlBoxDragStart, 
            urlBoxDragEnd, 
            urlBoxEnter 
        } = editFunction($message, $confirm)
        // 弹出 “新增”、“修改” url弹框
        let { showNewUrlAlert, showEditUrlAlert } = urlAlertFunction()
        // 搜索功能相关的变量及方法
        let { moduleSearch, judgeTabIsShow, judgeUrlIsShow } = searchFunction()
        // 展示修改tab的弹框
        let { showEditAddTab } = tabAlertFunction()
        return {
            catalogue, 
            showNewUrlAlert, 
            moduleSearch,
            imgLoadErr,
            imgLoadSuccess, 
            handleEdit, 
            showEditAddTab,
            deleteTab,
            deleteUrl,
            showEditUrlAlert,
            editWhich,
            judgeTabIsShow,
            judgeUrlIsShow,
            urlBoxDragStart,
            urlBoxDragEnd,
            urlBoxEnter,
        }
    }
}
</script>


  • 抽离出的代码文件（此处涉及到很多个模块，因此只展示两个吧）


// 搜索功能
import {  } from 'vue'
import store from '@/store/index'
// 变量
const moduleSearch = store.state.moduleSearch     // 搜索相关的全局状态
export default function searchFunction() {
    // 搜索框的输入改变
    function inputSearchContent(value) {
        store.commit('changeSearchWord', value)
    }
    // 控制搜索框的展示
    function handleSearchBox() {
        if(moduleSearch.isSearch) {
            store.commit('changeIsSearch', false)
            store.commit('changeSearchWord', '')
        } else {
            store.commit('changeIsSearch', true)
        }         
    }
    // 判断标签是否显示
    function judgeTabIsShow(i) {
        return store.getters.judgeTabIsShow(i)
    }
    // 判断url是否显示
    function judgeUrlIsShow(i, j) {
        return store.getters.judgeUrlIsShow(i, j)
    }
    return {
        moduleSearch,
        inputSearchContent,
        handleSearchBox,
        judgeTabIsShow,
        judgeUrlIsShow,
    }
}


// url框的拖拽排列
import { ref } from 'vue'
import { exchangeElements, debounce } from '@/utils/utils'
import store from '@/store/index'
//变量
let elementNodeDragged = null,     // 被移动的地址框元素
    elementNodeLocated = null,     // 移入的地址框元素
    editWhich = ref(-1)            // 记录正在编辑的tab索引
export default function editFunction($message, $confirm) {
        // 控制编辑状态
        function handleEdit(id) {
            if(id != editWhich.value) {
                editWhich.value = id
            } else {
                editWhich.value = -1
            }     
        }
        // 删除标签以及标签下的所有网址
        function deleteTab(id) {
            $confirm({
                content: '确定删除该标签以及该标签下所有网址吗？'
            })
            .then(() => {
                store.commit('remove', id)
                $message({
                    type: 'success',
                    content: '标签页及子网址删除成功'
                })
            })
            .catch(() => {})
        }
        // 删除某个网址
        function deleteUrl(id) {
            $confirm({
                content: '确定删除该网址吗？'
            })
            .then(() => {
                store.commit('remove', id)
                $message({
                    type: 'success',
                    content: '网址删除成功'
                })
            })
            .catch(() => {})      
        }
        // 地址框开始拖拽
        function urlBoxDragStart(e) {
            const el = e.target
            if(el.nodeName !== 'LI') return;
            // 记录当前被拖拽地址框元素
            elementNodeDragged = el    
            // 将被拖拽对象隐藏
            el.style.display = 'fixed'
            el.style.opacity = 0
        }
        // 拖拽后更新Vuex中的正确排序
        let dragEndToUpdate = debounce(function() {
            // 获取当前正在编辑标签中所有url的排序
            const result = []
            const children = elementNodeLocated.parentNode.children
            let length = children.length
            for(let i = 0; i < length - 1; i++) {
                result.push(children[i].getAttribute('data-id'))
            }
            store.commit('dragEndToUpdate', {tabId: editWhich.value, result}) 
        }, 500)
        // 地址框拖拽结束
        function urlBoxDragEnd(e) {
            let el = e.target
            el.style.display = 'inline-block'
            el.style.opacity = 1
            dragEndToUpdate()
        }
        // 被拖动的地址框触碰到其它的地址框
        function urlBoxEnter(e, tabId) {
            if(tabId != editWhich.value) return;
            let el = e.target
            while(el.nodeName !== 'LI') el = el.parentNode;          // 若子元素触发dragenter事件，则查找到父元素li标签
            if(el === elementNodeDragged) return;                    // 避免自己拖拽进入自己的情况
            if(elementNodeLocated !== el) elementNodeLocated = el    // 记录被移入的地址框元素
            exchangeElements(elementNodeDragged, el)                 //  地址框位置互换
        }
    return {
        editWhich,
        handleEdit,
        deleteTab,
        deleteUrl,
        urlBoxDragStart,
        urlBoxDragEnd,
        urlBoxEnter,
    }
}


最后

细心的小伙伴应该发现了，刚才给大家展示的代码中，有一段是各种拖拽的实现方法，没错！！我在闲暇之余给我的项目加上了编辑模式下的 拖拽排列功能 ，也算是完成了之前大家对我提的建议之一啦，欢迎各位前去体验新功能~


项目体验链接：http://lpyexplore.gitee.io/nav-infos/


在体验完后，希望有心的小伙伴们能在github上给我提提Issues，我看到会第一时间回复的（如果催我做账号功能的小伙伴多，我后期可能会考虑加上）


项目源码链接：https://github.com/Lpyexplore/nav-url（欢迎各位Star，多提意见，多交流啊～）


本文所阐述的代码抽离方法是我改过很多遍后定下来的，不知道后面还会有什么问题，但目前看来，对于以后的维护和管理应该是会方便很多的，如果大家有更好的意见或想法，可以留下评论，或者加我vx：Lpyexplore333私底下交流


最后谢谢各位的耐心观看

文章标签：
API
关键词：
VUE.js项目
API项目
API composition
composition API
API vue3
前端印象
目录
相关文章
wishCoding
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
wishCoding
17 3
wishCoding
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
wishCoding
16 3
_BugMan
|
4天前
|
JavaScript 前端开发 测试技术
【vue实战项目】通用管理系统：api封装、404页
【vue实战项目】通用管理系统：api封装、404页
_BugMan
15 3
修己xj
|
1天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构，还集成了常用的开发工具和配置，使得开发者可以专注于业务逻辑的实现，而不需要花费大量时间在项目配置上。
修己xj
53 7
使用 Vue CLI 脚手架生成 Vue 项目
OpenSNN开思通智网
|
2天前
|
JSON JavaScript 前端开发
在Vue3项目中，Vite起到的作用及其可以做的事情
Vite是Vue 3项目的关键快速开发服务器和高效的热模块替换（HMR）。它的亮点包括：使用ES模块实现快速启动和动态加载，模块级别HMR提升开发效率，Rollup打包优化生产构建。此外，Vite还支持插件系统、自定义配置、静态资源处理和现代JS特性。通过`npm create vite`可快速搭建Vue项目，配置文件`vite.config.js`可定制行为，`.env`文件管理环境变量。Vite优化了开发与构建流程，提高开发者效率并保证构建性能。
OpenSNN开思通智网
7 0
JavaPub
|
2天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
JavaPub
8 1
_BugMan
|
4天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统：作业列表
【vue实战项目】通用管理系统：作业列表
_BugMan
16 0
_BugMan
|
4天前
|
JavaScript API
【vue实战项目】通用管理系统：信息列表，信息的编辑和删除
【vue实战项目】通用管理系统：信息列表，信息的编辑和删除
_BugMan
21 2
_BugMan
|
4天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统：学生列表
【vue实战项目】通用管理系统：学生列表
_BugMan
16 2
_BugMan
|
4天前
|
缓存 JavaScript
【vue实战项目】通用管理系统：首页
【vue实战项目】通用管理系统：首页
_BugMan
13 2

热门文章

最新文章

  • 1
    Vue+Django+MySQL搭建指南（个人全栈快速开发）
  • 2
    Python 3+Django 3 结合Vue.js框架构建前后端分离Web开发平台实战
  • 3
    【安装指南】VSCode搭建运行Vue的详细教程
  • 4
    Vue3】vite打包报错：块的大小超过限制，Some chunks are larger than 500kb after minification
  • 5
    vue 路由demo
  • 6
    Vue.js 事件处理器 v-on
  • 7
    【踩坑记录】Vuex中更改state的数据但是Vue中没有做出改变
  • 8
    vue实现多文件预览以及切换
  • 9
    Vue 实现表单的增删改查功能及表单的验证
  • 10
    vue指令·-2
  • 1
    【专栏：HTML进阶篇】HTML5拖放API与触摸事件
    24
  • 2
    [译][AI OpenAI-doc] 助手 API Beta
    50
  • 3
    基于Web API的自动化信息收集和整理
    26
  • 4
    【Flutter前端技术开发专栏】Flutter中的自定义绘制与Canvas API
    26
  • 5
    Node.js中构建RESTful API的最佳实践
    38
  • 6
    DataWorks操作报错合集之在DataWorks同步数据时，遇到乱码问题，该怎么解决（rest api数据源）
    30
  • 7
    【Go语言专栏】基于Go语言的RESTful API开发
    24
  • 8
    nacos 单节点Caused by: com.alibaba.nacos.api.exception.NacosException: failed to req API:/nacos/v1/ns/s
    41
  • 9
    【Swift开发专栏】Swift中的RESTful API集成实战
    37
  • 10
    深度学习在图像识别中的应用与挑战构建高效可扩展的RESTful API：后端开发的实战指南
    32

    • 相关课程

    更多
  • 体验-K8S API 基础及Pod 基本应用
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门教程开发文档
  • React 入门与实战

    • 相关电子书

    更多
  • CUDA MATH API
  • API PLAYBOOK
  • 传统企业的“+互联网”-API服务在京东方的实践

    • 相关实验场景

    更多
  • 快速体验智能体API应用
  • 前端开发基础6：Node.js和LESS预编译工具
  • Elasticsearch Java API Client 开发
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考