SpringBoot+vue项目实战（一）

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

一个热爱生活代码搬运工

17623人浏览 · 2021-02-19 23:02:37

一个热爱生活代码搬运工 · 2021-02-19 23:02:37 发布

SpringBoot+vue入门

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\用户名\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项目

步骤二：安装镜像

由于 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.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交互

三：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的项目

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

HAS2024：华为云以系统性创新加速千行万业智能化升级

华为云开发者联盟

数仓的两种轻量级数据交换格式：json与jsonb

华为云开发者联盟

如何基于香橙派AIpro对视频/图像数据进行预处理？

华为云开发者联盟

所有评论(0)

查看更多评论

一个热爱生活代码搬运工

@jiuxiang1

已为社区贡献1条内容