项目介绍

成为一名全栈工程师是许多程序员都渴望实现的梦想。但是这并不是一件容易的事情：它需要各种技能和知识，以及持续学习和实践的态度。

我最近做了一个项目叫做"go-vue-react"，这是一个前后端分离的Web应用程序。在这个项目中，我使用了三种不同的技术栈：Go语言、Vue 3 和React 18。其中后端是使用的Go语言，数据库采用的是Mysql。前端做了两套，分别使用了Vue 3 和 React 18 技术栈， 大家根据自己的需要，自行选择学习其中的一个或者多个项目。下面是我的经验分享：

全栈启蒙项目：go-vue-react-base

github:github.com/github-kiko…

全栈学习成长史

2023年3月

1. 2023-03-11, 项目发起，创建了go-vue-react项目
2. 2023-03-12, 使用go+mysql实现了后端最基础的crud
3. 2023-03-18, 使用vue3+elementPlus完成了crud,完成了第一个全栈小项目

未来学习计划

1. 2023-03-xx, 将vue3中的js替换为ts,学习ts的使用

2023年4月

1. 2023-04-xx, 使用react18+ts+Material-UI完成了react技术栈的crud

2. 2023-04-xx, 新增路由、调整完善go、vue、react目录结构，规划企业级项目

3. 2023-04-xx, 完成全栈学习成长史功能,记录自己的全栈学习成长史，激发自己更好的学习

前言

最近，我完成了人生中第一个全栈项目。这个项目让我学到了很多东西，也让我深刻地意识到了全栈工程师的重要性和难度。 首先，我想介绍一下我使用的技术栈。前端部分，我选择了vite+vue3+elemetplus。vite是一个新兴的构建工具，它可以提供非常快的开发启动速度，而vue3则是目前最流行的前端框架之一，它的响应式系统和组合API让开发变得更加简单和高效。当然，我也不能忘记Element Plus，这是一个基于Vue 3的UI组件库，它的美观和易用性都很出色。

后端部分，我选择了go语言和mysql数据库。go语言是一门非常适合构建高性能后端服务的语言，它的并发性和轻量级特性使它成为了不少大型互联网公司的选择。而mysql作为关系型数据库，在数据处理方面表现也非常优秀。

在上一篇【东东吖带你打通全栈】系列文章中，我们已经使用go+mysql实现了后端的crud，所以本篇文章，主要重点讲解前端使用vite+vue3+elemetplus实现crud，并和后端进行联调，完成了人生中第一个全栈项目。

近年来，随着前端技术的快速发展，越来越多的开发者将目光投向了Vue.js。而在Vue.js的生态系统中，vite作为一款全新的构建工具也备受关注。相比于传统的构建工具Webpack，vite更加轻量级、快速，并且支持Vue 3的最新特性。

在本文中，我们将主要围绕如何使用vite搭建Vue 3项目进行讲解。我们将从创建项目、安装依赖使用Element Plus等方面入手，帮助读者逐步掌握vite+Vue 3的开发技巧。

创建项目

以下是 vite 的官方网站，中文网站在vitejs前面加上cn.

vitejs.dev/

npm create vite@latest  

按提示创建vue-ts项目

引入elementPlus

以下是 elementPlus 的官方网站，访问按提示跳转到中文网站 element-plus.org/

 npm install element-plus --save

 // main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app'

编写前端CRUD界面

作为前端工程师，编写页面对我们来说还是比较简单的，主要是利用vue3+elementPlus

以下是 vue 的官方网站，中文网站在vuejs前面加cn.

vuejs.org/

引入axios，封装API

以下是 axios 的官方网站,中文网站把com改成cn

axios-http.com/

npm install axios

在requse.js中引入axios.

//requse.js
import axios from 'axios'


// 创建axios实例
const conf = {
    // baseURL: process.env.VUE_APP_BASE_API,
    // baseURL: 'http://restapi.amap.com',    //高德
    //  baseURL: 'http://api.map.baidu.com',   //百度
    // baseURL:"/api2",
    //  baseURL:" http://127.0.0.1:3000",

    baseURL: '/api', // 根路径
   
    timeout: 90000, // 请求超时时间
    // withCredentials:true ,
  };

  const service = axios.create(conf);
  

//请求拦截器        
service.interceptors.request.use(
    config=>{
        // console.log("config:",config);
        return config
    },
    error=>{
        return   Promise.reject(error);
    },
    
    )

// 相应拦截器
service.interceptors.response.use(
    response=>{
        // console.log("response:",response);
     const   res =response.data
        return res
        
    },
   error=>{
       return Promise.reject(error);
   }
)


export   default service;
export { conf };

我对四种请求进行了单独封装，定义在一个http.js文件里面

//http.js
import request from "./request"
const http={
    get(url,params){
        return request({
            url:url,
            method:'get',
            params:params,
        })
    },
    post(url,params){
        return request({
            url:url,
            method:'post',
            data:params
        })

    },
    put(url,params){
        return request({
            url:url,
            method:'put',
            data:params


        })
    },
    delete(url,params){
        return request({
            url:url,
            method:'delete',
            data:params
        })
    }

}

export default http

在组件层进行引入调用

import { listadd,listdelete ,listupdate,listquery} from "../../api/crudList";

// 查询
const search=async()=>{
  const { code,data } = await listquery({ 
       name:name.value,
       page:page.value,
       pageSize :pageSize .value

       }
    );
    if (code==200) { 
      tableData.value=data
      
    }
   

}

search()

联调测试，解决跨越

跨越问题，在我之前的文章中有讲，大家自己去翻一翻，前端和后端都可以解决跨越问题。本文，我们是使用前端代理解决跨越

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({


server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  },



base: './', //打包相对路径
})

总结

1.原本我是准备使用ts开发项目的，但是我对ts也不熟悉，所以本文暂时用js开发的，在后续我将调整使用ts,请给我一定的时间。

2.vue3的.value问题，在配置中开启 $ref , vue3.2 的语法糖 ，并没有生效，所以还是.value实现的项目

3.项目中我引入组件，使用绝对路径（根路径）报错，大概率是和配置项有关，所以目前暂时使用的相对路径

4.不熟悉vue3的组件通信，所以没有把添加编辑弹窗封装成独立的一个组件

如何注册组件？

父组件如何调用子组件里面的方法？

子组件如何调用父组件里面的方法？

父组件如何传值给子组件？

子组件如何传值给父组件？