SpringBoot+vue项目初级（一）

1. 创建一个基于 webpack 模板的新项目

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

vue init webpack firstApp

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

2:启动项目，访问项目

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

输入启动命令行

npm run dev

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

出现

DONE Compiled successfully in 9235ms 11:11:44 AM
I Your application is running here: http://localhost:8080

表示项目启动成功了，直接去访问web页面：home和About这两个按钮是新加的

终止服务只要在命令窗口输入ctrl+c即可

3、开始在idea中，去开发我们刚创建的firstApp项目

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

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

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

步骤三：新建两个vue文件
在src目录下新建一个包，在该包下新建两个vue文件，一个是About.vue,一个是Home.vue文件。
之后再路径file-setting-editor-file and Code选中，新建，name填vue File ,Extension填vue
下面是让你填模板内容，我这里填的是

按下面代码新建的两个类的内容
About.vue：

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

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>

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.变量名即可。
在index.js中，再去建立路由Router的相关内容
import Home from "../views/Home.vue"
import About from "../views/About.vue"

格式化代码之后会将单引号变为双引号，最后还会加上逗号，末尾的分号于是会导致三种错误：

Strings must use singlequote quotes---双引号

Extra semicolon semi ----末尾分号

error Unexpected trailing comma comma-dangle---逗号

解决方法:配置文件eslintrc.js中设置(或者向我一样修改代码）

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

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

import Home from '../views/Home'

import About from '../views/About'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

name: 'HelloWorld',

component: HelloWorld

{

path: '/home',

name: 'home',

component: Home

{

path: '/about',

component: About

}

]

})

在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 dev

如图：

出现success代表项目启动成功，接下来去访问

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

4、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包
4.在该包下新建一个接口，继承JpaRepository

public interface PaymentRepository extends JpaRepository<Payment,Integer> {
}
两个参数，一个是实体类，一个是主键
5.在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插件封装的查询方法，该方法会将对应表的所有内容查出来。
6.在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交互

5：SpringBoot + vue交互

vue如果要使用ajax访问后台，需要引入axios插件，同样在idea的终端中输入 cnpm i axios --save-dev，执行后，会在node_modules目录下会存在axios这样的一个文件。
引入插件后，在项目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;
})
}

vue在运行的时候一直报错，导致文件保存不了，原因是在你的.eslintrc.js文件中少加了一行“space-before-function-paren”: 0

打开你的这个.eslintrc.js文件，在rules里面加上"space-before-function-paren": 0

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

遇到Elements in iteration expect to have 'v-bind:key' directives.' 这个错误

设置对应的key

在学习vue过程中遇到Elements in iteration expect to have 'v-bind:key' directives.' 这个错误，查阅资料得知Vue 2.2.0+的版本里，当在组件中使用v-for时，key是必须设置的。

注意上面key值不要用对象或是数组作为key，用string或number作为key，否则报错：[Vue warn] Avoid using non-primitive value as key, use string/number value instead.

<tr v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.serial}}</td>
</tr>
便可以拿到接口返回的数据，看效果

到此项目开发结束。注意事项也写在里面了