Vue+SpringMVC---前后端分离极简尝试

最新推荐文章于 2024-07-25 22:35:58 发布

trade-off

最新推荐文章于 2024-07-25 22:35:58 发布

阅读量3.7w

点赞数 20

分类专栏：前端文章标签：前后端分离 springmvc vue

本文链接：https://blog.csdn.net/muxinxin880422/article/details/77970535

版权

【前后端分离】的开发方式是目前WEB开发中的一个大的趋势，随着各种前后端框架的出现，加上REST编程规范慢慢深入人心，前端后端之间通过更加轻量级、简洁高效的JSON作为数据传输格式，使得一切变得开朗起来，前后端分工更加明晰，前端被赋予了更多的功能，从而能分担原来由后端完成的工作，开发人员的学习成本明显下降。
通过VUE+SPringMVC的组合来尝试实现前后端分离的开发模式，下面给出具体的过程。

1.搭建前端

VUE是优秀的前端框架，搭建基于VUE的前端工程需要安装Node.js，并通过NPM包管理工具和VUE-cli脚手架工具来辅助构建前端工程，如下：

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

这样我们就构建了一个前段项目的架子my-project,目录结构如下图：
这里写图片描述
然后再浏览器中可以看到如下的页面：

前端搞定，轮到后端

2.搭建后端

后端是用maven来构建的web项目，在eclipse（使用2017年6月发布的Oxygen）目录结构如下：
这里写图片描述
其中配置文件主要为pom.xml、web.xml、applicationContext.xml、SpringMVC-servlet.xml，具体内容如下。
pom.xml是maven的配置文件，如下

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>my-first-maven-project</groupId>
    <artifactId>hello-maven</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <name>hello-maven Maven Webapp</name>
  <url>http://maven.apache.org</url>

  <!-- <properties>
    <spring-version></spring-version>

  </properties> -->

  <!-- dependencyManagement配置有问题 -->
  <!-- <dependencyManagement>
    <dependencies>
        <dependency>
          <groupId>junit</groupId>
          <artifactId>junit</artifactId>
          <version>3.8.1</version>
          <scope>test</scope>
        </dependency>

        https://mvnrepository.com/artifact/org.springframework/spring-webmvc
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>4.3.10.RELEASE</version>
        </dependency>


        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.7.9.1</version>
        </dependency>


    </dependencies>  


  </dependencyManagement> -->

  <!-- dependencies配置没有问题 -->
  <dependencies>
        <!-- Junit单元测试依赖包 -->
        <dependency>
          <groupId>junit</groupId>
          <artifactId>junit</artifactId>
          <version>3.8.1</