15min 快速实战 - 白板项目（springboot + vue）

简介

开始撰写时间：2021年10月24日

项目出处见：https://github.com/Antabot/Wh...
本文章只作为本人学习springboot + vue的初期项目的记录，方便个人回盘，也供有需要的朋友快速回盘。

vue项目搭建

项目创建

vue-cli 创建前端项目，需要自行安装 npm 以及vue-cli的包，安装步骤遇到问题建议参考vue-cli官网
执行命令vue init webpack project-name创建项目，一路回车下去即可

项目启动

npm run start
启动原理补充：

1. 命令解释
   The npm run command lets you define custom scripts in your package.json
   即npm run会执行你定义在package.json内的文件，因此可以在自动生成的package.json文件内看到对应的start对应着

   "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
   }

   webpack-dev-server： Use webpack with a development server that provides live reloading. This should be used for development only.
   其实就是了一个express服务，同时会加载指定配置文件build/webpack.dev.conf.js，该文件内再会进一步读取自动生成的config目录内对应文件。

2. 重点文件关系
   首页文件：index.html - 由webpack.config定义
   入口文件：main.js - 由webpack.configconfig定义
   主应用组件：App.vue

即访问index.html时，会加载main.js

# main.js内重点内容
new Vue({
  el: '#app',// 需要挂载到index.html的查询器
  router,// 引入router组件
  components: { App },// 用到的组件
  template: '<App/>'// 模板语法，其实就是components目录下单个组件内的<template></template>内容，详情见:https://cn.vuejs.org/v2/guide/components.html
})
# 该部分内容会将原index.html内#app替换为指定 <App/> 模板

后端项目搭建

常规springboot maven项目搭建，不过多解释

前后端联调

前后端项目都需要开启独立的服务：springboot、vue各自启动即可

前端部分

1. 前端新增Login组件，配置到vue-router内，访问测试
2. 引入axios，原文是直接挂载到vue原型上，不推荐 有更加优雅的形式，例如提取接口api到vuex，封装一层axios到额外文件内，再进行结合，后面有时间再说
3. axios发送post请求到后端接口，F12查看请求发送是否符合预期

后端部分

1. 新增一个controller、一个pojo作为入参，一个pojo作为响应；post请求注意使用@RequestBody注解
2. 这里注意为该controller添加@CrossOrigin注解，解决跨域冲突（跨域是指主机+端口不同的服务间通信）

当然也可以采用Vue的proxyTable来解决该问题
至此，完成login接口的数据访问

没啥事的这一步时就可以前端自行引入element-ui进行美化了

引入数据库

基础，mysql5.7

常规新增pojo对应表结构与对应行记录，引入myabtis-plus starter后，书写模板mapper、service、impl即可，在业务代码或直接在controller内书写简单的数据库查询逻辑，进行帐号密码的校验

至此，完成数据库的引入以及使用

前端