开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> Java知识库 -> 简单app快速开发就是怎么气人 (Framework7 移动) Springboot 入门培训 6 WEB APP 项目搭建 -> 正文阅读

[Java知识库]简单app快速开发就是怎么气人 (Framework7 移动) Springboot 入门培训 6 WEB APP 项目搭建

? 现在流行的web app的开发模式是前后端分离，前端架构是mvvm模式构建app客户端，springg boot开发后端。这种模式优点很多我就不介绍了。但是这种开发模式不太适合小团队和一些中小项目，应为开发成本太高需要人员队伍很庞大（分前端人员与后端人员）加上什么产品经理（原来的UI设计人员），如果项目的利润高这么一大帮人开发没有问题。但是我们大部分遇到的客户都是一张嘴做app的预算就想3千5千的做一个，或者多给点4~5万做个小app的时候。前后端分离的开发模式就没有办法将成本降下来了。
这个时候我们可以使用Framework7 做个sap单网页，在用cordova将这个网页打包到对应的手机系统壳子中产生个简单的小app了。这样开发起来就是一个spring boot web服务加html网页，开发和维护起来特别方便和简单。但是缺点就是在做和手机硬件对接的功能上特别麻烦，所以这种开发模式尽量不去做和手机硬件相关的功能。这个方法特别适用于一些简单功能的app开发，像那种几千一个APP还送一年阿里云服务的活。有的时候和同行讨论做一个app成本多少的时候，常常放嘴炮说1500元就能搞定一个小app，气的他们脸都绿了，但是谁也不能点灯傲油的干半个月就赚几百元（去掉成本），但是嘴炮不能输哈哈。
开玩笑的，我的意思就是说这种开发模式特别简单粗暴，直接有效，我以后的几篇文章将会介绍如何使用Framework7 网页开发app，最后在教大家怎么用cordova进行打包，开发一款自己的小app.。谢谢大家的关注与支持,我写的这一系列文章都是公司培训新人和开发中实战开发项目中当工具文章直接使用的。

1 项目工程结构

? 我使用是eclipse来创建的项目工程，本人比较喜欢使用eclipse来写这种小的示例代码感觉特别方法。正式开发的时候用大部分项目使用idea开发。大家没有必要在使用什么开发工具上纠结，能把项目工程跑起来就可以，主要是学习Framework7为主。
项目结构

framework7App
   |--src
       |--cn.core 代码
       |      |--OnFk7Appaction   启动类
       |--templates html模板
       |--static  js,css，html资源包
       |--application.yml  配置文件
   |--lib 项目jar包

2 创建 Framework7 页面

在templates文件夹下创建一个html页面，页面中直接引入framework7-bundle.js和framework7-bundle.css作为framework7 UI基础脚本代码。

1 引入项目Framework7包

 <link rel="stylesheet" type="text/css" href="../static/js/framework7-bundle.css"/>
 <link rel="stylesheet" type="text/css" href="../static/js/app.css"/>
 <script src="../static/js/framework7-bundle.js"></script>

2 script中创建Framework7全局对象 var app = new Framework7

1 创建Framework7主函数 var app = new Framework7({ // 引入app承载元素 el: ‘#app’,});
2 创建工具类引用 var $$ = Dom7; Dom7是一个和jquery很象的一个js工具类

   <script type="text/javascript">
   var $$ = Dom7;
   var app = new Framework7({
	   // 引入app承载元素
	   el: '#app',
	   //定义app引用名称
	   name: 'zhtapp',
	   // 定义id
	   id: 'zhtapp'
	 });
   </script>

3 Framework7 页面结构

Framework7 页面结构中顶层app元素包含许多view视图元素这是构成app页面核心基础。每个页面的都是在view这个视图组件下完成的。在Framework7 UI页面中元素基本分层关系是顶层元素是app，app中包含多个视图组件view。

每个view视图组件中包含 page组件和navbar组件和toolbar组件这三个基础组件。

app(元素)
  |----视图组件<div class="view"></div>                      
               |---app 头部组件<div class="navbar">
               |---page组件中间部分<div class="page"> 
               |---app 底部组件<div class="toolbar>

如果对spring boot Thymeleaf 项目如何搭建不太了解请看
Springboot 入门培训 5 Thymeleaf MVC项目搭建
html 元素层级

<div id="app">//顶层app
  <div class="view view-main" > //视图层
        <div class="navbar">//头组件/div>
        <div class="page-content"> //中间内容组件</div>
        <div class="toolbar toolbar-bottom">//底部组件</div>
   </div>
</div>

上面为一个Framework7 app页面的基本组成部分，每个Framework7 页面都要准守这个页面结构规则。

整个页面中只能有一个app元素，这个元素用于与 new Framework7({id:app}) Framework7 js框架主体函数绑定app UI的页面承载元素。定义方法是 < div id=“app”> app页面</ div>。
在app元素中定义视图元素，定义方法是将class属性中定义一个view名称< div class=“view”></ div>，表示这个页面元素下所有属性都是view组件。
定义page组件，page组件是整个Framework7 基础组件，所有Framework7 组件元素都包含在page中，页面这间的跳转需要在通过这个组件来完成。注意一定要在view视图组件中定义，一个view视图可以包含多个page页面主件。page组件中包括可以包含（page组件，navbar，toolbar）等组件。
头部组件需要在page组件中定义。头部组件定义方式< div class=“navbar” >。
定义一个新的page组件，它的属性是class=page-content中间部分组件。
底部组件需要在page组件中定义，底部组件定义方式< div class="toolbar >

4 第一个app页面

1 创建访问容器Controller

项目使用templates模板页面来进行开发通过spring boot Controller容器访问到templates模板页面。

package cn.core.my.app.Controller;
@Controller
public class IndexController {
	@RequestMapping("/")
	public String index(ModelMap map) {
		return "/index";
	}
}

index.html页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,
             initial-scale=1, maximum-scale=1,
             minimum-scale=1, user-scalable=no,
             viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" 
        content="black-translucent">
  <meta name="theme-color" content="#2196f3">
  <meta http-equiv="Content-Security-Policy" 
        content="default-src * 'self' 
      'unsafe-inline' 'unsafe-eval' data: gap:">
  <title>韬哥Fk7学习例子</title>
    //css样式
  <link rel="stylesheet" type="text/css" href="../static/js/framework7-bundle.css"/>
  <link rel="stylesheet" type="text/css" href="../static/js/app.css"/>
    //framework7使用到js
  <script src="../static/js/framework7-bundle.js"></script>
</head>
<body>
 <!-- App例子 -->
    <div id="app">
      <!-- app 主要视图  -->
      <div class="view view-main view-init safe-areas" >
        <!-- 初始页面, "data-name"属性定义初始页面名称  -->
        <div data-name="home" class="page">
          <!-- app 头部分 -->
          <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
              <div class="title">头部分</div>
            </div>
          </div>
          <!-- app 底部分-->
          <div class="toolbar toolbar-bottom">
            <div class="toolbar-inner">
              <!-- 底部选择区 -->
              <a href="#" class="link">点击链接 1</a>
              <a href="#" class="link">点击链接 2</a>
            </div>
          </div>
  		 <!-- app 中间内容-->
          <div class="page-content">
              	<!-- 内容 部分 -->
               <p>这是我第一个app页面</p>
          </div>
        </div>
      </div>
    </div>
   <script type="text/javascript">
   var $$ = Dom7;
   var app = new Framework7({
	   // 引入app承载元素
	   el: '#app',
	   //定义app引用名称
	   name: 'zhtapp',
	   // 定义id
	   id: 'zhtapp'
	 });
   </script>
</body>
</html>

5 项目访问地址

启动项目后，在浏览器中输入http://localhost:9099/ 就可以看到这个项目示例代码效果。

启动类

package cn.core.my.app;
@SpringBootApplication
public class OnFk7Appaction {
	public static void main(String[] args) {
        new SpringApplicationBuilder
            (OnFk7Appaction.class).
            web(WebApplicationType.SERVLET).run(args);
	}	
}