SpringBoot+JdbcTemplate+Vue+Element构建前后端分离项目

IDE

IDEA 2020.2
MySql 8.0

前端部分

安装Vue CLI（Vue脚手架）

安装Vue CLI需要使用npm，因此第一步需要安装Node.js，官网，首页左边为长期支持版本，右边为当前最新版本。

1、下载后运行安装包，跟着指导。

2、然后在控制台中输入node -v，检查Node.js是否安装成功。

3、输入npm -v查看npm版本号

4、输入npm -g install npm，将npm更新至最新版本

5、可以安装npm的国内镜像cnpm（cnpm下载速度快，但包可能无最新版本），安装命令为：

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

（ps：npm和cnpm在同一个项目中不要混用）

6、安装Vue CLI

npm install -g @vue-cli

使用命令行构建前端项目

1、在项目位置进入控制台

2、执行命令vue init webpack ProjectName，webpack指以webpack为模板生成项目，可以替换为其他参数。在项目创建过程中会有一些判断，可以按默认值直接回车。

若创建项目时存在问题，可下载webpack离线模板并改名为webpack；在用户目录下找到.vue-templates目录；将下载的webpack放到该目录中；执行命令vue init webpack ProjectName --offline即可创建项目

3、cd进入项目文件夹，执行npm run dev即可

Vue CLI的项目结构

前端相关配置

所需模块的安装

1、安装axios，执行npm install --save axios

2、安装Element，执行npm i element-ui -S

3、安装Vuex，执行npm install vuex --save

设置反向代理

修改前端项目src\main.js代码

import Vue from 'vue'
import App from './App'
import router from './router'
// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8443/api'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

配置页面路由

修改src\router\index.js

跨域处理

为了使后端能够访问到前端资源，需要进行跨域处理

在config\index.js中，找到proxyTable位置，修改为以下内容

    proxyTable: {
      '/api': {
        target: 'http://localhost:8443', //设置调用的接口域名和端口
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': '' //用'^/api'代替'http://localhost:8443'
        }
      }
    }

设置前端拦截器

在src目录下新建一个名为store的文件夹，并新建index.js文件，文件内容如下：

import Vue from 'vue'
import Vuex from 'vuex'
// 引入vuex

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: {
      // localStorage：本地存储
      // 在项目打开的时候会判断本地存储中是否有user这个对象存在，若存在，
      // 则去取出并获取id的值，否则将id设置为空
      // JSON.parse()：将字符串转成JSON对象
      id: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).id
    }
  },
  getters: {
    getId (state) {
      return state.user.id
    }
  },
  mutations: {
    login (state, user) {
      state.user = user
      // JSON.stringify()：数组转换为字符串
      window.localStorage.setItem('user', JSON.stringify(user))
    },
    clearUser (state) {
      state.user = []
    }
  },
  actions: {
  }
})

这里使用到了localStorage，即本地存储，在项目打开的时候会判断本地存储中是否有user这个对象存在，如果存在就取出来并获得id的值，否则则把 id 设置为空。这样我们只要不清除缓存，登录的状态就会一直保存。

修改src\router\index.js，在需要拦截的路由中添加一条元数据，设置一个requireAuth字段，如下：

meta: {
	requireAuth: true
}

使用钩子函数判断是否拦截
1、打开src\main.js，添加对store的引用

import store from './store'

2、修改Vue对象中的内容

new Vue({
  el: '#app',
  render: h => h(App),
  router,
  // 注意这里
  store,
  components: { App },
  template: '<App/>'
})

3、使用钩子函数判断是否拦截。使用了router.beforeEach()，意思是在访问每一个路由前调用。

router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {
      if (store.state.user.username) {
        next()
      } else {
        next({
          path: 'login',
          query: {redirect: to.fullPath}
        })
      }
    } else {
      next()
    }
  }
)

首先判断访问的路径是否需要登录，如果需要，判断store里是否存储了user的信息，若存在，则放行；若不存在，则跳转至登录界面并存储访问的页面路径（以便登录后直接跳转至访问页）

4、修改登录页面。在登录判断函数中，请求正确返回后，添加代码

this.$store.commit('login', this.loginForm)
var path = this.$route.query.redirect
this.$router.replace({path: path === '/' || path === undefined ? '/index' : path})

确认账号密码正确后，触发store中的login()方法，将loginForm对象传递给store中的user对象；获取登录前页面的路径并跳转，如果该路径不存在，则跳转至首页。

使用Element辅助开发

引入Element

修改main.js文件为以下内容

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8443/api'
Vue.prototype.$axios = axios
Vue.config.productionTip = false

Vue.use(ElementUI) // 为Vue扩充Element的UI属性

/* 1、render方法的实质是生成template模板；
	2、通过一个方法来生成，而这个方法是通过render方法的参数传递给它的；
	3、这个方法有三个参数，分别提供标签名，标签相关属性，标签的html内容；
	4、通过这三个参数，可以生成一个完整的模板 */
new Vue({
  el: '#app',
  render: h => h(App),
  router,
  components: { App },
  template: '<App/>'
})

创建页面及更改首页

1、在前端项目src\components文件夹中创建Vue文件。几乎所有的前端业务文件都在此文件夹中

2、修改App.vue
删除<img src="./assets/logo.png">及style中的margin-top: 60px;

3、更改默认路由
修改router\index.js，创建的Vue页面需要在该文件中注册路由

后端部分

（使用IDEA版本为2020.2）

创建后端项目

依次点击文件，项目，新建，选择Spring Initializr,点击next，更改项目信息，点击next，选择Web->Spring Web（可点击开发工具->Lombok和Spring Boot DevTools，增加插件），修改项目名称以及项目位置，点击finish即完成项目创建。

创建接口类

在src\main\java\com\packagename文件夹下新建一个pojo包，用于存放接口类（接口类的函数实现可以使用Lombok中的@Data注解实现）

创建Controller类

在src\main\java\com\packagename文件夹下新建一个controller包，用于存放响应请求，处理请求的java文件。文件中需添加@Controller注解（在类声明前）

更改端口号

在src\main\resources文件夹下找到application.properties文件，修改server.port为server.port=8443（前后端接口统一）

连接数据库

点击IDEA右侧数据库，点击左上角加号，选择mysql，输入用户，密码，Database（数据库名），点击确认。

打开pom.xml，添加mysql依赖

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>

打开src\mian\resources\application.properties，添加如下语句

spring.datasource.url=jdbc:mysql://127.0.0.1:3306/数据库名?characterEncoding=UTF-8
spring.datasource.username=用户名
spring.datasource.password=密码
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.hibernate.ddl-auto = none

使用JdbcTemplate

在Controller类声明内添加

    @Autowired
    private JdbcTemplate jdbcTemplate;

处理请求

    @CrossOrigin
    @PostMapping("api/login")
    @ResponseBody
    public void Login(@RequestBody User requestUser){
    	//响应处理部分
    }

最后

本文主要参考Vue + Spring Boot 项目实战，主要侧重于从零构建一个能够进行前后端交互简易项目，对其中的具体原理以及后续开发可查看原文。