前后端分离项目！！！！Springboot+vue3实现一个学院官网的前后端！

<template>

? <div>

??? <div class="header">

????? <img src="@/assets/header.jpg" alt="" style="margin-top: 4px">

??? </div>



??? <div id="nav">

????? <div class="line"></div>

????? <el-menu

????????? :default-active="activeIndex2"

????????? class="el-menu-demo"

????????? mode="horizontal"

????????? @select="handleSelect"

????????? background-color="#015723"

????????? text-color="#fff"

????????? active-text-color="#ffd04b"

????????? style="height: 41px ;width: 1010px;"

????????? align-content: center>

??????? <el-menu-item index="1" @click="goTOPage(1)">首页</el-menu-item>



??????? <el-menu-item index="2" @click="goTOPage(2)">学院简介</el-menu-item>

??????? <el-menu-item index="3">院务公开</el-menu-item>

??????? <el-sub-menu index="4">

????????? <template #title>组织结构</template>

????????? <el-menu-item index="4-1">组织结构</el-menu-item>

????????? <el-menu-item index="4-2">学院领导</el-menu-item>

????????? <el-menu-item index="4-3">学院办公室</el-menu-item>

????????? <el-menu-item index="4-4">教学部</el-menu-item>

????????? <el-menu-item index="4-5">学工办</el-menu-item>

????????? <el-menu-item index="4-6">软件工程与技术</el-menu-item>

????????? <el-menu-item index="4-7">互联网工程与技术</el-menu-item>

????????? <el-menu-item index="4-8">数据科学与大技术</el-menu-item>

????????? <el-menu-item index="4-9">实验实训中心</el-menu-item>

??????? </el-sub-menu>

??????? <el-sub-menu index="5">

????????? <template #title>党建工作</template>

????????? <el-menu-item index="5-1">理论学习</el-menu-item>

????????? <el-menu-item index="5-2">师生党建</el-menu-item>

????????? <el-menu-item index="5-3">组织结构</el-menu-item>

????????? <el-menu-item index="5-4">教工之家</el-menu-item>

??????? </el-sub-menu>

??????? <el-sub-menu index="6">

????????? <template #title>教学科研</template>

????????? <el-menu-item index="6-1">课程建设</el-menu-item>

????????? <el-menu-item index="6-2">专业建设</el-menu-item>

????????? <el-menu-item index="6-3">教研改革</el-menu-item>

????????? <el-menu-item index="6-4">教务信息</el-menu-item>

??????? </el-sub-menu>

??????? <el-sub-menu index="7">

????????? <template #title>实践教学</template>

????????? <el-menu-item index="7-1">学科竞赛</el-menu-item>

????????? <el-menu-item index="7-2">集中实践</el-menu-item>

??????? </el-sub-menu>

??????? <el-sub-menu index="8">

????????? <template #title>学生工作</template>

????????? <el-menu-item index="8-1">公告通知</el-menu-item>

????????? <el-menu-item index="8-2">学生组织</el-menu-item>

????????? <el-menu-item index="8-3">社团风采</el-menu-item>

????????? <el-menu-item index="8-4">学生活动</el-menu-item>

????????? <el-menu-item index="8-5">资助工作</el-menu-item>

????????? <el-menu-item index="8-6">宿舍文化</el-menu-item>

??????? </el-sub-menu>

??????? <el-menu-item>招生信息</el-menu-item>

??????? <el-menu-item>管理员登录</el-menu-item>

????? </el-menu>

??? </div>

? </div>

</template>

<script lang="js">

import router from "@/router/index.js";



export default {

? name: "HeaderItem",

? methods:{

??? goTOPage(index){

????? if(index===1){

??????? router.push("/index")

??????? console.log("index")

????? }else if(index===2){

??????? router.push("/xy")

????? }

??? }

? }

}



import { ref } from 'vue'



</script>

<script>

import {ref, onMounted, nextTick, onUnmounted} from "vue";

import shufa from "@/assets/轮播/书法协会.jpg"

import tiyu from "@/assets/轮播/体育文化广场节.jpg"

import jianmeicao from "@/assets/轮播/健美操.png"

import zhengxian from "@/assets/轮播/创先争优.jpg"

import hongyang from "@/assets/轮播/弘扬劳动教育.jpg"

import xinli from "@/assets/轮播/心里拓展运动会.png"

import shetuan from "@/assets/轮播/社团联合.jpg"

import zhumeng from "@/assets/轮播/筑梦青春自信飞扬.jpg"

import ruanjian from "@/assets/轮播/软件设计大赛.jpg"

import router from "@/router/index.js";



export default {

? name: "FooterItem",

? setup(){

??? const items=[

????? {id:1,image:shufa},

????? {id:2,image:tiyu},

????? {id:3,image:jianmeicao},

????? {id:4,image:zhengxian},

????? {id:5,image:hongyang},

????? {id:6,image:xinli},

????? {id:7,image:shetuan},

????? {id:8,image:zhumeng},

????? {id:9,image:ruanjian},

??? ];

??? const sliderRef = ref(null);

??? const movement = ref(-2);

??? let intervalId = null;



??? const move = () => {

????? const ul = sliderRef.value;

????? if (!ul) return;



????? const movementValue = movement.value;



????? const left = ul.offsetLeft + movementValue;

????? if (Math.abs(left) >= ul.offsetWidth) {

??????? ul.style.left = '0';

????? } else {

??????? ul.style.left = left + 'px';

????? }

??? };

??? const stopSlider = () => {

????? clearInterval(intervalId);

??? };



??? const startSlider = () => {

????? intervalId = setInterval(move, 20);

??? };



??? const login=()=>{

????? router.push("/login")

??? }



??? onMounted(() => {

????? nextTick(() => {

??????? const ul = sliderRef.value;

??????? const sliderItems = ul.innerHTML;

??????? const itemWidth = ul.firstElementChild.offsetWidth;



??????? ul.innerHTML += sliderItems;

??????? ul.style.width = (ul.childElementCount * itemWidth) + 'px';



??????? startSlider();

????? });

??? });



??? onUnmounted(() => {

????? clearInterval(intervalId);

??? });



??? return {

????? items,

????? sliderRef,

????? stopSlider,

????? startSlider,

????? login,

??? };

? },

};

</script>

??

? <div class="flashboxu_u">

????????? <div class="block text-center">

??????????? <el-carousel height="300px">

????????????? <el-carousel-item v-for="item in images" :key="item">

??????????????? <router-link :to="`/${item.id}`">

????????????????? <img :src="item.url" class="gundongimage" alt="">

??????????????? </router-link>

????????????? </el-carousel-item>

??????????? </el-carousel>

????????? </div>

??????? </div>

????? </td>

??? </tr>

? </table>

</div>

<div class="clear"></div>

<div class="container">

? <div class="row">

??? <div class="col">

????? <div class="news-container">

??????? <div class="news">

????????? <div class="news-tit" style="width: 480px">

??????????? <h2>学院新闻</h2>

????????? </div>

????????? <!--??????????????? 与后端连接-->

????????? <ul>



??????????? <li v-for="article in articleList.area1" :key="article.id" style="text-align: left;display: flex;justify-content: space-between;" @click="toView(article.id)">

????????????? <span class="title">{{ article.title }}</span>

????????????? <span class="time">{{ article.time }}</span>

??????????? </li>

????????? </ul>

??????? </div>

????? </div>

????? <div class="news-container">

??????? <div class="news">

????????? <div class="news-tit" style="width: 480px">

??????????? <h2>学院公告</h2>

????????? </div>

????????? <!--??????????????? 与后端连接-->

????????? <ul>

??????????? <li v-for="article in articleList.area2" :key="article.id" style="text-align: left;display: flex;justify-content: space-between;">

????????????? <span class="title">{{ article.title }}</span>

??????? ??????<span class="time">{{ article.time }}</span>

??????????? </li>

????????? </ul>



??????? </div>

????? </div>

??? </div>

? </div>
分区的script语句
const getArticleList = async () => {

? try {

??? const response = await listservice();

??? const data = response.data;



??? // 根据不同的area进行数据分区

??? data.forEach((article) => {

????? if (article.area === 1 && articleList.area1.length < 5) {

??????? articleList.area1.push({

????????? ...article,?? // 复制原始文章对象的所有属性

????????? time: article.updateTime? // 添加时间字段

?????? ?});

????? } else if (article.area === 2 && articleList.area2.length < 5) {

??????? articleList.area2.push({

????????? ...article,?? // 复制原始文章对象的所有属性

????????? time: article.updateTime?? // 添加时间字段

??????? });

????? } else if (article.area === 3 && articleList.area3.length < 5) {

??????? articleList.area3.push({

????????? ...article,?? // 复制原始文章对象的所有属性

????????? time: article.updateTime?? // 添加时间字段

??????? });

????? } else if (article.area === 4 && articleList.area4.length < 5) {

??????? articleList.area4.push({

????????? ...article,?? // 复制原始文章对象的所有属性

????????? time: article.updateTime?? // 添加时间字段

??????? });

????? } else if (article.area === 5 && articleList.area5.length < 5) {

??????? articleList.area5.push({

????????? ...article,?? // 复制原始文章对象的所有属性

????????? time: article.updateTime?? // 添加时间字段

??????? });

????? } else if (article.area === 6 && articleList.area6.length < 5) {

??????? articleList.area6.push({

????????? ...article,?? // 复制原始文章对象的所有属性

????????? time: article.updateTime?? // 添加时间字段

??????? });

????? }

??? });

? } catch (error) {

??? console.error(error);

? }

};

onMounted(getArticleList)

<template>

? <div style="border: 1px solid #ccc">

??? <Toolbar

??????? style="border-bottom: 1px solid #ccc"

??????? :editor="editorRef"

??????? :defaultConfig="toolbarConfig"

??????? :mode="mode" />

??? <Editor

??????? :style="{ height: height + 'px', 'overflow-y': 'hidden' }"

??????? v-model="valueHtml"

??????? :defaultConfig="editorConfig"

??????? :mode="mode"

??????? @onCreated="handleCreated" />

? </div>

</template>

<script lang="ts" setup>

import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

import { onBeforeUnmount, computed, shallowRef, ref } from 'vue'



// interface EmitEvent {

//?? (e: 'update:modelValue', params: string): void

// }

const props = defineProps({

? height:{

??? type:Number,

??? default:320

? },

? modelValue:{

??? type:String,

??? default:''

? },

})

const emit = defineEmits()

const valueHtml = computed({

? get() {

??? return props.modelValue

? },

? set(value: string) {

??? console.log("value",value)

//子组件传值给父组件

??? emit('update:modelValue', value)

? }

})



// 编辑器实例，必须用 shallowRef

const editorRef = shallowRef()

const toolbarConfig = {}

const editorConfig = {

? placeholder: '请输入内容...',

? MENU_CONF: {},

}

// 组件销毁时，也及时销毁编辑器

onBeforeUnmount(() => {

? const { value } = editorRef

? if (value === null) return

? value.destroy()

})

const handleCreated = (editor: any) => {

? editorRef.value = editor // 记录 editor 实例，重要！

}

</script>

<style lang="scss" scoped></style>


??? 封装完之后就能在后端进行内容的传递，而具体的发布文章和编辑文章到后端，由专门的api接口

const save = async () => {

? dialogFormVisible = false;

? let result = await addservice(articleInfo.value);

? await nextTick(); // 等待DOM更新

? ElMessage.success(result.msg ? result.msg : "添加成功");

? this.$refs.weditor.destroy()

}



//修改操作

const update = async () => {

? // 根据 editId 进行编辑操作

? dialogFormVisible = false;

? let result = await updateservice(articleInfo.value);

? ElMessage.success(result.msg ? result.msg : "编辑成功");

? // ...

}



let isFirstOpen = ref(true)

const putArticle = () => {







? if (editId.value) { // 编辑操作

??? dialogFormVisible.value = true;

??? const tempContent = articleInfo.value.content; // 临时保存富文本框的内容

??? articleInfo.value = {

????? ...articleInfo.value, // 保留articleInfo的其他属性值

??? };

??? nextTick(() => {

????? if (shouldResetContent.value) {

??????? resetEditor(); // 重置富文本编辑器的内容

??????? shouldResetContent.value = false; // 重置标志位

????? } else {

??????? articleInfo.value.content = tempContent; // 重新赋值富文本框的内容

????? }

??? });

? }

? if (!editId.value) { // 新增操作

??? dialogFormVisible.value = true;

??? console.log("新增");



??? if (isFirstOpen.value) {

????? resetEditor(); // 清除富文本编辑器的内容

????? articleInfo.value = {

??????? id: "",

??????? title: "",

??? ????description: "",

??????? content: "",

??????? area: radio.value,

????? };

????? isFirstOpen.value = false;

??? }

? }

};





let shouldResetContent = ref(false)

const handleRichTextBoxClick = () => {

? shouldResetContent.value = true;

};

const kan=()=>{

? console.log(radio.value)

}