oh-my-code

Vue
Vue
发布日期:   2024-02-05
文章字数:   2.2k
阅读时长:   8 分钟
阅读次数:  
难度 中等

backend

安装go环境

wget https://go.dev/dl/go1.21.6.linux-amd64.tar.gz
sudo tar -C /usr/local/ -xzf go1.21.6.linux-amd64.tar.gz
go mod init oh-my-code
go env -w GOPROXY=https://proxy.golang.com.cn,direct
go get github.com/gin-gonic/gin
go get github.com/lib/pq

安装数据库

选择Postgresql作为我们的数据库环境，然后使用如下配置文件启动容器：

version: "3.1"
services:
  postgres:
    image: postgres:9.5
    container_name: postgres_db
    restart: always
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      POSTGRES_DB: postgres
    volumes:
      - /home/ha/oh-my-code-data:/var/lib/postgresql/data
    ports:
      - 5432:5432

使用如下命令启动容器：

docker-compose up -d

启动后连接数据库并且创建表，如下命令所示：

psql -Upostgres -dpostgres -h localhost -p 5432

创建user_configs表，命令如下：

postgres=#create table user_configs(id int,username varchar,url varchar,port int,password varchar);
CREATE TABLE
postgres=# select * from user_configs;
 id | username | url | port | password 
----+----------+-----+------+----------
(0 rows)

编写后端代码

package main

import (
  "database/sql"
  "log"
  "net/http"

  "github.com/gin-gonic/gin"
)

type UserConfig struct {
  ID       int    `json:"id"`
  Username string `json:"username"`
  URL      string `json:"url"`
  Port     int    `json:"port"`
  Password string `json:"password"`
}

var db *sql.DB

func main() {
  var err error

  // 连接到 PostgreSQL 数据库
  db, err = sql.Open("pgx", "host=localhost user=postgres password=postgres dbname=postgres")
  if err != nil {
    log.Fatal(err)
  }
  defer db.Close()

  // 创建 Gin 路由器
  router := gin.Default()

  // 获取所有用户配置
  router.GET("/user-configs", func(c *gin.Context) {
    rows, err := db.Query("SELECT * FROM user_configs")
    if err != nil {
      c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
      return
    }
    defer rows.Close()

    var userConfigs []UserConfig
    for rows.Next() {
      var userConfig UserConfig
      if err := rows.Scan(&userConfig.ID, &userConfig.Username, &userConfig.URL, &userConfig.Port, &userConfig.Password); err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
        return
      }
      userConfigs = append(userConfigs, userConfig)
    }

    c.JSON(http.StatusOK, userConfigs)
  })

  // 获取单个用户配置
  router.GET("/user-configs/:id", func(c *gin.Context) {
    id := c.Param("id")

    row := db.QueryRow(`SELECT * FROM user_configs WHERE id = \$1`, id)

    var userConfig UserConfig
    if err := row.Scan(&userConfig.ID, &userConfig.Username, &userConfig.URL, &userConfig.Port, &userConfig.Password); err != nil {
      c.JSON(http.StatusNotFound, gin.H{"error": "user config not found"})
      return
    }

    c.JSON(http.StatusOK, userConfig)
  })

  // 创建用户配置
  router.POST("/user-configs", func(c *gin.Context) {
    var userConfig UserConfig

    if err := c.ShouldBindJSON(&userConfig); err != nil {
      c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
      return
    }

    result, err := db.Exec(`INSERT INTO user_configs (username, url, port, password) VALUES (\$1, \$2, \$3, \$4) RETURNING id`, userConfig.Username, userConfig.URL, userConfig.Port, userConfig.Password)
    if err != nil {
      c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
      return
    }

    id, err := result.LastInsertId()
    if err != nil {
      c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
      return
    }

    userConfig.ID = int(id)

    c.JSON(http.StatusCreated, userConfig)
  })

  // 更新用户配置
  router.PUT("/user-configs/:id", func(c *gin.Context) {
    id := c.Param("id")

    var userConfig UserConfig

    if err := c.ShouldBindJSON(&userConfig); err != nil {
      c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
      return
    }

    result, err := db.Exec(`UPDATE user_configs SET username = \$1, url = \$2, port = \$3, password = \$4 WHERE id = \$5`, userConfig.Username, userConfig.URL, userConfig.Port, userConfig.Password, id)
    if err != nil {
      c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
      return
    }

    rowsAffected, err := result.RowsAffected()
    if err != nil {
      c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
      return
    }

    if rowsAffected == 0 {
      c.JSON(http.StatusNotFound, gin.H{"error": "user config not found"})
      return
    }

    c.JSON(http.StatusOK, userConfig)
  })

  // 删除用户配置
  router.DELETE("/user-configs/:id", func(c *gin.Context) {
    id := c.Param("id")

    result, err := db.Exec(`DELETE FROM user_configs WHERE id = \$1`, id)
    if err != nil {
      c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
      return
    }

    rowsAffected, err := result.RowsAffected()
    if err != nil {
      c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
      return
    }

    if rowsAffected == 0 {
      c.JSON(http.StatusNotFound, gin.H{"error": "user config not found"})
      return
    }

    c.JSON(http.StatusOK, gin.H{"message": "user config deleted successfully"})
  })

  // 启动 Gin 服务
  if err := router.Run(":10024"); err != nil {
    log.Fatal(err)
  }
}

front

安装node开发环境

  1. 安装nvm
  2. 使用nvm安装node
nvm ls-remote
nvm install v16.20.2
  1. 使用nvm确定node版本
nvm use v16.20.2
  1. 安装pnpm
npm install pnpm -g
  1. 下载vue
pnpm install vue -g
pnpm install vue@cli -g
pnpm install create-vite-app -g

6.创建项目

create-vite-app oh-my-code
pnpm install
pnpm run dev
pnpm run build
  1. 下载element-ui
pnpm i element-plus
pnpm i vuex
  1. chatgpt 搜索基本代码

编写前端代码

步骤 1：创建一个 Vue.js 项目

npx vite create user-management-ui

步骤 2：安装 Element Plus

cd user-management-ui
npm install element-plus

步骤 3：在 main.js 中导入 Element Plus

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

const app = createApp({})

app.use(ElementPlus)

步骤 4：创建用户配置模型

// src/models/userConfig.js
export default class UserConfig {
  constructor(id, username, url, port, password) {
    this.id = id
    this.username = username
    this.url = url
    this.port = port
    this.password = password
  }
}

步骤 5：创建用户配置服务

// src/services/userConfigService.js
import axios from 'axios'

const userConfigService = {
  async getAllUserConfigs() {
    const response = await axios.get('/user-configs')
    return response.data
  },
  async getUserConfigById(id) {
    const response = await axios.get(`/user-configs/${id}`)
    return response.data
  },
  async createUserConfig(userConfig) {
    const response = await axios.post('/user-configs', userConfig)
    return response.data
  },
  async updateUserConfig(userConfig) {
    const response = await axios.put(`/user-configs/${userConfig.id}`, userConfig)
    return response.data
  },
  async deleteUserConfig(id) {
    await axios.delete(`/user-configs/${id}`)
  },
}

export default userConfigService

步骤 6：创建用户管理界面组件

// src/components/UserManagement.vue
<template>
  <div>
    <h1>用户管理</h1>
    <el-table :data="userConfigs" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="url" label="URL" />
      <el-table-column prop="port" label="端口" width="100" />
      <el-table-column prop="password" label="密码" />
      <el-table-column
        fixed="right"
        label="操作"
        width="150"
      >
        <template #default="scope">
          <el-button
            type="text"
            @click="editUserConfig(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            @click="deleteUserConfig(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="'编辑用户配置'"
      :visible="dialogVisible"
      @close="dialogVisible = false"
    >
      <el-form :model="userConfig" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="userConfig.username" />
        </el-form-item>
        <el-form-item label="URL">
          <el-input v-model="userConfig.url" />
        </el-form-item>
        <el-form-item label="端口">
          <el-input-number v-model="userConfig.port" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userConfig.password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveUserConfig">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from 'vue'
import userConfigService from '@/services/userConfigService'

export default {
  setup() {
    const userConfigs = ref([])
    const dialogVisible = ref(false)
    const userConfig = ref({
      id: '',
      username: '',
      url: '',
      port: '',
      password: '',
    })

    const getUserConfigs = async () => {
      const response = await userConfigService.getAllUserConfigs()
      userConfigs.value = response
    }

    const saveUserConfig = async () => {
      if (userConfig.value.id) {
        await userConfigService.updateUserConfig(userConfig.value)
      } else {
        await userConfigService.createUserConfig(userConfig.value)
      }
      dialogVisible.value = false
      getUserConfigs()
    }

    const deleteUserConfig = async (userConfig) => {
      await userConfigService.deleteUserConfig(userConfig.id)
      getUserConfigs()
    }

    const editUserConfig = (userConfig) => {
      userConfig.value = Object.assign({}, userConfig)
      dialogVisible.value = true
    }

    getUserConfigs()

    return {
      userConfigs,
      dialogVisible,
      userConfig,
      saveUserConfig,
      deleteUserConfig,
      editUserConfig,
    }
  },
}
</script>

步骤 7：在 App.vue 中使用用户管理界面组件

<template>
  <div>
    <user-management />
  </div>
</template>

<script>
import UserManagement from './components/UserManagement.vue'

export default {
  components: {
    UserManagement,
  },
}
</script>

步骤 8：运行项目

npm run dev

现在，你就可以在浏览器中访问 http://localhost:3000 来查看用户管理界面了。你可以在界面上查看、修改、创建和删除用户配置。

注意：

  • 在上面的代码中，我使用了 axios 来发送 HTTP 请求。你也可以使用其他的 HTTP 请求库，比如 fetch。
  • 在上面的代码中，我使用了 Element Plus 作为 UI 库。你也可以使用其他的 UI 库，比如 Ant Design Vue。
文章作者: growdu
文章链接: https://growdu.cn/2024/02/05/vue/oh-my-code/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 growdu !
Vue
相关文章
CORS相关问题 2025-04-17 搭建npm离线仓库 2024-09-15 vue后端api开发 2024-04-15 vue从登陆注册开始 2024-04-14 vue项目开发流程 2024-04-12 5种回到顶部的写法从实现到增强 - 小火柴的蓝色理想 - 博客园 2024-02-06
  目录
分类导航
随笔3 AI29 计算机基础13 算法1 博客搭建7 ChatGPT2 集群63 计算机通信1 数据库59 数据库深入93 数据库93 Docker11 DPDK26 编辑工具4 Elasticsearch4 FAQ1 Go Web1 hometown2 编程语言16 人生11 网络9 Linux38 OPC1 openGauss4 页面12 PostgreSQL54 程序员自我修养1 协议11 stock1 存储5 成长之路1 工具20 视频作品1 VPP18 Vue13 Web1 代码示例11 BenchmarkSQL1 PostgreSQL 源码修炼之路14
最热文章
1
PostgreSQL 逻辑复制全链路：以一个真实事务为例，从 `INSERT` 到 `apply` 的源码级旅程
数据库🔥 2162
 2
PostgreSQL 逻辑复制 Stream 执行逻辑源码级拆解：从 reorderbuffer 触发到订阅端落盘回放
数据库🔥 1765
 3
PostgreSQL 行锁机制源码级深度拆解：4 种锁模式 + xmax + MultiXact 的完整链路
数据库🔥 1656
 4
PostgreSQL reorderbuffer.c 函数级源码全集:5615 行 / 95 个函数的逐函数解析
数据库深入🔥 1650
 5
PostgreSQL 目录快照源码级深度拆解：系统表读取的 MVCC 真相与失效机制
数据库🔥 1604
 6
13 逻辑复制深入
数据库深入🔥 1570
 7
0 Postgresql存储、索引及系统优化、主备切换
PostgreSQL🔥 1495
 8
PostgreSQL 读一行数据源码级深度拆解：MVCC 在每个环节的落点
数据库🔥 1464
 9
PostgreSQL WAL 记录类型完全指南：21 个 RMGR × 80+ 种记录的源码级拆解
数据库🔥 1431
 10
一文读懂openguass dcf网络模块
集群🔥 1420
 11
PostgreSQL 元数据存储机制：从磁盘文件到内存缓存，`pg_class` 撑起的整个系统表体系
数据库🔥 1411
 12
openGauss 并行解码设计原理深度拆解:reader + 多 worker + CSN 三层架构的源码级剖析
数据库深入🔥 1344
 13
逻辑复制源码分析
数据库深入🔥 1327
 14
PostgreSQL 逻辑复制:catalog 改动、可见性判定与 xmin/xmax 推进全景
数据库深入🔥 1317
 15
自托管服务全家桶：从原文方案到可复制实操手册
人生🔥 1278
 16
PostgreSQL CREATE_REPLICATION_SLOT 端到端源码分析:从 SQL 到 snapbuild 状态机的完整链路(每个函数每个参数)
数据库深入🔥 1277
 17
PostgreSQL syscache 模块源码深度拆解:CatCache 数据结构、LRU 哈希表、cache invalidation 全链路
数据库深入🔥 1216
 18
PostgreSQL 18 内核数据结构全景：RangeVar 与 20+ 个核心数据结构源码级拆解
数据库🔥 1158
 19
PostgreSQL 逻辑复制里 `RUNNING_XACTS` 写入机制与快照 `xmin / xmax / xip` 的演化：源码级深度拆解
数据库🔥 1119
 20
PostgreSQL 分区表：从一行 `PARTITION BY` 到路由热路径的全链路拆解
数据库🔥 1094