2023年3月

----和 **类似??
Angular 2、谷歌的
React   Facebook的
Vue.js、
Ember.js。
https://github.com/angular/angular.js
https://github.com/vuejs/vue
https://github.com/facebook/react
可以看出 vue增长非常快

-----------

MVVM  微软很多年前提出的概念

--------  Angular 和node.js关系:可以通过 NPM的方式安装 angular,必须先安装node.js。去官网找,安装完成后,就可以用cmd命令行安装:
到你html需要引用angular的目录下 ,cmd命令输入:npm install angular 。一会即可吧所有需要的js文件都下载到和html的同路径下
-------------

我们常说 都是前端框架:
Angular:更多的是构建整个应用程序的解决方案<=功能性
Bootstrap:样式库,更多是定义了一套构建界面的解决方案<=界面性

-----------
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。
AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中。
---举例:

一个模块 module中可以有多个控制器 controller的,ng-app 放到 html标签上面去。

===========

AngularJS的四大功能

  • MVC

将后台的MVC模式写入了前端语言中。我总觉得前端语言将来会很叼,从node.js开始我就又一种这样的感觉。可能在很久之后取代后端语言不是没有可能的。

  • 模块化

就是一系列函数的集合,当应用被启动时,这些函数就会被执行。主要利用angular.module来定义模块。也是Angular.js的亮点。

  • 指令属性

我自己的理解就是比html标签更加具有能力的指令标签;

  • 双向数据绑定

传统的数据绑定是单向绑定,数据只能从model和controller生成需要的html,但是不能返过来使用。只是单方向的。双向数据绑定:也就是说我在前面填写,后面直接生成代码,将填写的显示出来。双向的意思就是如果view修改了属性值,那么model机会看到这个改变。相反也是一样的。

=============

传智《使用AngularJS开发现代Web应用程序video》

构建单页面程序,  url地址中 /#/   用#隔开的,称为锚点,现在越来越流行了。

官方文档:
http://vuejs.org/v2/guide/syntax.html

中文文档:
https://cn.vuejs.org/v2/guide/syntax.html

https://github.com/angular/angular.js
https://github.com/vuejs/vue
https://github.com/facebook/react

兼容性

Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。Vue.js 支持所有
兼容 ECMAScript 5 的浏览器

以为没有处理兼容问题,代码量比较少,效率也高, 比较适合在微信使用。

jquery 大力提倡 dom操作,而 angula vue 这些都是抵制dom操作的,不建议有任何dom操作。

======里面讲到 路由设定,定义模板,常用方法

现在 web程序 都可以用js 写前后端了,node。js 就是运行在服务端的,不用写java代码 运行效率更高。

提到一个 JSOP viewer

  //定义组件
  var Home =Vue.extend({//template: '<img src="assets/img/home.png" alt="" width="100%">'
    template: loadTemplate('home')
})

、、jsonp  跨域请求问题

  var List =Vue.extend({
template: loadTemplate(
'list'),
data:
function() {//jsonp 取到api 提供的数据 this.$http.jsonp('http://localhost:2080/api/music')
.then(res
=>{//console.log(res.data) this.list =res.data
})
return{
list: []
}
},
methods: {
pad: pad,
convert: convertDuration
}
})


  //定义路由规则
  //每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend
  //创建的组件构造函数,也可以是一个组件选项对象。
  //稍后我们会讲解嵌套路由
router.map({'/home': {
name:
'home',
component: Home
},
'/songs': {
name:
'list',
component: List
},
'/songs/:id': {
name:
'item',
component: Item
}
})
//任意其他地址跳转到home router.redirect({ '*': '/home' })

router

var audio = new Audio() 播放
audio.src = this.item.music
audio.play()






一、一般方式

方式1:\   要写在标签后面,看例子

var longString = "\
------------------------\
------------------------\
...
------------------------\
";
vartoast;
toast
= '\
<div id="toast" style="display:none;">\
<div class="weui_mask_transparent"></div>\
<div class="weui_toast">\
<i class="weui_icon_toast"></i>\
<p class="weui_toast_content">
' + msg + '</p>\
</div>\
</div>\
';
$(
'').append(toast);
方式2:+ 要看清楚哪些地方加双引号和单引号
var longString = '------------------------' +
'------------------------' +
...
'------------------------';
for (var x inimgstrs)  {var $preview = $('<div class="col-xs-2 col-md-2">'
  +'<a href="#" class="thumbnail"> <img id="tuNO'+x+'"+ src="/images/'+imgstrs[x]+'" width="55px" height="55px"></img></a></div>');
$(
'#crudmodal_modify #show_images').append($preview); }
方式3:String.concat
''.concat(
'-----------------------------',
'-----------------------------',
...
'-----------------------------',
);
方式4:Array.join
[
'-----------------------------',
'-----------------------------',
...
'-----------------------------',
].join('');

二 、
无法将js中的数据 动态加上去。 如你想拼接  src="/images/"+imgstrs[x]  这样在html语法是错误的。《==这句话是错误的,之前本人理解不深

如果你看懂了,动态数据都可以通过方式1 和2  拼接。

三、通过模板

例子1、

<script type="text/template" id="html_template">
<div>HTML代码</div>
</script>

<script type="text/javascript">
var html = document.getElementById('html_template').innerHTML;</script>
这种方式的好处就是可以保持代码缩进,易读易修改,、

例子2、  ===来自个人 vue中添加的模板

<!-- 首页模版 -->
  <script id="home_tmpl" type="text/v-template">
    <img src="assets/img/home.png" alt="" width="100%">
  </script>
 <!-- 列表模版 -->
  <script id="list_tmpl" type="text/v-template">
    <!-- 这里的内容不会显示到界面上 -->
    <div class="list">
      <ol>
        <li v-for="item in list">
          <a v-link="{ name: 'item', params: { id: item.id } }">
            <span class="num">{{pad(item.id, 3)}}</span>
            <div class="info">
              <h3 class="title">{{item.name}}</h3>
              <span class="artist">{{item.artist}}</span>
            </div>
            <span class="duration">{{convert(item.duration)}}</span>
            <div class="photo"><img :src="item.poster" alt="{{item.artist}}"></div>
          </a>
        </li>
      </ol>
    </div>
  </script>

通过这样取出

  var loadTemplate =function (name) {return document.getElementById(name + '_tmpl').innerHTML
}

四、拓展,js添加节点和 jq添加节点对比

例子1、被注释掉的就是js代码

  $(function() {//var box = document.getElementById("box");//
//
var a = document.createElement("a");//box.appendChild(a);//a.setAttribute("href", "http://web.itcast.cn");//a.setAttribute("target", "_blank");//a.innerHTML = "传智大前端"; $("#box").append('<a href="http://web.itcast.cn" target="_blank">传智大前端</a>');

});

例子2、为了添加成下面子节点,被屏蔽的是js代码,可以看出js比较麻烦

<tr >
<td style="text-align: center;">序号</td>
<td style="text-align: center;">内容</td>
<td style="text-align: center;">价格</td>
</tr>

//处理改装列表 子表格
                        vargaizhuangxinxi, gaizhuangxinxi_tr, gaizhuangxinxi_id_td, gaizhuangxinxi_content_td, gaizhuangxinxi_price_td;var gaizhuangxinxislen =data.data.gaiZhuangXinXis.length;
$(
'#gaizhuangxinxi_list input')
$(
'#gaizhuangxinxi_list').empty();//for (var i = 0; i < gaizhuangxinxislen; i++) {//gaizhuangxinxi = data.data.gaiZhuangXinXis[i];//gaizhuangxinxi_tr = document.createElement("tr");//gaizhuangxinxi_id_td = document.createElement("td");//gaizhuangxinxi_content_td = document//.createElement("td");//gaizhuangxinxi_price_td = document//.createElement("td");//gaizhuangxinxi_tr.appendChild(gaizhuangxinxi_id_td);//gaizhuangxinxi_tr//.appendChild(gaizhuangxinxi_content_td);//gaizhuangxinxi_tr//.appendChild(gaizhuangxinxi_price_td);//gaizhuangxinxi_id_td.innerHTML = gaizhuangxinxi.id;//gaizhuangxinxi_content_td.innerHTML = gaizhuangxinxi.gaiZhuangLeiXing;//gaizhuangxinxi_price_td.innerHTML = gaizhuangxinxi.danJia;//$('#gaizhuangxinxi_list').append(gaizhuangxinxi_tr);//} for (var i = 0; i < gaizhuangxinxislen; i++) {
gaizhuangxinxi
=data.data.gaiZhuangXinXis[i];
gaizhuangxinxi_tr
=$('<tr> <td style="text-align: center">'+gaizhuangxinxi.id+'</td><td style="text-align: center">'+gaizhuangxinxi.gaiZhuangLeiXing+'</td><td style="text-align: center">' +gaizhuangxinxi.danJia+'</td></tr>');
$(
'#gaizhuangxinxi_list').append(gaizhuangxinxi_tr);
}

{{ message }} 小胡子语法   在 Vue 中被称之为双花括号插值表达式

---------------- http://todomvc.com/

TodoMVC是一款开源的JavaScript框架,它使用各种不同的MV*框架实现一个相同的Todo应用。TodoMVC最大的优点就是帮助开发者挑选出合适的MV*框架,从Backbone, Ember, AngularJS, Spine...一系列框架中决定使用哪个框架。

开发者现在有很多的MV*框架选择来组织开发web应用程序。Backbone、 Ember、AngularJS、Spine… 新的稳定解决方案列表持续增长,但你如何决定在海量的框架中选择哪个使用?为了帮助解决问题,于是诞生了TodoMVC项目,它使用不同的最流行的JavaScript MV*框架实现了一个相同的Todo应用。

# VueJS 入门实践

![vue-logo](img/logo.png)

## 课程介绍

VueJS是一个非常简单但十分强大的库,用于构建数据驱动的组件,为构建现代化的 Web 界面而生。
它具有简单易用、小巧灵活、性能高效等特性,可以更轻松的完成复杂应用页面需求,
但是不同于 AngularJS 和 React 等前端框架,通过 VueJS 构建的应用程序结构更为清晰更为简洁。

通过本次课程的学习,我们可以对 VueJS 有一个基本的认识,并可以通过完成一个番茄清单应用对 VueJS 快速入门。

![TodoMVC](img/todo.png)

## 课程知识点

- MVVM
- 模板语法
- 常用指令
- 番茄清单:TodoMVC
- 使用 Vue 获取网络资源
- 课后作业:豆瓣电影

## 简介

> 渐进式 JavaScript 框架

- [Vue - 中文官网](https://cn.vuejs.org/)
- [Vue - 官网](https://vuejs.org/)
- [Vue - Github](https://github.com/vuejs/vue)
- [Vue - Awesome](https://github.com/vuejs/awesome-vue)
- Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架
+ 只关注视图
+ 渐进式,可以很轻松的和其它已有库或已有项目整合到一起,增量式开发
- 简单易用
+ 只需要基本的 HTML、CSS、JavaScript 基础即可
- 轻量高效
+ 压缩后大小仅仅 17kb
- MVVM
- 组件化

## 起步

### 我该如何学习一个新技能

- what
+ 是什么
+ JavaScript 框架
+ 上官网 -> 起步(Getting Started)
+ Vue 作者:尤雨溪
+ 单页应用:SPA
* Angular
* ReactJS
* 。。。
* VueJS
- why
- how

### SPA(Single Page Application):单页应用

以前网站的交互模型都是通过服务器直出的形式直接渲染到客户端。

- 客户端发起一个请求
- 浏览器锁死:等待服务端的响应
- 渲染服务端响应的数据内容

### 安装

> 参考文档:https://cn.vuejs.org/v2/guide/installation.html

- 单文件
- CDN
- NPM
- Bower

### hello world

```html
<div id="app">
{{ message}}
</div>
```

```js
new Vue(
{el:'#app',
data: {
message: 'Hello Vue!'
}})
```

## Vue 基础

### 表达式

### 常用指令

- v-text
- v-html
- v-show
- v-if
- v-else
- v-else-if
- v-for
- v-on
+ https://cn.vuejs.org/v2/api/#v-on
+ 缩写:`@`
- v-bind
+ https://cn.vuejs.org/v2/api/#v-bind
+ 缩写:`:`
- v-model
+ https://cn.vuejs.org/v2/api/#v-model

==他的博客应该不错,没有细看

Spring Boot学习记录(二)--thymeleaf模板 - CSDN博客

http://blog.csdn.net/u012706811/article/details/52185345

--关于springboot的

springboot - 蜕变之路 - CSDN博客
http://blog.csdn.net/u012706811/article/category/6357760

自从来公司后都没用过jsp当界面渲染了,因为前后端分离不是很好,反而模板引擎用的比较多,thymeleaf最大的优势后缀为html,就是只需要浏览器就可以展现页面了,还有就是thymeleaf可以很好的和spring集成.下面开始学习.


1.引入依赖

maven中直接引入

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

可以查看依赖关系,发现spring-boot-starter-thymeleaf下面已经包括了spring-boot-starter-web,所以可以把spring-boot-starter-web的依赖去掉.


2.配置视图解析器

spring-boot很多配置都有默认配置,比如默认页面映射路径为
classpath:/templates/*.html
同样静态文件路径为
classpath:/static/

在application.properties中可以配置thymeleaf模板解析器属性.就像使用springMVC的JSP解析器配置一样

#thymeleaf start
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#开发时关闭缓存,不然没法看到实时页面
spring.thymeleaf.cache=false
#thymeleaf end

具体可以配置的参数可以查看
org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties
这个类,上面的配置实际上就是注入到该类中的属性值.

3.编写DEMO

1.控制器

    @Controller
public class HelloController {

private Logger logger = LoggerFactory.getLogger(HelloController.class);
/**
* 测试hello
*@return
*/
@RequestMapping(value = "/hello",method = RequestMethod.GET)
public String hello(Model model) {
model.addAttribute("name", "Dear");
return "hello";
}

}

2.view(注释为IDEA生成的索引,便于IDEA补全)

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!--/*@thymesVar id="name" type="java.lang.String"*/-->
<p th:text="'Hello!, ' + ${name} + '!'" >3333</p>
</body>
</html>

3.效果

这里写图片描述


4.基础语法

回味上面的DEMO,可以看出来首先要在改写html标签

<html xmlns:th="http://www.thymeleaf.org">

这样的话才可以在其他标签里面使用
th:*
这样的语法.这是下面语法的前提.


1.获取变量值

<p th:text="'Hello!, ' + ${name} + '!'" >3333</p>

可以看出获取变量值用
$
符号,对于javaBean的话使用
变量名.属性名
方式获取,这点和EL表达式一样.

另外
$
表达式只能写在th标签内部,不然不会生效,上面例子就是使用
th:text
标签的值替换
p
标签里面的值,至于p里面的原有的值只是为了给前端开发时做展示用的.这样的话很好的做到了前后端分离.


2.引入URL

Thymeleaf对于URL的处理是通过语法@{…}来处理的

<a th:href="@{http://blog.csdn.net/u012706811}">绝对路径</a>
<a th:href="@{/}">相对路径</a>
<a th:href="@{css/bootstrap.min.css}">Content路径,默认访问static下的css文件夹</a>

类似的标签有:
th:href

th:src


3.字符串替换

很多时候可能我们只需要对一大段文字中的某一处地方进行替换,可以通过字符串拼接操作完成:

<span th:text="'Welcome to our application, ' + ${user.name} + '!'">

一种更简洁的方式是:

<span th:text="|Welcome to our application, ${user.name}!|">

当然这种形式限制比较多,|…|中只能包含变量表达式${…},不能包含其他常量、条件表达式等。


4.运算符

在表达式中可以使用各类算术运算符,例如+, -, *, /, %

th:with="isEven=(${prodStat.count} % 2 == 0)"

逻辑运算符>, <, <=,>=,==,!=都可以使用,
唯一需要注意的是使用<,>时需要用它的HTML转义符

    th:if="${prodStat.count} &gt; 1"
th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"


5.条件

if/unless

Thymeleaf中使用th:if和th:unless属性进行条件判断,下面的例子中,
标签只有在th:if中条件成立时才显示:

<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

th:unless于th:if恰好相反,只有表达式中的条件不成立,才会显示其内容。

Switch

Thymeleaf同样支持多路选择Switch结构:

<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
</div>

默认属性default可以用*表示:

<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
<p th:case="*">User is some other thing</p>
</div>


6.循环

渲染列表数据是一种非常常见的场景,例如现在有n条记录需要渲染成一个表格

,该数据集合必须是可以遍历的,使用th:each标签:

<body>
<h1>Product list</h1>

<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
</tr>
<tr th:each="prod : ${prods}">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>
</table>

<p>
<a href="../home.html" th:href="@{/}">Return to home</a>
</p>
</body>

可以看到,需要在被循环渲染的元素(这里是)中加入th:each标签,其中th:each=”prod : ${prods}”意味着对集合变量prods进行遍历,循环变量是prod在循环体中可以通过表达式访问。


7.Utilities

为了模板更加易用,Thymeleaf还提供了一系列Utility对象(内置于Context中),可以通过#直接访问:

  • #dates
  • #calendars
  • #numbers
  • #strings
  • arrays
  • lists
  • sets
  • maps

  • 下面用一段代码来举例一些常用的方法:

date

/*
 * Format date with the specified pattern
* Also works with arrays, lists or sets
*/
${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}
${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}
${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}

/*
* Create a date (java.util.Date) object for the current date and time
*/
${#dates.createNow()}

/*
* Create a date (java.util.Date) object for the current date (time set to 00:00)
*/
${#dates.createToday()}

string

/*
 * Check whether a String is empty (or null). Performs a trim() operation before check
* Also works with arrays, lists or sets
*/
${#strings.isEmpty(name)}
${#strings.arrayIsEmpty(nameArr)}
${#strings.listIsEmpty(nameList)}
${#strings.setIsEmpty(nameSet)}

/*
* Check whether a String starts or ends with a fragment
* Also works with arrays, lists or sets
*/
${#strings.startsWith(name,'Don')} // also array*, list* and set*
${#strings.endsWith(name,endingFragment)} // also array*, list* and set*

/*
* Compute length
* Also works with arrays, lists or sets
*/
${#strings.length(str)}

/*
* Null-safe comparison and concatenation
*/
${#strings.equals(str)}
${#strings.equalsIgnoreCase(str)}
${#strings.concat(str)}
${#strings.concatReplaceNulls(str)}

/*
* Random
*/
${#strings.randomAlphanumeric(count)}

快速的学习还是直接写例子最快,后期写Demo遇到问题再加上去


参考链接:
http://www.tianmaying.com/tutorial/using-thymeleaf


整合项目地址:

https://github.com/nl101531/JavaWEB


补充

在spring-boot1.4之后,支持thymeleaf3,可以更改版本号来进行修改支持.
3相比2极大的提高了效率,并且不需要标签闭合,类似的link,img等都有了很好的支持,按照如下配置即可

  <properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<!-- set thymeleaf version -->
<thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
<!--set java version-->
<java.version>1.8</java.version>
</properties>