二，SSM项目-前后端分离(搭建Vue前端工程)

已于 2024-11-26 23:24:58 修改
阅读量1.7k 收藏 26
点赞数 25
分类专栏： SSM 文章标签： mybatis spring vue
于 2024-05-14 18:43:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18817831/article/details/138416596
版权

搭建Vue前端工程

上一讲, 我们学习的是SSM整合-前后端分离(项目环境搭建)

现在打开furn-ssm项目

在这里插入图片描述

实现功能01-搭建Vue前端工程

需求分析/图解

1.使用Vue3的脚手架 Vue-cli 工具, 创建ssm的前端项目基础开发环境.

2.Vue-cli 主要的功能是 自动生成Vue的项目模板, 提高开发效率.

3.Vue-cli 工具, 我们在前面使用过.

代码实现

搭建Vue前端工程

1.先下载node.js LTS 并安装: node.js的npm, 用于管理前端项目包依赖.
说明: 前面我们讲解前端技术栈Vue2的时候用过node.js(10.16.3), 这里我们先卸载一把, 安装14.17.3这个版本, 方便我们使用vue3.
在这里插入图片描述
1)node.js安装非常简单, 直接下一步即可. 安装参考
下载地址: https://nodejs.org/en/blog/release/v14.17.3

2)全局安装Vue插件cli: npm install -g @vue/cli, 这样我们就可以创建Vue工程

2.创建Vue项目. 因为我们是前后端分离的, 所以新建一个前端项目
1)创建文件夹 D:\idea_project\SSM-Vue整合项目

2)创建Vue项目 ssm-vue, 指令 vue create ssm_vue
在这里插入图片描述

3)选择版本在这里插入图片描述

这里我们选择vue3

在这里插入图片描述

4)选择路由方式

在这里插入图片描述

5)选择项目依赖包管理方式

在这里插入图片描述

6)选择是否保存本次设置

在这里插入图片描述

填写项目名

在这里插入图片描述

7)启动项目

在这里插入图片描述

8)浏览器测试

在这里插入图片描述

3.使用idea打开ssm_vue项目, 并配置项目启动
1)直接将ssm_vue项目拖到idea在这里插入图片描述

2)配置ssm_vue, 使用npm方式启动
在这里插入图片描述

关闭命令行窗口, 在这里启动vue3

在这里插入图片描述

vue3项目目录结构梳理

●Vue3项目结构介绍
(1)梳理Vue3最重要的路由机制在这里插入图片描述

(2)index.html页面说明
在这里插入图片描述

(3)assets目录和components目录说明在这里插入图片描述

4)router / index.js 用于配置路由在这里插入图片描述

5)store / index.js 用于存放数据在这里插入图片描述

6)视图使用的基本介绍 在这里插入图片描述

7)packson.json 说明前端项目包依赖关系, 类似maven的pom.xml在这里插入图片描述

8)main.js用于引入资源(css/组件等), 同时也是创建App挂载#app, 引入./router ./store等资源的地方在这里插入图片描述

配置vue服务端口

1.修改ssm_vue\vue.config.js

module.exports = {
  devServer: {
    port: 10000 //前端vue启动端口
  }
}

Element Plus和Element UI

Element UI官网文档

Element Plus官网文档, Element Plus官网文档-gitee

一句话: Element Plus: Element UI for Vue 3.0

其他说明

1.Element Plus是Element UI对Vue 3.0的升级适配.
2.Element诞生于2016年, 起初是饿了么内部的业务组件库, 开源后深受广大前端开发者的喜爱, 成为Vue生态中最流行的UI组件库之一.
3.Element Plus是重构的全新项目. Element团队重写了Element的代码, 用于支持Vue 3
4.Element UI还在维护和升级, 因为Vue 2仍然有项目在使用, Vue3支持的浏览器范围有所减少, 这是一个大的改变, 所以在一段时间内, Vue2仍然会在项目中使用.

安装element-plus插件

停止项目, 安装element-plus插件. npm install element-plus --registry=https://registry.npmmirror.com

实现功能02-创建项目基础界面

需求分析/图解

在这里插入图片描述

思路分析

1.使用Vue3 + ElementPlus完成

代码实现

1.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\App.vue, 成如下形式, 删除部分用不上的代码, 增加<div></div>

<template>
  <div>
  </div>
</template>
<style>
</style>

2.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\views\HomeView.vue

<template>
  <!--去掉class="home"-->
  <div>
    <!--<img alt="Vue logo" src="../assets/logo.png">-->
    <!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->
  </div>
</template>

<script>
// @ is an alias to /src
// 导出组件
export default {
  name: 'HomeView',
  components: {
  }
}
</script>

3.删除D:\idea_project\SSM-Vue整合项目\ssm_vue\src\components\HelloWorld.vue

4.创建D:\idea_project\SSM-Vue整合项目\ssm_vue\src\components\Header.vue

<template>
  <!--解读
  1.这是页面的头部
  2.分成三个部分 div
  3.flex: 1 弹性布局
  -->
  <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flex">
    <div style="width: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue">后台管理</div>
    <div style="flex: 1"></div>
    <div style="width: 100px">下拉框</div>
  </div>
</template>

5.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\App.vue

<template>
  <div>
    <!--引入Header组件/界面-->
    <Header/>
    Home页面
  </div>
</template>
<script>
import Header from "@/components/Header.vue";

export default {
  name: "Layout",
  components: {
    Header
  }
}
</script>

6.创建全局的global.css, 先准备着, 后面有用, 以后有全局样式就可以写在这里.
D:\idea_project\SSM-Vue整合项目\ssm_vue\src\assets\css\global.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

7.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\main.js, main.js用于引入资源(css/组件等)

//引入css
import '@/assets/css/global.css'

8.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\main.js. 引入Element Plus看文档

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

//引入css
import '@/assets/css/global.css'

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

在这里插入图片描述

9.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\App.vue, 引入一个el-button, 看看是否生效

<template>
  <div>
    <!--引入Header组件/界面-->
    <Header/>
    Home页面 <el-button>我的按钮</el-button>
  </div>
</template>
<script>
import Header from "@/components/Header.vue";

export default {
  name: "Layout",
  components: {
    Header
  }
}
</script>

10.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\components\Header.vue, 引入下拉框

<template>
  <!--解读
  1.这是页面的头部
  2.分成三个部分 div
  3.flex: 1 弹性布局
  -->
  <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flex">
    <div style="width: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue">后台管理</div>
    <div style="flex: 1"></div>
    <div style="width: 100px">
      <el-dropdown>
    <span class="el-dropdown-link">
      tom
      <el-icon class="el-icon--right">
        <arrow-down/>
      </el-icon>
    </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

运行效果
在这里插入图片描述

11.创建侧边栏组件, 新建D:\idea_project\SSM-Vue整合项目\ssm_vue\src\components\Aside.vue
并引入导航菜单组件

<template>
  <div>
    <!--引入导航菜单-->
    <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
    >
      <el-sub-menu index="1">
        <template #title>
          <el-icon><location /></el-icon>
          <span>Navigator One</span>
        </template>
        <el-menu-item-group title="Group One">
          <el-menu-item index="1-1">item one</el-menu-item>
          <el-menu-item index="1-2">item two</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="Group Two">
          <el-menu-item index="1-3">item three</el-menu-item>
        </el-menu-item-group>
        <el-sub-menu index="1-4">
          <template #title>item four</template>
          <el-menu-item index="1-4-1">item one</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-menu-item index="2">
        <el-icon><icon-menu /></el-icon>
        <span>Navigator Two</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <el-icon><document /></el-icon>
        <span>Navigator Three</span>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon><setting /></el-icon>
        <span>Navigator Four</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Aside"
}
</script>

<style scoped>
</style>

12.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\App.vue, 将页面分成三个部分

<template>
  <div>
    <!--引入Header组件/界面 头部-->
    <Header/>
    <!--主体-->
    <div style="display: flex">
      <!--侧边栏-->
      <Aside/>
      <!--内容区域 这个部分通过路由展示, 我们就路由到HomeView.vue
      http://localhost:10000/ => HomeView.vue
      http://localhost:10000/about => AboutView.vue
      -->
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header.vue";
import Aside from "@/components/Aside.vue";

export default {
  name: "Layout",
  components: {
    Aside,
    Header
  }
}
</script>

13.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\views\HomeView.vue, 加入一个el-button, 进行测试

<template>
  <div>
    <el-button>我的按钮</el-button>
  </div>
</template>

14.主页面的效果, 基本结构已经出来了
在这里插入图片描述

15.对主页面进行一个完善, 比如导航栏的宽度, 去掉不必要的子菜单等.
修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\components\Aside.vue

<template>
  <div>
    <!--引入导航菜单-->
    <el-menu
        style="width: 200px;"
        default-active="2"
        class="el-menu-vertical-demo"
    >
      <el-sub-menu index="1">
        <template #title>
          <el-icon><location /></el-icon>
          <span>导航一</span>
        </template>
        <el-menu-item-group title="组1">
          <el-menu-item index="1-1">选项一</el-menu-item>
          <el-menu-item index="1-2">选项二</el-menu-item>
        </el-menu-item-group>
        <el-sub-menu index="1-3">
          <template #title>选项三</template>
          <el-menu-item index="1-3-1">选项一</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-menu-item index="2">
        <el-icon><icon-menu /></el-icon>
        <span>导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <el-icon><document /></el-icon>
        <span>导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon><setting /></el-icon>
        <span>导航四</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

16.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\views\HomeView.vue, 引入表格, 后面来显示数据.

<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="日期"/>
      <el-table-column prop="name" label="名字"/>
      <el-table-column prop="address" label="地址"/>
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src
// 导出组件
export default {
  name: 'HomeView',
  components: {},
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },]
    }
  },
}
</script>

17.可以看到, element-plus默认是英文的, 我们将其国际化一下

在这里插入图片描述

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
//引入css
import '@/assets/css/global.css'

createApp(App).use(store).use(router).use(ElementPlus, {locale: zhCn}).mount('#app')

在这里插入图片描述

18.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\views\HomeView.vue, 从官网设置一些测试数据, 并支持日期排序在这里插入图片描述

19.修改D:\idea_project\SSM-Vue整合项目\ssm_vue\src\views\HomeView.vue, 增加相关的操作按钮和搜索框
el-input输入框参考 操作按钮参考

<template>
  <div>
    <!--增加按钮和搜索框-->
    <div style="margin: 10px 5px">
      <el-button type="primary">新增</el-button>
      <el-button>其它</el-button>
    </div>
    <!--margin: 顶部距离 左侧距离-->
    <div style="margin: 10px 5px">
      <el-input v-model="search" style="width: 20%" placeholder="请输入关键字"/>
      <el-button style="margin: 10px" type="primary">查询</el-button>
    </div>
    <el-table :data="tableData" stripe style="width: 90%">
      <el-table-column sortable prop="date" label="日期"/>
      <el-table-column prop="name" label="名字"/>
      <el-table-column prop="address" label="地址"/>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default>
          <el-button link type="primary">
            编辑
          </el-button>
          <el-button link type="primary">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      search: '',
      tableData: [...]
    }
  }
}
</script>

项目前后端分离情况

●项目前后端分离情况如图
在这里插入图片描述

注意事项和细节

1.flex: 1 布局说明
https://www.cnblogs.com/LangZ-/p/12703858.html

2.box-sizing: border-box就是将border和padding数值包含在width和height之内, 这样的好处就是修改border和padding, 数值盒子的大小不变.
https://blog.csdn.net/qq_26780317/article/details/80736514

3.引入Element-Plus, 启动可能出现的问题和解决方案在这里插入图片描述


在这里插入图片描述

下一讲, 我们学习 SSM整合-前后端分离(实现增删改查)

SSM框架整合Dome(前后端分离)
02-26
该资源Spring、SpringMVC、Mybatis三大框架搭建的前后端分离项目，解决了前后端分离出现的跨域问题及乱码问题
SSM项目-前后端分离(搭建Vue前端工程) ssm-vue项目
06-18
vue项目
基于SSM+Vue的图书管理系统
xwwwwww903的博客
02-25 1832
基于SSM和Vue开发的前后端分离的图书管理系统，实现了图书用户增删改查功能，借阅归还图书和借阅归还信息查询
搭建前后端分离的SSM项目【一】
最新发布
weixin_63422072的博客
11-24 765
前后端分离ssm项目搭建
SSM框架中的前后端分离
Tu9oh0st的技术栈
11-26 9546
认识前后端分离 在传统的web应用开发中，大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端，而将运行在服务器，为前端提供业务逻辑和数据准备的所有代码统称为后端。 由于前后端分离这个概念相对来说刚出现不久，很多人都是只闻其声，不见其形，所以可能会对它产生一些误解，误以为前后端分离只是一种web应用开发模式，只要在web应用的开发期进行了前后端开发工作的分工就是...
一，SSM整合-前后端分离(项目环境搭建)
你好, 我在学java的博客
05-03 1740
整合SSM项目基础环境搭建项目介绍创建项目项目全局配置web.xmlSpringMVC配置配置Spring和MyBatis, 并完成整合创建表, 使用逆向工程生成Bean, XxxMapper和XxxMapper.xml注意事项和细节说明实现功能01-搭建Vue前端工程需求分析/图解代码实现搭建Vue前端工程vue3项目目录结构梳理配置vue服务端口Element Plus和Element UI其他说明安装element-plus插件实现功能02-创建项目基础界面需求分析/图解思路分析代码实现项目前后端分离
(动力节点项目)SSM整合：SSM+VUE
m0_53881899的博客
10-30 9436
SSM整合：SSM+VUE
分享一个前后端分离的web项目（vue+spring boot）
热门推荐
smollsnail的博客
01-10 7万+
前后端分离（vue+spring boot） Github地址：https://github.com/smallsnail-wh 前端项目名为wh-web 后端项目名为wh-server
SSM整合-前后端分离(项目环境搭建) furn-ssm项目
06-18
本项目“furn-ssm”是基于SSM框架实现的前后端分离的项目环境搭建，旨在提供一个基础的开发模板，帮助开发者快速构建自己的业务系统。 首先，Spring作为核心容器，负责管理应用对象（如Bean）的生命周期和依赖注入...
[课设项目]Java-SSM框架开发前后端分离鲜花销售系统+vue+MySQL+前后端分离毕业论文和源码.zip
07-20
本项目是一个基于Java-SSM框架开发的鲜花销售系统，旨在实现前后端分离，提高系统的可维护性和扩展性。项目主要面向计算机相关专业的学生进行毕业设计，同时也可作为Java学习者的实战练习资源。 项目包含了完整的...
毕设项目-Java-SSM开发-vue的学生宿舍设备报修管理系统的设计与实现+vue+数据库+论文+源代码等.zip
07-21
项目源码包含完整的后端代码和前端Vue组件，数据库脚本用于快速搭建数据结构。开发说明详细阐述了系统架构、功能模块和实现方法，同时附带论文参考，有助于深入理解项目设计。 此项目已通过严格调试，确保运行无误...
ssm+vue项目实战
11-21
vue实战项目，前端框架使用vue+bootstrap，后端框架使用的是spring+springmvc+mybatis，数据库使用mysql，包含全套代码
[课设项目]Java-SSM框架开发宠物领养系统+vue+MySQL+前后端分离毕业论文和源码.zip
07-20
本项目是一个结合Java-SSM框架、Vue前端技术，以及MySQL数据库的宠物领养系统，专为计算机相关专业的学生设计，尤其适合那些正在进行毕业设计或寻求项目实战经验的Java学习者。项目提供了完整的源码、数据库脚本以及...
SSM整合项目（Vue3环境搭建）
Sun的个人博客
03-09 1209
cd ssm_vue。
前后端分离--Vue的入门基础版
YZZdear的博客
09-16 3250
目录一.前后端分离二.Vue的简介三.Vue的入门案例四.Vue的生命周期 前后端分离是一种软件架构模式，将应用程序的前端（用户界面）和后端（数据处理和业务逻辑）独立开发、独立部署。在前后端分离的架构下，前端通过API（应用程序接口）与后端进行通信，实现数据交换和业务处理。前后端的开发步骤，首先确定数据格式也就是接口文档，确定好之后只要各司其职就行了值得注意的是，前后端分离并不适用于所有项目，需要根据具体的需求和项目规模进行选择和决策。 官方网站：Vue.js - 渐进式 Jav
前后端分离项目前端环境部署
qq_36094347的博客
08-13 1401
小白自学项目，不是什么教程，仅记录流程。
Vue高级篇--实现前后端完全分离
Ysuhang的博客
08-09 8271
Vue高级篇--实现前后端完全分离
基于 SSM框架的前后端分离
曾经沧海-难为水的博客
11-16 1万+
文章知识点来源：从MVC到前后端分离（REST-个人也认为是目前比较流行和比较好的方式） 本文主要是抽取我想要的部分快速实现： 1，服务端要解决跨域问题： 前端应用为静态站点且部署在http://web.xxx.com域下，后端应用发布REST API并部署在http://api.xxx.com域下，如何使前端应用通过AJAX跨域访问后端应用呢？这需要使用到CORS技术来实现，这也是目前最好的
基于SSM和Vue从头搭建前后端分离项目
哆啦A瑶的博客
04-21 4451
前后端分离是现在做web开发的主流方法，本文记录从头搭建前后端分离项目的详细流程，相信完整阅读本文之后，你就能够明白如何使用后端的SSM框架和前端框架Vue以及Element UI进行基础的项目搭建。本文涉及到的内容包括：SpringBoot，Mybatis，Maven，MySQL，Vue以及Element UI，其中涉及到的基础知识如Java基础、按照项目开发顺序进行撰写，包括数据库配置、基本的框架搭建、Vue基础介绍、核心逻辑开发等部分。 数据库配置 本文 ...
ssm vue前后端分离项目
02-26
SSM（Spring+SpringMVC+MyBatis）是一种常用的Java后端开发框架，而Vue是一种流行的前端开发框架。将它们结合起来进行前后端分离开发可以提高开发效率和代码的可维护性。 在SSM Vue前后端分离项目中，后端使用SSM框架进行开发，前端使用Vue框架进行开发。前后端通过API接口进行数据交互。 下面是一个简单的SSM Vue前后端分离项目的示例： 1. 后端开发： - 使用Spring框架进行依赖注入和事务管理。 - 使用SpringMVC框架处理HTTP请求和响应。 - 使用MyBatis框架进行数据库操作。 - 设计并实现RESTful API接口，提供数据的增删改查功能。 2. 前端开发： - 使用Vue框架进行组件化开发。 - 使用Vue Router进行路由管理，实现页面跳转和导航。 - 使用Vuex进行状态管理，实现数据共享和响应式更新。 - 使用Axios库发送HTTP请求，与后端API进行数据交互。 - 使用Element UI或其他UI库进行页面布局和样式设计。 3. 前后端交互： - 前端通过Axios库发送HTTP请求到后端API接口，获取数据或提交数据。 - 后端接收请求，处理业务逻辑，访问数据库进行数据操作。 - 后端将处理结果返回给前端，前端根据结果进行相应的展示或处理。 这样的前后端分离项目可以提高开发效率和团队协作能力，前后端可以独立开发和测试，减少了耦合性，同时也方便进行项目的扩展和维护。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

~ 小团子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值