SpringBoot+vue项目入门实战

一：vue开发（前端）

（一）创建

1、安装node.js

（1）Node.js 官方网站下载：https://nodejs.org/en/
（2）选择操作系统对应的包

下载完成，安装包如下：
傻瓜式安装，直接下一步即可
安装成功，文件夹结构如下，并在上面安装过程中已自动配置了环境变量和安装好了npm包，此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号：

（3）配置npm在安装全局模块时的路径和缓存cache的路径
因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间，如下图所示：

所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，然后在cmd命令下执行如下两个命令：

npm config set prefix “D:\node\node_cache”
npm config set cache “D:\node\node_cache”

（prefix和cache后跟的是你node_global和node_cache这两个新建的目录），执行成功。
然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”， 值为“D:\node\node_modules”，如图

最后编辑用户变量里的Path，将相应npm的路径改为：D:\node\node_global，同样如下图：

以上vue的运行环境就建好了，下面开始创建vue项目。

2、安装镜像

由于 npm install安装速度慢，所以本文使用阿里淘宝镜像及其命令 cnpm进行安装，cmd打开命令窗口输入命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、安装Vue

输入：

cnpm install vue

回车等待终端给出响应。

4、安装全局vue-cli脚手架

输入：

 `cnpm install --global vue-cli`

安装全局vue-cli脚手架，用于快速搭建大型单页应用。

5、检查Vue是否安装成功

输入：

vue -V

检查是否安装成功，如果返回版本号则说明安装成功。

6、创建一个基于 webpack 模板的新项目（可略）

在cmd切换到你的目标目录下，创建一个项目，这里以在vue的安装目录下创建一个叫做my-vue-project的项目为例:
输入

vue init webpack firstApp

webpack 后跟的就是你要建立的vue项目名称。

7、启动项目并访问

（1）首先切到新建的目录下，上一步我新建的项目名称为firstApp：

（2）输入启动命令行

cnpm run dev

有的人会用cnpm run server 这样也可以启动项目，主要是看vue项目中的package.json文件内配置来确认使用哪一个命令来启动项目，我这配置的是dev，所以用的是cnpm run dev。

（3）出现http:表示项目启动成功了

直接去浏览器访问：

home和About这两个按钮是我新加的。
终止服务只要在命令窗口输入ctrl+c即可。

下面开始在idea中，去开发我们的项目。

（二）开发

1、先择file,点击open导入我们的项目

2、引入vue插件

idea要想支持vue项目，只需要引入vue插件即可
1、file-setting-plugins - browse repositorise，搜索vue，找到后下载即可。

下载后，在路径file-setting-plugins搜索vue,勾选框选中后，选择apply激活即可。

3、新建两个vue文件

（1）在src目录下，新建一个包，在该包下新建两个vue文件，一个是About.vue,一个是Home.vue文件。
（2）有的人因为idea是第一次做vue项目，我们第一次在新建一个类是会发现找不到.vue结尾的类，这个时候只需要在路径file-setting-editor-file types 这个下面会有一个Vue.js开头的选项，选中，在registered patterns下新建内容选填为*.vue。

之后再路径file-setting-editor-file and Code选中，新建，name填vue File ,Extension填vue
下面是让你填模板内容，我这里填的是

<template>
  <div>
      {{msg}}
  </div>
</template>

<style>
  body {
    background-color: #ff0000;
  }
</style>

<script>
  export default{
    data () {
      return {msg: '这个是Home模板页'}
    }
  }
</script>

（3）以下是我新建的两个类的内容
About.vue：

<template>
  <div id="app">
    <span>我的第一个vue项目</span>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Home.vue:

<template>
    <div>
        <table>
          <tr>
            <td>编号</td>
            <td>内容</td>
          </tr>
          <tr v-for="item in books">
              <td>{{item.id}}</td>
            <td>{{item.serial}}</td>
          </tr>

        </table>
    </div>
</template>

<style>
    body {
        /*background-color: #;*/
    }
</style>

<script>
    export default {

        data() {
            return {
              msg: '这个是Home模板页',
              books:[
                {
                  id : 1,
                  serial:"测试1"
                },
                {
                  id : 2,
                  serial:"测试2"
                }
              ]
            }
        }
    }
</script>

页面在加载的时候，首先会执行script标签内的default 方法，data函数就是我们要展示的内容。
template标签是我们展示的内容，我们要读取data里的内容，只要在template标签内使用{{msg}}，这样我们就可以直接拿到msg这个对象的值。可以看到books这个对象我这里定义的是一个数组，所以我们在读取的时候就需要遍历，方式和etl表达式类似，v-for=“item in books” 其中books就是我们data内地books对象，每次读取的时候，会将对象赋给item，所以在访问数组里的内容时，只需要item.变量名即可。

4、在index.js中，再去建立路由的相关内容

（1）引文件

import Home from "../views/Home.vue"
import About from "../views/About.vue"

（2）配置路径
path:访问时的路径
component：与上面import后跟的名字关联

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
    path:'/home',
      name:'home',
      component:Home
    },{
    path:'/about',
      component:About
    }
  ]
})

（3）在app.vue中加两个链接，用于访问我们新建的类

<template>
  <div id="app">
    <div id="nav" >
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

to=“/home” 这个就是我们在index.js中配置的路径。
这里需要注意，template这个标签下面只能存在一个根目录，所以我们在开发过程中，首先会写一个div盒子，在div内去编写我们的内容。

5、启动项目

同样，我们在idea中一样可以启动我们的项目，只需要在idea的终端中输入。

npm run server

如图：


出现success代表项目启动成功。
接下来去访问这个about页面

这个是home页面

可以看到，编写的测试内容是存在的。
终止服务同样只需要crtl+c即可。

二：SpringBoot项目开发（后端）

1、新建SpringBoot项目

（1）file - new - project -spring initiallizr

（2）这里直接选择下一步，在group中填写我们的项目标识，类似于根目录。
java version 选择8。

（3）这里填好之后，直接下一步next，这一步我们需要选择需要那些插件，因为我用的是mysql，所以我选择是lombok(提供了实体类用的get，set方法，后续会用到),spring web,spring data jpa(封装的用crud方法),mysql driver。

（4）再下一步，项目就建立成功了

SpringbootdemoApplication这个类，是我们程序的入口。
（5）将application.properties删掉，这里我们用的是application.yml文件，这个更清晰，内容很简单，只配置了一些数据库链接，以及执行脚本的输出控制.

server:
  port: 8181
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/db2019?useUnicode=true&characterEncoding=utf-8
    username: root
    password: 123456
  jpa:
    show-sql: true
    properties:
      hibernate:
        format_sql: true

因为vue项目中端口用的是8080，所以我们这里需要改动下，这里就手动设置为8181，以便能和vue方便交互。
datasource下配置的为数据库连接相关信息。
show-sql用来控制，控制台是否打印sql语句，format_sql用于打印的脚本日志格式化操作，默认是打印一行。
以上我们项目就建立完成了，下面开始去和数据库做交互。

2、springboot的crud

（1）在demo包下新建一个entity包，用来存放实体类.
（2）在entity包下新建一个实体类，因为我在数据库中建立的表名为payment，所以实体类名我以Payment新建一个实体类。
下面是表结构

下面是实体类的内容

@Entity
@Data
public class Payment {
    @Id
    private Integer id;
    private String serial;
}

Entity注解用于和表映射；Data注解用于给id,serial添加get，set方法；Id注解用于表主键。
（3）在demo包下新建一个repository包，在该包下新建一个接口，继承JpaRepository

public interface PaymentRepository extends JpaRepository<Payment,Integer> {
}

两个参数，一个是实体类，一个是主键
（4）在demo包下新建一个controller包，并在controller包下新建一个PaymentHandler类。

@RestController
@RequestMapping("/payment")
public class PaymentHandler {
    @Autowired
    private PaymentRepository paymentRepository;
    @GetMapping("/findAll")
    public List<Payment> findAll(){
        return paymentRepository.findAll();
    }
}

findAll方法就是jpa插件封装的查询方法，该方法会将对应表的所有内容查出来。
（5）在demo包下新建一个config包，并在config包下新建一个CorsConfig类，并实现WebMvcConfigurer接口，该类主要用于处理跨域问题，如果不处理的话，当前端在调用后端的接口时，若不在同一个域，就会无法访问。

@Configuration
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //本应用的所有方法都会去处理跨域请求
        registry.addMapping("/**")
                //允许远端访问的域名
                .allowedOriginPatterns("*")
                //允许请求的方法
                .allowedMethods("GET","POST","PUT","DELETE","OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

3、启动项目

在SpringbootdemoApplication类中，执行main方法即可。

输入http://localhost:8181/payment/findAll
下面是打印的sql脚本

这个是展示的内容

以上springboot项目也完成了，下面开始由vue和springboot交互。

三：SpringBoot + vue交互

1、引入axios插件

vue如果要使用ajax访问后台，需要引入axios插件，同样在idea的终端中，输入

cnpm i axios --save-dev

执行后，会在node_modules目录下会存在axios这样的一个文件。

2、引入插件后，在项目main.js中全局引用

引入插件后，在项目main.js中全局引用

import axios from 'axios'
Vue.prototype.$axios=axios

这样我们在其他vue页面中使用this.$axios便可以使用了

3、改造Home.vue

改造Home.vue页面

data() {
            return {
              msg: '这个是Home模板页',
              books:[
                {
                  id : 1,
                  serial:"测试1"
                },
                {
                  id : 2,
                  serial:"测试2"
                }
              ]
            }
        },
      created(){
          const _this = this;
          this.$axios.get('http://localhost:8181/payment/findAll').then(function (resp) {
                _this.books = resp.data;
          })
      }

在data函数中，使用created方法，通过this.$axios.get来访问后台，参数就是我们要访问的接口路径，then后面跟的是回调函数，resp这个可以任意填写，代表的是get方法拿到的data数据，先将this赋给一个对象是为了在回调函数中使用，否则直接使用this，拿到的是当前回调函数的这个对象。我这里只要接口返回的data数据，所以使用的resp.data.再将该对象赋给books，再去使用

<tr v-for="item in books">
              <td>{{item.id}}</td>
            <td>{{item.serial}}</td>
          </tr>

便可以拿到接口返回的数据，看效果

4、启动项目

这里可以看到，是和数据库中的内容是一致的。
以上就是一个简单的springboot+vue的项目。