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
  目录
分类导航
随笔2 AI27 算法1 计算机基础13 博客搭建7 ChatGPT2 集群63 计算机通信1 数据库34 数据库深入80 DPDK26 Docker11 Elasticsearch4 编辑工具4 FAQ1 Go Web1 hometown2 编程语言16 网络9 OPC1 Linux38 openGauss4 页面12 PostgreSQL54 程序员自我修养1 协议11 成长之路1 stock1 存储5 工具20 VPP18 视频作品1 Vue13 Web1 代码示例11 数据库15 BenchmarkSQL1 PostgreSQL 源码修炼之路14
最热文章
1
13 逻辑复制深入
数据库深入🔥 1570
 2
0 Postgresql存储、索引及系统优化、主备切换
PostgreSQL🔥 1495
 3
一文读懂openguass dcf网络模块
集群🔥 1420
 4
逻辑复制源码分析
数据库深入🔥 1327
 5
PostgreSQL 分区表：从一行 `PARTITION BY` 到路由热路径的全链路拆解
数据库🔥 1094
 6
applyparallelworker.c 之 LA 端源码深度解析:Leader Apply Worker 的指挥中枢
数据库深入🔥 1082
 7
PostgreSQL Background Worker 全解：从 `RegisterBackgroundWorker` 到逻辑复制 4 类 worker 的全生命周期
数据库🔥 1078
 8
PostgreSQL的后台进程walsender分析 - 关系型数据库 - 亿速云
PostgreSQL🔥 1033
 9
PostgreSQL 逻辑复制的监控：六张视图 + 一组可执行 SQL，把 publisher/subscriber 的速率与健康度彻底看透
数据库🔥 1032
 10
PostgreSQL 逻辑复制支持 DDL 之后：DDL 与 DML 的时序难题（重点：分区表）
数据库🔥 999
 11
reorderbuffer.c 源码深度解析:PostgreSQL 逻辑复制的"事务重组引擎
数据库深入🔥 953
 12
PostgreSQL 内核开发：读取一张表的 9 步标准流程与缓存全景
数据库🔥 938
 13
从 `postgres` 二进制到生产级守护 —— PostgreSQL 最外层模块与启动全流程拆解
数据库🔥 936
 14
支持逻辑复制同步 DDL 适配 SQL Server 方案
数据库深入🔥 934
 15
PostgreSQL 逻辑复制的 ReorderBuffer 与事务机制：从一行 WAL 到一致性变更流的全链路绑定
数据库🔥 913
 16
DDL同步架构（美化版）
数据库深入🔥 908
 17
PostgreSQL Latch 机制详解：从一行 SetLatch 到 epoll 的内核之旅
数据库🔥 871
 18
pgbench 源码全解：一个 C 文件如何撑起 PostgreSQL 官方压测工具
数据库🔥 860
 19
PostgreSQL libpq 机制与缓冲区详解
数据库🔥 850
 20
PostgreSQL 逻辑复制 spill 文件深度剖析：从 `xid-*.spill` 到 TPC-C 的增长方程
数据库🔥 845