Vue+SpringBoot+数据库整体开发流程 1

本篇文章通过springboot整合mybatis-plus去实现后端对数据库的增删改查，以及响应给前端的url，让前端获得数据。

 

目录

一、简单搭建一个Vue项目

检查node.js版本

使用vue-cli创建空项目

Vue-cli工程中每个文件夹和文件的用处

二、Mysql数据库

创建数据库

新建表

三、SpringBoot+Mybatis-Plus实现增删改查

创建空项目

配置maven

application.yml配置

pom.xl导入相关依赖

代码的编写

MySQL表绑定到spring boot（实体层）

springboot绑定到mybatis-plus（数据层）

把数据层加工处理成逻辑业务（service服务层）

调用服务层的controller

接口自测

---

一、简单搭建一个Vue项目

检查node.js版本

首先需要自行安装node。

查看node.js版本的两种方式，

node -v
node -version

 查看npm版本，

npm -v

出现版本号则说明安装成功（最新的以官网为准）。

使用npm安装或者升级vue-cli，

1.卸载旧的
npm uninstall vue-cli -g

2.安装新的
npm install -g @vue/cli

查看 vue-cli的版本，

vue --version

 

使用vue-cli创建空项目

以管理员身份打开命令行界面，进入任意一个想要创建项目的文件夹，输入命令：vue create命令 +自定义项目名字，

vue create 项目名

此处我的项目名是demo，

上下键选择这个自定义的版本，意味着选择手动配置，然后回车，

按空格键选中，完成后按回车键,

选择vue2的版本回车，也可以根据自己需要选择vue3的版本，

选择y，然后回车键，

选择第一个回车，

选择第一个回车，

是否要把此配置设置为以后建立项目的默认选项，选择N，

按照给出的提示继续输入（下一步有提示失败的做法），

等待安装完成， 

按照给出的提示继续输入（下一步有提示做法），

就可以在当前文件目录下，看到一个叫demo的项目文件夹，

然后使用Vscode打开这个demo文件夹，在Vscode的终端中，输入下列命令就可以运行前端项目，

npm run serve

可以看到项目已经成功运行，

在浏览器输入对应的网址就可以看到界面，可以看到vue的标志。

Vue-cli工程中每个文件夹和文件的用处

• dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署
• node_modules：存放npm命令下载的开发环境和生产环境的依赖包
• public：有的叫assets：存放项目中需要用到的资源文件，css、js、images以及index
• src文件夹：存放项目源码及需要引用的资源文件
• src-api文件夹：放ajax相关操作的代码文件:index.js(相关的接口),ajax.js(封装的axios,拦截器)。有的叫service：自己配置的vue请求后台接口方法
• src-common文件夹：stylus的混合文件.styl，不要写到public也可以
• src-components文件夹：存放vue开发中抽离的一些公共组件
• src-mock文件夹：mock数据存放文件及mock模拟接口（没有后台接口或接口不完整情况下可以模拟后台接口）
• src-pages文件夹：涉及到路由的组件
• src-router文件夹:vue-router，路由器及路由的配置
• src-store文件夹：存放 vue中的状态数据，用vuex集中管理
• App.vue文件：使用标签渲染整个工程的.vue组件
• main.js文件：vue-cli工程的入口文件
• package.json文件：用于 node_modules资源部 和 启动、打包项目的 npm 命令管理
• build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库
• config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同，常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等

二、