javaweb开发学习

一、BOM对象.

指的是窗口对象，也就是windows的内容。

二、DOM对象 

指的是文件对象，这里把html文件看成一个文件，JS可以获取这些文件，并进行增删改查。如下进行修改：

var divs= document.getElementsByClassName("cls");
for(let i =0;i<divs.length;i++)
{
    const div =divs[i];
    div.innerHTML +="<font color ='red'>very good</font";
}
var names =document.getElementsByName("hobby");
for(let i =0;i<names.length;i++)
{
    names[i].checked =true;

三、发送请求ajax/axios

axios对ajax进行了封装，可以发送post/get请求到接口获取数据，再传递给Vue/DOM进行修改，演示axios示例代码如下：

方法1：function get()
        {
            axios({
                method:"get",
                url:"https://blog.csdn.net/lx00000025/article/details/132382087",
            }).then(result=>{
                console.log(result.data)
            })
        }

方法2：function post()
        {
            axios.post("http://baidu.com",id="1").then(result=>{
                console.log(result.data)
            })
        }
同时推荐到yapi进行接口测试

四、Vue

先简述一下vue的整体架构

1.node_moudles指的是一些依赖文件，比如你要使用elementUI组件，就要下载到这个文件中，然后进行import操作。

2.public存储静态资源比如首页就存储在里面，但我们不需要操作，我们需要操作APP.vue就可以操作index.html了

3.src 源码！很重要，里面的文件asset是我们需要存储的一些资源，比如图片，component指的是组件，router是路由相关，view是我们的视图，比如我们要使用一些elementui的样式可以在里面新建一些东西，但必须要注意要export导出，然后才能调用。

4.App.vue，这是我们真正要编辑的部分，分为三部分template（编写html代码），script（vue需要的数据，方法），style（样式）

ElementView.vue
<template>
  
<div>
  <el-row>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </el-row>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
  </el-table>
</div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
};
</script>

<style>
</style>

App.vue
<template>
  <div >
    <!-- <h1>{{ message }}</h1> -->
    <element-view></element-view>
  </div>
</template>

<script>
import ElementView from './views/element/ElementView.vue'
export default{
  components: { ElementView },
  data(){
  return {
    message:"hello vue"
    }
  },
  methods:{

  }
}
</script>

<style>

</style>

main.js指的是主程序的入口，在这里我们要把使用的组件，页面，vue全部引用，并创建vue对象

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElemntUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElemntUI)
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

还有一个比较重要的就是vue.config.js这个相当于IDEA中的配置文件，我们可以在这里修改端口号

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElemntUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElemntUI)
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

五、Vue路由

首先进行安装router组件。

npm install vue-router@3.5.1

调试路由的主要部分如下（在src中找到router文件）：

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

第一种方式要先导入页面，第二种是在函数体中导入，建议用第二种方式，这里我修改如下

const routes = [
  
  {
    path: '/work',
    name: 'Work',
    component: () => import( '../views/4PL/WorkView.vue')
  },
  {
    path: '/element',
    name: 'Element',
    component: () => import( '../views/4PL/ElementView.vue')
  }
]

这里的/work 就是WorkView

这里的代码会导致首页缺失，这个时候我们要重定向一下，让首页指向一个页面，修改如下：

const routes = [
  
  {
    path: '/work',
    name: 'Work',
    component: () => import( '../views/4PL/WorkView.vue')
  },
  {
    path: '/element',
    name: 'Element',
    component: () => import( '../views/element/ElementView.vue')
  },
  {
    path:'/',
    redirect:'/work'
  }
]

六、Nginx服务器代理（打包部署）

目前唯一要注意的就是端口占用情况，要在conf里进行修改。

作为一个后端程序员，前端部分完结撒花！（开玩笑，但对于初学者来讲就可以了）

这里给一张图表示前后端的链接。

七、JWT登录功能

架构示意图

逐层调用并逐层返回，在数据库部分只需查询以目前账号密码的用户是否存在即可，但由于涉及到很多次的数据传输，使其安全可靠性不高，所以我们需要引入JWT令牌去加密，提高安全性。

Controller代码如下：

@Autowired实现注入service层后在controller的方法中调用对应service层方法即可，最后将其返回给前端。

Service层代码

调用持久层中的方法并返将其返回给controller层

Dao层代码

会话技术：

一次会话中可以有多次请求和响应。每个单独浏览器用户算作一次会话。

优点：以便同一会话（单个用户）共享数据

会话跟踪需要JWT令牌技术来实现，还有两种方式cookie，session

cookie、session优缺点

JWT会话技术

一、优点：

        1.支持移动端、PC端

        2.减轻负载均衡下多服务器认证问题

        3.减轻服务器端存储压力

        4.安全可靠

二、简介

三、生成和校验

    生成代码如下：

    检验代码如下：

八、Docker

一、简介：

这里可以看出明显的优势，和JVM类似，可以无视系统自动配置好运行所需环境，私有化部署非常方便。