SpringBoot+Uniapp实战开发全新仿抖音短视频App下———栽

下——栽の地止：ukoou.com/resource/1084

什么是 Spring Boot

它使用 “习惯优于配置” （项目中存在大量的配置，此外还内置一个习惯性的配置，让你无须）的理念让你的项目快速运行起来。
它并不是什么新的框架，而是默认配置了很多框架的使用方式，就像 Maven 整合了所有的 jar 包一样，Spring Boot 整合了所有框架

使用 Spring Boot 有什么好处

回顾我们之前的 SSM 项目，搭建过程还是比较繁琐的，需要：

1）配置 web.xml，加载 spring 和 spring mvc
2）配置数据库连接、配置日志文件
3）配置家在配置文件的读取，开启注解
4）配置mapper文件
.....

而使用 Spring Boot 来开发项目则只需要非常少的几个配置就可以搭建起来一个 Web 项目，并且利用 IDEA 可以自动生成生成，这简直是太爽了...

划重点：简单、快速、方便地搭建项目；对主流开发框架的无配置集成；极大提高了开发、部署效率。

SpringBoot+Uniapp实战开发全新仿抖音短视频App- 快速搭建

第一步：新建项目

选择 Spring Initializr ，然后选择默认的 url 点击【Next】：

然后修改一下项目的信息：

勾选上 Web 模板：

选择好项目的位置，点击【Finish】：

如果是第一次配置 Spring Boot 的话可能需要等待一会儿 IDEA 下载相应的依赖包，默认创建好的项目结构如下：

项目结构还是看上去挺清爽的，少了很多配置文件，我们来了解一下默认生成的有什么：

SpringbootApplication：一个带有 main() 方法的类，用于启动应用程序
SpringbootApplicationTests：一个空的 Junit 测试了，它加载了一个使用 Spring Boot 字典配置功能的 Spring 应用程序上下文
application.properties：一个空的 properties 文件，可以根据需要添加配置属性
pom.xml： Maven 构建说明文件

第二步：HelloController

在【cn.wmyskxz.springboot】包下新建一个【HelloController】：

package cn.wmyskxz.springboot;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * 测试控制器
 *
 * @author: @我没有三颗心脏
 * @create: 2018-05-08-下午 16:46
 */
@RestController
public class HelloController {

	@RequestMapping("/hello")
	public String hello() {
		return "Hello Spring Boot!";
	}
}

@RestController 注解： 该注解是 @Controller 和 @ResponseBody 注解的合体版

第三步：利用 IDEA 启动 Spring Boot

我们回到 SpringbootApplication 这个类中，然后右键点击运行：

注意：我们之所以在上面的项目中没有手动的去配置 Tomcat 服务器，是因为 Spring Boot 内置了 Tomcat

等待一会儿就会看到下方的成功运行的提示信息：

可以看到我们的 Tomcat 运行在 8080 端口，我们来访问 “/hello” 地址试一下：

可以看到页面成功显示出我们返回的信息。

逻辑层和视图层分离，且非H5端通信有折损

uni-app 在非H5端运行时，「从架构上分为逻辑层和视图层两个部分」。逻辑层负责执行业务逻辑，也就是运行js代码，视图层负责页面渲染。

虽然开发者在一个vue页面里写js和css，但其实，编译时就已经将它们拆分了。

逻辑层详解

逻辑层是运行在一个**「独立的jscore里的」，它不依赖于本机的webview，所以一方面它「没有浏览器兼容问题」**，可以在Android4.4上跑es6代码，另一方面，它无法运行window、document、navigator、localstorage等浏览器专用的js API。

❝

uni-app的App端和小程序端的js引擎，其实是在jscore上补充了一批手机端常用的JS API，比如扫码。

视图层详解

通常：h5和小程序平台，以及app-vue，视图层是webview。而app-nvue的视图层是基于weex改造的原生视图。

uni-app的js基本没有不同手机的兼容问题（因为js引擎自带了），而视图层的css，在app-vue上会有手机浏览器的**「css兼容问题」。所以在app-vue的场景中「尽量不要使用太新的css语法」**，除非你不打算支持低端机。

项目创建

两种方式

1. 通过 HBuilderX 可视化界面

这个超级简单开箱即用，无需配置nodejs。

下载好 IDE在点击工具栏里的文件 -> 新建 -> 项目，喜欢哪个模板选一个就完事儿了（推荐 hello uni-app）。

2. 通过vue-cli命令行 ( vue玩家推荐)

通过vuecli3.0+ 做为支持，所以需要先安装 npm install -g @vue/cli 然后=》创建项目： vue create -p dcloudio/uni-preset-vue my-project

自带各种脚本，秀的不行啊！通过这个方式，可以安装各种你想要的 css预处理器、第三方插件等等，玩vue项目的都懂的。

关于NPM支持

cli项目默认已经有package.json了。 HBuilderX创建的项目默认没有，需要通过初始化命令来创建。

关于页面配置

跟小程序一样放在： pages.json

{
    "pages": [{
        "path": "pages/component/index",
        "style": {
            "navigationBarTitleText": "组件"
        }
  }]
}

SpringBoot+Uniapp实战开发全新仿抖音短视频App【Wan整】