SpringBoot+Uniapp实战开发全新仿抖音短视频App【2022升级版】下——栽
下栽地止：
www.ukoou.com/resource/1084
SpringBoot + Uniapp项目简介
SpringBoot 本质上是 Spring，它有自己的一些特性，可以帮助简化 Spring 应用程序的开发。具有三个核心功能：
自动配置：SpringBoot对于很多Spring应用通用的应用功能，都提供了自动配置，对集成开发者只需要很少的配置。
Bootstrap依赖：告诉SpringBoot它需要什么功能，它可以导入对应的库，不管功能所依赖的库版本是什么。
Actuator：提供对 SpringBoot 应用程序内部的洞察，例如创建了哪些 bean、自动配置决策和应用程序状态信息。
uniapp是Dcloud公司的产品，是一个跨端开发框架，基于vue.js技术栈。开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。这是它的功能架构图，可以看下，了解下它的架构。
SpringBoot+Uniapp实战开发
项目结构 一个新创建的SpringBoot应用基本结构如下。
mall-tiny-boot
├─pom.xml # Maven构建文件
└─src
├─main
│ ├─java
│ │ └─MallTinyApplication.java # 应用程序启动类
│ └─resources
│ └─application.yml # SpringBoot配置文件
└─test
└─java
└─MallTinyApplicationTests.java # 基本的集成测试类
应用启动类 MallTinyApplication在SpringBoot应用中有配置和引导的作用，通过@SpringBootApplication注解开启组件扫描和自动配置，通过SpringApplication.run()引导应用程序启动；
//开启组件扫描和应用装配
@SpringBootApplication
public class MallTinyApplication {
public static void main(String[] args) {
//负责引导应用程序启动
SpringApplication.run(MallTinyApplication.class, args);
}
}
@RunWith(SpringRunner.class)
@SpringBootTest
@Slf4j
public class MallTinyApplicationTests {
@Autowired
private PmsBrandService pmsBrandService;
@Test
public void contextLoads() {
}
@Test
public void testMethod() {
List<PmsBrand> brandList = pmsBrandService.listAllBrand();
log.info("testMethod:{}", brandList);
}
}
一、环境搭建 1、安装hbuilderX hbuilderx也是dcloud公司出品的ide产品。用uniapp开发跨多端产品，实现一次开发，多端发布就必须用hbuilderx这个神器IDE。
二、uniapp手把手实战 1、新建uniapp空模板项目 cli模式 用hbx创建项目在官方教程上讲得比较细致了，我这里只介绍下用vue-cli创建项目过程。创建步骤在官网上也有，相比用hbx的可视化搭建，用cli搭起来慢了不少。 //安装vue/cli全局依赖 npm install -g @vue/cli
//创建项目模板 vue create -p dcloudio/uni-preset-vue my-project
如果在执行脚本时有这样的错误提示：vue: 无法加载文件 C:....vue.ps1。说明你的脚本运行被禁止了，解决办法就是打开当前项目地址的资源管理器，点击文件，弹出对话框，如图点击所示位置
会有弹出框，在里面执行这个段代码： set-ExecutionPolicy RemoteSigned
执行之后，按提示输入Y或者A就可以了，再按上面进行项目创建，就正常了：
最后，它会提示你选择项目模板：
一般建议选择hello uni-app的模板。如果一切顺利(理想情况下)，创建完成的项目，看起来是这样的，如下图
我们可以观察下它的package.json文件，可以看到有很多的打包、运行命令，uniapp确实帮我们做了很多事！
cd my-project进入到项目中，运行一下npm run dev:h5，试下效果。
可以看到确实成功了，打开启动页，按f12将页面切换到手机模式，就能看到效果了。
这种cli模式下无法连接到模拟器调试，要实时调试app版本，只能用hbx这个ide。cli模式除了能调试h5版本，还可以调试小程序，以微信小程序为例，这需要先准备好开发工具。
hbuilderx模式 考虑到app是我们最主要的产品输出，最好还是切换到hbuilderx编译器上，其实用习惯之后，感觉还是挺好用的。cli模式适合开发h5或者小程序。具体的步骤看官网就可以了，比较简单，可视化操作，一步步走就没问题。其实前面用cli模式创建的项目，也可以用hbx开发，在hbx编译器上打开文件夹，选择cli项目的src文件夹，就是一个标准的hbuilderx创建项目了。 这时选择运行--运行到模拟器就可以了
2、目录结构 我们来观察下这个项目结构，这是官方的一个介绍，我copy过来了
┌─cloudfunctions 云函数目录（阿里云为aliyun，腾讯云为tcb，详见uniCloud）
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录，详见
├─platforms 存放各平台专用页面的目录，详见
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录，详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见
重点是pages、static、main.js、App.vue、manifest.json、pages.json这几个目录或者文件。
