友情链接修改

src/api/links.js

@@ -0,0 +1,21 @@
+import http from '../utils/http/http.js'
+// 获取友情链接
+const getalllinks = (params) => {
+    return http.post('/api/alllinks', params)
+};
+// 添加友情链接
+const addlinks = (params) => {
+    return http.post('/api/links', params)
+};
+//删除友情链接
+const UpdateLinks = (params) => {
+    return http.put('/api/links', params)
+};
+
+// 删除友情链接
+const deletelinks = (params) => {
+    return http.del('/api/links', params)
+}
+export default {
+    getalllinks, addlinks, UpdateLinks,deletelinks
+}

src/router/index.js

@@ -154,6 +154,20 @@ const routes = [
                 },
                 component: () => import('../view/contact/contact.vue'),
             },
+            {
+                path: '/links/list',
+                meta: {
+                    title: '获取友情链接'
+                },
+                component: () => import('../view/links/link.vue'),
+            },
+            {
+                path: '/links/add',
+                meta: {
+                    title: '添加友情链接'
+                },
+                component: () => import('../view/links/add.vue'),
+            },
         ]
     },
 ]

src/view/Home.vue

@@ -79,6 +79,12 @@
                             </el-icon>
                             <span>新闻管理</span>
                         </el-menu-item>
+                        <el-menu-item index="/links/list" @click="saveActiveNav('/links/list')">
+                            <el-icon>
+                                <user/>
+                            </el-icon>
+                            <span>友情链接管理</span>
+                        </el-menu-item>
                         <el-menu-item index="/contact/list" @click="saveActiveNav('/contact/list')">
                             <el-icon>
                                 <user/>

src/view/links/add.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
+          <span>详情</span>
+          <el-button size="mini" style="float:right" type="info" @click="router.go(-1)">返回</el-button>
+          <el-button size="mini" style="float:right" type="primary" @click="addContent">添加</el-button>
+        </div>
+      </template>
+      <el-form>
+        <el-form-item label="标题:">
+          <el-input v-model="data.title" placeholder="请输入标题" />
+        </el-form-item>
+        <el-form-item label="链接:">
+          <el-input v-model="data.url" placeholder="请输入链接" />
+        </el-form-item>
+        <el-form-item label="排序:">
+          <el-input-number v-model="data.sort"/>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+  </div>
+</template>
+<script setup>
+import { onBeforeMount, reactive, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from "element-plus";
+import links from '../../api/links.js';
+
+const route = useRoute();
+const router = useRouter();
+const data = reactive({
+  id: 0,
+  title: '',
+  url: '',
+  sort: '',
+})
+const addContent = async () => {
+  const res = await links.addlinks({
+    id: 0,
+    title: data.title,
+    url: data.url,
+    sort: data.sort,
+  });
+  if (res.data.Code === 200) {
+    ElMessage.success("添加成功")
+    data.url = ''
+    data.sort = ''
+    data.title = ''
+  } else {
+    ElMessage.error(res.data.Msg)
+  }
+}
+</script>
+<style lang="scss" scoped></style>

src/view/links/link.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <el-card>
+      <el-button type="primary"
+                 @click="() => router.push({ path: '/links/add'})">添加
+      </el-button>
+      <!-- 添加el-dialog组件 -->
+      <el-table :data="tableData" border style="width: 100%;margin-top:20px">
+        <el-table-column label="序号" width="60">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="title" label="标题" width="180">
+          <template #default="scope">
+            <el-input v-model="scope.row.title"   @change="UpData(scope.row.ID,'title',scope.row.title)" size="mini" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="types" label="链接" width="280">
+          <template #default="scope">
+            <el-input v-model="scope.row.url"   @change="UpData(scope.row.ID,'url',scope.row.url)" size="mini" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="nums" label="排序" width="180">
+          <template #default="scope">
+            <el-input-number v-model="scope.row.sort" @change="UpData(scope.row.ID,'sort',scope.row.sort)" size="mini" />
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" width="200">
+          <template #default="scope">
+            <el-button type="danger" size="small" @click="deleteData(scope.row.ID)">删除</el-button>
+            <!--            <el-button type="primary" size="small" @click="deleteResource(scope.row.ID)">修改</el-button>-->
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <el-pagination style="margin-top:20px" :current-page="searchForm.page" :page-size="searchForm.size"
+                     :total="total"
+                     @current-change="handleCurrentChange"/>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, reactive, ref} from "vue";
+import {ElMessage, ElMessageBox} from 'element-plus';
+import {useRouter} from 'vue-router'
+import link from "../../api/links.js";
+const dataType = reactive([])
+
+const router = useRouter();
+// Dom 挂载之后
+onMounted(() => {
+  getDataAll();
+})
+
+let tableData = ref([]);
+let total = ref(0);
+
+// 搜索条件
+const searchForm = reactive({
+  page: 1,
+  size: 10,
+  desc: 'created_at desc'
+})
+
+const UpData = async (id,field,value) => {
+  const res = await link.UpdateLinks({
+    id: parseInt(id),
+    [field]: value,
+  });
+  if (res.data.Code === 200) {
+      ElMessage.success("修改成功")
+      await getDataAll();
+    } else {
+      ElMessage.error(res.data.Msg)
+    }
+}
+// 获取资源列表
+const getDataAll = async () => {
+  const res = await link.getalllinks(searchForm);
+  tableData.value = res.data.Data.Data;
+  total.value = res.data.Data.Size;
+}
+
+const handleCurrentChange = (current) => {
+  searchForm.page = current;
+  getDataAll();
+}
+
+// 删除资源信息
+const deleteData = (id) => {
+  ElMessageBox.confirm(
+      '确定要删除该资源信息吗?',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  ).then(async () => {
+    const res = await link.deletelinks({id: id});
+    if (res.data.code === 200) {
+      ElMessage.success("删除成功")
+      await getDataAll();
+    } else {
+      ElMessage.error(res.data.msg)
+    }
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '取消删除',
+    })
+  })
+}
+</script>
+
+<style lang="scss" scoped></style>