15min 快速实战 - 白板项目(springboot + vue)

Suka

简介

开始撰写时间: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内书写简单的数据库查询逻辑,进行帐号密码的校验

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

前端

阅读 303

Learning for myself.

0 声望
1 粉丝
0 条评论

Learning for myself.

0 声望
1 粉丝
文章目录
宣传栏