[SUCCESS]前后端分离开发-入门案例 +VSCode安装

一. 前后端分离介绍

1. 前后端分离

前后端分离是目前一种非常流行的开发模式，它使项目的分工更加明确：

• 后端：负责处理、存储数据
• 前端：负责显示数据

前端和后端开发人员通过 接口 进行数据的交换。

好处：

1. 一套后端接口为所有前端提供数据（PC端、APP端、桌面端等）
2. 前、后端代码彼此独立互不影响

坏处：

1. 当接口改变的时候，非常麻烦–
2. 需要前后端人员联调–联调开发的时间（开发+测试+联调）占项目的 15%–60%

2 JavaScript框架

随着前端的发展，原来很多由服务器端完成的功能现在都转移到了前端来实现，这就导致了前端会编写出成千上万行的JavaScript代码，用它们来管理各种各样的HTML和CSS文件，但是缺乏正式的组织形式：

为了更好的组织前端的代码，开发者们越来越多的开始使用JavaScript框架，最流行的几个前端框架有：

1. Google 的 Angularjs
2. Facebook的React
3. 尤雨溪的Vue

3.1 案例需求

完成商品的查询、修改、删除等操作

前端（浏览器端）：vue

后端（服务器端）：spring boot+spring mvc+mybatis

3.2 数据库设计与表结构

CREATE TABLE `t_goods` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `image` varchar(255) DEFAULT NULL,
  `price` double(20,0) DEFAULT NULL,
  PRIMARY KEY (`id`)
) 

导入数据：

INSERT INTO `t_goods` VALUES ('1', '华为 G9 青春版 白色 移动联通电信4G手机 双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '84900');
INSERT INTO `t_goods` VALUES ('2', '华为 G9 青春版 金色 移动联通电信4G手机 双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '84900');
INSERT INTO `t_goods` VALUES ('3', '三星 Galaxy C5（SM-C5000）4GB+32GB 枫叶金 移动联通电信4G手机 双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '119900');
INSERT INTO `t_goods` VALUES ('4', '三星 Galaxy C5（SM-C5000）4GB+32GB 蔷薇粉 移动联通电信4G手机 双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '119900');
INSERT INTO `t_goods` VALUES ('5', '三星 Galaxy C5（SM-C5000）4GB+32GB 烟雨灰 移动联通电信4G手机 双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '119900');
INSERT INTO `t_goods` VALUES ('6', '三星 Galaxy C5（SM-C5000）4GB+32GB 皎洁银 移动联通电信4G手机 双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '119900');
INSERT INTO `t_goods` VALUES ('7', '华为 G9 Plus 32GB 月光银 移动联通4G手机 双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '119900');
INSERT INTO `t_goods` VALUES ('8', '华为 麦芒5 全网通 4GB+64GB版 香槟金 移动联通电信4G手机 双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '139900');
INSERT INTO `t_goods` VALUES ('9', '努比亚（nubia）Z11 百合金 4GB+64GB 全网通 移动联通电信4G手机双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '159900');
INSERT INTO `t_goods` VALUES ('10', '华为 HUAWEI nova 4GB+64GB版 香槟金（白）移动联通电信4G手机 双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '139900');

3.3 服务器端

3.3.1 创建SprignBoot项目

 过程略。

3.3.2 导入jar包

pom.xml

<!-- 统一版本维护 -->
<properties>
    <project.build.sourceEncoding>UTF-8