'资讯列表'

.env.development

@@ -1,4 +1,5 @@
 # 变量必须以 VITE_ 为前缀才能暴露给外部读取
 NODE_ENV = 'development'
 VITE_APP_TITLE = '教学一体化平台'
-VITE_APP_BASE_API = 'http://39.106.16.162:8080'
+# VITE_APP_BASE_API = 'http://39.106.16.162:8080'
+VITE_APP_BASE_API = 'http://127.0.0.1:8080'

src/api/news.ts

@@ -0,0 +1,26 @@
+import request from '@/utils/requset'
+//获取栏目
+/**
+ * queryCategory
+ * @returns
+ */
+export function queryCategory() {
+    return request.get(`/api/cms-category/query`);
+}
+//获取文章
+/**
+ * queryEssay
+ * @param {string} category_id category_id
+ * @returns
+ */
+export function queryEssay(category_id) {
+    return request.get(`/api/cms-essay/query?category_id=${category_id}`);
+}
+//修改新闻
+export function editEssay(params) {
+    return request.put(`/api/cms-essay/edit`, params);
+}
+//根据id查询关于我们文章
+export function queryEssayById(essay_id) {
+    return request.get(`/api/cms-essay/queryessaybyid?essay_id=${essay_id}`);
+}

src/views/pedagogicalReform/index.vue

@@ -1,14 +1,116 @@
 <template>
-  <div>
-    111
+  <div class="header_title">
+    <span>资讯新闻</span>
+    <el-divider style="width: 800px"/>
+  </div>
+  <div class="container">
+    <div class="left">
+      <ul>
+        <li v-for="category in column" :key="category.id">
+          <div class="box">
+            <div class="categorySty">
+              <span>· {{category.categoryName}}</span>
+            </div>
+            <div style="margin-left: 10px">
+              <ul v-if="category.essays">
+                <li class="essaySty" v-for="essay in category.essays" :key="essay.id" @click="selectEssay(essay)">
+                  <span>{{essay.title}}</span>
+                  <span>{{essay.publishTime}}</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </li>
+      </ul>
+      <el-divider/>
+    </div>
   </div>
 </template>
 
 <script lang='ts' setup>
-// import { onMounted, reactive, ref, toRefs, watch } from 'vue'
-
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import {queryCategory,queryEssay} from '@/api/news'
+const column = ref([])
+const essayContent = ref({})
+//获取栏目信息
+const CategoryList = async () => {
+  const res = await queryCategory()
+  column.value = res.data
+  // console.log(column.value,'栏目信息')
+}
+const selectEssay =async (essay)=>{
+  essayContent.value = essay
+  // console.log(essayContent,'所选文章')
+};
+// 异步获取栏目信息和对应的文章标题
+const fetchCategoriesAndEssays = async () => {
+  try {
+    const categoriesResponse = await queryCategory();
+    column.value = categoriesResponse.data;
+    // 对于每个栏目，获取其文章列表
+    for (const category of column.value) {
+      const essaysResponse = await queryEssay(category.id);
+      category.essays = essaysResponse.data || [];
+      console.log(category.essays,'s')
+    }
+  } catch (error) {
+    console.error('查找信息失败', error);
+  }
+}
+onMounted(() => {
+  CategoryList()
+  fetchCategoriesAndEssays()
+})
 </script>
 
-<style lang='scss' scoped>
-
+<style scoped>
+.header_title{
+  font-size: 20px;
+  color: dodgerblue;
+  font-weight: bold;
+  margin-left:490px;
+  margin-top: 30px;
+}
+.left{
+  margin-left: 600px;
+  margin-top: 10px;
+  height: 85vh;
+  overflow-y: auto;
+}
+.left::-webkit-scrollbar {
+  width: 0px;
+}
+.box{
+  width: 502px;
+  margin-bottom: 5px;
+}
+.categorySty{
+  margin-bottom: 10px;
+  font-size: 25px;
+  font-weight: 550;
+  width: 560px;
+  height: 50px;
+  line-height: 50px;
+  /*background: #FFB21E;*/
+}
+.categorySty:hover{
+  background: gainsboro;
+  cursor: pointer;
+}
+.essaySty{
+  display: flex; /* 启用Flexbox布局 */
+  justify-content: space-between; /* 水平方向两端对齐 */
+  align-items: center; /* 垂直居中对齐 */
+  height: 40px;
+  line-height: 40px;
+  margin-bottom: 5px;
+  width:520px;
+  font-size: 20px;
+  margin-left: 30px;
+  /*background: #FFB21E;*/
+}
+.essaySty:hover{
+  background: gainsboro;
+  cursor: pointer;
+}
 </style>

src/views/scientificResearch/index.vue

@@ -1,14 +1,62 @@
 <template>
-  <div>
-    111
+  <div class="content">
+    <el-card style="max-width:800px;height: 80vh">
+      <template #header>
+        <div class="card-header">
+          <span>关于我们</span>
+        </div>
+      </template>
+      <div class="news_main">
+<!--        {{ aboutEssay.content }}-->
+        <textarea v-model="aboutEssay.content" style="width: 100%;height: 75vh;border: none;"></textarea>
+      </div>
+      <template #footer>
+        <span>...</span>
+      </template>
+    </el-card>
   </div>
 </template>
 
-<script lang='ts' setup>
-import { onMounted, reactive, ref, toRefs, watch } from 'vue'
-
+<script setup>
+import {ref,onMounted} from 'vue'
+import {queryEssayById} from '@/api/news'
+//关于我们文章
+const aboutEssay = ref('')
+const aboutContent = async (essay_id)=>{
+  const responseEssay = await queryEssayById('1')
+  aboutEssay.value = responseEssay.data
+  console.log(aboutEssay.value,'关于我们文章')
+}
+onMounted(()=>{
+  aboutContent()
+})
 </script>
 
-<style lang='scss' scoped>
-
+<style scoped>
+.content{
+  display: flex;
+  justify-content: center;
+}
+.el-card{
+  width: 800px;
+  height: 80vh;
+  margin-top: 30px;
+  margin-bottom: 30px;
+}
+.card-header{
+  font-size: 20px;
+  color: #6da0ff;
+  text-align: center;
+  font-weight: bold;
+}
+.news_main{
+  padding: 20px;
+  height: 65vh;
+  font-size: 20px;
+  line-height: 1.5;
+  overflow-y: auto;
+}
+.news_main::-webkit-scrollbar {
+  width: 0px;
+}
 </style>