HTML & CSS
-
HTML文档实例
1 2 3 4 5 6 7 8 9 10
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> 文档内容...... </body> </html>
-
HTML头部
-
<link>
定义资源引用地址
<link>
标签通常用于链接到样式表:1 2 3
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
-
<style>
定义HTML文档的样式文件
1 2 3 4 5 6
<head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>
-
<meta>
定义HTML文档中的元数据
-
<script>
用于加载脚本文件,如JavaScript
-
-
HTML元素
-
标题
1
<h1> - <h6>
-
段落
1
<p>
-
链接
1
<a href="url地址">描述</a>
-
图片
1
<img loading="lazy" src="/images/logo.png" width="258" height="39" />
-
换行
1
<br>
-
块
<div>
定义文档中的分区或节(division/section)。<span>
定义 span,用来组合文档中的行内元素。
-
-
HTML属性
- class: 类名从样式文件引入
- id: 元素的唯一id
- style:元素的行内样式
- title: 元素的额外信息
-
CSS Id和Class选择器
样式规则应用于元素属性 id=”para1”.
1 2 3 4 5
#para1 { text-align:center; color:red; }
所有拥有 center 类的 HTML 元素均为居中。
1
.center {text-align:center;}
所有的 p 元素使用 class=”center” 让该元素的文本居中。
1
p.center {text-align:center;}
Vue
教程笔记
-
介绍
- 指令
- v-bind: 将数据绑定到attribute
- v-if: 条件,将数据绑定到 DOM 结构
- v-for: 循环
- v-on: 添加一个事件监听器
- v-model: 表单输入和应用状态之间的双向绑定
- 组件化
- 组件接受一个prop,类似于一个自定义 attribute
- 利用v-bind指令,将数据绑定到组件的attribute,也需要为每个组件提供一个key
- 指令
-
第2节 创建第一个vue应用
1 2 3
<div id="app"> </div>
1 2 3 4 5 6
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
Vue是一个全局的变量,new Vue()返回一个Vue实例。
el表示element,是一个id选择器。
data是数据属性,包含message。
-
第3节 数据与方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
// 我们的数据对象 var data = { a: 1 } // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ data: data }) // 获得这个实例上的 property // 返回源数据中对应的字段 vm.a == data.a // => true // 设置 property 也会影响到原始数据 vm.a = 2 data.a // => 2 // ……反之亦然 data.a = 3 vm.a // => 3
只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。
除了数据 property,Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $,以便与用户定义的 property 区分开来。
1 2 3 4 5 6 7 8 9 10 11 12 13
var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // => true vm.$el === document.getElementById('example') // => true // $watch 是一个实例方法 vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用 })
-
第4节 生命周期
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
var vm = new Vue({ el : "#app", data : { msg : "hi vue", }, //在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 beforeCreate:function(){ console.log('beforeCreate'); }, /* 在实例创建完成后被立即调用。 在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。 然而,挂载阶段还没开始,$el 属性目前不可见。 */ created :function(){ console.log('created'); }, //在挂载开始之前被调用:相关的渲染函数首次被调用 beforeMount : function(){ console.log('beforeMount'); }, //el 被新创建的 vm.$el 替换, 挂在成功 mounted : function(){ console.log('mounted'); }, //数据更新时调用 beforeUpdate : function(){ console.log('beforeUpdate'); }, //组件 DOM 已经更新, 组件更新完毕 updated : function(){ console.log('updated'); } });
-
第5节 模板语法-插值
数据绑定
1
<span>Message: </span>
1
<span v-once>这个将不会改变: </span>
双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,需要使用 v-html 指令。
对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。
1 2 3 4 5 6 7 8 9 10 11 12 13
<div id="app"> <p>Using mustaches: </p> <p v-html="rawHtml"></p> <div v-bind:class="color">test...</div> <p></p> <p>1</p> <p></p> </div> <style type="text/css"> .red{color:red;} .blue{color:blue; font-size:100px;} </style>
1 2 3 4 5 6 7 8 9 10 11
var vm = new Vue({ el : "#app", data : { msg : "hi vue", rawHtml : '<span style="color:red">this is should be red</span>', color:'blue', number : 10, ok : 1, message : "vue" } });
-
第6节 模板语法-指令
1 2 3 4 5 6 7 8 9
<div id="app"> <p v-if="seen">现在你看到我了</p> <a v-bind:href="url">...</a> <div @click="click1"> <div @click.stop="click2"> click me </div> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
var vm = new Vue({ el : "#app", data : { seen : false, url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4" }, methods:{ click1 : function () { console.log('click1......'); }, click2 : function () { console.log('click2......'); } } });
点击click me,只触发click2函数,之后会停下来不去触发click1.
-
第7节 class与style绑定
-
绑定HTML class
对象语法
1
<div v-bind:class="{ active: isActive }"></div>
静态的class和动态的class共存
1 2 3 4
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div>
数组语法
1
<div v-bind:class="[activeClass, errorClass]"></div>
三元运算符
1
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
-
绑定style
1 2 3 4
<div :style="{color:color, fontSize:size, background: isRed ? '#FF0000' : ''}"> hi vue </div>
-
-
第8节 条件渲染
1 2 3 4 5 6 7 8 9 10 11 12
<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div>
带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
1
<h1 v-show="ok">Hello!</h1>
v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
-
第9节 列表渲染
用 v-for 指令基于一个数组来渲染一个列表。
1 2 3 4 5
<ul id="example-1"> <li v-for="item in items" :key="item.message"> </li> </ul>
1 2 3 4 5 6 7 8 9
var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
在 v-for 块中,可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数,即当前项的索引。
1 2 3 4 5
<ul id="example-2"> <li v-for="(item, index) in items"> - - </li> </ul>
1 2 3 4 5 6 7 8 9 10
new Vue({ el: '#v-for-object', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } })
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key attribute:
1 2 3
<div v-for="item in items" v-bind:key="item.id"> <!-- 内容 --> </div>
-
第10节 事件绑定
1 2 3 4 5 6
<div id="app"> <div id="example-1"> <button v-on:click="counter += 1"> 数值 : </button><br /> <button v-on:dblclick="greet('abc', $event)">Greet</button> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13
var vm = new Vue({ el : "#app", data : { counter: 0, name : "vue" }, methods:{ greet : function (str, e) { alert(str); console.log(e); } } });
@click 和 v-on:click 有什么区别?没有区别。
-
第11节 表单输入绑定
v-model双向绑定
文本
1 2
<input v-model="message" placeholder="edit me"> <p>Message is: </p>
单个复选框
1 2
<input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox"></label>
多个复选框
1 2 3 4 5 6 7 8
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: </span>
单选按钮
1 2 3 4 5 6 7 8 9
<div id="example-4"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: </span> </div>
通过改变data对象的属性,来设置表单元素默认值。
-
第12节 组件基础
1 2 3 4 5 6
<div id="app"> <button-counter title="title1 : " @clicknow="clicknow"> <h2>hi...h2</h2> </button-counter> <button-counter title="title2 : "></button-counter> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
Vue.component('button-counter', { props: ['title'], data: function () { return { count: 0 } }, template: '<div><h1>hi...</h1><button v-on:click="clickfun"> You clicked me 8 times.</button><slot></slot></div>', methods:{ clickfun : function () { this.count ++; this.$emit('clicknow', this.count); } } }) var vm = new Vue({ el : "#app", data : { }, methods:{ clicknow : function (e) { console.log(e); } } });
一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。如果 Vue 没有这条规则,点击一个按钮就可能会像如下代码一样影响到其它所有实例。
props是组件的参数,通过父组件传入。
template只能有一个根节点,可以用
<div>
作为根节点。点击后,组件的$emit方法触发clicknow事件,从而调用clicknow函数。
-
第13节 组件注册
组件命名:kebab-case (短横线分隔命名)、PascalCase (首字母大写命名)
1 2 3 4
<div id="app"> <button-counter></button-counter> <test></test> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
Vue.component('button-counter', { props: ['title'], data: function () { return {} }, template: '<div><h1>hi...</h1></div>', methods:{ } }) var vm = new Vue({ el : "#app", data : { }, methods:{ clicknow : function (e) { console.log(e); } }, components:{ test : { template:"<h2>h2...</h2>" } } });
button-counter是全局注册,test是局部注册。
-
第14节 单文件组件
组件test.vue:包括template, script, style三部分。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
<template> <div class="hello"> <h1 class="red"></h1> </div> </template> <script> export default { name: 'HelloWorld', props: { //msg: String msg: { type: String, default: "test msg" } }, methods: { }, data () { return { } } } </script> <style> .red{color:red} </style>
App.vue中引入组件,利用components来局部注册。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<template> <div id="app"> <test></test> </div> </template> <script> import test from '@/components/test.vue' export default { name: 'App', components: {test} } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; /*margin-top: 10px;*/ } </style>
项目初始化
-
安装脚手架工具
npm install -g @vue/cli
-
构建项目
vue init webpack projectname
-
项目结构
- config
- index.js: 项目配置
- src
- components: 组件
- router
- index.js: 路由配置
- App.vue: 根组件
- main.js: 入口
- index.html: 首页入口
在main.js中引入路由配置router和根组件App.vue并定义app,在首页入口index.html中使用app。
在main.js中设置反向代理地址,在config/index.js中配置跨域请求。
- config
-
代码分析
index.html
1 2 3 4 5 6 7 8 9 10 11 12
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>recommender-vue</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
<div id="app"></div>
在构建的文件会自动注入App.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
<template> <div id="app"> <img src="./assets/logo.png"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
export default
: 将这个组件整体导出,之后就可以使用 import 导入组件了。<router-view/>
是一个容器,名字叫“路由视图”,意思是当前路由(URL)指向的内容将显示在这个容器中。main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
最上面 import 了几个模块,其中 vue 模块在 node_modules 中,App 即 App.vue 里定义的组件,router 即 router 文件夹里定义的路由。
Vue.config.productionTip = false, 作用是阻止vue 在启动时生成生产提示。
在这个 js 文件中,我们创建了一个 Vue 对象(实例),el 属性提供一个在页面上已存在的 DOM 元素作为 Vue 对象的挂载目标,router 代表该对象包含 Vue Router,并使用项目中定义的路由。components 表示该对象包含的 Vue 组件,template 是用一个字符串模板作为 Vue 实例的标识使用,类似于定义一个 html 标签。
eslint-disable 的意思是完全禁用ESLint进行检测。
项目
其他问题
无法修改favicon
How to set favicon.ico properly on vue.js webpack project?
1
<link rel="shortcut icon" type="image/png" href="/src/assets/img/logo.png"/>`
For your favicon issue, you can put a favicon.ico or favicon.png into the static folder and refer in the <head> of your index.html as follows:
1
<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
AntDesign
column中dataIndex, key表示数据的字段,scopedSlots: { customRender: ‘action’ }表示customRender 对应table中的插槽名。
中,slot=”action” 表示插槽名,slot-scope=”record”表示该插槽内部利用record能获取到的该行的数据,例如。
Spring MVC
IDEA新建工程
安装 IDEA 成功后,选择 File -> New -> Project,左边栏中选择 Maven,选择 Create From archetype,然后选中 org.apache.maven.archetypes:maven-archetype-webapp
GroupId为域+公司名,ArtifactId为项目名。
初始代码
pom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.bupt</groupId>
<artifactId>recommender</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>recommender Maven Webapp</name>
<!-- FIXME change it to the project's website -->
<url>http://www.example.com</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
<spring.version>5.0.2.RELEASE</spring.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.0</version>
<scope>provided</scope>
</dependency>
</dependencies>
<build>
<finalName>recommender</finalName>
<pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
<plugins>
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<version>3.1.0</version>
</plugin>
<!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.2</version>
</plugin>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.0</version>
</plugin>
<plugin>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.22.1</version>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.2</version>
</plugin>
<plugin>
<artifactId>maven-install-plugin</artifactId>
<version>2.5.2</version>
</plugin>
<plugin>
<artifactId>maven-deploy-plugin</artifactId>
<version>2.8.2</version>
</plugin>
</plugins>
</pluginManagement>
</build>
</project>
webapp/WEB-INF/web.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<display-name>Archetype Created Web Application</display-name>
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
src/resources/springmvc.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
<!-- 开启注解扫描 -->
<context:component-scan base-package="com.bupt"/>
<!-- 视图解析器对象 -->
<bean id="internalResourceViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/pages/"/>
<property name="suffix" value=".html"/>
</bean>
<mvc:default-servlet-handler/>
<!-- 开启SpringMVC框架注解的支持 -->
<mvc:annotation-driven/>
</beans>
-
<mvc:annotation-driven>
<mvc:annotation-driven>
会自动注册 RequestMappingHandlerMapping 与 RequestMappingHandlerAdapter 两个 Bean,这两个是 Spring MVC 为 @Controller 分发请求所必需的,并且提供了数据绑定支持。 -
<mvc:default-servlet-handler/>
如果没有
<mvc:default-servlet-handler/>
,对于静态资源的请求都会被看作是一个普通的后台控制器请求,导致请求找不到而报 404 异常错误,tomcat日志会报No mapping found for HTML request with URI […] in DispacherServlet.在 application-context-mvc.xml 中配置 < mvc:default-servlet-handler />后,会在Spring MVC上下文中定义一个 org.springframework.web.servlet.resource 包下的 DefaultServletHttpRequestHandler,它的作用类似于一个检查员,对进入 DispatcherServlet 的 URL 进行筛查。如果发现是静态资源的请求,就将该请求转由 Web 应用服务器默认的 Servlet 处理;如果不是静态资源的请求,才由 DispatcherServlet 继续处理。
src/java/com/bupt/recomender/controller/HelloController.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
package com.bupt.recommender.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class HelloController {
@RequestMapping(path="/hello")
public String sayHello() {
System.out.println("Hello SpringMVC");
return "success";
}
}
Tomcat
Run/Debug Configuration里添加Tomcat.
Server选项卡,On ‘Update’ action选Redeploy.
Deployment选项卡,点+和artifact,选recommender:war exploded,Application context填空。
MyBatis
日志
Shiro
JUnit
MyBatis generator
使用MyBatisGenerator生成代码报错The specified target project directory …..does not exist
其他问题
数据库
MySQL
for i in “event” “eventuser” “relation” “user” “web_event”; do for j in “shanghai_2018” “shanghai_2017” “shanghai”; do echo “sudo mysql douban_$j < douban_“$j”_“$i”.sql”; done; done
for i in “event” “eventuser” “relation” “user” “web_event”; do for j in “shanghai_2018” “shanghai_2017” “shanghai”; do sudo mysql douban_$j < douban_“$j”_“$i”.sql; done; done
CREATE USER ‘douban_readonly’@’%’ IDENTIFIED BY ‘douban_readonly’; GRANT SELECT ON . TO ‘douban_readonly’@’%’ CREATE USER ‘douban’@’%’ IDENTIFIED BY ‘douban_mysql_817’; GRANT ALL PRIVILEGES ON. TO ‘douban’@’%’
/etc/mysql/mysql.conf.d/mysqld.cnf bind-address = 0.0.0.0
/etc/init.d/mysql restart (sudo service mysql restart)
PostgreSQL
Linux
端口映射
ssh -NvL 8889:127.0.0.1:8888 sjy2018@10.105.240.25
杀死进程
ps aux | grep cockroach | awk ‘{print $2}’ | xargs kill -9 |