前言
闲来无事,想学一些框架,查了一些资料,说用前后端分离开发比较主流,同时比较热门的是Spring Boot+Vue开发,久仰大名,现在正好学习一下。
学习视频:4小时学会Spring Boot+Vue前后端分离开发
本文原创,创作不易,转载请注明!!!
本文链接
个人博客:https://ronglin.fun/?p=233
PDF链接:见博客网站
优快云: https://blog.youkuaiyun.com/RongLin02/article/details/117659135
Vue
官网:Vue.js 3.0
参考教程:Vue3 教程|菜鸟教程
安装Vue
菜鸟教程中给了很多的安装方法,我查阅的一些资料很多都是用的NPM安装,所以这里就用npm安装vue.js
安装nodejs与NPM
NPM :NPM 使用介绍
菜鸟的教程中,有很多很多有关NPM的用法,我这里不过多的说明,就说下如何用npm安装。
npm是Nodejs下的包管理器,功能非常强大,要想用npm,得先安装Nodejs,有关Nodejs的安装教程:Node.js 安装配置 我这里迅速过一下流程。
我们去官方下载Nodejs的安装包:Node.js 下载LTS(长期支持版本)版本的。
下载好后直接运行就行了。一直点击下一步就安装好了。中间有一个更改安装目录的,可以根据情况自行调整。
按照好之后,我们输入node -v
可以查看安装的情况,如下图:
如果提示 node 不存在,就要去查看一下环境变量中是否存在:此电脑
–右键
–属性
–高级系统设置
–环境变量
找到path,点击编辑,找一下有没有nodejs的路径,如果没有可以重新安装一下,或者添加上。
安装Vue
安装完nodejs后,先来看一下npm能不能用,输入npm -v
,查看版本。
然后,就可以安装Vue了,先用淘宝的镜像安装一下cnpm,然后 用cnpm更新一下npm,在命令行中输入以下代码:
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install npm -g
更新完之后,我们可以发现npm版本从6.14.13更新到了7.16.0,然后全局安装Vue。
cnpm install vue@next
cnpm install -g @vue/cli
输入vue --version
如果可以看到版本就说明安装完成了。
创建项目
GUI界面
我们可以先调用GUI界面的vue(这个图形界面是3.0版本的,如果是2.0是不支持GUI版的)
关闭所有浏览器界面,在cmd中输入
npm config set registry https://registry.npm.taobao.org
vue ui
第一行代码是用来设置镜像源的,要不然会很慢,输入完第二句代码,会弹出来一个网页,如果没弹出来就用管理员权限运行cmd,然后再输入vue ui
网页出来之后,点击中上位置的创建,它会先读取文件目录结构,需要一些时间,稍等片刻。如果特别特别慢,可以重启一下电脑,然后再试一下。我喜欢把项目根目录放在F盘,所以我把项目根目录设置为F:\vue,然后点击下方的创建新项目
名称随意,把下方的Git关闭,点击下一步,然后选择手动
,然后打开Router
和Vuex
,关闭Linter/Formatter
然后点击下一步,这个界面中就一个选项,是询问是否打开 使用历实记录,打开它。然后下一步,然后创建项目,不保存预设
然后等它创建完就行了。
创建完成之后,我们还可以测试一下,点击左侧任务
右侧点击运行。
运行完毕后,再点击右上角的输出
,然后我们就可以看到两个网站,点击网站进入,如果界面是vue的欢迎页则说明成功。
IDEA
我的IDEA是IntelliJ IDEA 2020.1 x64版本的,我们打开IDEA,先安装vue插件 菜单栏File
–Settings
–Plugins
搜索Vue,点击install,安装好之后重启IDEA。
重启完之后,导入刚才创建的项目File
–Close Project
关闭当前项目,然后在新界面中选择Open or Import
,然后选择我们刚刚用GUI创建好的vue项目,路径是F:\vue\vuetest
,导入。
vue是一个单页面,它的页面代码在src
–app.vue
中,vue内置了一个服务器,我们可以用idea的终端启动它,打开IDEA的Terminal
输入npm run serve
然后弹出来两个网站,和我们用GUI点击启动之后的网站时一样的,想要退出,Ctrl+C就行了。
简单解释
vue是一个单页面,它只有一个页面,但是它会动态刷新app.vue
界面的内容,我们看veiws
文件夹下,有两个文件,一个是About.vue
还有一个是Home.vue
,这两个就对应主页面的两个小界面,当用户互交时,它会把小界面动态刷新到app.vue
中,我们可以在<router-link to="/">Home</router-link>
标签中查看小界面情况。to
后面的就是映射的地址。
映射关系一般都是在router
–index.js
下定义,简单的看一下语法:
{
path: '/',
name: 'Home',
component: Home
}
path表示访问地址, component就表示项目中实际要映射的文件名,全称是Home.vue
,同时注意最上边的导包问题。
Spring Boot
创建项目
IDEA已经给我们封装好了Spring Boot框架的基本结构,我们直接创建就行了,菜单栏File
–New
–Project
,然后选择左侧的Spring Initializr
然后点击Next。
下一个界面是配置项目的组、名称与环境,根据自己情况设计就行了,然后点击Next
下一个界面比较重要,是配置要添加的依赖。我添加了 Developer Tools
下的Lombok
、Web
下的Spring Web
、SQL
下的Spring Data JPA
和MySQL Driver
然后在一个新的窗口打开,首先要修改的是配置文件,在src
–main
–resources
下的application.properties
文件,配置文件有两种格式一个是properties
格式还有一个是yml
格式。可以看这个博客了解差异:
application.properties与application.yml之间的区别
我这里用yml,将application.properties
重命名为application.yml
spring:
datasource:
name: test #数据库名
url: jdbc:mysql://localhost:3306/test #url
username: root #用户名
password: 123456 #密码
driver-class-name: com.mysql.jdbc.Driver #数据库链接驱动
jpa:
show-sql: true
properties:
hibernate:
format_sql: true
server:
port: 8181
配置了一些基本信息,然后项目创建到这里,前后端基本完成。
前后端交互
我在mysql中创建了一个person表,插入了3组数据,用来测试。
接下来实现前后端进行数据交互,将数据库中的数据显示出来,传到vue中。
前端
我们新建一个vue界面,在veiws
下右键,New
–vue components
,起名为person
,然后回车。
这里说一下,这个vue界面也可以创建在components
文件夹下,最后能映射好就行。
vue代码:
<template>
<div>
<table>
<tr>
<td>学号</td>
<td>姓名</td>
</tr>
</table>
<tr v-for="item in people">
<td>{{item.num}}</td>
<td>{{item.name}}</td>
</tr>
</div>
</template>
<script>
export default {
name: "person",
data(){
return{
msg:'10 粒子',
people:[
{
num:1,
name:'麻子'
},
{
num:2,
name:'合流'
},
{
num:3,
name:'小莲'
}
]
}
}
}
</script>
<style scoped>
</style>
简单说明,<template>
对应HTML代码,不一样的是,它其中只能有一个div作为根,
<script>
对应js代码 ,<style>
对应css代码。
我在js中创建了3个假数据,为了更好的调试。
然后将这个界面配置到映射好
进入router
–index.js
下,加入以下代码
//导入
import person from '../views/person.vue'
//在const routes中加入
{
path: '/person',
component: person
}
然后就可以http://localhost:8080/person访问到效果了。
后端
前端搞定后,就可以让后端去访问数据了。
新建三个包controller
,entity
和PersonRepositoty
第一个是用来和前端映射的,一个是用来和数据库的表格对接的,还有一个是用来接受查询结果的
Person类源代码
package com.ronglin.test.entity;
import lombok.Data;
import javax.persistence.Entity;
import javax.persistence.Id;
@Entity
@Data
public class Person {
@Id
private String Num;
private String Name;
}
简单的解释一下,@Entity
标签是表示它是一个数据库实体,@Data
标签会自动设置getter和setter方法,@Id
标签表示属性
再来看PersonRepository接口
package com.ronglin.test.repository;
import com.ronglin.test.entity.Person;
import org.springframework.data.jpa.repository.JpaRepository;
public interface PersonRepository extends JpaRepository<Person,Integer> {
}
直接继承JpaRepository<T,T>
接口就行了,第一个泛型是数据库类型,第二个泛型是索引key
然后就是PersonHandler类
package com.ronglin.test.controller;
import com.ronglin.test.entity.Person;
import com.ronglin.test.repository.PersonRepository;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.beans.factory.annotation.Autowired;
import java.util.List;
@RestController
@RequestMapping("/person")
public class PersonHandler {
@Autowired
private PersonRepository personRepository;
@GetMapping("/findAll")
public List<Person> findAll(){
return personRepository.findAll();
}
}
然后我们找到java
–testApplication
类,右键 运行就行了。
我们到浏览器中,输入http://localhost:8181/person/findAll
就可以查到后端反馈的内容了。
对接
回到前端,先按Ctrl+C停掉Vue,然后在终端中输入vue add axios
先安装一个组件
然后再回到后端,我们需要解决一下跨域问题,因为请求的是8181,而前端是8080.
在后端com.ronglin.test
下新建一个包,叫config
,新建一个类叫CorsConfig
代码如下
package com.ronglin.test.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry)
{
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}
然后重新启动后端,前端在perso.vue中js代码中加入以下代码将数据显示出来。
created() {
const _this = this
axios.get('http://localhost:8181/person/findAll').then(function (resp) {
_this.people = resp.data
})
}
成功了!!!
总结
有点难,框架不愧是框架,封装的太好了,用起来头昏眼花。=w=