SpringBoot+vue入门

SpringBoot+Vue项目实战
- 一：vue开发
- - 步骤一：安装node.js
  - 步骤二：安装镜像
  - 步骤三：安装Vue
  - 步骤四：安装全局vue-cli脚手架
  - 步骤五：检查Vue是否安装成功
  - 步骤六：创建一个基于 webpack 模板的新项目（可略）
  - 步骤七:启动项目，访问项目
  - 步骤一：先择file,点击open导入我们的项目
  - 步骤二：引入vue插件
  - 步骤三：新建两个vue文件
  - 步骤四：启动项目
- 二：SpringBoot项目开发
- - 步骤1：新建SpringBoot项目
  - 步骤2：springboot的crud
  - 步骤3：启动项目
- 三：SpringBoot + vue交互

SpringBoot+Vue项目实战

一：vue开发

步骤一：安装node.js

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

下载完成，安装包如下：

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

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

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

npm config set prefix “D: ode ode_cache”

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

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

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

步骤二：安装镜像

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

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

步骤三：安装Vue

输入：cnpm install vue ，回车等待终端给出响应。

步骤四：安装全局vue-cli脚手架

输入： cnpm install --global vue-cli,安装全局vue-cli脚手架，用于快速搭建大型单页应用。

步骤五：检查Vue是否安装成功

输入： vue -V检查是否安装成功，如果返回版本号则说明安装成功。

步骤六：创建一个基于 webpack 模板的新项目（可略）

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

vue init webpack firstApp

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

步骤七:启动项目，访问项目

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

2.输入启动命令行

cnpm run server

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

3.出现http:表示项目启动成功了，
这里我直接去访问：

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

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

步骤一：先择file,点击open导入我们的项目

步骤二：引入vue插件

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

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

步骤三：新建两个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中，再去建立路由的相关内容
4.1.引文件

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

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

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

5.在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内去编写我们的内容

步骤四：启动项目

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

npm run server

如图：

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

这个是home页面

可以看到，编写的测试内容是存在的。
2.终止服务同样只需要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.Driverurl: jdbc:mysql://localhost:3306/db2019?useUnicode=true&characterEncoding=utf-8username: rootpassword: 123456jpa:show-sql: trueproperties: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 {@Idprivate Integer id;private String serial;
}

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

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

两个参数，一个是实体类，一个是主键
5.在demo包下新建一个controller包，并在controller包下新建一个PaymentHandler类，

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

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

@Configuration
public class CrosConfig implements WebMvcConfigurer {@Overridepublic 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.vue如果要使用ajax访问后台，需要引入axios插件，同样在idea的终端中输入 cnpm i axios --save-dev，执行后，会在node_modules目录下会存在axios这样的一个文件。
2.引入插件后，在项目main.js中全局引用

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

这样我们在其他vue页面中使用this.$axios便可以使用了
3.改造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>

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

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