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的项目。