Day15(Js入门、jquery入门、ajax入门、前后端分离开发跨域问题、linux环境准备、jdk_tomcat环境搭建、docker介绍及应用(docker安装、基本命令、安装tomcat))

最新推荐文章于 2023-12-01 16:30:57 发布

weixin_39919087

最新推荐文章于 2023-12-01 16:30:57 发布

阅读量352

点赞数

分类专栏：杂文 Linux web工程文章标签： js jquery docker ajax linux

本文链接：https://blog.csdn.net/weixin_39919087/article/details/106496680

版权

杂文同时被 3 个专栏收录

38 篇文章 0 订阅

订阅专栏

web工程

16 篇文章 0 订阅

订阅专栏

Linux

5 篇文章 0 订阅

订阅专栏

js入门

js代码辅助
window–》preferences–》javaScript–》Content Assist
.abcdefghijklmnopqrstuvwxyz

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TsmdYvZO-1591081809392)(Day15.assets/image-20200514102152478.png)]

alt+/ 自动代码提示

<html>
<head>
	<title>Home</title>
</head>

<body>
<script type="text/javascript">
var a="123";
var b=123;
var arr=["1","2",3];
var obj = new Object();
obj.name=123;
obj.age=123;

//js 对象定义
var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678
};
alert(person.firstName);

var listperson=[{firstName:"zhangsan",lastName:"Gates",id:123},{firstName:"zhangsan2",lastName:"hello",id:124}]
alert(listperson[0].firstName);
    
function check(){
	if(document.getElementById("name").value==""){
		document.getElementById("check").innerHTML="<font color=\"red\"> 值不能为空</font>"
	}
}    
</script>
<h1>
	Hello world!  
</h1>
    <div style="float:left"></div>请输入值 <input type="text" id="name" class="test" onblur="check();"/>
<div><div id="check" style="float:left"><div>
</body>
</html>

jquery入门

作用简化js,dom 做了一层封装，提供一些简化方法

jquery例子下载：

链接：https://pan.baidu.com/s/1zRjOTqcLYJ08c9HNC7DOLw
提取码：m2jz

使用： $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id")、$ (".class")、$(“div”)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function check(){
       //id选择器
	  if($("#name").val()==""){
	     $("#check").html("<font color=\"red\"> 值不能为空</font>");
	  }
	
	//class选择器
     /*if($(".test").val()==""){
	     $("#check").html("<font color=\"red\"> 值不能为空</font>");
	  }*/
	 
	 //tag选择器
	 /*if($("input").val()==""){
	     $("#check").html("<font color=\"red\"> 值不能为空</font>");
	 }*/
}
</script>

<body>

<div style="float:left"></div>请输入值 <input type="text" id="name" class="test" onblur="check();"/>
<div><div id="check" style="float:left"><div>

</body>
</html>

ajax入门

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
例子说明 http://www.w3school.com.cn/tiy/t.asp?f=ajax_suggest
区别form 表单
就是利用了浏览器提供的对象（局部刷新）

$.ajax({
     type: 'POST',
     url: url ,
    data: data ,
    success: success ,
    error:error
    dataType: dataType
});

后台springbootMybatisplus+前端ajax

结合thymeleaf

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

#thymeleaf
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

dytable.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-jQuery-动态创建表格案例</title>
   <!--  <script src="jquery-3.3.1.min.js"></script> -->
    <script type="text/javascript" th:src="@{/jquery-3.3.1.min.js}"></script>
    <style>
        * { padding: 0; margin: 0; }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }
        tbody tr {
            background-color: #f0f0f0;
        }
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script type="text/javascript">
        $(function(){
        	  $.ajax({
      			cache: false,
      			//async: false,
      			type: "GET",
      			dataType: "json",
      			//data: {method: "validateAjaxname", username: username},
      			url: "/getdata",
      			success: function(data) {
      				 var html;
      	             for( var i = 0; i < data.length; i++ ) {
      	                 html += "<tr>";
      	                 html +=     "<td>" + data[i].name + "</td>"
      	                 html +=     "<td>" + data[i].url + "</td>"
      	                 html +=     "<td>" + data[i].type + "</td>"
      	                 html += "</tr>";
      	             }
      	             $("#J_TbData").html(html);
      			}
      		});
        	
        });
        
        function getData(){
        	var mycount=$("#count").val();
        	  $.ajax({
        			cache: false,
        		//	async: false,
        			type: "GET",
        			dataType: "json",
        			data: {count: mycount},
        			url: "/getdata",
        			success: function(data) {
        				 var html;
        	             for( var i = 0; i < data.length; i++ ) {
        	                 html += "<tr>";
        	                 html +=     "<td>" + data[i].name + "</td>"
        	                 html +=     "<td>" + data[i].url + "</td>"
        	                 html +=     "<td>" + data[i].type + "</td>"
        	                 html += "</tr>";
        	             }
        	             $("#J_TbData").html(html);
        			}
        		});
        }
        
        
</script>
</head>
<body>
    <table>
        <thead>
         <input type="text" id="count" onblur="getData()"/>
            <tr>
                <th>标题</th>
                <th>地址</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody id="J_TbData">
        </tbody>
    </table>

    <br>
   
</body>
</html>

后端接口

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.mybatisplus.springboot.controller.vo.UserDB;

@Controller
public class AjaxController {
	
	@GetMapping("toTable")
	@ResponseBody
	public ModelAndView toTable() {
		return new ModelAndView("dytable");
	}
	
	@GetMapping("/getdata")
	@ResponseBody
	public Object toData(@RequestParam(required = false, defaultValue = "5") int count) {
		List<UserDB> list=new ArrayList<UserDB>();
		for (int i = 0; i < count; i++) {
			UserDB userDB=new UserDB();
			userDB.setName("testfan_wys"+i);
			userDB.setUrl("www.baidu.com");
			userDB.setType("测试开发");
			list.add(userDB);
		}
		return list;
	}
	
	@GetMapping("toTable2")
	@ResponseBody
	public ModelAndView toTable2() {
		return new ModelAndView("mytest");
	}
	@GetMapping("getdata2")
	@ResponseBody
	public Object toData2(@RequestParam(required = false,defaultValue = "5") int count) {
		List<UserDB> list=new ArrayList<UserDB>();
		for (int i = 0; i < count; i++) {
			UserDB userDB=new UserDB();
			userDB.setName("testfan_wys"+i);
			userDB.setUrl("www.baidu.com");
			userDB.setType("测试开发");
			list.add(userDB); 
		}
		
		return list;
	}
}

运行项目实现效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EmwheXuw-1591081809397)(Day15.assets/image-20200514134642313.png)]

注意html中jquery的路径，以及项目中是否有jquery依赖的文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jjemzJiu-1591081809398)(Day15.assets/image-20200514134920208.png)]

前后端分离式开发

前端代码挪动出去，直接运行html文件，需要修改url路径,和jquery路径

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P844YTMo-1591081809402)(Day15.assets/image-20200514140218020.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xXSrhrc8-1591081809406)(Day15.assets/image-20200514140507703.png)]

运行html文件会访问不到数据，跨域问题：https://www.cnblogs.com/zishu/p/10727230.html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EesoYy1k-1591081809407)(Day15.assets/image-20200514140754016.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w9ufn3pn-1591081809409)(Day15.assets/image-20200514140655608.png)]

解决跨域问题

新建一个过滤器文件，允许跨域访问，然后在启动类中添加bean

CrosFilter.java


import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
 
public class CrosFilter implements javax.servlet.Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
 
    }
 
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) servletResponse;
        //*号表示对所有请求都允许跨域访问
        res.addHeader("Access-Control-Allow-Origin", "*");
        res.addHeader("Access-Control-Allow-Methods", "*");
        filterChain.doFilter(servletRequest, servletResponse);
    }
 
    @Override
    public void destroy() {
 
    }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Qrm0eV7-1591081809410)(Day15.assets/image-20200514141039549.png)]


import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;

@SpringBootApplication
@MapperScan("com.mybatisplus.springboot")
public class MybatisPlusSpringbootApplication {

	public static void main(String[] args) {
		SpringApplication.run(MybatisPlusSpringbootApplication.class, args);
	}
	
	/**
     * 配置跨域访问的过滤器
     * @return
     */
	@Bean
    public FilterRegistrationBean registerFilter(){
        FilterRegistrationBean bean = new FilterRegistrationBean();
        bean.addUrlPatterns("/*");
        bean.setFilter(new CrosFilter());
        return bean;
    }
}

重启项目，跨域问题解决。

linux环境准备

VMware workstation下载及安装教程

链接：https://pan.baidu.com/s/1b6UZ_0aKnntZUX4HQ3Cgig
提取码：cru7

vm虚拟机下载

链接：https://pan.baidu.com/s/1PfYJMcX-O-yu1egFhSe_kw
提取码：5mvm

xshell远程连接工具下载

链接：https://pan.baidu.com/s/1E_Iv_SAjRANSrWUDTOMhGg
提取码：zwts

远程连接linux服务器，用户名：root ;密码：123456

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2A6Fzwez-1591081809411)(Day15.assets/image-20200514144203116.png)]

jdk和tomcat包下载

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6IF9Y7g3-1591081809413)(Day15.assets/image-20200514144839371.png)]

jdk下载

链接：https://pan.baidu.com/s/10pCnvk5B5gn0OTgeSPoZkA
提取码：hntg

tomcat下载

链接：https://pan.baidu.com/s/1MDjEdUvoIa3J7Ejj-fIu0Q
提取码：0gqk

jdk_tomcat环境搭建

1 jdk安装

2 tomcat安装

3 jenkins

解压缩

tar -vxzf

修改环境变量

vim /etc/profile

JAVA_HOME=/root/soft/jdk1.8.0_171

JRE_HOME=/root/soft/jdk1.8.0_171/jre

PATH= $P A T H :$ JAVA_HOME/bin:$JRE_HOME/bin

CLASSPATH=.: $JAVA_HOME/lib/dt.jar:$ JAVA_HOME/lib/tools.jar:$JRE_HOME/lib

export JAVA_HOME JRE_HOME PATH CLASSPATH

使环境变量立即生效：

source /etc/profile

验证 java -version

看路径

echo $PATH

查看端口：

netstat -ntlp

根据名字查看进程：

ps -ef|grep name

查看日志：

tail -f logs/catalina.out

启动tomcat

切换到bin文件夹：./startup.sh

jenkins.war下载：

链接：https://pan.baidu.com/s/11n3AlkbSbshsyMgNqBcp3w
提取码：mup8

jenkins.war拖拽放到tomcat/webapp文件下

访问tomcat:

http://IP:8080/jenkins

xftp显示隐藏文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tIDxTEhD-1591081809414)(Day15.assets/image-20200514151917380.png)]

有些jenkins启动不了，可能原因时linux内存给的太小，建议调到3G

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p8Jjcrkw-1591081809415)(Day15.assets/image-20200514152349674.png)]

docker介绍及应用

安装参考：阿里云

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EhvcirBj-1591081809416)(Day15.assets/image-20200514154751273.png)]

docker安装脚本，包含mac和docker介绍，下载地址

链接：https://pan.baidu.com/s/1G1AzI7ID-S-azwJRUk5USw
提取码：urjq

docker安装

把docker_ubuntu.sh脚本通过Xftp放到linux中，然后赋予执行权限，运行docker_ubuntu.sh脚本

赋予执行权限：chmod +x docker_ubuntu.sh

运行脚本： ./docker_ubuntu.sh

docker_ubuntu.sh

#删除以前旧的版本
sudo apt-get remove docker docker-engine docker.io
sudo apt-get update
#安装阿里源
sudo apt-get -y install apt-transport-https ca-certificates curl software-properties-common
# step 2: 安装GPG证书
curl -fsSL http://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
# Step 3: 写入软件源信息
sudo add-apt-repository "deb [arch=amd64] http://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable"
# Step 4: 更新并安装 Docker-CE
sudo apt-get -y update
sudo apt-get -y install docker-ce=17.06.0~ce-0~ubuntu

#配置阿里镜像
sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": ["https://1b1qa7l6.mirror.aliyuncs.com"]
}
EOF
#启动
sudo systemctl daemon-reload
sudo systemctl restart docker

运行上面脚本，查看docker是否安装成功：

docker -v

docker基本命令

第一个例子 hello word
docker run ubuntu echo “hello word”

观察

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yHcaefIw-1591081809417)(Day15.assets/image-20200514161438467.png)]

docker基本概念

Docker的核心概念主要包括：仓库（远程），镜像（本地），容器（进程）。run
docker search ubuntu
docker pull
docker images

docker 安装tomcat

docker search tomcat
doker 用的问题 (–name)
docker run -d -p 8085:8080 tomcat
docker run --name mytest -p 8081:8080 99taxis/tomcat7

docker run -d -p 8081:8080 tomcat 后台模式

http://blog.chinaunix.net/uid-10915175-id-4443127.html

docker复习

telnet IP 端口号

//下载镜像、启动、设置端口号、起别名

docker run --name mytomee -d -p 8081:8080 tomee

//进入容器内部

docker exec -it 别名/IP /bin/bash

退出：exit

//停止容器

docker stop 别名/IP

重命名的容器，重复启动会报错

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZBODycyu-1591081809419)(Day15.assets/image-20200314095443600-1589506873811.png)]

解决方法:删除容器

docker rm -f mytomee

//删除镜像：需要先关闭启动的容器

docker stop 容器IP/别名

docker rmi -f 镜像IP/别名

//一步到位删除容器

docker rm -f 容器IP/别名

向tomcat导入项目

docker run --privileged=true -v /root/soft/jenkins.war:/usr/local/tomcat/webapps/jenkins.war -p 8083:8080 --name myjenkins -d tomcat

//查看日志信息

docker logs myjenkins

//把项目挂载出来 -v（挂载的意思是映射目录，目的外面直接操作里面）

docker run --privileged=true -v /root/soft/jenkins.war:/usr/local/tomcat/webapps/jenkins.war -v /root/myjenkins:/root/.jenkins -p 8083:8080 --name myjenkins -d tomcat

weixin_39919087

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day15(Js入门、jquery入门、ajax入门、前后端分离开发跨域问题、linux环境准备、jdk_tomcat环境搭建、docker介绍及应用(docker安装、基本命令、安装tomcat))

js入门js代码辅助window–》preferences–》javaScript–》Content Assist.abcdefghijklmnopqrstuvwxyzalt+/ 自动代码提示<html><head> <title>Home</title></head><body><script type="text/javascript">var a="123";var b=123;var
复制链接

扫一扫