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

介绍开始写作时间：2021年10月24日项目来源：https://github.com/Antabot/Wh...本文仅供自学springboot+vue初期项目记录，方便个人回盘，也方便有需要的朋友快速回盘。vue项目构建项目创建vue-cli创建前端项目需要自己安装npm和vue-cli包。如果安装步骤遇到问题，建议参考vue-cli官网执行命令vueinitwebpackproject-name创建项目，一路回车下来。项目可以启动了。npmrunstart启动原理补充：命令解释npmrun命令可以让你在你的package.json中定义自定义脚本，即npmrun会执行你在package.json中定义的文件，因此可以在package.json中自动生成查看"scripts"对应的文件中对应的start:{"dev":"webpack-dev-server--inline--progress--configbuild/webpack.dev.conf.js","start":"npmrundev",}webpack-dev-server：将webpack与提供实时重新加载的开发服务器一起使用。这应该仅用于开发。其实就是一个express服务，同时会加载指定的配置文件build/webpack.dev.conf.js，该文件会进一步读取自动生成的config目录下对应的文件。关键文件关系首页文件：index.html-由webpack.config定义入口文件：main.js-由webpack.configconfig定义主应用组件：App.vue即访问index.html时，main.js会loaded#main.js关键内容newVue({el:'#app',//需要挂载到index.html的查询路由router,//导入路由组件components:{App},//使用的组件模板:''//模板语法其实就是components目录下单个组件中的内容，参见：https://cn.vuejs.org/v2/guide/components.html})#该部分内容将原index.html中的#app替换为指定的模板后端工程，搭建一个常规的springbootmaven工程，但更多的是讲解前后端联调.前端和前端项目分别需要开启独立的服务：springboot和vue即可启动。在前端前端部分添加一个Login组件，在vue-router中配置，引入axios进行访问测试。原文直接挂载在vue原型上。更优雅的形式不推荐，比如把接口api提取到vuex，再封装一个Layeraxios到一个附加文件中，然后组合起来。后面有时间，axios向后端接口发送post请求，F12检查请求是否按预期发送。后端部分添加一个controller，一个pojo作为入参，一个pojo作为响应；postrequest注意使用@RequestBody注解这里注意给controller加上@CrossOrigin注解解决跨域冲突（跨域是指不同主机和端口的服务之间通信）。当然你也可以使用Vue的proxyTable来解决这个问题。至此，完成登录界面的数据访问到这一步就没什么事了，可以在前端引入element-ui美化一下。介绍数据库基础。mysql5.7例行添加pojo对应的表结构和对应的行记录。引入myabtis-plusstarter后，编写templatemapper、service、impl即可，简单的数据库查询逻辑可以写在业务代码中，也可以直接写在controller中。line账号密码的验证就到这里，数据库的引入和前端的使用就完成了