SpringBoot+Vue全栈开发（图书商城项目回顾）

参考资料：1天搞定SpringBoot+Vue全栈开发

---

后端

开发框架：SpringBoot + Mybatis

开发工具：IDEA + Navicat

所有文件

src/main/java/booksystem/

pom.xml（Project Object Model，项目对象模型，该文件用于管理：源代码、配置文件、开发者的信息和角色、问题追踪系统、组织信息、项目授权、项目的url、项目的依赖关系等。）：

史上最全的 pom.xml 文件详解

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.2</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>booksystem</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>booksystem</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>11</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- 这里省略了大部分依赖 -->

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>8</source>
                    <target>8</target>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

BookSystemApplication.java（相当于项目的启动程序）：

package booksystem;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class BooksystemApplication {

    public static void main(String[] args) {
        SpringApplication.run(BooksystemApplication.class, args);
    }

}

AddressController.java：

package booksystem.controller;

import booksystem.pojo.Address;
import booksystem.service.AddressService;
import booksystem.service.Impl.AddressServiceImpl;
import booksystem.utils.Result;
import booksystem.utils.ResultEnum;
import booksystem.utils.TokenUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.servlet.ServletRequest;
import javax.servlet.http.HttpServletRequest;
import java.util.List;

@CrossOrigin(origins="*",maxAge = 3600)
@RestController
public class AddressController {
    @Autowired
    AddressService addressService;

    //根据user_id获取所有地址
    @RequestMapping("/user/address/getAll")
    public Result getAllAddress(ServletRequest request){
        String token=((HttpServletRequest)request).getHeader("token");
        String username= TokenUtils.parseToken(token).get("username").toString();
        return Result.ok().put("data",addressService.getAllAddress(username));
    }

    //删除一个地址
    @DeleteMapping("/user/address/delete")
    public Result deleteAddress(@RequestParam("addressId") String addressId){
        addressService.deleteAddress(addressId);
        return Result.ok(ResultEnum.SUCCESS.getMsg());
    }

    //省略其他功能

}

 可以将数据放在请求体或url中。

---

前端

开发框架：vue 2.6.14

开发工具：VSCode

依赖管理：yarn（也可使用npm）

项目构建：VueCli

VueCli是官方提供的构建工具，通常称为脚手架。

用于快速搭建一个带有热重载（在代码修改后不必刷新页面即可呈现修改后的效果）及构建生产版本等功能的单页面应用。

VueCli基于webpack构建，也可以通过项目内的配置文件进行配置。

安装：npm install -g @vue/cli

Nodejs是一个基于Chrome V8引擎的JS运行时环境。

Node中包含了npm包管理工具。

package.json文件记录依赖信息，一般下载的项目都没有node_modules文件夹，即依赖，使用 npm/yarn install 下载依赖。

创建vue项目：在cmd中输入vue create <项目名>

xxx.vue：vue的组件（components），由三部分构成，包括template（可包含html标签及其他组件）、script（JS代码）、style（样式）。 

 组件的嵌套：①import ②注册 ③标签

组件间的传值：组件可以由内部的Data提供数据，也可以由父组件通过prop的方式传值。兄弟组件之间可以通过Vuex等统一数据源提供数据共享。

第三方组件elementUI：导入和注册

第三方图标库（本项目未使用）：font awesome

Axios简介

在实际项目开发中，前端页面所需要的数据往往需要从服务器端获取，这必然
涉及与服务器的通信。

Axios是一个基于promise网络请求库，作用于node.js 和浏览器中。

Axios在浏览器端使用XMLHttpRequests发送网络请求，并能自动完成JSON数据的转换。

跨域问题解决

CORS (Cross-Origin Resource Sharing)是由W3C制定的一-种跨域资源共享技术标准，其目的就是为了解决前端的跨域请求。

CORS可以在不破坏即有规则的情况下， 通过后端服务器实现CORS接口，从而实现跨域通信。

CORS将请求分为两类:简单请求和非简单请求，分别对跨域通信提供了支持。

VueRouter

Vue路由vue-router是官方的路由插件，能够轻松的管理SPA项目中组件的切换。

Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。

vue-router目前有3.x的版本和4.x的版本，vue-router 3.x只能结合vue2进行使用，vue-router 4.x只能结合vue3进行使用。

导航守卫

导航守卫可以控制路由的访问权限。

全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制。

你可以使用router .beforeEach注册一个全局前置守卫。

Vuex

对于组件化开发来说，大型应用的状态往往跨越多个组件。在多层嵌套的父子组件之间传递状态已经十分麻烦，而Vue更是没有为兄弟组件提供直接共享数据的办法。
基于这个问题，许多框架提供了解决方案一使用全局的状态管理器， 将所有分散的共享数据交由状态管理器保管，Vue也不例外。
Vuex是一个专为Vue.js应用程序开发的状态管理库,采用集中式存储管理应用的所有组件的状态。
简单的说，Vuex用于管理分散在Vue各个组件中的数据。

Mock.js

Mock.js是一款前端开发中拦截Ajax请求再生 成随机数据响应的工具，可以用来模拟服务器响应。

优点是非常简单方便,无侵入性,基本覆盖常用的接口数据类型。

支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

vue-element-admin

vue-element-admin 是一个后台前端解决方案，它基于vue和element-ui实现。

内置了i18国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件。可以快速搭建企业级中后台产品原型。

JSON Web Token（JWT）

JSON Web Token (简称JWT)是一个token的具体实现方式，是目前最流行的跨域认证解决方案。

JWT 的原理是，服务器认证以后,生成一个JSON对象，发回给用户。

用户与服务端通信的时候，都要发回这个JSON对象。服务器完全只靠这个对象认定用户身份。

为了防止用户篡改数据，服务器在生成这个对象的时候，会加上签名。