东东吖带你打通全栈,完成人生当中第一个全栈项目是种什么体验?

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

项目介绍

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

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

go-vue-react项目

全栈启蒙版本分支:分支go-vue-react-base

my github 主页:github.com/github-kiko

前言

最近,我完成了人生中第一个全栈项目。这个项目让我学到了很多东西,也让我深刻地意识到了全栈工程师的重要性和难度。 首先,我想介绍一下我使用的技术栈。前端部分,我选择了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/

截屏2023-03-17 22.20.46.png

引入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的组件通信,所以没有把添加编辑弹窗封装成独立的一个组件

如何注册组件?

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

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

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

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

5.需要进技术交流群的,请加我微信:fangdongdong_25,备注:go-vue-react

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/9808.html

(0)
上一篇 2023年 4月 22日 下午9:20
下一篇 2023年 4月 22日 下午9:20

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信