3.1.JavaWeb开发环境配置

从开机到完成第一个javaweb项目（1）

1.配置环境

目标：从一台仅装好windows操作系统的电脑到完成一个javaweb项目；

分析：从仅有操作系统到完成在此平台上搭建完成项目的流程

1.0 简要分析

1.要写java程序 必须有java开发环境
2.要写java程序 一般人需要开发工具（编辑器：主要借用里边的一些提示和可视化的配置，其实你要是大神的话也可以考虑用windows的记事本）
3.程序在执行过程中需要持久化数据这时候需要数据库软件和相关的操作工具
4.要搭建javaweb项目 需要服务器软件
5.一个完整的项目除了后端java服务 还需要有客户端 前台服务端代码编写需要编辑器
6.编写好的后台代码需要测试检验（直接用页面的话前后台bug同时出现很难定位）
7.多人开发时代码的版本控制工具

1.1 java开发环境

java简介：

​ java语言的3个版本:

​ javaSE: java 标准版 第一阶段的内容: javaFX+swing PC桌面应用程序(过时)

​ javaEE：java企业版 2+3阶段技术: web端开发(前端html js +css +后端(tomcat +jsp+servlet))

​ javaME：java微型版 安卓+嵌入式

​ javaCard：java卡片 sim卡

版本选择：

​ sun公司研发的。 C+±- Oracle

时间	版本号	使用情况	使用率	备注
1995	jdk1.0
	jdk1.6	老项目	6-7%
	jdk1.7	老项目	6-7%
	jdk1.8	常用	35+%	(本文档配置)
	jdk1.11	常用	20_%	LTS long time server 一直在维护
2020	jdk15			过渡版本。

结合java语言开发程序: jdk java development kit java开发工具包(编写程序)

语言优势：

相对于其它编程语言而言:(c++)：

1. 简洁 简单 易上手

2. 面向对象: 封装 继承 多态

3. 健壮性 : 异常机制 + GC : 垃圾回收的守护线程 (内存溢出)

4. 分布式: 利用jdk提供的api(应用程序接口)调用其它应用的接口。 URL URLConnection Socket

5. 多线程: Thread jvm支持多线程

6. 跨平台: java语言跨平台 (系统)

7. 动态性: 反射

8. java语言既不属于编译型 又不属于解释型。 利用编程语言编写程序: 运行特征

   C C++ 编译型语言。 自动编译 直接执行 (二进制的文件的)

   ​ html 解释型语言 需要浏览器解释运行

术语解释：

jdk: 编写代码(java程序  java)
jre: 程序的运行在虚拟计算机里面执行的，虚拟计算机里面所有的文件属于二进制的。手动编译java文件(程序)
     运行编译之后的文件(字节码文件  class)
      java runtime environment  java运行环境  (程序运行)
jvm: java  virtual machine  java虚拟机(加载二进制的文件，肯定编译之后的文件)
     java程序的真正的运行时在jvm (jvm只加载class文件)

编码问题：

程序的运行在计算机里面执行的，计算机里面所有的文件属于二进制的。
文本文件:(乱码)
    字符编码格式。  字符集  UFT-8  gbk  latin  unicode

安装jdk环境：

检测本机是否提供jdk环境: dos命令检测。win+r cmd —> java

1. 安装开发环境  jdk 
    下载地址：https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html
    本次下载：Windows x64 166.97 MB jdk-8u281-windows-x64.exe
2. 配置运行环境（我的电脑属性>高级>环境变量）
   1. 直接在path中配置:	   jdk的bin目录  C:\Program Files\Java\jdk1.8.0_261\bin
   2. 本次选用配置方式（手动开启服务器tomcat 必须依赖JAVA_HOM）: 
      在JAVA_HOME中配置: 	jdk的根目录 C:\Program Files\Java\jdk1.8.0_261
      在path中配置: 		jdk的bin目录 %JAVA_HOME%\bin
3. 编写代码(windows记事本编写)
      ***.java (文件名: 大写驼峰 HelloWorld.java)
4. 运行程序（测试java文件正常编译运行）
   1. 找到java文件的所在文件
   2. 手动编译源文件 把java文件编译出来class文件  javac java文件  javac  HelloWorld.java
   3. jvm加载class文件   java class文件名称  java HelloWorld

jdk安装后文件目录简介

名称	类型	内容
bin	文件夹	可执行的.exe工具，可以使用命令调用
jre	文件夹	运行环境
lib	文件夹	类库文件 jar文件：一般都是.class文件
src.zip	压缩文件	源码文件 . java文件

HelloWorld.java文件内容

public class HelloWorld{
	//单行注释: 解释说明 
	//类名: 规范: 类名必须与文件名一致 类名:大写驼峰
	//任何注释都是不参与编译的。
	//程序执行入口: 程序运行在jvm里面(只认识main)
	public static void main(String[] str){
		//程序运行的逻辑
		//简单打印(jdk提供的api)
		System.out.println("第一天学习java");//结束
	}
}

1.2 java常用开发工具

工具选择：

工具名称	使用率	介绍
IDEA	70+%	(社区版 最终版(收费))
Eclipse	20+%	(开源 免费的)
MyEclipse

IDEA下载地址：

官方下载地址：https://www.jetbrains.com/idea/download/other.html

2018.3.1可能因为有被破解的风险被官网下架

附上下载地址：https://download.jetbrains.8686c.com/idea/ideaIU-2018.3.1.exe

IDEA基本设置：

各个版本设置不尽相同本配置为2018版本设置方式
settings与otherSettings
	改theme
	改font，字号改大
	代码提示：改keymap,搜索basic，改为alt+/
	代码补全：改code completion，把大写提示去掉。改None
	关键svn：改version Control，先去svn安装目录下查找有没有svn.exe程序，是svn的命令行工具,如果没有去控制面板下找到svn程序，更改，添加command line client tools。
	回到idea，设置subversion插件关联svn.exe程序。
	改file encoding为UTF-8 
配置jdk：
	在create new project下设置jdk目录。
	先创建empty Project,类似于eclipse下的workspace
	进入主页面，创建module
配置项目：
	idea下对目录分为四类：sources源码目录，tests：测试类目录，resources：配置文件目录；testResources测试类依赖的配置文件目录
	修改编译输出位置，为 use module compile output path.
	进入edit configuration，配置tomcat，先配置defaults，找到tomcat-->local,关联本机tomcat;然后点击+号。部署项目
	
一些快捷键：
	alt+/: 提示键
	alt+insert: 生成set、get、构造器，toString
	ctrl+p:形参提示
	补全方法返回值：调用完方法后.var或者alt+回车
	ctrl+n：全局搜索
	ctrl+h:查看类的继承关系
	ctrl+alt+l:排版
	ctrl+alt+o:清理无用的导入包。
	alt+回车：导包。

给项目加jar包依赖：
	直接复制jar包到项目下，右键 add as  library

问题：
	如果main方法不能运行，在右上角 edit configuration 下修改主类。
	隐藏iml文件：在editor-->File Types下添加需要隐藏的文件

1.3 数据库与相关工具

数据库分类：

1.从存储位置上
  1.1 基于磁盘(文件)
     Mysql(选用)  sqlserver  oracle  IO读写数据  效率偏低  持久化保存数据 
  
  1.2 基于内存(缓存)
      Redis(选用) Mogodb hbase  效率很高(多读少写) 
  
2. 从关系上划分
   2.1 关系型数据库   RDBMS
       Mysql  sqlserver  oracle  SQLLITE (库与库  表与表  字段与字段 有关系的)
   2.2 非关系型数据库
       Redis  key--value

数据库管理系统：

关系数据库管理系统 RDBMS: 指包括相互联系的逻辑组织和存取这些数据的一套程序 (数据库管理系统软件)。关系数据库管理系统就是管理关系数据库，并将数据逻辑组织的系统。

Mysql下载安装：

官网下载地址：https://www.mysql.com/downloads/

下载社区版的server （msi格式的 安装简单）

安装时只需要选择server only安装，不用安装其他部分

数据库管理系统软件===> 服务端应用程序。 在系统里面自动安装服务，一直处于启动状态。
mysql: 用户名都是root
C:\Program Files\MySQL\MySQL Server 5.7  安装目录
C:\ProgramData\MySQL\MySQL Server 5.7 配置目录(这是个隐藏目录)

Mysql连接：

客户端链接服务端程序。

ip 端口 用户名 密码

mysql -hip -u root -p
如果连接的是本机服务程序: mysql -uroot -p
C:\Users\JAVASM>mysql -h 127.0.0.1 -uroot -p
Enter password: ****
占用了mysql的一个链接。 max-connection = 151

navicat工具：

官网下载地址：https://navicat.com/en/products

下载后无脑下一步进行安装>>关掉网>>打开破解机>>点击Patch选择navicat.exe>>点击Generate
>>打开navicat选择注册粘贴秘钥>>激活>>手动激活（如果没有就重装吧）
>>复制请求码到破解机>>粘贴响应码到navicat

1.4 服务器安装配置

Web应用、HTTP服务器、Web应用服务器
	Web应用被称为Web Application，通过浏览器访问的应用程序，从而为用户提供相关的服务，例如查询、购物等；淘宝，途牛旅游等提供服务的网站；也包含很多公司内部使用的软件，如oa系统，医院内使用的系统，企业内部业务管理系统等；
	HTTP服务器：也称为Web服务器，主要功能是提供网上信息浏览服务，例如Apache、Nginx、IIS是比较常用的HTTP服务器；使用浏览器访问Web站点或者Web应用，则必须通过HTTP服务器；
	Web应用服务器：Web应用服务器能够运行服务器上的应用程序，并将结果返回给客户端浏览器；例如，Tomcat就是一种Web应用服务器；通常情况下，Web应用服务器兼具HTTP服务器的部分功能；

注意：Web应用需要HTTP服务器及Web应用服务器，因为不仅需要浏览信息，还需要运行应用程序；但是tomcat已兼具了http服务器的部分功能，所以运行web应用可以直接使用tomcat。


开发web应用的语言：
Java 、.net、php等语言均可开发web应用；
java开发web应用最广泛；
官方在JavaEE中提供了Servlet、JSP组件来开发Web应用；

Tomcat下载使用：

Tomcat开源、免费，在中小型系统和并发访问用户不是很多的场合下被普遍使用，是开发和调试Servlet/JSP程序的首选；

下载地址：http://tomcat.apache.org/；（下载的tomcat应该与java版本对应，如jdk1.8对应tomcat8）

安装：下载到的是一个压缩包，解压缩即可（路径中不要有中文）；

文件夹	内容
/bin	存放Windows或Linux平台上用于启动和停止Tomcat的脚本文件
/conf	存放Tomcat服务器的各种配置文件，其中最重要的是server.xml
/lib	存放Tomcat服务器所需的各种JAR文件
/logs	存放Tomcat运行中产生的日志文件
/temp	存放Tomcat服务器在运行中产生的临时缓存
/webapps	存放Tomcat发布的Web应用
/work	Tomcat把由JSP生成的Servlet放于此目录下

点击bin下的startup.bat启动服务器测试是否正常（如果一闪而过在此文件第58行：end之后的一行添加pause起到暂停效果查看出错问题，修复问题后再删除pause。此处需要用到安装jdk时候配置的环境变量JAVA_HOME）

IDEA配置Tomcat：

创建空project>>添加modules选择javaee>>选中WebApplication>>创建模块完成
>>设置tomcat>>检查Facets和Artifacts（没有的话需要手动配置）
>>在web下放入html或者jsp文件
(WEB-INF是一个隐藏目录，里边的页面无法被访问到，在此创建lib文件夹存jar文件)
>>在idea中 选择对应的模块 设置路径>>启动服务器在浏览器地址栏敲入设置的路径

1.5 前端框架

主流框架：

框架名	介绍
Angular
React
Vue	写单页面应用（选择）

前端工具：

编辑工具：Hbuilder X

浏览器：Google Chrome

找工具网站：bootcdn

vue脚手架：

1.安装node和npm

一系列工具都是基于node.js，所以首先需要安装node.js,node的包管理工具npm会随node安装包一起安装。

官网地址：https://nodejs.org/zh-cn/

安装完成后，需要修改npm下载路径（服务器在国外 速度较慢） 改为淘宝镜像（国内镜像服务器 速度快）

2.配置npm服务器地址（运行cmd 再在命令行输入）

临时使用
npm --registry https://registry.npm.taobao.org install express

永久使用 直接配置
npm config set registry https://registry.npm.taobao.org

通过如下命令可以查看是否配置成功
npm config get registry
npm info express

如果需要恢复成原来的官方地址只需要执行如下命令:
npm config set registry https://registry.npmjs.org

3.安装vue脚手架

通过npm命令 安装vue脚手架

npm install -g @vue/cli

等待安装完成，需要时间较长 安装完成后可以通过命令行检查是否安装完成

vue -V 查看vue版本

4.创建vue项目

安装完成后，可以使用vue脚手架创建项目结构

vue ui vue图形界面（功能强大 操作方便）

（vue create my-project 命令行创建）

5.启动图形界面创建

vue图形界面包括创建项目、安装依赖、安装插件、运行控制台等功能，可以方便的进行相关控制

进入图形界面项目管理器 可以创建vue项目

手动配置时注意选项：

router（路由）勾上

linter（语法检测）取消勾选

使用配置文件 勾上

点击创建项目 控制台进行创建 （脚手架创建的项目为独立运行项目，会把node依赖的相关环境也现在，需要等待一会）

6.安装插件和依赖

开发vue项目时 还需要安装在项目中使用的一些额外的包，分别有插件和依赖

创建完成后到项目仪表盘

安装elementUI插件

vue-cli-plugin-element

安装使用的依赖

axios qs

2.7启动服务

7.导入vue项目到编辑工具

vue项目目录结构

其中 node相关依赖环境文件 一般不需要操作

public中为单页面应用的唯一页面

src为模块化之后的各个模块的代码 使用高级语法导入到单页面中

编码时主要编写src中的内容

增加配置文件 修改启动端口

vue.config.js

//配置vue项目占用端口用（默认8080与tomcat冲突了）
module.exports = {
  devServer: {
    port: 8088, // 端口
  }
}

8.整理项目结构

项目中有几个示例用的欢迎文件，可以删掉，并把自己的页面配置在路由中

删掉helloword等示例文件

main.js为项目根配置文件，之后有全局配置的参数 可以配置到此文件中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
//导入axios组件  qs组件
import axios from 'axios'
import qs from 'qs'

/*为axios配置全局参数*/
//服务器路径
axios.defaults.baseURL="http://127.0.0.1:8080/"
//跨域带cookie
axios.defaults.withCredentials = true
//响应拦截器 统一处理响应数据
axios.interceptors.response.use(function (resp) {
	if(resp.data.returnCode==20000){
         //如果服务器响应码是20000的话 通过路由跳转到登录组件
		console.log("拦截器输出： 没有登录")
		router.push("/login");
	}
    return resp;
}, function (error) {
    return Promise.reject(error);
});
/*为了操作方便 将axios组件扩展到vue对象上  （可选） 
之后在别的地方调用axios时 可以通过vue对象调用axios对象   this.$axios.xxx*/
Vue.prototype.$axios = axios
Vue.prototype.$qs = qs
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')```js

app.vue为根组件 不需要的代码删掉 保留如下结构 在div中加入router-view作为路由占位符

<template>
  <div id="app">
    <router-view>router-view>
  div>
template>
<script>
export default {
  name: 'app'
}
script>

index.js为路由配置文件 路由组件为vue中单页面替换组件显示内容的工具，作用为替换div中的内容 所以需要router-view作为需要切换div的位置，再通过配置文件 把地址与要显示的组件关联，再显示到对应的router-view中

import Vue from 'vue'
import VueRouter from 'vue-router'
import Testpage from '../components/testpage.vue'

Vue.use(VueRouter)

const routes = [
	{path: '/testpage',component: Testpage}
]

const router = new VueRouter({
	routes
})

export default router

**testpage.vue**为自定义的组件 中间包含

template标签 用来编辑html代码

script标签 用来编辑js代码

style标签 用来编辑css代码

使用组件，配合路由，在单页面环境下完成内容的切换，达到传统多页面的效果

1.6 其他工具

postman下载地址：https://www.postman.com/

maven下载地址： https://maven.apache.org/download.cgi cgiapache-maven-3.6.3-bin.zip

maven配置:

1>解压
2>配置环境变量
3>配置settings.xml
	本地仓库：D:\maven360\repository
	镜像：
		nexus-javasm
		central
		Nexus aliyun
		http://192.168.20.252:8081/repository/maven-public/
	

idea关联maven客户端:

file-settings-maven：关联本地的maven客户端

file-other Settings-defaultSetting-maven

如果2020版本的idea，需要在manen-runner-deleate 。。。。to maven勾选复选框。

创建maven工程:

选择create from archetype，选择maven官方骨架，org.apache.maven开头的骨架。

quickstart骨架表示java工程

webapp骨架表示web工程.

问题：创建出来的工程缺失目录，需要自己补全

src/main/java:源码目录
src/main/resources:配置文件目录
src/main/webapp:web资源目录
src/test/java:测试类目录
pom.xml：maven项目的核心配置文件

认识pom.xml配置:

1.当前项目的基本坐标信息

<groupId>com.javasmgroupId>
  <artifactId>0115ssmartifactId>
  <version>1.0-SNAPSHOTversion>
  <packaging>warpackaging>

2.当前项目依赖插件的配置信息

  <properties>
    
    <project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
    
    <maven.compiler.source>1.8maven.compiler.source>
    <maven.compiler.target>1.8maven.compiler.target>
  properties>

3.当前项目源码的依赖jar包信息maven优势：管理了jar包之间的依赖项，会自动导入底层依赖的jar包

 <dependencies>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-webmvcartifactId>
      <version>5.2.9.RELEASEversion>
      <exclusions>
        <exclusion>
          <groupId>org.springframeworkgroupId>
          <artifactId>spring-jclartifactId>
        exclusion>
      exclusions>
    dependency>
  dependencies>

注意点1：如果自动引入的依赖不需要，可以通过exclusions标签进行排除jar包；

注意点2：可以通过scope子标签设置依赖项的生效范围，test（参与测试）,compile（参与打包，默认）,provided（不参与打包）

4.当前项目输出物的配置插件，配置名称

 <build>
 
    <finalName>0115maven1finalName>
  build>

maven的相关操作命令：

操作名	效果
clean	清理target目录
compiler	编译源代码，输出配置文件；
test	执行测试文件
package	项目打包
install	项目打包并安装本地仓库
deploy	项目打包并安装本地仓库并部署远程仓库

运行maven工程：

• 方法1：部署项目到本地tomcat，启动；
• 方法2：使用内嵌的应用服务器。(tomcat,jetty)，把服务器内嵌项目里，使用开发时候使用。

<build>
    <plugins>
      <plugin>
        <groupId>org.eclipse.jettygroupId>
        <artifactId>jetty-maven-pluginartifactId>
        <version>9.4.28.v20200408version>
        <configuration>
          <httpConnector>
            <port>8081port>
          httpConnector>
          <webApp>
            <contextPath>/contextPath>
          webApp>
        configuration>
      plugin>
    plugins>
  build>

创建ssm项目:

在pom文件中加入ssm项目需要的各种依赖。
注意点1：类似于spring各种依赖，版本建议提取到properties标签下进行统一版本管理。
注意点2：maven官方web工程骨架的web.xml是错的，需要去tomcat或旧工程下拷贝web.xml头部。

自定义骨架:

1.先定义好一个目录完善，web.xml正确的工程
2.该工程添加骨架插件
<plugin>
    <groupId>org.apache.maven.pluginsgroupId>
    <artifactId>maven-archetype-pluginartifactId>
    <version>3.0.0version>
plugin>
3.执行骨架插件：去右边栏点下就行。archetype:create-from-project
4.进入target/generate-sources/archetype下执行install命令，把骨架安装到本地仓库
5.执行archetype:crawl去本地仓库下全局抓取骨架信息，在根目录生成archetype-catalog.xml
6.添加骨架到创建选择列表

maven工程继承：

maven子工程自动继承父工程的依赖项。把一些公用的依赖在父工程引入，子工程不用在重复引入；

• 1.把依赖项放在dependencies,表示所有子工程自动继承，一般是把必须引入的依赖放入这里。
• 2.把依赖项放在dependencyManagement，表示当前父工程统一管理依赖项的版本信息，子工程不会自动继承，需要手工引入，但不用指定版本

maven聚合工程：

把原来的单体项目拆分（横向拆分：功能拆分springCloud，纵向拆分：mvc架构层级拆分）

横向：功能之间的解耦,独立开发，独立部署，独立管理。

纵向：在不同的项目中进行代码复用。

云视频平台：

后台管理系统：管理课程发布，课程分类，评论区，注册人员管理，报名管理，教师管理，课程作业

接口系统：用户注册，登录，注销，查看课程，发表评论，报名课程，查看评论,查看祖业

管理系统前端：

浏览器前端视图：vue,

移动前端:andorid，ios

问题描述：maven的resources资源加载插件默认只加载src/main/resources下文件，compile插件只编译.java文件，所以java目录下的xml映射文件未被加载。

解决方法1：把xml映射文件放在resources资源目录下；注意SqlSESSIOnFactorybEAN配置映射文件目录要改。

解决方法2：在pom.xml中配置resources插件配置，指定加载路径以及加载文件

 
    <resources>
      <resource>
        <directory>src/main/javadirectory>
        <includes>
          <include>**/*.xmlinclude>
        includes>
      resource>
      <resource>
        <directory>src/main/resourcesdirectory>
        <includes>
          <include>**/*include>
        includes>
      resource>
    resources>

，注册人员管理，报名管理，教师管理，课程作业

接口系统：用户注册，登录，注销，查看课程，发表评论，报名课程，查看评论,查看祖业

管理系统前端：

浏览器前端视图：vue,

移动前端:andorid，ios

问题描述：maven的resources资源加载插件默认只加载src/main/resources下文件，compile插件只编译.java文件，所以java目录下的xml映射文件未被加载。

解决方法1：把xml映射文件放在resources资源目录下；注意SqlSESSIOnFactorybEAN配置映射文件目录要改。

解决方法2：在pom.xml中配置resources插件配置，指定加载路径以及加载文件

 
    <resources>
      <resource>
        <directory>src/main/javadirectory>
        <includes>
          <include>**/*.xmlinclude>
        includes>
      resource>
      <resource>
        <directory>src/main/resourcesdirectory>
        <includes>
          <include>**/*include>
        includes>
      resource>
    resources>