当前标签 / Web / 总共9篇

Kotlin语言和Gradle构建搭建SpringBoot工程

2019-05-03 · 大约 700 个字 · 预计 3 分钟读完

Java · Web · SpringBoot · Intellij · Kotlin · Gradle

前言

最近想做一个小项目，遇到了后台开发问题，从Python、Go、Nodejs、Java、Kotlin中我对比选择了一下，最后还是决定使用自己最熟悉的Java开发，后来又想了一下，既然现在Android开发都是用Kotlin了，而且Kotlin语法这么灵活简介，为何不用Kotlin结合Gradle构建来搭建一个SpringBoot工程呢，整个过程也是本人在逐渐摸索，中间可能会遇到很多障碍和问题，但是没关系，俗话说开弓没有回头箭，因为我已经决定开始了。

Spring MVC概念和使用

2019-03-15 · 大约 900 个字 · 预计 4 分钟读完

Java · Web

Java · Web · Spring · MVC

参考链接：

《Spring MVC 学习指南（第二版）》

Spring MVC 是 Spring 框架中用于Web应用快速开发的一个模块。Spring框架是一个开源框架，源码下载地址:

1
git clone git@github.com:spring-projects/spring-framework.git

控制反转（IOC）

DI和IOC是差不多的概念，一个重要特征是接口依赖，是把对象关系推迟到运行时去确定。Ioc意味着将你设计好的对象交给容器控制，而不是传统的在你的对象内部直接控制。

IoC 不是一种技术，只是一种思想，一个重要的面向对象编程的法则，它能指导我们如何设计出松耦合、更优良的程序。传统应用程序都是由我们在类内部主动创建依赖对象，从而导致类与类之间高耦合，难于测试；有了IoC容器后，把创建和查找依赖对象的控制权交给了容器，由容器进行注入组合对象，所以对象与对象之间是松散耦合，这样也方便测试，利于功能复用，更重要的是使得程序的整个体系结构变得非常灵活。

JavaWeb开发快速上手篇

2019-03-14 · 大约 800 个字 · 预计 4 分钟读完

Java · Web

Java · Web · Intellij · IDEA · tomcat · servlet

参考链接：

距上一次接触JavaWeb已经快6年时间了，最近因工作原因需要学习Web开发知识，这里做一个简单的记录。所以本文适合对JavaWeb开发有一定了解和基础的人群，达到快速拾起并上手的目的。

开发工具：IntelliJ IDEA 构建工具：Maven

创建工程

File -> New -> Project -> Java -> Java Web

创建JavaWeb工程

工程目录结构：

 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
TestWeb
│  TestWeb.iml
│
├─.idea
│  │  encodings.xml
│  │  misc.xml
│  │  modules.xml
│  │  workspace.xml
│  │
│  └─artifacts
│          TestWeb_war_exploded.xml
│
├─out
│  └─artifacts
│      └─TestWeb_war_exploded
│          │  index.jsp
│          │
│          └─WEB-INF
│                  web.xml
│
├─src
└─web
    │  index.jsp
    │
    └─WEB-INF
        │  web.xml
        │
        ├─classes
        └─lib

使用VS Code做Web开发

2018-10-13 · 大约 200 个字 · 预计 1 分钟读完

工具

Web · VS Code · 插件

前段时间尝试了deepin系统，所以目前很多东西都是用VS Code开发，今天尝试用VS Code来做web开发，用到了很多插件，这里分享一下。

HTML Boilerplate插件

通过使用 HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。

安装方法

打开VS Code，使用快捷键Ctrl + P输入下面文字回车

ext install sidthesloth.html5-boilerplate

常用快捷插入示例

快捷键	作用
html + Tab	生成html标准头
div + Tab	生成div标签
div*10 + Tab	生成10个div标签
link + Tab	生成link标签

Web前端基础（5）JavaScript基础

2018-10-01 · 大约 300 个字 · 预计 2 分钟读完

Web前端 · 基础

Web · HTML · CSS · JavaScript

字符串

字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号

1
2
var text1 = "www.dp2px.com";
var text2 = 'www.dp2px.com';

字符串长度

可以使用内置属性 length 来计算字符串的长度

1
2
var text1 = "www.dp2px.com";
var sln = text1.length;

转义字符

代码	输出
\'	单引号
\"	双引号
\\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

在 JavaScript 中，字符串写在单引号或双引号中,如果要在字符串中表示双引号和单引号就需要用到上面的转义字符。

1
var text = "my website is \"www.dp2px.com\""

Web前端基础（4）JavaScript基础

2018-10-01 · 大约 500 个字 · 预计 2 分钟读完

Web前端 · 基础

Web · HTML · CSS · JavaScript · 函数

JavaScript基础

JavaScrip对于网页的作用有提供网页特效、用户交互、表单验证、控制结构和样式。

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript是一种脚本语言, 主要目的是动态的控制web标准中的结构和样式（结构、样式、行为）

1
document.getElementById("demo").style.width = "200px";

JavaScript用法

HTML 中的脚本必须位于 <scrip>与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。通常的做法是把函数放入部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

<head> 中的 JavaScript 函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html>
    <head>
        <script>
            alert("我的第一个 JavaScript");
        </script>
    </head>
    <body>
        <h1>我的 Web 页面</h1>
    </body>
</html>

<body> 中的 JavaScript

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <body>
        <h1>我的 Web 页面</h1>
        <script>
            alert("我的第一个 JavaScript");
        </script>
    </body>
</html>

外部的 JavaScript

1
2
3
4
5
6
<!DOCTYPE html>
<html>
    <body>
        <script src="myScript.js"></script>
    </body>
</html>

Web前端基础（3）CSS基础知识

2018-09-30 · 大约 700 个字 · 预计 4 分钟读完

Web前端 · 基础

Web · HTML · CSS · JavaScript

浏览器兼容问题

第一，IE6，不支持小于 12px 的盒子，任何小于 12px 的盒子，在 IE6 中看都大

解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如 0px。

1
2
 _height: 4px;
 _font-size: 0px

IE6 留了一个后门，就是只要给 css 属性之前，加上下划线，这个属性就是 IE6 认识的专有属性。

第二，IE6 不支持用 overflow : hidden; 来清除浮动的

解决办法，以毒攻毒。追加一条 zoom : 1;

1
2
overflow: hidden;
_zoom:1;

Web前端基础（2）CSS 基础知识

2018-09-29 · 大约 900 个字 · 预计 4 分钟读完

Web前端 · 基础

Web · HTML · CSS · JavaScript

CSS 基础知识

一个 HTML 文档可以显示不同的样式, CSS 指层叠样式表 (Cascading Style Sheets)

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

css样式语法结构

CSS声明总是以分号 ; 结束，声明组以大括号 {} 括起来。

样式分类

插入样式表的方法有三种:

外部样式表 (External style sheet)

1
2
3
<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明

内部样式表 (Internal style sheet)

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表

1
2
3
4
5
6
7
<head>
    <style>
        hr { color : sienna; }
        p { margin-left : 20px; }
        body { background-image : url("images/back40.gif"); }
    </style>
</head>

内联样式 (Inline style)

内联样式不建议使用

1
<p style="color:sienna;margin-left:20px">这是一个段落。</p>

Web前端基础（1）HTML基础知识

2018-09-28 · 大约 400 个字 · 预计 2 分钟读完

Web前端 · 基础

Web · HTML · CSS · JavaScript

HTML开发基础知识

HTML 是 HyperTextMarkupLanguage, 超文本标记语言 的缩写。是一种标记语意的文档格式。

任何纯文本编辑器都能够编辑 html，比如记事本，editplus, notepad++, vscode等。

比较有名的专门制作网页工具

DreamWeaver (Adobe公司的产品，过时了，不是一个好的代码编辑器）
Sublime （高效率的程序书写工具）
WebStorm （更高级的项目级别编程工具）
VsCode （一个强大并拥有很多插件的编辑器）

Sublime

Sublime 的中文意思是 华丽的，是 2011 年开始流行的代码编辑器，可以编辑 java, c, php 等很多语言， html, css, js 在 sublime 中支持非常好。

sublime中的常用快捷键

快捷键	作用
ctrl + shift + d	复制当前行
ctrl + 滚轮	放大缩小文字
ctrl + shift + k	删除当前行
ctrl + shift + 上箭头	上移当前行
ctrl + shift + 下箭头	下移当前行
ctrl + n	新建文件